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

【问题标题】：How to Create an Animated Determinate Circular Progress Indicator?如何创建动画确定循环进度指示器？
【发布时间】：2020-05-12 16:24:01
【问题描述】：

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

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

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

【问题讨论】：

要使其具有动画效果，您必须随着时间的推移定期更改值，它可能从 0 开始，每 100 毫秒增加 0.1 直到达到 0.5。

标签： flutter animation

【解决方案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 对动画进行更多控制

【讨论】：

【解决方案2】：

使用确定。确定进度指标在每个时间点都有一个特定的值，该值应该从 0.0 到 1.0 单调递增，此时指标完成。要创建确定的进度指示器，请使用介于 0.0 和 1.0 之间的非空值。

这个例子展示了一个具有变化值的 CircularProgressIndicator

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    )..addListener(() {
      setState(() {});
    });
    controller.repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'Linear progress indicator with a fixed color',
              style: Theme.of(context).textTheme.headline6,
            ),
            CircularProgressIndicator(
              value: controller.value,
              semanticsLabel: 'Linear progress indicator',
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：