As a Flutter developer, you’re likely familiar with the wide variety of widgets available to create seamless and interactive user interfaces. Among these widgets, the stepper plays a crucial role in breaking down complex forms or processes into smaller, more manageable steps.
In this blog post, we will dive into the stepper widget in Flutter, discussing its uses, customization options, and even the creation of a custom stepper. By the end of this guide, you’ll have a solid understanding of how to implement and customize the Stepper widget in your Flutter projects.
What is a Stepper in Flutter?
A stepper is a UI component that visually guides users through a sequence of steps in a linear or non-linear process. In Flutter, the stepper widget provides a simple and intuitive way to manage multi-step processes, such as forms, onboarding flows, or setup wizards. With its built-in navigation and validation features, the stepper widget makes creating organized and user-friendly experiences easy.
Setting Up the Development Environment
Before diving into the stepper widget, ensure Flutter and Dart is installed on your machine. Follow the official Flutter installation guide for your operating system to set up your development environment.
Once Flutter and Dart are installed, create a new Flutter project by running the following command in your terminal or command prompt:
flutter create my_stepper_app
Replace “my_stepper_app” with your desired project name. After creating the project, please navigate to the folder and open it in your favorite code editor.
How to use the Stepper widget in Flutter?
To begin implementing the stepper widget, open the ‘lib/main.dart‘ file in your project and replace the existing code with the following:
body: Stepper(
type: StepperType.horizontal,
currentStep: _currentStep,
onStepTapped: (step) => setState(() => _currentStep = step),
onStepContinue:
_currentStep < 2 ? () => setState(() => _currentStep += 1) : null,
onStepCancel:
_currentStep > 0 ? () => setState(() => _currentStep -= 1) : null,
steps: [
Step(
title: const Text('Credentials'),
content: TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintStyle: _hintStyle,
hintText: 'Email',
),
),
state: _currentStep == 0 ? StepState.editing : StepState.complete,
isActive: _currentStep == 0,
),
Step(
title: const Text('Postal Address'),
content: TextFormField(
keyboardType: TextInputType.emailAddress,
decoration:
InputDecoration(hintStyle: _hintStyle, hintText: 'Address'),
),
state: _currentStep == 1 ? StepState.editing : StepState.complete,
isActive: _currentStep == 1,
),
Step(
title: const Text('Number'),
content: TextFormField(
keyboardType: TextInputType.number,
decoration:
InputDecoration(hintStyle: _hintStyle, hintText: 'Number'),
),
state: _currentStep == 2 ? StepState.editing : StepState.complete,
isActive: _currentStep == 2,
),
],
),
Output:
In this example, we created a simple stepper with three steps. The _currentStep variable keeps track of the active step. The onStepTapped, onStepContinue, and onStepCancel callbacks handle user interactions, allowing users to navigate the steps.
You may also want to read: A Guide to Flutter Chip Widget.
Customizing and Decorating the Stepper Widget
The Stepper widget provides several properties to customize its appearance. You can modify the color, shape, and style of the step icons, labels, and content using the Step class properties, such as active color, title, subtitle, state, and content. Additionally, you can decorate this widget by wrapping it in a Container widget and applying a BoxDecoration. Here’s an example of how to customize the stepper:
Stepper(
currentStep: _currentStep,
onStepTapped: (step) => setState(() => _currentStep = step),
onStepContinue: _currentStep < 2
? () => setState(() => _currentStep += 1)
: null,
onStepCancel: _currentStep > 0
? () => setState(() => _currentStep -= 1)
: null,
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
children: <Widget>[
ElevatedButton(
onPressed: onStepContinue,
child: const Text('Continue'),
),
SizedBox(width: 8.0),
TextButton(
onPressed: onStepCancel,
child: const Text('Cancel'),
),
],
),
);
},
steps: [
Step(
title: Text('Step 1'),
content: Text('This is the first step.'),
state: _currentStep == 0 ? StepState.editing : StepState.complete,
isActive: _currentStep == 0,
),
Step(
title: Text('Step 2'),
content: Text('This is the second step.'),
state: _currentStep == 1 ? StepState.editing : StepState.complete,
isActive: _currentStep == 1,
),
Step(
title: Text('Step 3'),
content: Text('This is the final step.'),
state: _currentStep == 2 ? StepState.editing : StepState.complete,
isActive: _currentStep == 2,
),
],
)
In this example, we’ve used the state and isActive properties of each step to update their appearance based on the current step.
Vertical Stepper in Flutter
By default, the stepper widget displays steps horizontally. However, you can create a vertical stepper by setting the type property of the Stepper widget to StepperType.vertical.
Let’s see how it is done with the help of an example. Here is the code:
Stepper(
type: StepperType.vertical,
currentStep: _currentStep,
onStepTapped: (step) => setState(() => _currentStep = step),
onStepContinue: _currentStep < 2
? () => setState(() => _currentStep += 1)
: null,
onStepCancel: _currentStep > 0
? () => setState(() => _currentStep -= 1)
: null,
steps: _createSteps(),
)
Output:
In this example, we’ve only added the type: StepperType.vertical property to the previous horizontal stepper example. The rest of the implementation remains the same.
Stepper Widget Methods and Functions
When working with the Stepper widget, you may need various widget methods and functions for interactivity and customization. Some common methods include:
- setState(): Updates the state of a StatefulWidget, triggering a rebuild of the widget tree.
- Navigator.pop(): Closes the current screen and returns to the previous screen in the navigation stack.
- Navigator.push(): Opens a new screen on top of the current screen in the navigation stack.
Manipulating Widget Positions in Flutter
To change a widget’s position in Flutter, you can use layout widgets such as Align, Positioned, and Container. Combining these widgets with the stepper allows you to create a custom layout to position the stepper and its elements within the screen. For instance, you can wrap the Stepper widget in a Center or Align widget to position it in the center or other parts of the screen.
Here is an example:
Center(
child: Stepper(
// Stepper implementation
),
)
For fixed-position widgets, you can use the Positioned widget within a Stack Widget. This allows you to place the widget at specific x and y coordinates within the stack. Let us see the change in position with the help of an example.
Stack(
children: [
// Other widgets
Positioned(
top: 50,
left: 50,
child: Stepper(
// Stepper implementation
),
),
],
)
Creating a Custom Stepper in Flutter
Sometimes, you may want to create a custom stepper beyond the built-in styling and behavior options. To create a custom stepper widget, follow these steps:
- Create a new StatefulWidget that extends the base StatefulWidget class.
- Define a custom State class with the necessary state variables for your stepper.
- Implement the desired stepper appearance, behavior, and functionality using a combination of basic widgets and custom logic.
Here’s a simple example of a custom stepper:
class CustomStepper extends StatefulWidget {
@override
_CustomStepperState createState() => _CustomStepperState();
}
class _CustomStepperState extends State<CustomStepper> {
int _currentStep = 0;
List<Widget> _stepIndicators() {
List<Widget> indicators = [];
for (int i = 0; i < 3; i++) {
indicators.add(
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _currentStep == i ? Colors.blue : Colors.grey,
),
width: 30,
height: 30,
child: Center(child: Text('${i + 1}')),
),
);
}
return indicators;
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _stepIndicators(),
),
// Custom step content and navigation buttons
],
);
}
}
This example demonstrates a custom stepper with a simple step indicator. You can further customize this example to create a completely unique stepper experience.
Conclusion
Mastering the Stepper widget in Flutter is essential for any developer looking to create intuitive and efficient user experiences. The Stepper widget is a useful tool for designing interesting and user-friendly interfaces because it can break down complex operations into smaller, more manageable steps. If you want to improve your Flutter programming skills and design remarkable multi-step procedures for your app, it’s time to hire Flutter developers.
Happy coding! 😉
