feat: possibility to view scalable room avatar in fullscreen

krille-chan · Jul 28, 2023 · a5fe7b7 · a5fe7b7
1 parent d5228b1
commit a5fe7b7
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 46 deletions.
diff --git a/lib/pages/chat_details/chat_details_view.dart b/lib/pages/chat_details/chat_details_view.dart
@@ -16,12 +16,22 @@ import 'package:fluffychat/widgets/content_banner.dart';
 import 'package:fluffychat/widgets/layouts/max_width_body.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import '../../utils/url_launcher.dart';
+import '../image_viewer/image_viewer.dart';
 
 class ChatDetailsView extends StatelessWidget {
   final ChatDetailsController controller;
 
   const ChatDetailsView(this.controller, {Key? key}) : super(key: key);
 
+  void _onTap(BuildContext context, Uri? avatar) {
+    if (avatar == null) return;
+    showDialog(
+      context: Matrix.of(context).navigatorContext,
+      useRootNavigator: false,
+      builder: (_) => ImageViewer(null, avatar),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final room = Matrix.of(context).client.getRoomById(controller.roomId!);
@@ -87,6 +97,7 @@ class ChatDetailsView extends StatelessWidget {
                         ? controller.setAvatarAction
                         : null,
                     defaultIcon: Icons.group_outlined,
+                    onTap: () => _onTap(context, room.avatar),
                   ),
                 ),
               ),

diff --git a/lib/widgets/content_banner.dart b/lib/widgets/content_banner.dart
@@ -12,6 +12,7 @@ class ContentBanner extends StatelessWidget {
   final Client? client;
   final double opacity;
   final WidgetBuilder? placeholder;
+  final void Function()? onTap;
 
   const ContentBanner({
     this.mxContent,
@@ -21,61 +22,68 @@ class ContentBanner extends StatelessWidget {
     this.client,
     this.opacity = 0.75,
     this.placeholder,
+    this.onTap,
     Key? key,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final onEdit = this.onEdit;
-    return Container(
-      height: height,
-      alignment: Alignment.center,
-      decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.secondaryContainer,
-      ),
-      child: Stack(
-        children: <Widget>[
-          Positioned(
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
-            child: Opacity(
-              opacity: opacity,
-              child: mxContent == null
-                  ? Center(
-                      child: Icon(
-                        defaultIcon,
-                        color:
-                            Theme.of(context).colorScheme.onSecondaryContainer,
-                        size: 128,
+    return GestureDetector(
+      onTap: () {
+        if (onTap != null) onTap!();
+      },
+      child: Container(
+        height: height,
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.secondaryContainer,
+        ),
+        child: Stack(
+          children: <Widget>[
+            Positioned(
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              child: Opacity(
+                opacity: opacity,
+                child: mxContent == null
+                    ? Center(
+                        child: Icon(
+                          defaultIcon,
+                          color: Theme.of(context)
+                              .colorScheme
+                              .onSecondaryContainer,
+                          size: 128,
+                        ),
+                      )
+                    : MxcImage(
+                        key: Key(mxContent?.toString() ?? 'NoKey'),
+                        uri: mxContent,
+                        animated: true,
+                        fit: BoxFit.cover,
+                        placeholder: placeholder,
+                        height: 400,
+                        width: 800,
                       ),
-                    )
-                  : MxcImage(
-                      key: Key(mxContent?.toString() ?? 'NoKey'),
-                      uri: mxContent,
-                      animated: true,
-                      fit: BoxFit.cover,
-                      placeholder: placeholder,
-                      height: 400,
-                      width: 800,
-                    ),
-            ),
-          ),
-          if (onEdit != null)
-            Container(
-              margin: const EdgeInsets.all(8),
-              alignment: Alignment.bottomRight,
-              child: FloatingActionButton(
-                mini: true,
-                heroTag: null,
-                onPressed: onEdit,
-                backgroundColor: Theme.of(context).colorScheme.background,
-                foregroundColor: Theme.of(context).textTheme.bodyLarge?.color,
-                child: const Icon(Icons.camera_alt_outlined),
               ),
             ),
-        ],
+            if (onEdit != null)
+              Container(
+                margin: const EdgeInsets.all(8),
+                alignment: Alignment.bottomRight,
+                child: FloatingActionButton(
+                  mini: true,
+                  heroTag: null,
+                  onPressed: onEdit,
+                  backgroundColor: Theme.of(context).colorScheme.background,
+                  foregroundColor: Theme.of(context).textTheme.bodyLarge?.color,
+                  child: const Icon(Icons.camera_alt_outlined),
+                ),
+              ),
+          ],
+        ),
       ),
     );
   }