---
description: In this tutorial, you will learn how to use the Stepper in the flutter.
---

# Widgets 16 | Stepper

## Before Start

We should create a page to  contain our code.

```dart
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class StepperPage extends StatefulWidget {
  @override
  _StepperState createState() => _StepperState();
}

class _StepperState extends State<StepperPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.STEPPER),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            //our code.
            SizedBox(height: 600)
          ],
        ),
      ),
    );
  }
}
```

It shows an empty page with a title.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXXR4Xc6E0EcO7_xW4J%2F-LXXYOuaBPvuKm4UFl92%2Fstepper_01.jpg?alt=media\&token=b530fcd0-d59f-4a55-a2c4-bd43e67d407e)

## Simple Use

When I write this article, I have used some steps to describe our tutorials. In this situation, we can use a stepper to implement this.

```dart
 Container(
              color: RED,
              child: Stepper(
                steps: [
                  Step(
                    title: Text("Start"),
                    content: Text("Before starting, we should create a page."),
                  ),
                  Step(
                    title: Text("Constructor"),
                    content: Text("Let's look at its construtor."),
                  ),
                ],
              ),
            ),
```

It will show as follows.&#x20;

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXXR4Xc6E0EcO7_xW4J%2F-LXXaQwYJ1TiN16wwd9c%2Fstepper_02.jpg?alt=media\&token=633a5ea4-cfc4-4beb-924d-6dbe508dacf8)

## Constructor

Let's look at its constructor. The `steps` is a list, `onStepTapped, onStepContinue, onStepCancel，controlsBuilder` are functions. The `currentStep` is the `int`.  The `type` is the `enum`. I will tell the detail of them one by one.

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

## steps

Let's look at the definition of the `steps`.

```dart
  final List<Step> steps;
```

Its constructor is below.

```dart
Step({
    @required this.title,
    this.subtitle,
    @required this.content,
    this.state = StepState.indexed,
    this.isActive = false,
  })
```

The `title, subtitle, content` are the widgets, the state is an `enum`.

So let's see an example.

```dart
Widget _steps() => Container(
        margin: EdgeInsets.only(top: 10),
        color: GREEN,
        child: Stepper(
          steps: [
            Step(
              title: Text("First"),
              subtitle: Text("This is our first article"),
              content: Text(
                  "In this article, I will tell you how to create a page."),
            ),
            Step(
                title: Text("Second"),
                subtitle: Text("Constructor"),
                content: Text("Let's look at its construtor."),
                state: StepState.editing,
                isActive: true),
            Step(
                title: Text("Third"),
                subtitle: Text("Constructor"),
                content: Text("Let's look at its construtor."),
                state: StepState.error),
          ],
        ),
      );
```

It will show you like this.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXXejEbTVfdbz3ojY6a%2F-LXXmMRnQv13QPXe6XVK%2Fstepper_03.jpg?alt=media\&token=b865fba8-04fa-41cd-92da-b912a034792b)

## type

It has two types, the default value is the `vertical`. We use the `horizontal` in this example.

```dart
 Widget _typeStep() => Container(
        margin: EdgeInsets.only(top: 10),
        constraints: BoxConstraints.expand(height: 200),
        color: BLUE_LIGHT,
        child: Stepper(
          type: StepperType.horizontal,
          steps: [
            Step(
              title: Text("First"),
              content: Text("This is our first example."),
            ),
            Step(
              title: Text("Second"),
              content: Text("This is our second example."),
            ),
          ],
        ),
      );
```

It shows as follows.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXXejEbTVfdbz3ojY6a%2F-LXXqM8y_MxYun4VyA57%2Fstepper_04.jpg?alt=media\&token=c06c7580-1416-4053-b3ec-e0b6ae50ba7e)

## onStepTapped\&currentStep

In the fore example, when we click the second title, it doesn't show the content of the second. We need some handle.

```dart
 Widget _tabStep() => Container(
        margin: EdgeInsets.only(top: 10),
        color: PURPLE,
        child: Stepper(
          steps: [
            Step(
              title: Text("First"),
              content: Text("This is our first example."),
            ),
            Step(
              title: Text("Second"),
              content: Text("This is our second example."),
            ),
            Step(
              title: Text("Third"),
              content: Text("This is our third example."),
            ),
            Step(
              title: Text("Forth"),
              content: Text("This is our forth example."),
            ),
          ],
          currentStep: _index,
          onStepTapped: (index) {
            setState(() {
              _index = index;
            });
          },
          onStepCancel: () {
            print("You are clicking the cancel button.");
          },
          onStepContinue: () {
            print("You are clicking the continue button.");
          },
        ),
      );
```

When you click the third title, it will show as follows.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXXejEbTVfdbz3ojY6a%2F-LXXwaXmPQi2_4TQGCIE%2Fstepper_05.jpg?alt=media\&token=fb653604-fadf-4300-b4fc-930dc02fc8bd)

When you click the `continue` or `cancel`, it will print as follows.

```dart
I/flutter ( 6888): You are clicking the continue button.
I/flutter ( 6888): You are clicking the cancel button.
```

## controlsBuilder

If you want to custom your own `continue, cancel` button, you can use the `controlsBuilder` to define them. The function is the same as the above. But this time, I will hide these two buttons.

```dart
 Widget _builderStep() => Container(
        margin: EdgeInsets.only(top: 10),
        color: PURPLE,
        child: Stepper(
          steps: [
            Step(
              title: Text("First"),
              content: Text("This is our first example."),
            ),
            Step(
              title: Text("Second"),
              content: Text("This is our second example."),
            ),
            Step(
              title: Text("Third"),
              content: Text("This is our third example."),
            ),
            Step(
              title: Text("Forth"),
              content: Text("This is our forth example."),
            ),
          ],
          currentStep: _index,
          onStepTapped: (index) {
            setState(() {
              _index = index;
            });
          },
          controlsBuilder: (BuildContext context,
                  {VoidCallback onStepContinue, VoidCallback onStepCancel}) =>
              Container(),
        ),
      );
```

It will hide these two buttons.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXXejEbTVfdbz3ojY6a%2F-LXXyOz-t6hQLMC26K6e%2Fstepper_06.jpg?alt=media\&token=472027af-6b4a-46a8-8b99-afcd0d98ad59)

## Conclusion

Today, we have learned the `Stepper`. It has many parameters, the most thing you should know that this widget is very special widget. You can learn it when you need time.

Thanks for your reading!

The end.

#### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | Medium                                        |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------------------------------------------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | [FlutterOpen](https://medium.com/flutteropen) |















