Stepper in flutter Example.

  • Stepper is a widget that 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.
  • Flutter stepper will help you to guide the user through the process intended by the app like payment gateway where we collect the user details step by step and later on make the transactions.



Examples :- 


main.dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Stepper App",
        // Home
        home: MyHome()
    );
  }
}

Initialization the current_step

 
int current_step = 0;


List the steps


List<Step> my_steps = [
    Step(
      // Title of the Step
        title: Text("Download the app"),
        content: Text("Play Store App"),
        isActive: true),
    Step(
        title: Text("Install the app"),
        content: Text("Installing..."),
        state: StepState.indexed,
        isActive: true),

    Step(
        title: Text("Select the App"),
        content: Text("Facebook"),
        isActive: true),

    Step(
        title: Text("Make the payment"),
        content: Text("Enter transaction details..."),
        isActive: true),

    Step(
        title: Text("Exit the app!!!"),
        content: Text("Purchase done successfully"),
        isActive: true),
  ];


Define the onStepCancel

 
onStepCancel: () {
              setState(() {
                if (current_step > 0) {
                  current_step = current_step - 1;
                } else {
                  current_step = 0;
                }
              });
              print("onStepCancel : " + current_step.toString());
            },


Define the onStepContinue


 onStepContinue: () {
              setState(() {
                if (current_step < my_steps.length - 1) {
                  current_step = current_step + 1;
                } else {
                  current_step = 0;
                }
              });
              print("onStepContinue : " + current_step.toString());
            },

          )),


Full Source Code


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Stepper App",
        // Home
        home: MyHome()
    );
  }
}


class MyHome extends StatefulWidget {
  @override
  MyHomeState createState() => MyHomeState();
}

class MyHomeState extends State<MyHome> {
  // init the step to 0th position
  int current_step = 0;
  List<Step> my_steps = [
    Step(
      // Title of the Step
        title: Text("Download the app"),
        content: Text("Play Store App"),
        isActive: true),
    Step(
        title: Text("Install the app"),
        content: Text("Installing..."),
        state: StepState.indexed,
        isActive: true),

    Step(
        title: Text("Select the App"),
        content: Text("Facebook"),
        isActive: true),

    Step(
        title: Text("Make the payment"),
        content: Text("Enter transaction details..."),
        isActive: true),

    Step(
        title: Text("Exit the app!!!"),
        content: Text("Purchase done successfully"),
        isActive: true),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Appbar
      appBar: AppBar(
        // Title
        title: Text("Stepper"),
      ),
      // Body
      body: Container(
          child: Stepper(

            currentStep: this.current_step,
            steps: my_steps,
            type: StepperType.vertical,

            onStepTapped: (step) {
              setState(() {
                current_step = step;
              });
              print("onStepTapped : " + step.toString());
            },

            onStepCancel: () {
              setState(() {
                if (current_step > 0) {
                  current_step = current_step - 1;
                } else {
                  current_step = 0;
                }
              });
              print("onStepCancel : " + current_step.toString());
            },

            onStepContinue: () {
              setState(() {
                if (current_step < my_steps.length - 1) {
                  current_step = current_step + 1;
                } else {
                  current_step = 0;
                }
              });
              print("onStepContinue : " + current_step.toString());
            },

          )),
    );
  }
}


OUTPUT





Subscribe My Youtube Channel :- smtechviral