> 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) | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://flutteropen.gitbook.io/flutter-widgets/widgets-16-or-stepper.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.