Add ability to animate change in steps.

[barapa]

trafficstars

[SandroMaglione]

Hi @barapa ,

What do you mean specifically? How would you like this feature to work? Could you give me some more details about what you had in mind?

[barapa]

For instance, entering a new step would animate the step from it's unselected size and color to it's selected size and color. Perhaps by the color changing in the directing of the step progress

[SandroMaglione]

Do you mean for instance that all the other steps should shrink while the new step is added? Like opening some space for the new step by moving/animating the others? Would you like to be able to use a custom Animation to customize the result?

[naamapps]

Hey @SandroMaglione, I think this is what he meant,

I would also like to have this feature, Please consider adding it to your package. Thanks for everything 👍

[SandroMaglione]

Hi @naamapps

I see. It is definitely possible to do it. I would like to make it as customizable as possible, using a user-defined Animation. I will work on it. It will probably take some time. I will keep you updated.

Thanks for the suggestion 👍

[desmeit]

there are some news? is it possible?

[JakeHadley]

Any updates here? Great package and would love to get this animation to work? Is it possible to do outside of the widget? Maybe with an animated container or something?

[desmeit]

Any chance to get this feature?

[hanancs]

It's not available right??

[danielRi]

I get some decent results using TweenAnimationBuilder:

TweenAnimationBuilder(
  duration: Duration(seconds: 1),
  curve: Curves.easeOutCubic,
  tween: Tween<double>(
    begin: 0.0,
    end: yourCurrentValue, // current, NOT max value
  ),
  child: const SizedBox.shrink(),
  builder: (_, value, __) {
    return StepProgressIndicator(
      totalSteps: 10000, // should be high value for smoother transitions
      currentStep: value.toInt(),
      // ...
    );
  },
);

yourCurrentValue can come from any BlocBuilder, ValueListenableBuilder or just set via setState etc.. depending on how you manage your state.

Caviats I discovered so far:

• It will animate from 0 to current value each time your page is reloaded. Its what I want but it may be not for you.

https://github.com/SandroMaglione/step-progress-indicator/assets/3048681/a05c8b22-3d5d-45dd-b1bb-92cb134377e0