Merge pull request #1524 from krille-chan/krille/qr-code-sharing

feat: QR Code viewer for mxid sharing

lib/pages/chat_details/chat_details_view.dart

@@ -5,7 +5,6 @@ import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:go_router/go_router.dart';
 import 'package:matrix/matrix.dart';
 
-import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/pages/chat_details/chat_details.dart';
 import 'package:fluffychat/pages/chat_details/participant_list_item.dart';
 import 'package:fluffychat/utils/fluffy_share.dart';
@@ -15,6 +14,7 @@ import 'package:fluffychat/widgets/chat_settings_popup_menu.dart';
 import 'package:fluffychat/widgets/layouts/max_width_body.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import '../../utils/url_launcher.dart';
+import '../../widgets/qr_code_viewer.dart';
 
 class ChatDetailsView extends StatelessWidget {
   final ChatDetailsController controller;
@@ -60,10 +60,10 @@ class ChatDetailsView extends StatelessWidget {
               if (room.canonicalAlias.isNotEmpty)
                 IconButton(
                   tooltip: L10n.of(context).share,
-                  icon: Icon(Icons.adaptive.share_outlined),
+                  icon: const Icon(Icons.qr_code_rounded),
-                  onPressed: () => FluffyShare.share(
+                  onPressed: () => showQrCodeViewer(
-                    AppConfig.inviteLinkPrefix + room.canonicalAlias,
                     context,
+                    room.canonicalAlias,
                   ),
                 ),
               if (controller.widget.embeddedCloseButton == null)

lib/pages/new_private_chat/new_private_chat_view.dart

@@ -14,6 +14,7 @@ import 'package:fluffychat/utils/url_launcher.dart';
 import 'package:fluffychat/widgets/avatar.dart';
 import 'package:fluffychat/widgets/layouts/max_width_body.dart';
 import 'package:fluffychat/widgets/matrix.dart';
+import '../../widgets/qr_code_viewer.dart';
 
 class NewPrivateChatView extends StatelessWidget {
   final NewPrivateChatController controller;
@@ -25,6 +26,7 @@ class NewPrivateChatView extends StatelessWidget {
     final theme = Theme.of(context);
 
     final searchResponse = controller.searchResponse;
+    final userId = Matrix.of(context).client.userID!;
     return Scaffold(
       appBar: AppBar(
         scrolledUnderElevation: 0,
@@ -157,26 +159,35 @@ class NewPrivateChatView extends StatelessWidget {
                       ),
                     Center(
                       child: Padding(
-                        padding: const EdgeInsets.all(64.0),
+                        padding: const EdgeInsets.symmetric(
-                        child: ConstrainedBox(
+                          horizontal: 64.0,
-                          constraints: const BoxConstraints(maxHeight: 256),
+                          vertical: 24.0,
+                        ),
                         child: Material(
-                            borderRadius: BorderRadius.circular(12),
+                          borderRadius:
-                            elevation: 10,
+                              BorderRadius.circular(AppConfig.borderRadius),
-                            color: Colors.white,
+                          color: theme.colorScheme.primaryContainer,
-                            shadowColor: theme.appBarTheme.shadowColor,
                           clipBehavior: Clip.hardEdge,
+                          child: InkWell(
+                            borderRadius:
+                                BorderRadius.circular(AppConfig.borderRadius),
+                            onTap: () => showQrCodeViewer(
+                              context,
+                              userId,
+                            ),
                             child: Padding(
-                              padding: const EdgeInsets.all(8),
+                              padding: const EdgeInsets.all(32.0),
+                              child: ConstrainedBox(
+                                constraints:
+                                    const BoxConstraints(maxWidth: 256),
                                 child: PrettyQrView.data(
-                                data:
+                                  data: 'https://matrix.to/#/$userId',
-                                    'https://matrix.to/#/${Matrix.of(context).client.userID}',
                                   decoration: PrettyQrDecoration(
                                     shape: PrettyQrSmoothSymbol(
                                       roundFactor: 1,
-                                    color: theme.brightness == Brightness.light
+                                      color:
-                                        ? theme.colorScheme.primary
+                                          theme.colorScheme.onPrimaryContainer,
-                                        : theme.colorScheme.onPrimary,
+                                    ),
                                   ),
                                 ),
                               ),

lib/pages/user_bottom_sheet/user_bottom_sheet_view.dart

@@ -10,6 +10,7 @@ import 'package:fluffychat/utils/fluffy_share.dart';
 import 'package:fluffychat/utils/url_launcher.dart';
 import 'package:fluffychat/widgets/avatar.dart';
 import 'package:fluffychat/widgets/presence_builder.dart';
+import 'package:fluffychat/widgets/qr_code_viewer.dart';
 import '../../widgets/matrix.dart';
 import 'user_bottom_sheet.dart';
 
@@ -30,8 +31,7 @@ class UserBottomSheetView extends StatelessWidget {
     final client = Matrix.of(controller.widget.outerContext).client;
     final profileSearchError = controller.widget.profileSearchError;
     final dmRoomId = client.getDirectChatFromUserId(userId);
-    return SafeArea(
+    return Scaffold(
-      child: Scaffold(
       appBar: AppBar(
         leading: Center(
           child: CloseButton(
@@ -44,11 +44,8 @@ class UserBottomSheetView extends StatelessWidget {
           Padding(
             padding: const EdgeInsets.symmetric(horizontal: 8),
             child: IconButton(
-                onPressed: () => FluffyShare.share(
+              onPressed: () => showQrCodeViewer(context, userId),
-                  'https://matrix.to/#/$userId',
+              icon: const Icon(Icons.qr_code_outlined),
-                  context,
-                ),
-                icon: Icon(Icons.adaptive.share_outlined),
             ),
           ),
         ],
@@ -70,8 +67,7 @@ class UserBottomSheetView extends StatelessWidget {
                   padding: const EdgeInsets.all(12.0),
                   child: Material(
                     color: theme.colorScheme.surfaceContainerHigh,
-                      borderRadius:
+                    borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-                          BorderRadius.circular(AppConfig.borderRadius),
                     child: ListTile(
                       minVerticalPadding: 16,
                       title: Padding(
@@ -95,8 +91,7 @@ class UserBottomSheetView extends StatelessWidget {
                           const SizedBox(width: 12),
                           TextButton.icon(
                             style: TextButton.styleFrom(
-                                backgroundColor:
+                              backgroundColor: theme.colorScheme.errorContainer,
-                                    theme.colorScheme.errorContainer,
                               foregroundColor:
                                   theme.colorScheme.onErrorContainer,
                             ),
@@ -114,8 +109,7 @@ class UserBottomSheetView extends StatelessWidget {
                   Padding(
                     padding: const EdgeInsets.all(16.0),
                     child: Avatar(
-                        client:
+                      client: Matrix.of(controller.widget.outerContext).client,
-                            Matrix.of(controller.widget.outerContext).client,
                       mxContent: avatarUrl,
                       name: displayname,
                       size: Avatar.defaultSize * 2.5,
@@ -315,8 +309,8 @@ class UserBottomSheetView extends StatelessWidget {
                   iconColor: theme.colorScheme.error,
                   title: Text(L10n.of(context).kickFromChat),
                   leading: const Icon(Icons.exit_to_app_outlined),
-                    onTap: () => controller
+                  onTap: () =>
-                        .participantAction(UserBottomSheetAction.kick),
+                      controller.participantAction(UserBottomSheetAction.kick),
                 ),
               if (user != null &&
                   user.canBan &&
@@ -335,8 +329,8 @@ class UserBottomSheetView extends StatelessWidget {
                 ListTile(
                   title: Text(L10n.of(context).unbanFromChat),
                   leading: const Icon(Icons.warning_outlined),
-                    onTap: () => controller
+                  onTap: () =>
-                        .participantAction(UserBottomSheetAction.unban),
+                      controller.participantAction(UserBottomSheetAction.unban),
                 ),
               if (user != null && user.id != client.userID)
                 ListTile(
@@ -372,7 +366,6 @@ class UserBottomSheetView extends StatelessWidget {
           );
         },
       ),
-      ),
     );
   }
 }

lib/widgets/public_room_bottom_sheet.dart

@@ -10,6 +10,7 @@ import 'package:fluffychat/utils/url_launcher.dart';
 import 'package:fluffychat/widgets/avatar.dart';
 import 'package:fluffychat/widgets/future_loading_dialog.dart';
 import 'package:fluffychat/widgets/matrix.dart';
+import 'package:fluffychat/widgets/qr_code_viewer.dart';
 
 class PublicRoomBottomSheet extends StatelessWidget {
   final String? roomAlias;
@@ -98,13 +99,14 @@ class PublicRoomBottomSheet extends StatelessWidget {
             ),
           ),
           actions: [
+            if (roomAlias != null)
               Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 16.0),
                 child: IconButton(
                   icon: Icon(Icons.adaptive.share_outlined),
-                onPressed: () => FluffyShare.share(
+                  onPressed: () => showQrCodeViewer(
-                  'https://matrix.to/#/${roomAlias ?? chunk?.roomId}',
                     context,
+                    roomAlias,
                   ),
                 ),
               ),

lib/widgets/qr_code_viewer.dart

@@ -0,0 +1,138 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:image/image.dart';
+import 'package:matrix/matrix.dart';
+import 'package:pretty_qr_code/pretty_qr_code.dart';
+import 'package:qr_image/qr_image.dart';
+
+import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/utils/fluffy_share.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_file_extension.dart';
+import 'package:fluffychat/widgets/future_loading_dialog.dart';
+import '../config/themes.dart';
+
+Future<void> showQrCodeViewer(
+  BuildContext context,
+  String content,
+) =>
+    showDialog(
+      context: context,
+      builder: (context) => QrCodeViewer(content: content),
+    );
+
+class QrCodeViewer extends StatelessWidget {
+  final String content;
+
+  const QrCodeViewer({required this.content, super.key});
+
+  void _save(BuildContext context) async {
+    final imageResult = await showFutureLoadingDialog(
+      context: context,
+      future: () async {
+        final inviteLink = 'https://matrix.to/#/$content';
+        final image = QRImage(
+          inviteLink,
+          size: 256,
+          radius: 1,
+        ).generate();
+        return compute(encodePng, image);
+      },
+    );
+    final bytes = imageResult.result;
+    if (bytes == null) return;
+    if (!context.mounted) return;
+
+    MatrixImageFile(
+      bytes: bytes,
+      name: 'QR_Code_$content.png',
+      mimeType: 'image/png',
+    ).save(context);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final inviteLink = 'https://matrix.to/#/$content';
+    return Scaffold(
+      backgroundColor: Colors.black.withOpacity(0.5),
+      extendBodyBehindAppBar: true,
+      appBar: AppBar(
+        elevation: 0,
+        leading: IconButton(
+          style: IconButton.styleFrom(
+            backgroundColor: Colors.black.withOpacity(0.5),
+          ),
+          icon: const Icon(Icons.close),
+          onPressed: Navigator.of(context).pop,
+          color: Colors.white,
+          tooltip: L10n.of(context).close,
+        ),
+        backgroundColor: Colors.transparent,
+        actions: [
+          IconButton(
+            style: IconButton.styleFrom(
+              backgroundColor: Colors.black.withOpacity(0.5),
+            ),
+            icon: Icon(Icons.adaptive.share_outlined),
+            onPressed: () => FluffyShare.share(
+              inviteLink,
+              context,
+            ),
+            color: Colors.white,
+            tooltip: L10n.of(context).share,
+          ),
+          const SizedBox(width: 8),
+          IconButton(
+            style: IconButton.styleFrom(
+              backgroundColor: Colors.black.withOpacity(0.5),
+            ),
+            icon: const Icon(Icons.download_outlined),
+            onPressed: () => _save(context),
+            color: Colors.white,
+            tooltip: L10n.of(context).downloadFile,
+          ),
+          const SizedBox(width: 8),
+        ],
+      ),
+      body: Center(
+        child: Container(
+          margin: const EdgeInsets.all(32.0),
+          padding: const EdgeInsets.all(32.0),
+          decoration: BoxDecoration(
+            color: theme.colorScheme.primaryContainer,
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              ConstrainedBox(
+                constraints:
+                    const BoxConstraints(maxWidth: FluffyThemes.columnWidth),
+                child: PrettyQrView.data(
+                  data: inviteLink,
+                  decoration: PrettyQrDecoration(
+                    shape: PrettyQrSmoothSymbol(
+                      roundFactor: 1,
+                      color: theme.colorScheme.onPrimaryContainer,
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(height: 8.0),
+              SelectableText(
+                content,
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  color: theme.colorScheme.onPrimaryContainer,
+                  fontSize: 12,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

pubspec.lock

@@ -1554,6 +1554,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.1"
+  qr_image:
+    dependency: "direct main"
+    description:
+      name: qr_image
+      sha256: c3cd2ac2c6cd6b14604c97b45c477b18988b6518f72120fa04418fc54e3b0d76
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
   quiver:
     dependency: transitive
     description:

pubspec.yaml

@@ -76,6 +76,7 @@ dependencies:
   provider: ^6.0.2
   punycode: ^1.0.0
   qr_code_scanner: ^1.0.1
+  qr_image: ^1.0.0
   receive_sharing_intent: ^1.8.1
   record: ^5.1.2
   scroll_to_index: ^3.0.1