Add hero animation to images

Ali-Amin · Aug 2, 2019 · 7a76cfd · 7a76cfd
1 parent 4fce92d
commit 7a76cfd
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 14 deletions.
diff --git a/lib/screens/home/widgets/explore/explore.dart b/lib/screens/home/widgets/explore/explore.dart
@@ -89,6 +89,7 @@ class ExploreProductList extends StatelessWidget {
           itemCount: products.length,
           itemBuilder: (context, index) => ExploreProductCard(
             product: products[index],
+            index: index,
           ),
         ));
   }

diff --git a/lib/screens/home/widgets/explore/explore_product_card.dart b/lib/screens/home/widgets/explore/explore_product_card.dart
@@ -3,8 +3,9 @@ import 'package:shoptronics/common/product_card.dart';
 import 'package:shoptronics/data_models/product.dart';
 
 class ExploreProductCard extends StatelessWidget {
-  ExploreProductCard({Key key, this.product}) : super(key: key);
+  ExploreProductCard({Key key, this.product, this.index}) : super(key: key);
 
+  final num index;
   final Product product;
   Color textColor() {
     switch (product.color) {
@@ -45,8 +46,11 @@ class ExploreProductCard extends StatelessWidget {
           Container(
             height: 115,
             alignment: Alignment.topCenter,
-            child: Image.asset(
-              product.photoUrl,
+            child: Hero(
+              tag: product.photoUrl + index.toString(),
+              child: Image.asset(
+                product.photoUrl,
+              ),
             ),
           ),
           Container(

diff --git a/lib/screens/home/widgets/hot_items/hot_items.dart b/lib/screens/home/widgets/hot_items/hot_items.dart
@@ -88,6 +88,7 @@ class HotProductList extends StatelessWidget {
           itemCount: products.length,
           itemBuilder: (context, index) => HotProductCard(
             product: products[index],
+            index: index,
           ),
         ));
   }

diff --git a/lib/screens/home/widgets/hot_items/hot_product_card.dart b/lib/screens/home/widgets/hot_items/hot_product_card.dart
@@ -3,8 +3,8 @@ import 'package:shoptronics/common/product_card.dart';
 import 'package:shoptronics/data_models/product.dart';
 
 class HotProductCard extends StatelessWidget {
-  HotProductCard({Key key, this.product}) : super(key: key);
-
+  HotProductCard({Key key, this.product, this.index}) : super(key: key);
+  final num index;
   final Product product;
 
   @override
@@ -21,8 +21,11 @@ class HotProductCard extends StatelessWidget {
             width: 160,
             height: 140,
             alignment: Alignment.centerLeft,
-            child: Image.asset(
-              product.photoUrl,
+            child: Hero(
+              tag: product.photoUrl + index.toString(),
+              child: Image.asset(
+                product.photoUrl,
+              ),
             ),
           ),
         ],

diff --git a/lib/screens/product/widgets/image_page_view/image_page_view.dart b/lib/screens/product/widgets/image_page_view/image_page_view.dart
@@ -8,13 +8,16 @@ class ImagePageView extends StatefulWidget {
 class _ImagePageViewState extends State<ImagePageView> {
   @override
   Widget build(BuildContext context) {
-    return PageView(
-      physics: BouncingScrollPhysics(),
-      children: <Widget>[
-        Image.asset("assets/images/product1.png"),
-        Image.asset("assets/images/product1.png"),
-        Image.asset("assets/images/product1.png"),
-      ],
+    return Hero(
+      tag: "assets/images/product1.png0",
+      child: PageView(
+        physics: BouncingScrollPhysics(),
+        children: <Widget>[
+          Image.asset("assets/images/product1.png"),
+          Image.asset("assets/images/product1.png"),
+          Image.asset("assets/images/product1.png"),
+        ],
+      ),
     );
   }
 }