Added PhotoView for Product thumbnail and attachments

lib/helpers/hero_photo_viewer.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:photo_view/photo_view.dart';
+
+class HeroPhotoViewWrapper extends StatelessWidget {
+  final ImageProvider imageProvider;
+  final Widget loadingChild;
+  final String heroTag;
+  final dynamic minScale;
+  final dynamic maxScale;
+
+  const HeroPhotoViewWrapper(
+      {this.imageProvider,
+      this.loadingChild,
+      this.heroTag,
+      this.minScale,
+      this.maxScale});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.black87,
+      ),
+      body: Container(
+        constraints: BoxConstraints.expand(
+          height: MediaQuery.of(context).size.height,
+        ),
+        child: new PhotoView(
+          imageProvider: imageProvider,
+          loadingChild: loadingChild,
+          backgroundColor: Colors.black,
+          minScale: minScale,
+          maxScale: maxScale,
+          heroTag: heroTag,
+        ),
+      ),
+    );
+  }
+}

lib/ui-elemnts/details/product-attachments.dart

@@ -1,9 +1,33 @@
 import 'package:flutter/material.dart';
+import '../../helpers/hero_photo_viewer.dart';
 
 class ProductAttachments extends StatelessWidget {
   final List<String> attachments;
   ProductAttachments(this.attachments);
 
+  _attachmentWithPhotoView(BuildContext context, int index) => Container(
+        child: GestureDetector(
+          onTap: () {
+            Navigator.push(
+              context,
+              MaterialPageRoute(
+                builder: (context) => HeroPhotoViewWrapper(
+                      heroTag: 'attachment-' + index.toString(),
+                      imageProvider: NetworkImage(attachments[index]),
+                    ),
+              ),
+            );
+          },
+          child: Hero(
+            tag: 'attachment-' + index.toString(),
+            child: Container(
+              margin: EdgeInsets.fromLTRB(0.0, 5.0, 5.0, 5.0),
+              child: Image.network(attachments[index]),
+            ),
+          ),
+        ),
+      );
+
   @override
   Widget build(BuildContext context) {
     return SizedBox.fromSize(
@@ -12,10 +36,7 @@ class ProductAttachments extends StatelessWidget {
         itemCount: attachments.length,
         scrollDirection: Axis.horizontal,
         itemBuilder: (BuildContext context, int index) {
-          return Container(
-            margin: EdgeInsets.fromLTRB(0.0, 5.0, 5.0, 5.0),
-            child: Image.network(attachments[index]),
-          );
+          return _attachmentWithPhotoView(context, index);
         },
       ),
     );

lib/ui-elemnts/details/product-content.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import '../../helpers/hero_photo_viewer.dart';
+
 import '../details/product-stats.dart';
 import '../details/product-attachments.dart';
 import '../details/product-description.dart';
@@ -8,6 +10,26 @@ import '../../models/product.dart';
 class ProductContent extends StatelessWidget {
   final Product product;
   ProductContent(this.product);
+
+  _thumbnailWithPhotoView(BuildContext context) => Container(
+        child: GestureDetector(
+          onTap: () {
+            Navigator.push(
+              context,
+              MaterialPageRoute(
+                builder: (context) => HeroPhotoViewWrapper(
+                      heroTag: product.id,
+                      imageProvider: NetworkImage(product.thumbnailUrl),
+                    ),
+              ),
+            );
+          },
+          child: Container(
+            child: ProductThumbnail(product.thumbnailUrl, product.id),
+          ),
+        ),
+      );
+
   @override
   Widget build(BuildContext context) {
     return Row(
@@ -18,7 +40,7 @@ class ProductContent extends StatelessWidget {
             child: Column(
               children: <Widget>[
                 ListTile(
-                  leading: ProductThumbnail(product.thumbnailUrl, product.id),
+                  leading: _thumbnailWithPhotoView(context),
                   title: Text(
                     product.title,
                     style:

lib/ui-elemnts/details/product-description-dialog.dart

@@ -22,8 +22,8 @@ class ProdutDescriptionDialogState extends State<ProdutDescriptionDialog> {
   Widget build(BuildContext context) {
     final Color _color = Colors.grey[800];
 
-    return new Scaffold(
-      appBar: new AppBar(
+    return Scaffold(
+      appBar: AppBar(
           title: Text(
             widget.title,
             style: TextStyle(color: _color),

pubspec.lock

@@ -1,6 +1,13 @@
 # Generated by pub
 # See https://www.dartlang.org/tools/pub/glossary#lockfile
 packages:
+  after_layout:
+    dependency: transitive
+    description:
+      name: after_layout
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.4"
   analyzer:
     dependency: transitive
     description:
@@ -207,6 +214,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.5.1"
+  photo_view:
+    dependency: "direct main"
+    description:
+      name: photo_view
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.7"
   plugin:
     dependency: transitive
     description:

pubspec.yaml

@@ -8,6 +8,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^0.1.2
+  photo_view: ^0.0.7
 
 dev_dependencies:
   flutter_test: