时间戳

首页 > 解决方案 > 如何创建动画确定循环进度指示器？

flutter - 如何创建动画确定循环进度指示器？

问题描述

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

在此处输入图像描述

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

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

标签： flutteranimation

解决方案

您可以使用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对动画进行更多控制

推荐阅读