CODEWITHSUNDEEP
flutterdart
clooock
clooock

Reputation: 183

LinearProgressIndicator animation Flutter

I'm trying to create a page with a page slider carousel and a progress bar. When the carousel moves to another page I want that the progress bar updates from a value to another with an animation. I tried LinearProgressIndicator but I don't know how to set animation from the old value to new one. This is what I have

LinearProgressIndicator(
  minHeight: 2,
  value: currentPageIndex/(pages.length - 1)
)

currentPageIndex is updated with setState() method externally.

Is there any way to do it? Thanks in advance.

Upvotes: 15

Views: 14701

Answers (1)

JaffaKetchup
JaffaKetchup

Reputation: 1631

The 'recommended' way is to use TweenAnimationBuilder, which you can learn more about here. Essentially this is a simple animation that does not really need external controllers.

Take this code for example:

TweenAnimationBuilder<double>(
    duration: const Duration(milliseconds: 250),
    curve: Curves.easeInOut,
    tween: Tween<double>(
        begin: 0,
        end: <your-current-value>,
    ),
    builder: (context, value, _) =>
        LinearProgressIndicator(value: value),
),

You can change the duration of the animation and the curve of the animation. When you update your value, the progress indicator should automatically animate between the previous value and the new value!

Upvotes: 58

Related Questions