如何创建动画确定的圆形进度指示器？

Question

如何在 Flutter 中创建类似的东西：

我尝试了以下代码，但它是在没有动画的情况下绘制的。

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

Answer 1

您可以使用ImplicityAnimatedWidget例如TweenAnimationBuilder

例子：

这将动画超过 3.5 秒，进度将从 0% 开始到 100%，您可以在begin:,end:参数中调整这些

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

您还可以使用AnimatedBuilder来更好地控制动画