How to Create an Animated Determinate Circular Progress Indicator?

user_7883681 0
Viewed 5138

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),
)
flutter animation
1 Answers

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

user_65529400
Related