Beautiful Page Indicators and Steppers with the im_stepper package

IconStepper in im_stepper package
DotStepper in 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 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, 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 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.

Page Indicator example

What is a stepper?

A number of applications require you to show content to the users in the form of steps. The widgets like, , , etc. provides you with the capability to create those steps with stunning animations.

Stepper example

Getting started:

The first and the foremost thing is to add the package as a dependency in your file. Once it is done, simply run and you’re ready to use the power of 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 package dependency should typically look in the file: —

Importing in pubspec.yml file

IconStepper Demo: —

All stepper widgets in the package are used almost identically. However, for the purpose of this introduction, we are going to use the widget as an example in this article. So, let’s create a new Flutter project to demonstrate, how the 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: —

Final Product

So, after you have created the project and imported the package as a dependency, replace the code in the file with the code below: —

Basic App Skeleton

Here, we have created the app class as . Though, keep in mind, it must be a for the purpose of this example. As you can see in the above code snippet, the method returns an empty . So next, we are going to add the widget to the app i.e. return the widget from its method.

Added the Stepper Widget

In the above code snippet, we have added a couple of icons to the widget and also wrapped it inside a widget, so that it appears along the top of the app. At this point, the app should look something like this: —

Default Stepper State

Using the default 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: —

Headings are now controlled by the IconStepper

The code additions are highlighted in the above code snippet. First, we created a variable which keeps track of the of the step that is reached. The is set to the received from the callback. Notice, a call to the inside the callback, which ensures that the page gets updated each time a step is reached. Finally, we added the with the heading to be displayed. The heading is returned by the method based on the step reached. The method looks like: —

info() method returns the heading based on the step reached

As is evident from the method, it returns the heading based on the step reached, which is controlled by the variable.

Headings are now controlled by the Stepper

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 widget, under the headings.

Controlling the Stepper with External Buttons: —

With its latest release, now the and other steppers can be controlled from external buttons. This is easily possible using the 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: , , and . The variable keeps track of the index of the step reached in the stepper, and the and boolean variables control, whether the stepper should move forward or backward.

In lines from 32 to 35, we used the constructor and also set the and 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 is set to and is set to 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: —

Externally controlled Stepper

That brings us to the end of this introduction to the 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!

Connect with me: github | pub.dev| twitter | instagram

  1. The code size may change with the introduction of new features in the im_stepper package.

--

--

Lead Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store