Fine Stepper

A horizontal stepper that does the job just fine by offering easy to use apis to control the stepper from any where down the widget tree

Icon Stepper

Create an Icon Stepper by using FineStepper.icon constructor, with list of StepItem.icons.

FineStepper.icon(
  steps: [
    StepItem.icon(
      builder: (context) => StepBuilder(
        child: Text('Step ${FineStepper.of(context).stepIndex}'),
      ),
    ),
    StepItem.icon(
      builder: (context) => StepBuilder(
        child: Text('Step ${FineStepper.of(context).stepIndex}'),
      ),
    ),
    StepItem.icon(
      builder: (context) => StepBuilder(
        child: Text('Step ${FineStepper.of(context).stepIndex}'),
      ),
    )
  ],
),

Linear Stepper

Similarly, for creating a Linear Stepper, Use the FineStepper.linear constructor, with list of StepItem.linears.

FineStepper.linear(
  steps: [
    StepItem.linear(
      builder: (context) => StepBuilder(
        child: Text('Step ${FineStepper.of(context).stepIndex}'),
      ),
    ),
    StepItem.linear(
      builder: (context) => StepBuilder(
        child: Text('Step ${FineStepper.of(context).stepIndex}'),
      ),
    ),
    StepItem.linear(
      builder: (context) => StepBuilder(
        child: Text('Step ${FineStepper.of(context).stepIndex}'),
      ),
    )
  ],
),

StepBuilder

StepBuilder provides controls for navigating through steps with two layout options for the controls:

StepLayout.stack (default)

which gives the child the available height, and adds the controls on top of the it, aligned to bottom center.

Example

StepBuilder(
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Step ${FineStepper.of(context).stepIndex + 1}',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
          Text(
            'StepLayout: Stack',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
        ],
      ),
    ),
  ),
);

StepLayout.column

which gives the child the minium height it needs, and adds the controls after it

Example

StepBuilder(
  layout: StepLayout.column,
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Step ${FineStepper.of(context).stepIndex + 1}',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
          Text(
            'StepLayout: Column',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
        ],
      ),
    ),
  ),
);

FormStepBuilder

Same as StepBuilder, but validates any field inside the child widget before moving forward

FormStepBuilder(
  child: TextFormField(
    decoration: const InputDecoration(hintText: 'Example'),
    // validator is executed on `FineStepper.of(context).stepForward`
    validator: (value) => (value?.isEmpty ?? true) ? 'Required Field' : null,
  ),
),  

StepperController

Controller to access and control the state of the stepper with FineStepper.of(context)

available apis:

/// Current Step Index
int get stepIndex;

/// Update current step Index
set stepIndex(int index);

/// Check if this is the first step
bool get isFirstStep;

/// Check if this is the last step
bool get isLastStep;

/// Check if the stepper is finishing
/// i.e it the last step and finish is pressed
bool get finishing;

/// Make a step back
///
/// if [isFirstStep] is true, then it will do nothing
void stepBack();

/// Make a step forward
///
/// if [isLastStep] is true, then it will update [finishing] flag to be true
/// and call [onFinish], if passed.
///
/// if [finishing] is true, it will do nothing
Future<void> stepForward();

IndicatorOptions

You can change steps indicators colors by passing IndicatorOptions object to FineStepper.

available options:

/// Step Color when active, default to [ColorScheme.primary]
final Color? activeStepColor;

/// Step Color when completed, default to [ColorScheme.primary]
final Color? completedStepColor;

/// default Step Color, default to [Colors.grey[400]]
final Color? stepColor;

/// Indicator paddings
final EdgeInsets padding;

/// whether the indicator scrolls or not
///
/// has no effect when using FineStepper.linear
final bool scrollable;

Generated by Very Good CLI 🤖