im_stepper 0.1.2+8
im_stepper: ^0.1.2+8

Flutter Android iOS web

A growing collection of beautiful, easy to use, stepper and page indicator widgets.

im_stepper #

Pub Version (including pre-releases) GitHub issues GitHub closed issues GitHub last commit GitHub code size in bytes

Publications #

Here's a collection of articles, examples, posts, etc., about im_stepper. If you find another one please let me know.

Recent Changes #

Here's a list of some important changes in version: 0.1.2+7. For a complete list of changes see changelog here.

  • IMPORTANT MESSAGE: goNext, goPrevious, and Foo.externallyControlled properties and constructors have been deprecated and will be removed from Icon, Image, Number, and Dot Steppers in version 0.1.3. The dotReachedIndex property in DotStepper has also been deprecated and will be removed in version 0.1.3. Please consider updating your code! see examples here.

  • Introducing the activeStep property, a simpler way to control the steppers either from built-in buttons, by tapping, or from external buttons with the ability to set initial step or jump to any step.

  • Message for the existing users: Do you prefer the new method or the older way to control the steppers? Please vote here! This message will be removed in version 0.1.3.

About #

A growing collection of stepper and page indicator widgets.

Description #

The stepper widgets help you to show or collect information from users using organized steps. The page indicator widgets allow you to visually notify users about their current position as they scroll through a group of pages.

Table of Contents #

General Guidelines #

  • Simply import package:im_stepper/stepper.dart.

  • Important: The direction argument controls whether the stepper is displayed horizontally or vertically. A horizontal IconStepper can be wrapped within a Column with no issues. However, if wrapped within a row, it must also be wrapped within the built-in Expanded widget. The same applies to the vertical IconStepper.

  • Validation: To enable validation before the next step is reached, set the steppingEnabled property to an appropriate value in a StatefulWidget.

  • Controlling Steppers: All steppers are controlled using the activeStep property. You can control a stepper by:-

    • using the built-in next and previous buttons.

    • tapping individual steps in case of Icon, Image, and Number steppers. Please note that the tapping behavior doesn't apply to the DotStepper.

    • using external buttons or events.

      • See examples here.
  • To customize the color, border, etc., wrap a stepper widget inside a Container and specify it's decoration argument.

IconStepper #

Simple to use icon stepper widget, wherein each icon defines a step. Hence, the total number of icons represents the total number of available steps. See Example.


ImageStepper #

Simple to use image stepper widget, wherein each image defines a step. Hence, the total number of images defines the total number of steps. See Example.


NumberStepper #

A simple to use number stepper widget, wherein each number defines a step. Hence, the total count of numbers defines the total number of steps. See Example.


DotStepper #

A family of fully customizable, beautiful page indicator widgets with awesome built-in animations. Each dot in a DotStepper represents a step. See Example.

Important Note: activeStep must start from 1 and not from 0.

Shapes #

Rounded RectangleRR

Effects #

Jump From Abovejfa
Jump From Belowjfb

Feedback #

  • Please file an issue here.

  • For more information please send me an email or follow me below.

Follow me #

GitHub Twitter LinkedIn Medium Instagram Facebook

Please Support #

pub points

A growing collection of beautiful, easy to use, stepper and page indicator widgets.

Repository (GitHub)
View/report issues


API reference







Packages that depend on im_stepper