在Flutter中实现确定的CircularProgressIndicator？

Question

我理解如何实现不确定的进度指示器，但是如何在特定的持续时间内实现与动画相关的确定指标？

示例代码：

double _barValue = 1.0;

_animation = Tween(
    begin: 1.0,
    end: 0.0,
).animate(animationController)
    ..addListener(() {
        setState(() {
            _barValue = _animation.value;
        });
    });

CircularProgressIndicator(
    value: _barValue,
    // colorValue: <-- how do you implement this??
    backgroundColor: tangerine.withAlpha(100),
),

Answer 1

如果您希望它随着栏的进展而改变颜色，请使用如下所示的内容。此示例将使用与示例中的进度相同的值从0％的蓝色淡化为100％的红色：

    AnimationController _colorAnimationController = AnimationController(vsync: this);

    Animation<Color> _colorAnimation = ColorTween(
        begin: Colors.blue,
        end: Colors.red,
    ).animate(
      _colorAnimationController
    );

    _colorAnimationController.value = _barValue;

    ...

    CircularProgressIndicator(
      value: _barValue,
      valueColor: _colorAnimation,
    ),

如果你想让它改变某种模式中的颜色与进度分开，只需设置AnimationController并像运行任何其他动画一样运行它。

如果您只想将值覆盖为特定颜色：

    CircularProgressIndicator(
      value: val,
      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
    ),