fine_stepper 0.2.0+1

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

Fine Stepper

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

Usage

Create a FineStepper widget, with list of StepItems.

FineStepper(
  steps: [
    StepItem(
      builder: (context) => StepBuilder(
        child: Text('Step ${FineStepper.of(context).stepIndex}'),
      ),
    ),
    StepItem(
      builder: (context) => StepBuilder(
        child: Text('Step ${FineStepper.of(context).stepIndex}'),
      ),
    ),
    StepItem(
      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 ```dart 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;

Generated by Very Good CLI 🤖