title: How to animate a circle that gradually grows to fill the background of a widget?
body: <p>I'm new to Flutter, and working on a quiz app with multiple-choice questions. Each possible answer is rendered as a <code>ListTile</code> widget:</p>
  
  <pre><code>return ListTile(
    title: Text(answer),
    onTap: hasAnswered ? () { _answer(answer); } : null,
  );
  </code></pre>
  
  <p>Now when the user chooses an answer, I want to highlight the correct answer in green. Easy enough, we wrap it in a <code>Container</code>:</p>
  
  <pre><code>return Container(
    color: isCorrectAnswer ? Colors.green : null,
    child: ListTile(
      title: Text(answer),
      onTap: hasAnswered ? () { _answer(answer); } : null,
    ),
  );
  </code></pre>
  
  <p>The next step is to animate this background, making it appear gradually. <strong>I would like it to grow as a circle, starting at the center of the <code>ListItem</code> and growing outwards until it covers the entire widget, much like Material's own ink ripples.</strong></p>
  
  <p>I haven't quite figured out Flutter's animation framework, but before I do, let's render a circle of a fixed size. Easy peasy:</p>
  
  <pre><code>return Container(
    decoration: isCorrectAnswer ?
      BoxDecoration(shape: BoxShape.circle, color: Colors.green) :
      null,
    child: ListTile(
      title: Text(answer),
      onTap: hasAnswered ? () { _answer(answer); } : null,
    ),
  );
  </code></pre>
  
  <p>Now the circle fits snugly between the top and bottom edge of the widget. How do I control the size of this circle? There's no way to set the radius of <code>BoxShape.circle</code>; according to the docs, "The diameter of the circle is the shortest dimension of the box, either the width or the height, such that the circle touches the edges of the box."</p>
  
  <p>My next thought was to use a radial gradient:</p>
  
  <pre><code>return Container(
    decoration: isCorrectAnswer ?
      BoxDecoration(
        shape: BoxShape.rectangle,
        gradient: RadialGradient(
          radius: 0.5,
          colors: [color, color, Colors.transparent],
          stops: [0.0, 1.0, 1.0],
        ),
      ) :
      null,
    child: ListTile(
      title: Text(answer),
      onTap: hasAnswered ? () { _answer(answer); } : null,
    ),
  );
  </code></pre>
  
  <p>This lets me control the <code>radius</code>. But again, the radius is relative to the <em>shortest</em> edge of the widget, so how do I know the radius I should use as the end point of my animation? Sure, I could just animate <code>radius</code> from 0.0 to some large value like 10.0, but this is hacky and the animation is not going to ease out properly.</p>
  
  <p>I tried to set <code>radius: 0.5 * context.size.longestSide / context.size.shortestSide</code>, which should exactly cover the widget. But this gives an error because I'm not allowed to access <code>size</code> during build.</p>
  
  <p>I've also looked at the <code>Ink</code>, <code>InkWell</code>, <code>InkRipple</code>, <code>InkFeature</code> and <code>InkResponse</code> classes to see if I could somehow leverage Material's own ripple drawing code, but I can't seem to find out how to trigger it manually.</p>
  
  <p>So how do I create this effect in such a way that I can animate the radius nicely from zero to half the length of the diagonal of the widget?</p>