fine_stepper 0.2.0+1 fine_stepper: ^0.2.0+1 copied to clipboard
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 StepItem
s.
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 🤖