title: Flutter Animation Not Fading (It's Blinking)
body: <p>I'm following along with the the animation tutorial on <code>flutter</code> here: <a href="https://flutter.io/tutorials/animation/#animationcontroller" rel="nofollow noreferrer">https://flutter.io/tutorials/animation/#animationcontroller</a>, and I'm trying to get an icon to fade in and out between purple and orange. Unfortunately all I've managed to do is get an icon to <em>blink</em> which seems very frustrating as that is not how the <code>ColorTween</code> class is defined. From the docs: </p>
  
  <blockquote>
    <p>We recommend that you do not pass Colors.transparent as begin or end
    if you want the effect of fading in or out of transparent. Instead
    prefer null. Colors.transparent refers to black transparent and thus
    will fade out of or into black which is likely unwanted.</p>
  </blockquote>
  
  <p><a href="https://docs.flutter.io/flutter/animation/ColorTween/ColorTween.html" rel="nofollow noreferrer">https://docs.flutter.io/flutter/animation/ColorTween/ColorTween.html</a></p>
  
  <p>I infer this to mean that fading comes "out of the box". However, I have tested this with a <code>CurvedAnimation</code> class as well, and it still blinks. I've also tested with a text box, thinking that somehow the fact that it was loading an icon may be messing it up. However, the text value also blinks between orange and purple. In the code below I have it reversing the animation - I also tried ripping that out but that is not affecting the blinking. I'm thinking it may have <em>something</em> to do with how I'm setting state, but I'm not sure.</p>
  
  <p>My main tutorial example I am trying to base the below code off of comes from here: <a href="https://raw.githubusercontent.com/flutter/website/master/_includes/code/animation/animate3/main.dart" rel="nofollow noreferrer">https://raw.githubusercontent.com/flutter/website/master/_includes/code/animation/animate3/main.dart</a>.</p>
  
  <p>Please see the code below for my implementation. Any advice would be very much appreciated.</p>
  
  <pre><code>class CloudAnimation1 extends StatefulWidget {
  
    @override
    CloudAnimation1State createState() =&gt; new CloudAnimation1State();
  }
  
  class CloudAnimation1State extends State&lt;CloudAnimation1&gt; with SingleTickerProviderStateMixin {
  
    Animation&lt;Color&gt; animation;
    AnimationController controller;
  
    initState() {
      super.initState();
      controller = new AnimationController(
          duration: const Duration(milliseconds: 1000), vsync: this);
      final Animation curve = new CurvedAnimation(parent: controller, curve: Curves.easeOut);
      animation = new ColorTween(begin: Colors.orange, end: Colors.purple).animate(curve);
  
  
      animation.addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
        setState(() {
          // the animation object’s value is the changed state
        });
      });
      controller.forward();
    }
  
    @override
    Widget build(BuildContext context) {
      return new Container(
        child: new Row(
          children: &lt;Widget&gt;[
            new Text("hello there sailor",
                style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 25.0, color: animation.value)),
            new Icon(FontAwesomeIcons.cloud, color: animation.value, size: 40.0)
          ],
        ),
      );
    }
  
    dispose() {
      controller.dispose();
      super.dispose();
    }
  
  }
  </code></pre>