Flutter Stepper Example - CREATE A SIMPLE STEPPER WITH FLUTTER

Published February 14, 2020

This post explains how CREATE A SIMPLE STEPPER WITH FLUTTER

To Create Stepper we are going to use Stepper Widget

const Stepper({
Key key,
@required this.steps,
this.physics,
this.type = StepperType.vertical,
this.currentStep = 0,
this.onStepTapped,
this.onStepContinue,
this.onStepCancel,
this.controlsBuilder,
})

This widget has above properties where

steps:Will contains the steps what we are going to show in each step.
type:Type of Stepper (StepperType.vertical,StepperType.horizontal)
currentStep: Will tell the current step
onStepTapped: Function will trigger on tap on the Stepper
onStepContinue: Function will trigger on tap on Continue button
onStepCancel: Function will trigger on tap on Cancel button

Let's check the example

Create Flutter Application in Android Studio and add below code

class MyStepper extends StatefulWidget{

 @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyHomePageState();
  }
}
class _MyHomePageState extends State<MyStepper> {
  int currStep = 0;
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink
      ),
      home: Scaffold(
        appBar: AppBar(

          title: Text("Stepper"),
        ),
        body: Center(

          child: Column(

            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              getStepperCart(),
              new RaisedButton(
                child: new Text(
                  'Check Order Status',
                  style: new TextStyle(color: Colors.white),
                ),
                onPressed: () {},
                color: Colors.pink,
              ),
            ],
          ),
        ),

      ),
    );
  }


  getStepper()
  {
    return  new Stepper(
      type: StepperType.vertical,
      currentStep: this.currStep,
      onStepContinue: () {
        setState(() {
          if (currStep < 2 - 1) {
            currStep = currStep + 1;
          } else {
            currStep = 0;
          }
        });
      },
      onStepCancel: () {
        setState(() {
          if (currStep > 0) {
            currStep = currStep - 1;
          } else {
            currStep = 0;
          }
        });
      },
      onStepTapped: (step) {
        setState(() {
          currStep = step;
        });
      },
      steps: [
        Step(
          title: const Text('Receipt number:'),
          isActive: true,
          state: StepState.editing,
          content: new TextFormField(
            keyboardType: TextInputType.text,
            autocorrect: true,
            decoration: new InputDecoration(
              labelText: 'Please enter a receipt number',
              hintText: 'Example: WST-10102P',
              icon: const Icon(Icons.receipt),
              labelStyle: new TextStyle(
                  decorationStyle: TextDecorationStyle.solid),
            ),
          ),
        ),
        Step(
          title: const Text('Amount:'),
          isActive: true,
          state: StepState.editing,
          content: new TextFormField(
            keyboardType: TextInputType.text,
            autocorrect: true,
            decoration: new InputDecoration(
              labelText: 'Please enter an amount',
              hintText: 'Example: 102.22',
              icon: const Icon(Icons.monetization_on),
              labelStyle: new TextStyle(
                  decorationStyle: TextDecorationStyle.solid),
            ),
          ),
        ),
      ],
    );
  }
  getStepperCart()
  {
    return  new Stepper(
      type: StepperType.vertical,
      currentStep: this.currStep,
      onStepContinue: () {
        setState(() {
          if (currStep < 2 - 1) {
            currStep = currStep + 1;
          } else {
            currStep = 0;
          }
        });
      },
      onStepCancel: () {
        setState(() {
          if (currStep > 0) {
            currStep = currStep - 1;
          } else {
            currStep = 0;
          }
        });
      },
      onStepTapped: (step) {
        setState(() {
          currStep = step;
        });
      },
      steps: [
        Step(
          title: const Text('Place Order'),
          isActive: true,
          state: StepState.editing,
          content: Row(
            children: <Widget>[
              Icon(Icons.add_shopping_cart,color: Colors.green,size: 32,),
              SizedBox(width: 20,),
              Text("20 Items",style: TextStyle(color: Colors.green,fontSize: 20),)
            ],
          ),
        ),
        Step(
          title: const Text('Pay'),
          isActive: true,
          state: StepState.editing,
          content: Row(
            children: <Widget>[
              Icon(Icons.payment,color: Colors.green,size: 32,),
              SizedBox(width: 20,),
              Text("\$ 99",style: TextStyle(color: Colors.green,fontSize: 20),)

            ],
          ),
        ),
      ],
    );
  }
}

Flutter Stepper

Article Contributed By :

4381 Views