Implement Image viewer

lib/components/content_banner.dart

@@ -1,7 +1,6 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:famedlysdk/famedlysdk.dart';
-import 'package:fluffychat/utils/app_route.dart';
+import 'package:fluffychat/views/image_viewer.dart';
-import 'package:fluffychat/views/content_web_view.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -35,12 +34,7 @@ class ContentBanner extends StatelessWidget {
     );
     return InkWell(
       onTap: () => mxContent.mxc?.isNotEmpty ?? false
-          ? Navigator.of(context).push(
+          ? ImageViewer.show(context, mxContent)
-              AppRoute.defaultRoute(
-                context,
-                ContentWebView(mxContent),
-              ),
-            )
           : null,
       child: Container(
         height: 300,

lib/components/list_items/message.dart

@@ -3,10 +3,9 @@ import 'package:famedlysdk/famedlysdk.dart';
 import 'package:fluffychat/components/message_content.dart';
 import 'package:fluffychat/components/reply_content.dart';
 import 'package:fluffychat/i18n/i18n.dart';
-import 'package:fluffychat/utils/app_route.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
 import 'package:fluffychat/utils/string_color.dart';
-import 'package:fluffychat/views/content_web_view.dart';
+import 'package:fluffychat/views/image_viewer.dart';
 import 'package:flutter/material.dart';
 
 import '../avatar.dart';
@@ -133,12 +132,7 @@ class Message extends StatelessWidget {
         : Avatar(
             event.sender.avatarUrl,
             event.sender.calcDisplayname(),
-            onTap: () => Navigator.of(context).push(
+            onTap: () => ImageViewer.show(context, event.sender.avatarUrl),
-              AppRoute.defaultRoute(
-                context,
-                ContentWebView(event.sender.avatarUrl),
-              ),
-            ),
           );
     if (ownMessage) {
       rowChildren.add(avatarOrSizedBox);

lib/components/message_content.dart

@@ -5,6 +5,7 @@ import 'package:fluffychat/i18n/i18n.dart';
 import 'package:fluffychat/utils/app_route.dart';
 import 'package:fluffychat/utils/event_extension.dart';
 import 'package:fluffychat/views/content_web_view.dart';
+import 'package:fluffychat/views/image_viewer.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:link_text/link_text.dart';
@@ -27,7 +28,8 @@ class MessageContent extends StatelessWidget {
           case MessageTypes.Image:
           case MessageTypes.Sticker:
             final int size = 400;
-            final String src = MxContent(event.content["url"]).getThumbnail(
+            final MxContent content = MxContent(event.content["url"]);
+            final String src = content.getThumbnail(
               Matrix.of(context).client,
               width: size * MediaQuery.of(context).devicePixelRatio,
               height: size * MediaQuery.of(context).devicePixelRatio,
@@ -38,20 +40,22 @@ class MessageContent extends StatelessWidget {
               radius: Radius.circular(10),
               elevation: 0,
               child: InkWell(
-                onTap: () => Navigator.of(context).push(
+                onTap: () => ImageViewer.show(context, content),
-                  AppRoute.defaultRoute(
+                child: Container(
-                    context,
+                  height: size.toDouble(),
-                    ContentWebView(MxContent(event.content["url"])),
+                  width: size.toDouble(),
-                  ),
-                ),
                   child: kIsWeb
                       ? Image.network(
                           src,
-                        width: size.toDouble(),
+                          fit: BoxFit.cover,
                         )
                       : CachedNetworkImage(
                           imageUrl: src,
-                        width: size.toDouble(),
+                          fit: BoxFit.cover,
+                          placeholder: (c, s) => Center(
+                            child: CircularProgressIndicator(),
+                          ),
+                        ),
                 ),
               ),
             );

lib/views/image_viewer.dart

@@ -0,0 +1,47 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/components/matrix.dart';
+import 'package:fluffychat/utils/app_route.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:photo_view/photo_view.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class ImageViewer extends StatelessWidget {
+  final MxContent mxContent;
+
+  const ImageViewer(this.mxContent);
+
+  static show(BuildContext context, MxContent content) {
+    if (kIsWeb) {
+      launch(content.getDownloadLink(Matrix.of(context).client));
+    } else {
+      Navigator.of(context).push(
+        AppRoute(
+          ImageViewer(content),
+        ),
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final String url = mxContent.getDownloadLink(Matrix.of(context).client);
+    return Scaffold(
+      appBar: AppBar(
+        actions: <Widget>[
+          IconButton(
+            icon: Icon(Icons.file_download),
+            onPressed: () => launch(url),
+          ),
+        ],
+      ),
+      body: PhotoView(
+        loadingBuilder: (c, i) => Center(child: CircularProgressIndicator()),
+        imageProvider: CachedNetworkImageProvider(
+          url,
+        ),
+      ),
+    );
+  }
+}

pubspec.lock

@@ -438,6 +438,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.4.0"
+  photo_view:
+    dependency: "direct main"
+    description:
+      name: photo_view
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.9.2"
   platform:
     dependency: transitive
     description:

pubspec.yaml

@@ -51,6 +51,7 @@ dependencies:
   uni_links: ^0.2.0
   flutter_svg: ^0.17.1
   flutter_slidable: ^0.5.4
+  photo_view: ^0.9.2
 
   intl: ^0.16.0
   intl_translation: ^0.17.9