components/progress/flutstrap_progress library Components

Flutstrap Progress Bar

A customizable progress bar with Bootstrap-inspired styling.

Comprehensive Usage Examples

// Basic progress with custom colors
FlutstrapProgress(
  value: 75,
  progressColor: Colors.purple,
  backgroundColor: Colors.purple.withOpacity(0.2),
  height: 12,
)

// Progress with custom animation
FlutstrapProgress(
  value: currentProgress,
  animated: true,
  animationDuration: Duration(seconds: 2),
  animationCurve: Curves.bounceOut,
)

// Progress in a fixed width container
FlutstrapProgress(
  value: 50,
  fixedWidth: 200,
  expandToFill: false,
)

// Progress group with different variants
FlutstrapProgressGroup(
  children: [
    FlutstrapProgress(value: 25, variant: FSProgressVariant.primary),
    FlutstrapProgress(value: 50, variant: FSProgressVariant.success),
    FlutstrapProgress(value: 75, variant: FSProgressVariant.warning),
  ],
  spacing: 12,
)

Accessibility

  • Full screen reader support with live region updates
  • Proper semantic labels for progress states
  • High contrast support for all variants
  • Clear visual indicators for progress completion
  • ARIA compliant attributes for screen readers

Performance Guidelines

  • Use animated: false for static progress bars
  • Avoid using striped animations on multiple progress bars simultaneously
  • Use fixedWidth when progress bar is in a constrained layout
  • Consider using expandToFill: false in ListView items
  • Disable animations when progress updates frequently

Troubleshooting

Animation not working

  • Ensure animated: true is set
  • Check that the progress value is changing
  • Verify animation duration is appropriate

Progress bar not visible

  • Check progress value is between minValue and maxValue
  • Verify colors have sufficient contrast
  • Ensure container has sufficient width

Performance issues

  • Disable animations for multiple progress bars
  • Use fixedWidth instead of flexible sizing
  • Avoid complex gradients in striped mode
  • Set expandToFill: false in scrollable contexts

Comprehensive Usage Examples

// Basic progress with custom colors
FlutstrapProgress(
  value: 75,
  progressColor: Colors.purple,
  backgroundColor: Colors.purple.withOpacity(0.2),
  height: 12,
)

// Progress with custom animation
FlutstrapProgress(
  value: currentProgress,
  animated: true,
  animationDuration: Duration(seconds: 2),
  animationCurve: Curves.bounceOut,
)

// Progress in a fixed width container
FlutstrapProgress(
  value: 50,
  fixedWidth: 200,
  expandToFill: false,
)

// Progress group with different variants
FlutstrapProgressGroup(
  children: [
    FlutstrapProgress(value: 25, variant: FSProgressVariant.primary),
    FlutstrapProgress(value: 50, variant: FSProgressVariant.success),
    FlutstrapProgress(value: 75, variant: FSProgressVariant.warning),
  ],
  spacing: 12,
)

Accessibility

  • Full screen reader support with live region updates
  • Proper semantic labels for progress states
  • High contrast support for all variants
  • Clear visual indicators for progress completion
  • ARIA compliant attributes for screen readers

Performance Guidelines

  • Use animated: false for static progress bars
  • Avoid using striped animations on multiple progress bars simultaneously
  • Use fixedWidth when progress bar is in a constrained layout
  • Consider using expandToFill: false in ListView items
  • Disable animations when progress updates frequently

Troubleshooting

Animation not working

  • Ensure animated: true is set
  • Check that the progress value is changing
  • Verify animation duration is appropriate

Progress bar not visible

  • Check progress value is between minValue and maxValue
  • Verify colors have sufficient contrast
  • Ensure container has sufficient width

Performance issues

  • Disable animations for multiple progress bars
  • Use fixedWidth instead of flexible sizing
  • Avoid complex gradients in striped mode
  • Set expandToFill: false in scrollable contexts

Classes

FlutstrapProgress
Flutstrap Progress Bar
FlutstrapProgressGroup
Multiple progress bars in a single container

Enums

FSProgressSize
Flutstrap Progress Bar Sizes
FSProgressVariant
Flutstrap Progress Bar Variants