imujtaba8488/package_im_stepper

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

Syed Mujtaba Nazki [imujtaba8488]

💻 Senior Software Engineer

👋 Hi,

I'm a result-driven & accomplished Software Engineer, effective leader and team player with exceptional analytical and critical thinking skills and the important ability to solve complex problems.

⚙️ Tech Stack

               

🛠 Tools

           

Flutter State Management

• Provider
• Riverpod
• Bloc
• GetX
• ScopedModel

Recent Flutter Packages

• im_stepper: A growing collection of stepper and page indicator widgets.
• im_animations: A growing collection of cool, elegant, efficient and performance-optimized animation widgets.
• country_currency_chooser: A simple yet powerful, elegant, customizable, and efficient currency chooser dialog with search support.
• im_avatar: A simple to use avatar widget, with support for selecting a new avatar. The avatar shape can be set to circular or square.
• im_shelf: A simple and elegant widget to display content such as an image within an animated closable shelf.
• login_systems: A collection of LoginSystems ready to be used as widgets.

📝 Articles

• Darts' Null Safety
• Beautiful Page Indicators and Steppers with the im_stepper package
• Flutter CustomPainter — Part #1?
• Flutter CustomPainter — Part #2?

Connect with me

😆 Programming jokes

package_im_stepper's Issues

Error: The getter 'accentColor' isn't defined for the class 'ThemeData'

../../.pub-cache/hosted/pub.dev/flutter_form_bloc-0.20.6/lib/src/stepper/stepper.dart:283:23: Error: The getter 'accentColor' isn't defined for the class 'ThemeData'.

