CODEWITHSUNDEEP
flutteranimation
Tayan
Tayan

Reputation: 2317

How to Create an Animated Determinate Circular Progress Indicator?

How to create something like that in Flutter:

enter image description here

I tried the following code, but it's drawn without being animated.

CircularProgressIndicator(
  value: 0.50,
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation(Colors.pink),
)

Upvotes: 18

Views: 12273

Answers (1)

user6552940
user6552940

Reputation: 986

You can use an ImplicityAnimatedWidget such as TweenAnimationBuilder

Example:

This will animate over 3.5 seconds and the progress will start from 0% to 100%, you can tweak those in the begin:, end: parameters

TweenAnimationBuilder<double>(
    tween: Tween<double>(begin: 0.0, end: 1),
    duration: const Duration(milliseconds: 3500),
    builder: (context, value, _) => CircularProgressIndicator(value: value),
)

You can also use AnimatedBuilder to take more control over the animation

Upvotes: 34

Related Questions