How to Create an Animated Determinate Circular Progress Indicator?

Question

How to create something like that in Flutter:

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

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

Answer 1

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