• 'ThemeData' is from 'package:flutter/src/material/theme_data.dart' ('../../Documents/flutter/packages/flutter/lib/src/material/theme_data.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'accentColor'.
  ? themeData.accentColor
  ^^^^^^^^^^^
  Target kernel_snapshot failed: Exception

FAILURE: Build failed with an exception.

/******** in stepper.dart line number 283 need to change accentColor in _circleColor method getting issues because of this unable to run the app ***/
Color _circleColor(int index) {
final ThemeData themeData = Theme.of(context);
if (!_isDark()) {
return widget.steps[index].isActive
? themeData.primaryColor
: Colors.black38;
} else {
return widget.steps[index].isActive
? themeData.accentColor
: themeData.backgroundColor;
}
}

put custom images instead icons?

Hi,

It is possible to put custom images from assets on list on icons?

Thanks,

ImageStepper not able to set image size and background

Hey, tried turning my images into icons, but couldn't get them to look how i want.
Instead chose to use image stepper, but am not able to size the png image to fit the step radius, even if i increase the step raidus size, the image scales the same. Also there's a blue background that am not setting, wondering if I'm using this component the wrong way. thanks.

 ImageStepper(
              stepColor: Color(0xFFFBF7F1),
              activeStepColor: Color(0xFFFFC56E),
              activeStepBorderColor: Colors.white,
              lineColor: Color(0xFF7E7E7A),
              lineDotRadius: 2,
              stepRadius: 30,
              images: [
                AssetImage(
                  "assets/icons/3.0x/bottle_icon.png",
                ),
                AssetImage(
                  "assets/icons/3.0x/drop_icon.png",
                ),
                AssetImage(
                  "assets/icons/3.0x/treatment_icon.png",
                ),
              ],
            ),

for reference here are the pngs; you'll have to squint to see them as they are small and transparent;

DotStepper animations janky when jumping more than one dot

I tried 3 animation jump, worm and magnify. All of them with 4 dots only, when jumping over 2 dots meaning from first to last dot I see middle dots showing some milliseconds of the animation, it is especially visible when animating with magnify. the worm animation is going crazy.
dots1.webm
dots2.webm

Flutter 3.0 Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.

How to Recall initState method from Back action

I have 5 Screen (Page 1, Page 2, Page 3, Page 4, Page 5) and Main Screen (This is the root for handler stepper).

And then I have flowed like this (next):
Page 1 -> Page 2 -> Page 3 -> Page 4 -> Page 5 => This is will execute / run / call initState method.

But how if we back from Page 5 to Page 1?
Page 5 -> Page 4 -> Page 3 -> Page 2 -> Page 1 => The initState method is not run again from back.

Sample Code:

class _ProposalAddScreenState extends State<ProposalAddScreen> {
  ...

  static const _defaultTextCount = '1/-';
  int _currentStep = 0;
  int _countStep = 5;
  String _textButtonNext = Modular.get<LanguageKeys>().next.tr();
  String _textCount = _defaultTextCount;
  bool _firstPage = true;

  ...

  void _back() {
    // How to recall initState if back to prev Page?
    if (_currentStep == FlagPageProposal.dataInsurance) {
      setState(() {
        _currentStep--;
        _textCount = _defaultTextCount;
        _firstPage = true;
      });
    } else {
      setState(() {
        _currentStep--;
        _textCount = '${_currentStep + 1}/$_countStep';
        _textButtonNext = _languageKeys.next.tr();
      });
    }
  }


  void _validate(bool isFromNextButton) {
   .....
  }

  ...

  @override
  void initState() {
    super.initState();
    ...
  }

  @override
  Widget build(BuildContext context) {
    return MultiBlocListener(
      listeners: [
        ...
      ],
      child: Scaffold(
        key: _scaffoldGlobalKey,
        backgroundColor: _colorPalettes.white,
        appBar: CustomAppBar(
          ...
        ),
        body: Stack(
          children: [
            Padding(
              padding: EdgeInsets.only(left: 16.0, bottom: 16.0, right: 16.0),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      DotStepper(
                        dotCount: _countStep,
                        activeStep: _currentStep,
                        dotRadius: 6,
                        shape: Shape.circle,
                        spacing: 5,
                        indicator: Indicator.worm,
                        onDotTapped: (tappedDotIndex) {
                          setState(() {
                            _currentStep = tappedDotIndex;
                          });
                        },
                        fixedDotDecoration: FixedDotDecoration(
                            color: Colors.transparent,
                            strokeColor: _colorPalettes.accentColor,
                            strokeWidth: 1),
                        indicatorDecoration: IndicatorDecoration(
                          color: _colorPalettes.accentColor,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 8.0),
                        child: Text(
                          _textCount,
                          style: textNormalColor(_colorPalettes.accentColor),
                        ),
                      ),
                    ],
                  ),
                  Expanded(
                    child: _page(),
                  ),
                ],
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                children: [_previousButton(), _nextButton()],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _page() {
    if (_currentStep == FlagPageProposal.dataPersonal) {
      return Page1();
    } else if (_currentStep == FlagPageProposal.dataInsurance) {
      return Page2();
    } else if (_currentStep == FlagPageProposal.fund) {
      return Page3();
    } else if (_currentStep == FlagPageProposal.topup) {
      return Page4();
    } else if (_currentStep == FlagPageProposal.rider) {
      return Page5();
    } else {
      return SizedBox();
    }
  }

  Widget _previousButton() {
    return Expanded(
      child: SquareButton(
        text: _languageKeys.back.tr(),
        color: _colorPalettes.accentColor,
        onPressed: _firstPage ? null : () => _back(),
      ),
    );
  }

  Widget _nextButton() {
    return Expanded(
      child: SquareButton(
        text: _textButtonNext,
        onPressed: () => _validate(true),
      ),
    );
  }
}

write on line and under pic

hello I am trying to add text on dots line and under the pic any hint or way to make it in good way

Unable to make it take as much horizontal space as possible

Am not able to make number stepper take as much horizontal space possible depending on the orientation. The stepper width remains fixed either way.

Not Conpitable with Flutter 3.0.0

This package is not compatible for flutter v3.0.0

../../.pub-cache/hosted/pub.dartlang.org/im_stepper-0.1.3/lib/src/first_stepper/core/base_stepper.dart:169:51: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.

• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../development/flutter/packages/flutter/lib/src/widgets/binding.dart').
  if (!widget.scrollingDisabled) WidgetsBinding.instance!.addPostFrameCallback(_afterLayout);

NumberStepper throws an unhandled Exception

I have placed NumberStepper in a TabBarView and when I switch to the other tab, exception is throw with the following message

Unhandled Exception: 'package:flutter[/src/widgets/scroll_controller.dart]()': Failed assertion: line 153 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.
I tried to debug the issue. Found that the problem can be solved by adding a check to _BaseStepperState State in _afterLayout function by wrapping the animateTo function inside an if condition which is

if (_controller.hasClients) {
   _controller.animateTo(
   ...
 }

NumberStepper current step change dynamically

trying to use NumberStepper with a form with validation and cannot find away to change current sctive step dynamicaly

Previous button icon

setting previous button icon is not working, while next button icon is setting in both

BUG: activeStep ignores initial value

When I initialize the DotStepper with activeStep set to an initial value, it ignores the value I provided completely and renders the first dot as active. Only when I hit hot reload the widget updates and activates the correct dot.

Couldn't set icons center position

I cannot set center position. I this support only mobile view

Animation wrong direction when stepping back in DotStepper.activeStep controlled Widget

When stepping backwards (i.e. activeStep--) the animation goes in the wrong direction.

See screen recording:

Option to set initial step

I tried to find option to set initial step in the stepper but couldn't find it.
Can you please provide initial attribute, so that one can set initial step different from step 0.

DotStepper.externallyControlled

Hi iMujtaba,

It would be great to get DotStepper.externallyControlled and the ability to use any State Management to change the step e.g. I use GetX.

Cheers

Data lost on moving from page to page

hi,

This is a very good package and is providing solution to all the UI problems occurring with conventional flutter stepper. In my project on moving for one page to another while creating a stepper form, the data in previous page is lost while going to previous page. Will you please help in solving the issue.

Just like you have provided the example to manage Ui in your page, It will be helpful if you provide a functioning example with 3 step form and submitting with validation.

thankyou.

Disable nav buttons

I want to show only the steppers and hide the nav buttons because they do the same thing

Proposition : Add spacing option for DotStepper

I'd like to change the spacing between the dots in DotStepper but there is no way to do that.
Could you add it, it would be great !
Thank you for your work it is really helpful !

Add validation to go to next step - [Mohamed Elyamani]

I need to call "onStepReached" outside stepper ex: I have a form in each step and I want to click on flat button in the form to validate the form and then go to the next step after validation.

Regards
Mohamed Elyamani

Stepper Slide Animation Doesn't Work

When upgraded to 0.1.2+10, pressing next or previous button the animation don't follow the steps, like showed:

animation_bugged_.0.1.2+10.mp4

PS: maybe property Alignment is related to the problem?

Failed assertion: line 243 pos 14: 'notification.metrics.axis == widget.axis': is not true.

Thanks for the amazing library.

I have this problem, where I keep getting the error in the title every time the page with the stepper opens, and the stepper tries to scroll vertically even though there are no more icons, I know this because it does the same effect as when trying to scroll a page that cant be further scrolled down (the blue shape at the end of the page shows up)

This is my stepper:

                IconStepper(
                stepRadius: 20,
                icons: const [
                  Icon(Icons.question_mark),
                  Icon(Icons.description),
                  Icon(Icons.list),
                  Icon(Icons.person),
                  Icon(Icons.done)
                ],
                enableStepTapping: true,
                enableNextPreviousButtons: false,
                activeStepColor: HexColor("#d4c4ca"),

                // activeStep property set to activeStep variable defined above.
                activeStep: activeStep,

                // This ensures step-tapping updates the activeStep.
                onStepReached: (index) {
                  setState(() {
                    activeStep = index;
                  });
                },
              ),

Can't customize active step text style in NumberStepper

Any idea how I can achieve that?

Remove prev e next in top navigation

Hi, thanks for the package.
Can I remove the "prev" and "next" arrows at the top before and after the icons?
Thanks.

Commit 1f715dfffd22373ea65bba85fc9471e549b85d6b in master branch doesn't increment version number

The current version on pub.dev is a master with commit e9b48c9, while the latest commit in master is 1f715df. Both commits have version 1.0.1+1
The current master breaks old functionality as IconStepper's interface has changed.

Step validation inputs

I had added this:
class _MyStepperState extends State<MyStepper> { **final steppingEnabled = true;**
But validation is ignored...

This is a field in first page of steps.
TextFormField( validator: (value) { return 'Error'; }, )

Iconstepper with externalControl and tapping

Please can you also provide direct navigation via "tapping" for the constructor IconStepper.externallyControlled? Otherwise there is no way to control certain steps directly.

is it possible to add straight lines insted of doted lines?

how to add straight lines with thickness?

New Feature: Text under icon

Is it possible to have text under icon?

RangeError (index): Index out of range: no indices are valid: 0

working perfectly on Andriod and IOS but on Web give this
RangeError (index): Index out of range: no indices are valid: 0

Why minimum of the dotRadius is 6 not 0?

I want to create a small dot but I can't change the dot radius low than 6. When I am using the dot radius with a value that low than 6 the program will show an error below.

New Feature: Change and Select the step icon colors whether the step is complete, active or incomplete, animate the selected icon in the middle

I had implemented the these 2 new features.

if you want i can contribute and add those features in the main plugin.

How can i update the icons of icon-stepper after navigation with buttons outside of the stepper?

Explanation:
I use a column with the stepper, a content area and a navigation on the bottom with buttons (forward, backward). How can I update the stepper so that it marks the current icon after navigation?

How show a step as completed

after flutter upgrade i'm getting error: Error: Method not found: 'NumberStepper.externallyControlled'

after flutter upgrade i'm getting error: Error: Method not found: 'NumberStepper.externallyControlled'
also upgraded im_stepper to 0.1.3

Animation Repetition in NumberStepper

Please advise on how to remove the animation blinking every second.

• Flutter latest version
• Dart latest version

Screen.Recording.2021-01-08.at.10.29.09.AM.mov

Next and prev button is floating over the soft keyboard

when i use textfield as input , and try to write some thing , next and previous button come over the keyboard

.

nullsafe version?

I'm using im_stepper but cannot upgrade my app to null safety. Will there be a nullsafe version of im_stepper ?

How to add space between the line-connector and the fixed-dot?

Now, I created the stepper like this below.

But my work looks like this below.

I think the DotStepper has the property that should create.

1. The gap between the line connector and the fixed dot creates space.

Like this:

Row(
  children: [
    SizedBox(width: gap),
    lineConnectorWidget(),
    SizedBox(width: gap),
  ],
),