Description:

fine stepper

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}'),
),
)
],
),
copied to clipboard
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}'),
),
)
],
),
copied to clipboard
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,
),
],
),
),
),
);
copied to clipboard
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,
),
],
),
),
),
);
copied to clipboard
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,
),
),
copied to clipboard
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();
copied to clipboard
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;

copied to clipboard
Generated by Very Good CLI 🤖

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter