Improve performance of Pesto hero animation (#5182)

Previously we were resizing a paragraph of text during the animation. Now we
animate the text and the image separately. Also, add a default hero tag for
FloatingActionButton so that it animates as part of the hero transition as
well.

examples/flutter_gallery/lib/demo/pesto_demo.dart

@@ -232,13 +232,14 @@ class _RecipeCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return new GestureDetector(
       onTap: onTap,
-      child: new Hero(
-        tag: recipe.imagePath,
       child: new Card(
         child: new Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
-              new Image.asset(recipe.imagePath, fit: ImageFit.contain),
+            new Hero(
+              tag: recipe.imagePath,
+              child: new Image.asset(recipe.imagePath, fit: ImageFit.contain)
+            ),
             new Flexible(
               child: new Row(
                 children: <Widget>[
@@ -264,7 +265,6 @@ class _RecipeCard extends StatelessWidget {
           ]
         )
       )
-      )
     );
   }
 }
@@ -327,21 +327,23 @@ class _RecipePageState extends State<_RecipePage> {
     Size screenSize = MediaQuery.of(context).size;
     bool fullWidth = (screenSize.width < _kRecipePageMaxWidth);
     const double fabHalfSize = 28.0;  // TODO(mpcomplete): needs to adapt to screen size
-    return new Hero(
+    return new Stack(
+      children: <Widget>[
+        new Positioned(
+          top: 0.0,
+          left: 0.0,
+          right: 0.0,
+          child: new Hero(
             tag: config.recipe.imagePath,
-      child: new Container(
-        decoration: new BoxDecoration(
-          backgroundColor: Theme.of(context).canvasColor,
-          backgroundImage: new BackgroundImage(
-            image: new AssetImage(config.recipe.imagePath),
-            alignment: FractionalOffset.topCenter,
+            child: new Image.asset(
+              config.recipe.imagePath,
               fit: fullWidth ? ImageFit.fitWidth : ImageFit.cover
             )
+          )
         ),
-        align: FractionalOffset.bottomCenter,
-        child: new Block(
-          children: <Widget>[
-            new Padding(
+        new ScrollableViewport(
+          child: new RepaintBoundary(
+            child: new Padding(
               padding: new EdgeInsets.only(top: _getAppBarHeight(context)),
               child: new Stack(
                 children: <Widget>[
@@ -362,9 +364,9 @@ class _RecipePageState extends State<_RecipePage> {
                 ]
               )
             )
-          ]
           )
         )
+      ]
     );
   }
 

packages/flutter/lib/src/material/floating_action_button.dart

@@ -17,6 +17,7 @@ import 'tooltip.dart';
 // http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
 const double _kSize = 56.0;
 const double _kSizeMini = 40.0;
+final Object _kDefaultHeroTag = new Object();
 
 /// A material design floating action button.
 ///
@@ -46,6 +47,7 @@ class FloatingActionButton extends StatefulWidget {
     @required this.child,
     this.tooltip,
     this.backgroundColor,
+    this.heroTag,
     this.elevation: 6,
     this.highlightElevation: 12,
     @required this.onPressed,
@@ -66,6 +68,11 @@ class FloatingActionButton extends StatefulWidget {
   /// Defaults to the accent color of the current theme.
   final Color backgroundColor;
 
+  /// The tag to apply to the button's [Hero] widget.
+  ///
+  /// Defaults to a tag that matches other floating action buttons.
+  final Object heroTag;
+
   /// The callback that is called when the button is tapped or otherwise activated.
   ///
   /// If this is set to null, the button will be disabled.
@@ -124,7 +131,9 @@ class _FloatingActionButtonState extends State<FloatingActionButton> {
       );
     }
 
-    return new Material(
+    return new Hero(
+      tag: config.heroTag ?? _kDefaultHeroTag,
+      child: new Material(
         color: materialColor,
         type: MaterialType.circle,
         elevation: _highlight ? config.highlightElevation : config.elevation,
@@ -137,6 +146,7 @@ class _FloatingActionButtonState extends State<FloatingActionButton> {
             child: result
           )
         )
+      )
     );
   }
 }