Skip to main content

​
Overview

HuxProgress is a customizable linear progress indicator that displays the completion status of a task or process. It provides smooth animations, consistent styling, and automatic theme adaptation, making it perfect for showing upload progress, download status, or any task completion percentage.

​
Basic Usage

​
Basic Progress

HuxProgress(
  value: 0.5,
)

​
Progress with Label

HuxProgress(
  value: 0.75,
  label: 'Uploading',
)

​
Progress with Value Display

HuxProgress(
  value: 0.6,
  label: 'Storage Used',
  showValue: true,
)

​
Variants

HuxProgress supports three visual variants to indicate different states:

​
Primary Variant

HuxProgress(
  value: 0.6,
  label: 'Progress',
  variant: HuxProgressVariant.primary,
  showValue: true,
)

​
Success Variant

HuxProgress(
  value: 0.8,
  label: 'Upload Complete',
  variant: HuxProgressVariant.success,
  showValue: true,
)

​
Destructive Variant

HuxProgress(
  value: 0.3,
  label: 'Error',
  variant: HuxProgressVariant.destructive,
  showValue: true,
)

​
Sizes

HuxProgress comes in three size variants:

​
Small

HuxProgress(
  value: 0.5,
  size: HuxProgressSize.small,
  label: 'Small Progress',
)

​
Medium (Default)

HuxProgress(
  value: 0.5,
  size: HuxProgressSize.medium,
  label: 'Medium Progress',
)

​
Large

HuxProgress(
  value: 0.5,
  size: HuxProgressSize.large,
  label: 'Large Progress',
)

​
Custom Values

By default, HuxProgress uses values between 0.0 and 1.0. You can customize the range: 
HuxProgress(
  value: 75.0,
  min: 0.0,
  max: 100.0,
  label: 'Storage Used',
  showValue: true,
)
When using custom min/max values, the displayed value will show as a number instead of a percentage.

​
Custom Colors

You can customize both the progress fill color and background color: 
HuxProgress(
  value: 0.7,
  label: 'Custom Progress',
  color: Colors.blue,
  backgroundColor: Colors.grey[200],
)

​
Custom Border Radius

HuxProgress(
  value: 0.6,
  label: 'Rounded Progress',
  borderRadius: 8.0,
)

​
Animated Progress

HuxProgress automatically animates when the value changes: 
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  double _progress = 0.0;

  void _startUpload() {
    // Simulate upload progress
    Timer.periodic(Duration(milliseconds: 100), (timer) {
      setState(() {
        _progress += 0.01;
        if (_progress >= 1.0) {
          _progress = 1.0;
          timer.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return HuxProgress(
      value: _progress,
      label: 'Uploading file...',
      showValue: true,
      variant: HuxProgressVariant.success,
    );
  }
}

​
API Reference

​
HuxProgress

PropertyTypeDefaultDescription
valuedoublerequiredThe current progress value (between min and max)
mindouble0.0Minimum value for the progress
maxdouble1.0Maximum value for the progress
labelString?nullOptional label displayed above the progress bar
showValueboolfalseWhether to show the current value as a percentage or number
sizeHuxProgressSizeHuxProgressSize.mediumSize variant of the progress bar
variantHuxProgressVariantHuxProgressVariant.primaryVisual variant of the progress bar
backgroundColorColor?nullCustom background color for the progress track
colorColor?nullCustom color for the progress fill
borderRadiusdouble?nullBorder radius for the progress bar

​
HuxProgressSize

  • small - Small progress bar (4px height)
  • medium - Medium progress bar (6px height)
  • large - Large progress bar (8px height)

​
HuxProgressVariant

  • primary - Primary progress using theme primary color
  • success - Success progress using green color
  • destructive - Destructive progress using red color

​
Best Practices

  • Use progress indicators for operations that take more than a few seconds
  • Show labels to provide context about what is loading
  • Use the success variant for completed operations
  • Use the destructive variant for errors or failed operations
  • Consider using showValue: true when precise progress information is important
  • For uploads/downloads, update the progress value frequently for smooth animation