Improve qr code scanner ux

assets/translations/strings_en.i18n.json

@@ -57,6 +57,12 @@
             "shortBtnTxt": "New Profile",
             "fromClipboard": "Add From Clipboard",
             "scanQr": "Scan QR code",
+            "qrScanner": {
+                "permissionDeniedError": "Permission denied",
+                "unexpectedError": "Something went wrong",
+                "torchSemanticLabel": "Flash light",
+                "facingSemanticLabel": "Camera facing"
+            },
             "manually": "Manual Entry",
             "addingProfileMsg": "Adding Profile",
             "failureMsg": "Failed to add profile"

assets/translations/strings_fa.i18n.json

@@ -59,7 +59,13 @@
             "scanQr": "اسکن QR کد",
             "manually": "افزودن دستی",
             "addingProfileMsg": "در حال افزودن پروفایل",
-            "failureMsg": "در افزودن پروفایل خطایی رخ داد"
+            "failureMsg": "در افزودن پروفایل خطایی رخ داد",
+            "qrScanner": {
+                "permissionDeniedError": "اجازه رد شد",
+                "unexpectedError": "خطایی رخ داده",
+                "torchSemanticLabel": "چراغ فلاش",
+                "facingSemanticLabel": "جهت دوربین"
+            }
         },
         "update": {
             "buttonTxt": "بروزرسانی",

assets/translations/strings_ru.i18n.json

@@ -59,7 +59,13 @@
             "scanQr": "Сканировать QR-код",
             "manually": "Ввести вручную",
             "addingProfileMsg": "Добавление профиля",
-            "failureMsg": "Не удалось добавить профиль"
+            "failureMsg": "Не удалось добавить профиль",
+            "qrScanner": {
+                "permissionDeniedError": "Доступ запрещен",
+                "unexpectedError": "Что-то пошло не так",
+                "torchSemanticLabel": "Вспышка",
+                "facingSemanticLabel": "Перед камерой"
+            }
         },
         "update": {
             "buttonTxt": "Обновить",
@@ -282,4 +288,4 @@
         "short_description": "Автовыбор, SSH, VLESS, Vmess, Trojan, Reality, Sing-Box, Clash, Xray, Shadowsocks",
         "full_description": "Основная цель HiddifyNext — предоставить безопасный, удобный и эффективный клиент для туннелирования. Приложение позволяет направлять весь трафик или трафик выбранного приложения на указанный Вами удалённый сервер.\n\nПримечание: мы не предоставляем никаких серверов, пользователи сами должны обеспечивать конфиденциальность своих действий в Интернете, используя собственный сервер или доверенные серверы.  \n\n Поддерживаются сервера с: \n— Обычной ссылкой на подписку V2ray/Xray \n— Ссылкой на подписку Clash \n— Ссылкой на подписку Sing–Box \n\n В чём наши преимущества?   \n— Удобство   \n— Оптимизация и скорость   \n— Автоматический выбор на основе задержки   \n— Отображение информации об использовании   \n— Простой импорт ссылок в один клик   \n— Бесплатно и без рекламы   \n— Простое переключение ссылок   \n— …и много больше   \n\nПоддерживаются: \n• Все протоколы, поддерживаемые Sing-Box \n• VLESS + xtls reality, vision \n• VMESS \n• Trojan \n• ShoadowSocks \n• Reality \n• V2ray \n• Hystria2 \n• TUIC \n• SSH \n• ShadowTLS \n\nИсходный код доступен по ссылке https://github.com/hiddify/Hiddify-Next\nЯдро приложения основано на открытом исходном коде Sing–Box. \n\n Описание разрешений: \n— СЛУЖБА VPN: поскольку целью данного приложения является предоставление безопасного, удобного и эффективного клиента для туннелирования, это разрешение необходимо, чтобы иметь возможность направлять трафик через туннель на удалённый сервер. \n— ЗАПРОС ВСЕХ ПАКЕТОВ: это разрешение позволяет добавлять или удалять определённые приложения из списка для туннелирования. \n— ИНФОРМИРОВАНИЕ О ЗАВЕРШЕНИИ ЗАГРУЗКИ: это разрешение можно включить или отключить в настройках приложения, чтобы активировать или деактивировать соответственно запуск приложения при загрузке устройства. \n— ПОСТОЯННОЕ УВЕДОМЛЕНИЕ: оно необходимо, так как используется приоритетная служба для обеспечения непрерывной работы VPN подключения. \n— Приложение не содержит рекламы. Сбор аналитики и данных о сбоях происходят только с явного согласия пользователя при первом использовании приложения."
     }
-}
+}

assets/translations/strings_zh.i18n.json

@@ -59,7 +59,13 @@
             "scanQr": "扫二维码",
             "manually": "手动输入",
             "addingProfileMsg": "添加配置文件",
