Improve `Hero` examples (#103095)

examples/api/lib/widgets/heroes/hero.0.dart

@@ -13,13 +13,8 @@ class HeroApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      home: Scaffold(
-        appBar: AppBar(title: const Text('Hero Sample')),
-        body: const Center(
-          child: HeroExample(),
-        ),
-      ),
+    return const MaterialApp(
+      home: HeroExample(),
     );
   }
 }
@@ -29,16 +24,16 @@ class HeroExample extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return Scaffold(
+      appBar: AppBar(title: const Text('Hero Sample')),
+      body: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
-        const SizedBox(
-          height: 20.0,
-        ),
+          const SizedBox(height: 20.0),
           ListTile(
-          leading: Hero(
+            leading: const Hero(
               tag: 'hero-rectangle',
-            child: _box(const Size(50, 50)),
+              child: BoxWidget(size: Size(50.0, 50.0)),
             ),
             onTap: () => _gotoDetailsPage(context),
             title: const Text(
@@ -46,14 +41,7 @@ class HeroExample extends StatelessWidget {
             ),
           ),
         ],
-    );
-  }
-
-  Widget _box(Size size) {
-    return Container(
-      width: size.width,
-      height: size.height,
-      color: Colors.blue,
+      ),
     );
   }
 
@@ -63,18 +51,28 @@ class HeroExample extends StatelessWidget {
         appBar: AppBar(
           title: const Text('Second Page'),
         ),
-        body: Center(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: <Widget>[
-              Hero(
+        body: const Center(
+          child: Hero(
             tag: 'hero-rectangle',
-                child: _box(const Size(200, 200)),
-              ),
-            ],
+            child: BoxWidget(size: Size(200.0, 200.0)),
           ),
         ),
       ),
     ));
   }
 }
+
+class BoxWidget extends StatelessWidget {
+  const BoxWidget({Key? key, required this.size}) : super(key: key);
+
+  final Size size;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size.width,
+      height: size.height,
+      color: Colors.blue,
+    );
+  }
+}

examples/api/lib/widgets/heroes/hero.1.dart

@@ -18,13 +18,8 @@ class HeroApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      home: Scaffold(
-        appBar: AppBar(title: const Text('Hero Sample')),
-        body: const Center(
-          child: HeroExample(),
-        ),
-      ),
+    return const MaterialApp(
+      home: HeroExample(),
     );
   }
 }
@@ -34,12 +29,17 @@ class HeroExample extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return Scaffold(
+      appBar: AppBar(title: const Text('Hero Sample')),
+      body: Column(
         children: <Widget>[
           ListTile(
             leading: Hero(
               tag: 'hero-default-tween',
-            child: _box(size: 50.0, color: Colors.red[700]!.withOpacity(0.5)),
+              child: BoxWidget(
+                size: const Size(50.0, 50.0),
+                color:Colors.red[700]!.withOpacity(0.5),
+              ),
             ),
             title: const Text(
               'This red icon will use a default rect tween during the hero flight.',
@@ -52,7 +52,10 @@ class HeroExample extends StatelessWidget {
               createRectTween: (Rect? begin, Rect? end) {
                 return MaterialRectCenterArcTween(begin: begin, end: end);
               },
-            child: _box(size: 50.0, color: Colors.blue[700]!.withOpacity(0.5)),
+              child: BoxWidget(
+                size: const Size(50.0, 50.0),
+                color:Colors.blue[700]!.withOpacity(0.5),
+              ),
             ),
             title: const Text(
               'This blue icon will use a custom rect tween during the hero flight.',
@@ -64,13 +67,7 @@ class HeroExample extends StatelessWidget {
             child: const Text('Tap to trigger hero flight'),
           ),
         ],
-    );
-  }
-
-  Widget _box({double? size, Color? color}) {
-    return Container(
-      color: color,
-      child: FlutterLogo(size: size),
+      ),
     );
   }
 
@@ -89,15 +86,15 @@ class HeroExample extends StatelessWidget {
                 createRectTween: (Rect? begin, Rect? end) {
                   return MaterialRectCenterArcTween(begin: begin, end: end);
                 },
-                child: _box(
-                  size: 400.0,
+                child: BoxWidget(
+                  size: const Size(400.0, 400.0),
                   color: Colors.blue[700]!.withOpacity(0.5),
                 ),
               ),
               Hero(
                 tag: 'hero-default-tween',
-                child: _box(
-                  size: 400.0,
+                child: BoxWidget(
+                  size: const Size(400.0, 400.0),
                   color: Colors.red[700]!.withOpacity(0.5),
                 ),
               ),
@@ -108,3 +105,23 @@ class HeroExample extends StatelessWidget {
     ));
   }
 }
+
+class BoxWidget extends StatelessWidget {
+  const BoxWidget({
+    Key? key,
+    required this.size,
+    required this.color,
+  }) : super(key: key);
+
+  final Size size;
+  final Color color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size.width,
+      height: size.height,
+      color: color,
+    );
+  }
+}