title: Animate ListView item to full screen in Flutter
body: <p>I would like to have my list items perform <a href="https://material.io/design/navigation/navigation-transitions.html#hierarchical-transitions" rel="noreferrer">this animation</a> (<a href="https://material.io/design/assets/0B8wSqcLwbhFubWY5ZWNxNjJBVEE/hierarchicaltransitions-1-spec.mp4" rel="noreferrer">mp4</a>) when tapped. I tried using <code>AnimatedCrossFade</code> but it requires its two children to be at the same level, e.g. the detail view cross-fades with the ListView not the tapped item. In fact it seems a <code>Hero</code> animation is the only one that can animate across widgets. </p>
  
  <p>I'm having trouble using Hero. Should it wrap the list item? Does it matter if the Widget subtree is significantly different in the Hero source/destination? Also, can Hero animations be used with <code>LocalHistoryRoute</code>s or <a href="https://flutter.io/animations/staggered-animations/" rel="noreferrer">staggered animations</a>?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>It's now looking like what I need to do is use an <code>Overlay</code>, the hard part there is that I need to add the selected item to the overlay at the same position on screen where it was tapped, then the animation part would be easy. Possibly of use here is a target/follower pattern e.g. <a href="https://docs.flutter.io/flutter/widgets/CompositedTransformTarget-class.html" rel="noreferrer"><code>CompositedTransformTarget</code></a></p>