Stepper form

 

Stepper form

Stepper form displays progress through a sequence of steps. Steppers are particularly useful in the case of forms where one step requires the completion of another one, or where multiple steps need to be completed in order to submit the whole form. The widget is a flexible wrapper and available in panel by flutter code.

 

Stepper without validation field
Stepper form with validation fields
Vertical stepper form

Stepper without validation field:

It is a stepper without validation field located in:
es_flutter_component/lib/components/es_stepper/es_stepper.dart
and is used as:
EsStepper(
                stepWidgets: _stepWidgets1,
                titleList: ["step1","step2","step3"],
              ),
                 
 //  where 

       List<Widget> _stepWidgets1 = [
      EsOrdinaryText(StructureBuilder.configs!.lorm),
      EsOrdinaryText(StructureBuilder.configs!.lorm),
      EsOrdinaryText(StructureBuilder.configs!.lorm),
    ]; 
    



Stepper form with validation fields:

It is a stepper form with validation fields located in:
es_flutter_component/lib/components/es_stepper/es_stepper.dart
and is used as:

EsStepper(
stepWidgets: _stepWidgets2,
titleList: ["step1","step2","step3"],
),

// where 

List<Widget> _stepWidgets2 = [
IntrinsicWidth(
child: EsDropDownForm(
initialTitle: AppLocalizations.of(context)!.select,
list: [
{"title": "item1", "_id": "1"},
{"title": "item2", "_id": "2"},
{"title": "item3", "_id": "3"},
],
value: _value3,
validator: (value) {
if (value == "") {
return AppLocalizations.of(context)!.pleaseselectoneitem;
}
},
),
),
EsCustomCheckBoxForm(
titleWidget: EsTitle(
AppLocalizations.of(context)!.pleaseselectme,
),
value: _value1,
validator: (value) {
if (value == false) {
return AppLocalizations.of(context)!
.youshouldacceptthetermsandconditionsbeforeregister;
}
},
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
EsOrdinaryText(
StructureBuilder.configs!.lorm,
color: StructureBuilder.styles!.t1Color,
),
EsVSpacer(
big: true,
),
],
),
];




Vertical stepper form:


It is a vertical stepper form located in:
es_flutter_component/lib/components/es_stepper/es_stepper.dart
and is used as:

EsStepper(
direction: StepperType.vertical,
stepWidgets: _stepWidgets1,
titleList: ["step1","step2","step3"],
),

// where 

List<Widget> _stepWidgets1 = [
EsOrdinaryText(StructureBuilder.configs!.lorm),
EsOrdinaryText(StructureBuilder.configs!.lorm),
EsOrdinaryText(StructureBuilder.configs!.lorm),
];