Create a Simple Stepper with Flutter

Icons made by monkik, Pixelmeetup, and Freepik from www.flaticon.com

1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the “Flutter: New Project” option:

2. As usual the "Counter App Example" will be created. In this occasion I will work here. Locate the body, and remove the content inside the Column's Children:

	return Scaffold(
	appBar: AppBar(
	title: Text(widget.title),
	),
	body: Center(
	child: Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	],
	),
	),
	floatingActionButton: FloatingActionButton(
	onPressed: _incrementCounter,
	tooltip: 'Increment',
	child: Icon(Icons.add),
	),
	);

view raw empty_children.dart hosted with ❤ by GitHub

3. Let's start creating the Stepper by adding the Stepper class. Add the type and also the steps:

	new Stepper(
	type: StepperType.vertical,
	steps:
	[
	],
	),

view raw stepper_class.dart hosted with ❤ by GitHub

4. Pretty simple, am I right? If you try to run the app right now you will get an error, because our Stepper doesn't have steps:

5. Let's add our first step. Inside the steps: [] list, we will add a simple TextFormField, in which we will allow the user to add any text, set a step state, give it a title (required), and also allow the autocorrect feature:

	Step(
	title: const Text('Receipt number:'),
	isActive: true,
	state: StepState.editing,
	content: new TextFormField(
	keyboardType: TextInputType.text,
	autocorrect: true,
	),

view raw first_step.dart hosted with ❤ by GitHub

6. You can run the app now. Go ahead, fire up the emulator and run without debugging:

7. Neat isn't it? However, the field is not explicit enough for the user. To solve that, let's add some input decoration, to show a placeholder, a field hint and also an icon to make it prettier:

	decoration:
	new InputDecoration
	(
	labelText: 'Please enter a receipt number',
	hintText: 'Example: WST-10102P',
	icon: const Icon(Icons.receipt),
	labelStyle: new TextStyle(decorationStyle: TextDecorationStyle.solid
	),

view raw TextFormField_input_decoration.dart hosted with ❤ by GitHub

Check out the complete step with decoration included:

	Step(
	title: const Text('Receipt number:'),
	isActive: true,
	state: StepState.editing,
	content: new TextFormField(
	keyboardType: TextInputType.text,
	autocorrect: true,
	decoration:
	new InputDecoration(
	labelText: 'Please enter a receipt number',
	hintText: 'Example: WST-10102P',
	icon: const Icon(Icons.receipt),
	labelStyle: new TextStyle(decorationStyle: TextDecorationStyle.solid),
	),
	),
	),

view raw complete_step_with_decoration.dart hosted with ❤ by GitHub

8. Run the app to see the changes:

9. Let's create an Amount step, which will look exactly like the previous one, except for the title:

	Step(
	title: const Text('Amount:'),
	isActive: true,
	state: StepState.editing,
	content: new TextFormField(
	keyboardType: TextInputType.text,
	autocorrect: true,
	decoration:
	new InputDecoration(
	labelText: 'Please enter an amount',
	hintText: 'Example: 102.22',
	icon: const Icon(Icons.monetization_on),
	labelStyle: new TextStyle(decorationStyle: TextDecorationStyle.solid),
	),
	),
	),

view raw another_step.dart hosted with ❤ by GitHub

10. Now we have two steps but cannot move forward because that functionality has not been coded yet. First, declare a int variable called currStep:

	class _MyHomePageState extends State<MyHomePage> {
	int currStep = 0;

view raw currStep_variable.dart hosted with ❤ by GitHub

11. Now, let's go back to the Stepper, and right below the Stepper Type, add the following code that will set the current step, and also change the step index so that you can move between steps:

	currentStep: this.currStep,
	onStepContinue: () {
	setState(() {
	if (currStep < 2 - 1) {
	currStep = currStep + 1;
	} else {
	currStep = 0;
	}
	});
	},

view raw set_current_step.dart hosted with ❤ by GitHub

12. Add functionality to the "Cancel" button, and also allow the user to show the step when it is tapped:

	onStepCancel: () {
	setState(() {
	if (currStep > 0) {
	currStep = currStep - 1;
	} else {
	currStep = 0;
	}
	});
	},
	onStepTapped: (step) {
	setState(() {
	currStep = step;
	});
	},

view raw step_cancel_tap.dart hosted with ❤ by GitHub

14. Finally, add a button that will send the form information to the server:

	new RaisedButton(
	child: new Text(
	'Save receipt information',
	style: new TextStyle(color: Colors.white),
	),
	onPressed: (){},
	color: Colors.blue,
	),

view raw stepper_save_button.dart hosted with ❤ by GitHub

15. And that's it! You just created a Simple Stepper with Flutter:

16. As you noticed, this Stepper doesn't have any type of validation, and doesn't save the data entered. This is intentional since it would be hard just to cram everything up in one post, and instead I explained how to create one without any complicated functionality so that you can understand how to create a Stepper. Next article I will add validation, and how to send the information to the server.

 Get the code here: Simple Stepper with Flutter