title: How to create a hero style animation on the same screen route with Flutter?
body: <p><a href="https://i.stack.imgur.com/rYJrO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rYJrO.png" alt="Mockup"></a></p>
  
  <p>I'm trying to create a dynamic animation described in the mockup above. What I need is:</p>
  
  <ul>
  <li>A round shape that will represent an avatar (user pic, for example);</li>
  <li>A text centered below it.</li>
  <li>Below those (that use half of the screen) is a scrollable <code>PageView</code>.</li>
  </ul>
  
  <p>The animation should be as the following:</p>
  
  <p><strong>Begin:</strong> In a <code>Stack</code> both centered at the begin.<br>
  <strong>Animation:</strong> Scaling down and sliding the text (with <strong>variable lenght</strong>) that must be to the right of the avatar.
  <strong><br>End:</strong> As the second image in the mockup. Side-to-side while the content below keeps scrolling.</p>
  
  <p>Thought in <code>SliverPersistentHeader</code> combined with <code>CustomMultiChildLayout</code> but the problem is that the text starts centered and ends align to the left and I can animate this dynamically. I was trying to remove the offset of the centered text in the end but it doesn't feel right. </p>
  
  <p>Any help or a sample only with this animation would be appreciate. Thank you. </p>