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

feat: QR Code viewer for mxid sharing
3 months ago · 11817e6eb3
parent 0687c0a496 dbf3eccc93
commit 11817e6eb3
7 changed files with 492 additions and 339 deletions
--- a/lib/pages/chat_details/chat_details_view.dart
+++ b/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),
-                  onPressed: () => FluffyShare.share(
-                    AppConfig.inviteLinkPrefix + room.canonicalAlias,
+                  icon: const Icon(Icons.qr_code_rounded),
+                  onPressed: () => showQrCodeViewer(
                    context,
+                    room.canonicalAlias,
                  ),
                ),
              if (controller.widget.embeddedCloseButton == null)
--- a/lib/pages/new_private_chat/new_private_chat_view.dart
+++ b/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),
-                        child: ConstrainedBox(
-                          constraints: const BoxConstraints(maxHeight: 256),
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 64.0,
+                          vertical: 24.0,
+                        ),
                        child: Material(
-                            borderRadius: BorderRadius.circular(12),
-                            elevation: 10,
-                            color: Colors.white,
-                            shadowColor: theme.appBarTheme.shadowColor,
+                          borderRadius:
+                              BorderRadius.circular(AppConfig.borderRadius),
+                          color: theme.colorScheme.primaryContainer,
                          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:
-                                    'https://matrix.to/#/${Matrix.of(context).client.userID}',
+                                  data: 'https://matrix.to/#/$userId',
                                  decoration: PrettyQrDecoration(
                                    shape: PrettyQrSmoothSymbol(
                                      roundFactor: 1,
-                                    color: theme.brightness == Brightness.light
-                                        ? theme.colorScheme.primary
-                                        : theme.colorScheme.onPrimary,
+                                      color:
+                                          theme.colorScheme.onPrimaryContainer,
+                                    ),
                                  ),
                                ),
                              ),
--- a/lib/pages/user_bottom_sheet/user_bottom_sheet_view.dart
+++ b/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(
-      child: Scaffold(
+    return 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(
-                  'https://matrix.to/#/$userId',
-                  context,
-                ),
-                icon: Icon(Icons.adaptive.share_outlined),
+              onPressed: () => showQrCodeViewer(context, userId),
+              icon: const Icon(Icons.qr_code_outlined),
            ),
          ),
        ],
@ -70,8 +67,7 @@ class UserBottomSheetView extends StatelessWidget {
                  padding: const EdgeInsets.all(12.0),
                  child: Material(
                    color: theme.colorScheme.surfaceContainerHigh,
-                      borderRadius:
-                          BorderRadius.circular(AppConfig.borderRadius),
+                    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:
-                                    theme.colorScheme.errorContainer,
+                              backgroundColor: 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:
-                            Matrix.of(controller.widget.outerContext).client,
+                      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
-                        .participantAction(UserBottomSheetAction.kick),
+                  onTap: () =>
+                      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
-                        .participantAction(UserBottomSheetAction.unban),
+                  onTap: () =>
+                      controller.participantAction(UserBottomSheetAction.unban),
                ),
              if (user != null && user.id != client.userID)
                ListTile(
@ -372,7 +366,6 @@ class UserBottomSheetView extends StatelessWidget {
          );
        },
      ),
-      ),
    );
  }
 }
--- a/lib/widgets/public_room_bottom_sheet.dart
+++ b/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(
-                  'https://matrix.to/#/${roomAlias ?? chunk?.roomId}',
+                  onPressed: () => showQrCodeViewer(
                    context,
+                    roomAlias,
                  ),
                ),
              ),
--- a/lib/widgets/qr_code_viewer.dart
+++ b/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,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/pubspec.lock
+++ b/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:
--- a/pubspec.yaml
+++ b/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