Merge pull request FlutterOpen#35 from FlutterOpen/dev

add the hero Animation that is used in the switching two pages.

Author: nb312

lib/const/page_item_const.dart

@@ -197,4 +197,9 @@ const PAGE_ITEMS = [
     "img": PageImage.FLUTTER_OPEN,
     "click": PageName.ANIM_CROSS_FADE,
   },
+  {
+    "title": PageName.ANIM_HERO,
+    "img": PageImage.FLUTTER_OPEN,
+    "click": PageName.ANIM_HERO,
+  },
 ];

lib/const/page_name_const.dart

@@ -44,4 +44,5 @@ class PageName {
   static const ANIMATION = "AnimationPage";
   static const ANIM_CONTAINER = "AnimationContainer";
   static const ANIM_CROSS_FADE = "AnimationCrossFade";
+  static const ANIM_HERO = "HeroPage";
 }

lib/main.dart

@@ -58,6 +58,7 @@ class FlutterOpenApp extends StatelessWidget {
         PageName.ANIMATION: (context) => AnimationPage(),
         PageName.ANIM_CONTAINER: (context) => AnimatedContainerPage(),
         PageName.ANIM_CROSS_FADE: (context) => AnimCrossFadePage(),
+        PageName.ANIM_HERO: (context) => HeroPage(),
       },
     );
   }

lib/page/anim/HeroPage.dart

@@ -0,0 +1,53 @@
+///
+/// Created by NieBin on 2019/6/8
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+///
+import "package:flutter/material.dart";
+import 'package:flutter_widgets/const/_const.dart';
+import 'PhotoHero.dart';
+
+class HeroPage extends StatefulWidget {
+  @override
+  _HeroState createState() => _HeroState();
+}
+
+class _HeroState extends State<HeroPage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text(PageName.ANIM_HERO),
+      ),
+      body: Center(
+        child: PhotoHero(
+          photo: PageImage.FLUTTER_OPEN,
+          width: 400.0,
+          onTap: () {
+            Navigator.of(context)
+                .push(MaterialPageRoute<void>(builder: (BuildContext context) {
+              return Scaffold(
+                appBar: AppBar(
+                  title: const Text('Change pic Page'),
+                ),
+                body: Container(
+                  // The blue background emphasizes that it's a new route.
+                  color: RED_LIGHT,
+                  padding: const EdgeInsets.all(16.0),
+                  alignment: Alignment.topLeft,
+                  child: PhotoHero(
+                    photo: PageImage.FLUTTER_OPEN,
+                    width: 100.0,
+                    onTap: () {
+                      Navigator.of(context).pop();
+                    },
+                  ),
+                ),
+              );
+            }));
+          },
+        ),
+      ),
+    );
+  }
+}

lib/page/anim/PhotoHero.dart

@@ -0,0 +1,33 @@
+///
+/// Created by NieBin on 2019/6/8
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+import "package:flutter/material.dart";
+
+class PhotoHero extends StatelessWidget {
+  const PhotoHero({Key key, this.photo, this.onTap, this.width})
+      : super(key: key);
+
+  final String photo;
+  final VoidCallback onTap;
+  final double width;
+
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width,
+      child: Hero(
+        tag: photo,
+        child: Material(
+          color: Colors.transparent,
+          child: InkWell(
+            onTap: onTap,
+            child: Image.asset(
+              photo,
+              fit: BoxFit.contain,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/page/anim/_anim.dart

@@ -5,3 +5,4 @@
 export "AnimationPage.dart";
 export 'AnimatedContainerPage.dart';
 export 'AnimCrossFadePage.dart';
+export 'HeroPage.dart';