title: How to animate progressbar color with Flutter
body: <p>I tried to create an animated progressbar where the progress is filling up animatedly and also it changes it's color depending on the final value of the progress.
  The first part is working properly, but I can't figure out what is wrong with the color animation. What am I missing?</p>
  
  <p>I used <a href="https://pub.dev/packages/flutter_rounded_progress_bar" rel="nofollow noreferrer">flutter_rounded_progress_bar</a> for displaying the progress bar.</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:flutter_rounded_progress_bar/flutter_rounded_progress_bar.dart';
  import 'package:flutter_rounded_progress_bar/rounded_progress_bar_style.dart';
  
  class MyLinearProgressIndicator extends StatefulWidget {
    final double currentProgress;
    final double height;
    final Color foregroundColor;
    final int duration = 500;
  
    MyLinearProgressIndicator({
      this.currentProgress,
      this.height = 5,
      this.foregroundColor = const Color(0xFFde8405)});
  
    @override
    _LinearProgressIndicatorState createState() =&gt;
      _LinearProgressIndicatorState();
    }
  
  class _LinearProgressIndicatorState extends State&lt;MyLinearProgressIndicator&gt; with 
  SingleTickerProviderStateMixin {
    AnimationController progressController;
    Animation&lt;double&gt; animation;
    Animation&lt;Color&gt; colorAnimation;
    CurvedAnimation curve;
  
    @override
    void initState() {
      super.initState();
      progressController = AnimationController(vsync: this, duration: Duration(milliseconds: widget.duration));
  
    curve = CurvedAnimation(parent: progressController, curve: Curves.ease);
  
    animation =
      Tween&lt;double&gt;(begin: 0, end: widget.currentProgress).animate(curve)
        ..addListener(() {
          setState(() {});
        });
    Color endColor;
    if (widget.currentProgress &lt;= 30) {
      endColor = const Color(0xFFFF0000);
    } else if (widget.currentProgress &lt;= 50) {
      endColor = const Color(0xFF00FF00);
    } else {
      endColor =const Color(0xFF0000FF);
    }
    colorAnimation =
      ColorTween(begin: widget.foregroundColor, end: endColor).animate(curve)
        ..addListener(() {
          setState(() {});
        });
  
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      progressController.forward();
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Row(
      children: &lt;Widget&gt;[
        Padding(
          padding: const EdgeInsets.only(right: 16.0),
          child: Text("${widget.currentProgress.floor()}%",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 12,
                color: Color(0xFF333333))),
        ),
        Container(
          height: widget.height,
          width: 100,
          child: RoundedProgressBar(
            milliseconds: widget.duration,
            height: widget.height,
            style: RoundedProgressBarStyle(
                borderWidth: 0,
                widthShadow: 0,
                colorProgress: colorAnimation.value,
                backgroundProgress: Color(0xFFEBEBEB)),
            percent: animation.value,
          )),
        ],
      );
    }
  
    @override
    void dispose() {
      progressController.dispose();
      super.dispose();
    }
  }
  </code></pre>