components/spinners/flutstrap_spinner library Components

Flutstrap Spinner

A customizable loading spinner with Bootstrap-inspired styling.

Comprehensive Usage Examples

// Border spinner with custom duration
FlutstrapSpinner(
  variant: FSSpinnerVariant.primary,
  type: FSSpinnerType.border,
  animationDuration: Duration(milliseconds: 800),
  strokeWidth: 3.0,
)

// Growing spinner with semantic label
FlutstrapSpinner(
  variant: FSSpinnerVariant.success,
  type: FSSpinnerType.growing,
  label: 'Processing payment...',
  centered: true,
)

// Dots spinner with custom color
FlutstrapSpinner(
  type: FSSpinnerType.dots,
  color: Colors.purple,
  size: FSSpinnerSize.lg,
)

// Spinner button with error handling
FlutstrapSpinnerButton(
  isLoading: isSubmitting,
  onPressed: submitForm,
  child: Text('Save Changes'),
  spinner: FlutstrapSpinner(
    variant: FSSpinnerVariant.light,
    size: FSSpinnerSize.sm,
  ),
  loadingLabel: 'Saving...',
  onAnimationError: (error) {
    print('Spinner animation error: $error');
  },
)

Accessibility

  • Full screen reader support with proper semantic labels
  • Live region updates for loading states
  • High contrast support for all variants
  • Clear visual indicators for different spinner types
  • ARIA compliant attributes for screen readers

Performance Guidelines

  • Use animationDuration: Duration.zero for static spinners
  • Avoid using multiple animated spinners simultaneously
  • Use FSSpinnerType.border for best performance
  • Consider using fallbackWidget for animation errors
  • Use appropriate spinner sizes for your context

Troubleshooting

Animation not working

  • Check animation duration is greater than zero
  • Verify the widget is visible in the viewport
  • Ensure proper state management for spinner visibility

Performance issues

  • Reduce number of simultaneous animated spinners
  • Use simpler spinner types (border > growing > dots)
  • Consider using static spinners for repeated elements

Accessibility concerns

  • Provide meaningful labels for screen readers
  • Ensure sufficient color contrast for all variants
  • Test with different animation preferences

Comprehensive Usage Examples

// Border spinner with custom duration
FlutstrapSpinner(
  variant: FSSpinnerVariant.primary,
  type: FSSpinnerType.border,
  animationDuration: Duration(milliseconds: 800),
  strokeWidth: 3.0,
)

// Growing spinner with semantic label
FlutstrapSpinner(
  variant: FSSpinnerVariant.success,
  type: FSSpinnerType.growing,
  label: 'Processing payment...',
  centered: true,
)

// Dots spinner with custom color
FlutstrapSpinner(
  type: FSSpinnerType.dots,
  color: Colors.purple,
  size: FSSpinnerSize.lg,
)

// Spinner button with error handling
FlutstrapSpinnerButton(
  isLoading: isSubmitting,
  onPressed: submitForm,
  child: Text('Save Changes'),
  spinner: FlutstrapSpinner(
    variant: FSSpinnerVariant.light,
    size: FSSpinnerSize.sm,
  ),
  loadingLabel: 'Saving...',
  onAnimationError: (error) {
    print('Spinner animation error: $error');
  },
)

Accessibility

  • Full screen reader support with proper semantic labels
  • Live region updates for loading states
  • High contrast support for all variants
  • Clear visual indicators for different spinner types
  • ARIA compliant attributes for screen readers

Performance Guidelines

  • Use animationDuration: Duration.zero for static spinners
  • Avoid using multiple animated spinners simultaneously
  • Use FSSpinnerType.border for best performance
  • Consider using fallbackWidget for animation errors
  • Use appropriate spinner sizes for your context

Troubleshooting

Animation not working

  • Check animation duration is greater than zero
  • Verify the widget is visible in the viewport
  • Ensure proper state management for spinner visibility

Performance issues

  • Reduce number of simultaneous animated spinners
  • Use simpler spinner types (border > growing > dots)
  • Consider using static spinners for repeated elements

Accessibility concerns

  • Provide meaningful labels for screen readers
  • Ensure sufficient color contrast for all variants
  • Test with different animation preferences

Classes

FlutstrapSpinner
Flutstrap Spinner
FlutstrapSpinnerButton
Spinner button - Button that shows spinner when loading

Enums

FSSpinnerSize
Flutstrap Spinner Sizes
FSSpinnerType
Flutstrap Spinner Types
FSSpinnerVariant
Flutstrap Spinner Variants