title: Flutter RotationTransition on Navigate with a half spin
body: <p>In my app I'm trying to animate the leading appbar icon to spin when the user navigates to another page. Basically I'm trying to create exactly the same animation as in <a href="https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B3T7oTWa3HiFcHBDaTlreHdVZGc%2Fitem-selection-selecting-items.mp4" rel="nofollow noreferrer">this video</a> from the material design specification.</p>
  
  <p>I managed to make the icon spin on navigation, using a <code>Hero</code> with a <code>RotationTransition</code>. Currently, however, the icon is spinning a whole circle. I'm quite sure I have to provide another <code>Animation&lt;double&gt;</code> to the <code>turns</code> parameter of <code>RotationTransition</code>, but I got lost in AnimationControllers and vsyncs.</p>
  
  <p>How do I make the icon spin a half circle? And how to control the spinning speed/duration?</p>
  
  <p>BTW. If there is an easier way to make the icon spin on navigation, suggestions are welcome. Also, in the video, on forward and back navigation the icon spins to the same side. Is that possible, using <code>Navigator.pop()</code>?</p>
  
  <p>Sample code:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          leading: Hero(
            tag: "mytag",
            child: IconButton(
              icon: Icon(Icons.menu),
              onPressed: null,
            ),
            // Magic happens here
            flightShuttleBuilder: (
              BuildContext flightContext,
              Animation&lt;double&gt; animation,
              HeroFlightDirection flightDirection,
              BuildContext fromHeroContext,
              BuildContext toHeroContext,
            ) {
              return RotationTransition(
                turns: animation,
                child: Material(
                  color: Theme.of(context).primaryColor,
                  shadowColor: Theme.of(context).accentColor,
                  shape: CircleBorder(),
                  child: toHeroContext.widget
                ),
              );
            },
          ),
        ),
        body: Center(
          child: RaisedButton(
            child: Text("To second"),
            onPressed: () {
              Navigator.of(context).push(
                PageRouteBuilder(
                  pageBuilder: 
                    (context, animation, secondaryAnimation) =&gt; SecondPage()
                )
              );
            },
          ),
        )
      );
    }
  
  }
  
  class SecondPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          leading: Hero(
            tag: "mytag",
            child: IconButton(
              icon: Icon(Icons.clear),
              onPressed: null,
            ),
          ),
        ),
        body: Center(
          child: RaisedButton(
            child: Text("To first"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        )
      );
    }
  }
  </code></pre>