buildProgressBarPreview function

Widget buildProgressBarPreview(
  1. ProgressBarState state,
  2. AnimationController? borderAnimationController
)

Progress Bar preview builder Category: Indicator (Non-Interactive Display)

Builds preview widgets for progress bar component with animated border support.

Preview States (for visual demonstration):

  • Rest: Shows progress bar at state's configured value
  • Pressed (25%): Shows progress bar at 25% filled
  • Hover (50%): Shows progress bar at 50% filled
  • Disabled (100%): Shows progress bar at 100% filled
  • Cycling: Animates through 25%, 50%, 75%, 100% progress values

Note: Progress Bar is a non-interactive indicator, so these "states" are used to demonstrate different progress levels rather than interaction states like hover/pressed.

Implementation

Widget buildProgressBarPreview(
  ProgressBarState state,
  AnimationController? borderAnimationController,
) {
  return StateVariantsWrapper(
    componentName: 'Progress Bar',
    buildRestState: () => _buildRestProgressBar(state, borderAnimationController),
    buildPressedState: () => _buildFilledProgressBar(state, borderAnimationController, 0.25), // 25% progress
    buildHoverState: () => _buildFilledProgressBar(state, borderAnimationController, 0.50), // 50% progress
    buildDisabledState: () => _buildFilledProgressBar(state, borderAnimationController, 1.0), // 100% progress
    buildCyclingState: (stateIndex) => _buildCyclingProgressBar(state, borderAnimationController, stateIndex),
    cycleDuration: const Duration(milliseconds: 2000),
  );
}