Beautiful Page Indicators and Steppers with the im_stepper package
Please Note: A New way of controlling the steppers has been introduced in version 0.1.2+8. This article will be updated shortly.
With its growing popularity and only 72.5 kilobytes of code size¹, the
im_stepper package is an assorted collection of widgets that provides out-of-the-box, beautiful, and fully customizable steppers and page indicators for your Flutter app.
If you’re looking out for a beautiful, lightweight, optimized, and fully customizable page indicator and stepper widgets with awesome animations, then perhaps, this post is for you!
Built using native Dart code and with no external dependency,
im_stepper is an ideal choice to add amazing, and efficient stepping widgets to your Flutter app.
Check it out here!
What does the im_stepper package offer?
im_stepper package at the moment, offers the following widgets, with frequent updates and addition of new widgets to the growing collection: —
What are page indicators?
Page indicators are icons, graphics, or those little dots that you see either along the bottom or top of an app, that act as visual indicators when you’re swiping through multiple pages.
What is a stepper?
A number of applications require you to show content to the users in the form of steps. The
im_stepper widgets like,
NumberStepper, etc. provides you with the capability to create those steps with stunning animations.
The first and the foremost thing is to add the
im_stepper package as a dependency in your
pubspec.yml file. Once it is done, simply run
pub get and you’re ready to use the power of
im_stepper widgets in your Flutter app. If you’re not sure how to add a dependency to your Flutter project, checkout the Flutter Docs here.
The following screenshot shows you how the
im_stepper package dependency should typically look in the
pubspec.yml file: —
IconStepper Demo: —
All stepper widgets in the
im_stepper package are used almost identically. However, for the purpose of this introduction, we are going to use the
IconStepper widget as an example in this article. So, let’s create a new Flutter project to demonstrate, how the
IconStepper widget simplifies creating a stepping activity.
Say, for example, we want to create a step-by-step activity, where a potential student can enter his or her academic, professional details, etc. The end product should look something like this: —
So, after you have created the project and imported the
im_stepper package as a dependency, replace the code in the
main.dart file with the code below: —
Here, we have created the app class as
IconStepperDemo. Though, keep in mind, it must be a
StatefulWidget for the purpose of this example. As you can see in the above code snippet, the
build method returns an empty
Container. So next, we are going to add the
IconStepper widget to the app i.e. return the
IconStepper widget from its
In the above code snippet, we have added a couple of icons to the
IconStepper widget and also wrapped it inside a
Column widget, so that it appears along the top of the app. At this point, the app should look something like this: —
Using the default
Stepper constructor, we can control the stepper in two ways. One is by tapping the built-in next/previous icon buttons (that can be customized) and the second is by tapping the individual icon steps. Next, let’s add the code to display the page heading when a specific step is reached: —
The code additions are highlighted in the above code snippet. First, we created a
selectedIndex variable which keeps track of the
index of the step that is reached. The
selectedIndex is set to the
index received from the
onStepReached callback. Notice, a call to the
setState() inside the
onStepReached callback, which ensures that the page gets updated each time a step is reached. Finally, we added the
Container with the heading to be displayed. The heading is returned by the
info() method based on the step reached. The
info() method looks like: —
As is evident from the
info() method, it returns the heading based on the step reached, which is controlled by the
That’s all there is to it! Now you can customize the contents of the page that appear when a particular step is reached. All you have to do is to customize and display that content inside the Column wrapping the
IconStepper widget, under the headings.
Controlling the Stepper with External Buttons: —
With its latest release, now the
IconStepper and other steppers can be controlled from external buttons. This is easily possible using the
IconStepper.externallyControlled() constructor. However, at present, if you use this constructor, you loose the capability of built-in next/previous buttons and the tapping behavior.
In order to control the Stepper from outside the Stepper widget, let’s make the necessary changes: —
Look out for the comments in the above code, explaining the things that are necessary to be included, in order to control the Stepper from the external buttons.
In lines from 17 to 20, we created three variables:
index variable keeps track of the index of the step reached in the stepper, and the
goPrevious boolean variables control, whether the stepper should move forward or backward.
In lines from 32 to 35, we used the
IconStepper.externallyControlled() constructor and also set the
goPrevious properties of the stepper to appropriate values.
The lines from 58 to 96 adds two external buttons, namely, Previous and Next, with the necessary logic to control the Stepper from these buttons. Pay close attention to the code logic in these buttons where
goNext is set to
getPrevious is set to
true for moving backward in the stepper and vice-versa. Without this logic, the Stepper cannot be controlled from the external buttons and may lead to unexpected behavior of the stepper widget.
The following screenshot should give you an idea of how the Stepper looks after all these modifications: —
That brings us to the end of this introduction to the
im_stepper package. In addition, the Steppers and page indicators have a number of built-in properties, such as, decoration properties, animation properties, etc. that you can explore on your own.
You can find more information on im_stepper on this page.
Please Support: It takes a lot of effort and time to write these articles. So, if you really like this article, kindly show your support by becoming a patron or buy me a coffee. Please see my bio!
- The code size may change with the introduction of new features in the im_stepper package.