CODEWITHSUNDEEP
dartflutter
Alec Sibilia
Alec Sibilia

Reputation: 956

Implementing a determinate CircularProgressIndicator in Flutter?

I understand how to implement an indeterminate progress indicator, but how would you implement a determinate indicator tied to an animation over a specific duration?

Example code:

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),
),

Upvotes: 1

Views: 1890

Answers (1)

greyaurora
greyaurora

Reputation: 907

If you want it to change colour as the bar progresses, use something like the below. This example will fade from blue at 0% to red at 100% using the same value as the progress in your example:

class _MyClassState extends State<_MyClass> with SingleTickerProviderStateMixin {
    AnimationController _colorAnimationController;

  @override
  void initState() {
    ...
    _colorAnimationController = AnimationController(vsync: this);
    ...
  }

  @override
  void dispose() {
    ...
    _colorAnimationController?.dispose();
    ...
  }

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


    // Use inside setState, for example
    _colorAnimationController.value = _barValue;

    ...

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

If you want it to change colours in some kind of pattern separate to the progress, just set the AnimationController up and run it as you would with any other animation.

If you just want to override the value to a specific colour:

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

Upvotes: 2

Related Questions