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?
The im_stepper package at the moment, offers the following widgets, with frequent updates and addition of new widgets to the growing collection: —
- IconStepper
- ImageStepper
- DotStepper
- NumberStepper
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, IconStepper, NumberStepper, etc. provides you with the capability to create those steps with stunning animations.
Getting started:
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: —
im_stepper in pubspec.yml fileIconStepper 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 build method.
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 index variable.
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, goNext, and goPrevious. The index variable keeps track of the index of the step reached in the stepper, and the goNext and 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 goNext and 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 false and 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.
