im_stepper 0.1.2+6 im_stepper: ^0.1.2+6 copied to clipboard
A growing collection of widgets primarily used to step-through several widgets in an application.
im_stepper #
Publications #
Here's a collection of articles, examples, posts, etc. about im_stepper. If you find another one please let me know.
- Medium Article with
IconStepper
Example: Beautiful Page Indicators and Steppers with the im_stepper package.
Recent Changes #
Here's a list of some important changes in version: 0.1.2+6. For a complete list of changes see changelog here.
- BugFix - ticker disposed with active ticker. [count: 2]
About #
A growing collection of widgets primarily used to step-through various steps/widgets or used as page indicators in an application.
Description #
A number of applications require to show steps to its users, for example, an app surveying its users require to display the step that the user is on while the user is filling up the survey form. This is where im_stepper comes into play with easy to use stepper widgets that may find its uses in myriad applications.
Simply import package:im_stepper/stepper.dart
and choose any of the following
steppers appropriate for your application:-
Table of Contents #
IconStepper #
A simple to use icon stepper widget, wherein, each icon defines a step. Hence, total number of icons define total number of steps. Primarily designed to show steps as icons.
IconStepper - Usage Note #
-
Important: IconStepper
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. Same applies for the vertical IconStepper. -
IconStepper fires the
onStepReached(int index)
callback, which provides the index of the Step that is reached. This callback can be used to control the widget that appears when a certain step is reached. -
To customize the color, border, etc. of an IconStepper, simply wrap it inside a Container and specify the
decoration
argument. -
To enable validation before the next step is reached, set the
steppingEnabled
property to an appropriate value in aStatefulWidget
. -
Github issues #3 and #4 stand resolved. To control the IconStepper, ImageStepper, or the NumberStepper by using buttons etc from outside the stepper, use the
Foo.externallyControlled()
constructor and callgoNext
andgoPrevious
controlled by two variables in aStatefulWidget
within asetState
call. For further information see example here
ImageStepper #
A simple to use image stepper widget, wherein, each image defines a step. Hence, total number of images define total number of steps. Primarily designed to show steps as images.
ImageStepper - Usage Note #
- Usage Note - See IconStepper Usage Note.
DotStepper #
A simple and smooth dot stepper widget with built-in animations. Each dot in a DotStepper represents a step.
Available Shapes #
Shapes | Demo |
---|---|
Circle | |
Square | |
Rounded Rectangle | |
Line |
Available Effects #
Effect | Demo |
---|---|
Trail | |
Slide | |
Magnify | |
Worm | |
Flat | |
Bullet | |
Jump |
DotStepper - Usage Note #
- Important: It is important that a call to
goNext
andgoPrevious
is controlled by two variables in aStatefulWidget
with a call tosetState
in order for the DotStepper to work. Please look at the Example.
NumberStepper #
A simple to use number stepper widget, wherein, each number defines a step. Hence, total count of numbers define total number of steps. Primarily designed to show steps as numbers.
NumberStepper - Usage Note #
- Usage Note - See IconStepper Usage Note.
Feedback #
For any feedback please file an issue here.
Please Like to support!