-            "failureMsg": "添加配置文件失败"
+            "failureMsg": "添加配置文件失败",
+            "qrScanner": {
+                "permissionDeniedError": "没有权限",
+                "unexpectedError": "出了些问题",
+                "torchSemanticLabel": "手电筒",
+                "facingSemanticLabel": "相机朝向"
+            }
         },
         "update": {
             "buttonTxt": "更新",

lib/features/common/qr_code_scanner_screen.dart

@@ -1,5 +1,7 @@
+import 'package:dartx/dartx.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hiddify/core/core_providers.dart';
 import 'package:hiddify/utils/utils.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:mobile_scanner/mobile_scanner.dart';
@@ -18,15 +20,17 @@ class QRCodeScannerScreen extends HookConsumerWidget with PresLogger {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final t = ref.watch(translationsProvider);
+
     final controller = useMemoized(
-      () => MobileScannerController(
+      () => MobileScannerController(detectionTimeoutMs: 500),
-        detectionTimeoutMs: 500,
-        formats: [BarcodeFormat.qrCode],
-      ),
     );
 
     useEffect(() => controller.dispose, []);
 
+    final size = MediaQuery.sizeOf(context);
+    final overlaySize = (size.shortestSide - 12).coerceAtMost(248);
+
     return Scaffold(
       extendBodyBehindAppBar: true,
       appBar: AppBar(
@@ -48,6 +52,7 @@ class QRCodeScannerScreen extends HookConsumerWidget with PresLogger {
                 }
               },
             ),
+            tooltip: t.profile.add.qrScanner.torchSemanticLabel,
             onPressed: () => controller.toggleTorch(),
           ),
           IconButton(
@@ -62,21 +67,110 @@ class QRCodeScannerScreen extends HookConsumerWidget with PresLogger {
                 }
               },
             ),
+            tooltip: t.profile.add.qrScanner.facingSemanticLabel,
             onPressed: () => controller.switchCamera(),
           ),
         ],
       ),
-      body: MobileScanner(
+      body: Stack(
-        controller: controller,
+        children: [
-        onDetect: (capture) {
+          MobileScanner(
-          final data = capture.barcodes.first;
+            controller: controller,
-          if (context.mounted && data.type == BarcodeType.url) {
+            onDetect: (capture) {
-            loggy.debug('captured raw: [${data.rawValue}]');
+              final data = capture.barcodes.first;
-            loggy.debug('captured url: [${data.url?.url}]');
+              if (context.mounted && data.type == BarcodeType.url) {
-            Navigator.of(context, rootNavigator: true).pop(data.url?.url);
+                loggy.debug('captured raw: [${data.rawValue}]');
-          }
+                loggy.debug('captured url: [${data.url?.url}]');
-        },
+                Navigator.of(context, rootNavigator: true).pop(data.url?.url);
+              }
+            },
+            errorBuilder: (_, error, __) {
+              final message = switch (error.errorCode) {
+                MobileScannerErrorCode.permissionDenied =>
+                  t.profile.add.qrScanner.permissionDeniedError,
+                _ => t.profile.add.qrScanner.unexpectedError,
+              };
+
+              return Center(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    const Padding(
+                      padding: EdgeInsets.only(bottom: 8),
+                      child: Icon(Icons.error, color: Colors.white),
+                    ),
+                    Text(message),
+                    Text(error.errorDetails?.message ?? ''),
+                  ],
+                ),
+              );
+            },
+          ),
+          CustomPaint(
+            painter: ScannerOverlay(
+              Rect.fromCenter(
+                center: size.center(Offset.zero),
+                width: overlaySize,
+                height: overlaySize,
+              ),
+            ),
+          ),
+        ],
       ),
     );
   }
 }
+
+class ScannerOverlay extends CustomPainter {
+  ScannerOverlay(this.scanWindow);
+
+  final Rect scanWindow;
+  final double borderRadius = 12.0;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final backgroundPath = Path()..addRect(Rect.largest);
+    final cutoutPath = Path()
+      ..addRRect(
+        RRect.fromRectAndCorners(
+          scanWindow,
+          topLeft: Radius.circular(borderRadius),
+          topRight: Radius.circular(borderRadius),
+          bottomLeft: Radius.circular(borderRadius),
+          bottomRight: Radius.circular(borderRadius),
+        ),
+      );
+
+    final backgroundPaint = Paint()
+      ..color = Colors.black.withOpacity(0.5)
+      ..style = PaintingStyle.fill
+      ..blendMode = BlendMode.dstOut;
+
+    final backgroundWithCutout = Path.combine(
+      PathOperation.difference,
+      backgroundPath,
+      cutoutPath,
+    );
+
+    final borderPaint = Paint()
+      ..color = Colors.white
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 3.0;
+
+    final borderRect = RRect.fromRectAndCorners(
+      scanWindow,
+      topLeft: Radius.circular(borderRadius),
+      topRight: Radius.circular(borderRadius),
+      bottomLeft: Radius.circular(borderRadius),
+      bottomRight: Radius.circular(borderRadius),
+    );
+
+    canvas.drawPath(backgroundWithCutout, backgroundPaint);
+    canvas.drawRRect(borderRect, borderPaint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return false;
+  }
+}