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

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 更好地控制动画