<p>In this post, I'm going to show you how to use Stepper Widget in your Mobile app. Stepper Widget will help you to progress through a sequence of Steps. The final output of this program is going to look as below.</p> <p>![](https://www.fluttercentral.com/Uploads/fedd9eb6-7ce6-4bec-84be-4100d0246d1f.jpgwidth="50%height="auto](</p> <p>If you are interested in watching a Live coding demo for Stepper widget, You can watch the below video.</p> <p>Below is how you add stepper widget to your project.</p> <p>color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre-wrap;](</p> <p>color: #c586c0;](new color: #4ec9b0;](Stepper(steps: spr, type: color: #4ec9b0;](StepperType.vertical, currentStep: _currentstep, onStepContinue: _movetonext, onStepCancel: _movetostart, onStepTapped: _showcontent,)</p> <p>_currentStep is an integer which will hold index of active step.</p> <p>color: rgb(212, 212, 212); font-family: Consolas, "Courier New", monospace; white-space: pre-wrap; background-color: rgb(30, 30, 30);](_movetonext, background-color: rgb(30, 30, 30); color: rgb(212, 212, 212); font-family: Consolas, "Courier New", monospace; white-space: pre-wrap;](_movetostart, background-color: rgb(30, 30, 30); color: rgb(212, 212, 212); font-family: Consolas, "Courier New", monospace; white-space: pre-wrap;](_showcontent are the functions that will perform the navigation and showing the dialog box.</p> <p>Here is the full code from main.dart file. All you need to copy paste the below code in your main.dart file and run it to see the output.</p> <p>runApp(new MyApp());</p> <p>class MyApp extends StatelessWidget { // This widget is the root of your application.</p> <p>@override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData(), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } }</p> <p>class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);</p> <p>final String title;</p> <p>@override _MyHomePageState createState() => new _MyHomePageState(); }</p> <p>class _MyHomePageState extends State { int _currentstep = 0;</p> <p>void _movetonext() { setState(() { _currentstep++; }); }</p> <p _currentstep="0;">void _movetostart() { setState(() ); }</p> <p>void _showcontent(int s) { showDialog( context: context,</p> <pre> barrierDismissible: false, // user must tap button!
builder: (BuildContext context) { return new AlertDialog( title: new Text('You clicked on'), content: new SingleChildScrollView( child: new ListBody( children: [ spr[s].title, spr[s].subtitle, ], ), ), actions: [ new FlatButton( child: new Text('Ok'), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); </pre> <p>}</p> <p>@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Container( child: new Stepper( steps: spr, type: StepperType.vertical, currentStep: _currentstep, onStepContinue: _movetonext, onStepCancel: _movetostart, onStepTapped: _showcontent, ))); } }</p> <p>const List spr = [ // const Step( title: ,'SubTitle1', 'This is Content', state: StepState.indexed, true)</p> <p>Step( title: const Text('Hello1'), subtitle: Text('SubTitle1'), content: const Text('This is Content1'), state: StepState.indexed, isActive: true),</p> <p>Step( title: const Text('Hello2'), subtitle: Text('SubTitle2'), content: const Text('This is Content2'), state: StepState.indexed, isActive: true),</p> <p>Step( title: const Text('Hello3'), subtitle: Text('SubTitle3'), content: const Text('This is Content3'), state: StepState.indexed, isActive: true),</p> <p>Step( title: const Text('Hello4'), subtitle: Text('SubTitle4'), content: const Text('This is Content4'), state: StepState.indexed, isActive: true),</p> <p>Step( title: const Text('Hello5'), subtitle: Text('SubTitle5'), content: const Text('This is Content5'), state: StepState.indexed, isActive: true),</p> <p>Step( title: const Text('Hello6'), subtitle: Text('SubTitle6'), content: const Text('This is Content6'), state: StepState.indexed, isActive: true),</p> <p>Step( title: const Text('Hello7'), subtitle: Text('SubTitle7'), content: const Text('This is Content7'), state: StepState.indexed, isActive: true),</p> <p>Step( title: const Text('Hello8'), subtitle: Text('SubTitle8'), content: const Text('This is Content8'), state: StepState.indexed, isActive: true),</p> <p>Step( title: const Text('Hello9'), subtitle: Text('SubTitle9'), content: const Text('This is Content9'), state: StepState.indexed, isActive: true),</p> <p>Step( title: const Text('Hello10'), subtitle: Text('SubTitle10'), content: const Text('This is Content10'), state: StepState.indexed, isActive: true), ];</p> <p>Hope this is helpful. Please add your comments.</p> <p>You can also read my new article on Flutter Stepper Widget - Change State in Response to Input</p> <p><a href="https://fluttercentral.com/Articles/Post/44">https://fluttercentral.com/Articles/Post/44</a></p> <p>Thanks, Srikanth</p>