> For the complete documentation index, see [llms.txt](https://flutteropen.gitbook.io/flutter-widgets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutteropen.gitbook.io/flutter-widgets/widgets-16-or-stepper.md). # 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 { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(PageName.STEPPER), ), body: SingleChildScrollView( child: Column( children: [ //our code. SizedBox(height: 600) ], ), ), ); } } ``` It shows an empty page with a title. ![](/files/-LXXYOuaBPvuKm4UFl92) ## 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. ![](/files/-LXXaQwYJ1TiN16wwd9c) ## 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 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. ![](/files/-LXXmMRnQv13QPXe6XVK) ## 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. ![](/files/-LXXqM8y_MxYun4VyA57) ## onStepTapped\¤tStep 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. ![](/files/-LXXwaXmPQi2_4TQGCIE) 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. ![](/files/-LXXyOz-t6hQLMC26K6e) ## 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. | 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) |