Flutter Stepper Tutorial For Beginners

Flutter Stepper :

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.

Also to guide the user through the process of collecting user details in profile where we collect user details in a categorical way as personal details, professional details and more.

We can provide the details of every step so that user can know the status of the step with description and on click of the step we can perform the actions.

Generally you can also find them in online survey’s, terms and condition pages and lot other categories where they provide information for the user to go through and accept at the last page.

So here steppers also make sure you go through each page before reaching the final page.

Flutter stepper video tutorial :

Go through the below tutorial for more details on implementation

main.dart :

Initialize with void main()

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

Return the MaterialApp and in home declare a class

MaterialApp(
    title: "Stepper App",
    // Home
    home: MyHome()
);

Create a state

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

Create a variable current step so as to track the number of steps and display the same

int current_step = 0;

Provide the steps to be populated inside the Stepper by providing the details like title, content and active status for every step using a List.

Here we are providing a stepper to guide through a app installation procedure for user’s right from download up till it’s usage and finally exit.

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

  Step(
      title: Text("Select the product"),
      content: Text("Laptop"),
      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),
];

When a user clicks on the step according to the step functionality can be provided in onStepTapped method.

Where current step is passed as a call back.And we are printing the step using print statement.

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

When user clicks on the continue we are incrementing according to the current step

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

When user clicks on the cancel we are rolling back to the previous step.

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

FullCode :

Providing the full code for flutter stepper integration in your app.

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("Online Store App"),
        isActive: true),
    Step(
        title: Text("Install the app"),
        content: Text("Installing..."),
        state: StepState.indexed,
        isActive: true),

    Step(
        title: Text("Select the product"),
        content: Text("Laptop"),
        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());
            },

          )),
    );
  }
}

Flutter stepper output :

This screen below depicts the usage of flutter stepper implementation