step 5 : slicing screen rekam, add scanner package

android/gradle.properties

@@ -1,3 +1,4 @@
 org.gradle.jvmargs=-Xmx4G -XX:MaxMetaspaceSize=2G -XX:+HeapDumpOnOutOfMemoryError
 android.useAndroidX=true
 android.enableJetifier=true
+dev.steenbakker.mobile_scanner.useUnbundled=true

ios/Runner/Info.plist

@@ -45,5 +45,9 @@
 	<true/>
 	<key>UIApplicationSupportsIndirectInputEvents</key>
 	<true/>
+	<key>io.flutter.embedded_views_preview</key>
+	<true/>
+	<key>NSCameraUsageDescription</key>
+	<string>This app needs camera access to scan QR codes</string>
 </dict>
 </plist>

lib/app/route.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../screen/home/rekam_screen.dart';
 
 import '../screen/home/home_screen.dart';
 import '../screen/login/login_screen.dart';
@@ -7,8 +8,7 @@ import '../screen/splash/splash_screen.dart';
 const splashRoute = "/splashRoute";
 const loginRoute = "/loginRoute";
 const homeRoute = "/homeRoute";
-const scanRoute = "/scanRoute";
+const rekamRoute = "/rekamRoute";
-const editScanRoute = "/editScanRoute";
 
 class AppRoute {
   static Route<dynamic> generateRoute(RouteSettings settings) {
@@ -45,6 +45,17 @@ class AppRoute {
       });
     }
 
+    // rekam screen
+    if (settings.name == rekamRoute) {
+      return MaterialPageRoute(builder: (context) {
+        return MediaQuery(
+          data: MediaQuery.of(context).copyWith(
+              textScaler: TextScaler.linear(1.0), padding: EdgeInsets.all(0)),
+          child: RekamScreen(),
+        );
+      });
+    }
+
     return MaterialPageRoute(builder: (context) {
       return MediaQuery(
         data: MediaQuery.of(context).copyWith(

lib/provider/voice_to_text_provider.dart

@@ -1,4 +1,5 @@
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:mobile_scanner/mobile_scanner.dart';
 import '../../model/edit_voice_to_text_model.dart';
 import '../../model/voice_to_text_model.dart';
 
@@ -19,4 +20,9 @@ final selectedEdit = StateProvider<EditVoiceToTextModel>(
     Voice2text_Updated: "",
     Voice2text_User_ID: "",
   ),
+);
+
+//
+final barcodeX = StateProvider<Barcode>(
+  (ref) => Barcode(),
 );

lib/screen/home/home_screen.dart

@@ -134,7 +134,7 @@ class HomeScreen extends HookConsumerWidget {
                 ),
                 child: ElevatedButton(
                   onPressed: () {
-                    // Navigator.of(context).pushNamed(scanRoute);
+                    Navigator.of(context).pushNamed(rekamRoute);
                   },
                   style: ElevatedButton.styleFrom(
                     backgroundColor: Constant.bgButton,

lib/screen/home/rekam_screen.dart

@@ -0,0 +1,198 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fluttervoice2text/provider/voice_to_text_provider.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:mobile_scanner/mobile_scanner.dart';
+
+import '../../app/constant.dart';
+
+class RekamScreen extends HookConsumerWidget {
+  const RekamScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    SystemChrome.setEnabledSystemUIMode(
+      SystemUiMode.manual,
+      overlays: [SystemUiOverlay.bottom],
+    );
+
+    final isRekam = useState<bool>(false);
+    final judulTombol = useState<String>("MULAI REKAM");
+    final qrCodeStr = useState<String>("");
+    final isSelesaiRekam = useState<bool>(false);
+
+    void handleBarcode(BarcodeCapture barcodes) {
+      if (barcodes.barcodes.isNotEmpty) {
+        final scannedBarcode =
+            barcodes.barcodes.firstOrNull?.displayValue ?? "";
+        if (scannedBarcode.isNotEmpty) {
+          ref.read(barcodeX.notifier).state = barcodes.barcodes.first;
+          qrCodeStr.value = scannedBarcode;
+        }
+      }
+    }
+
+    Widget buildBarcode(Barcode? value) {
+      final qrCode = value?.displayValue ?? "";
+
+      if (qrCode.isEmpty) {
+        return const Text(
+          'Scan untuk mendapatkan QR Code',
+          overflow: TextOverflow.fade,
+          style: TextStyle(color: Colors.white),
+        );
+      }
+
+      return Text(
+        "Info: $qrCode",
+        overflow: TextOverflow.fade,
+        style: const TextStyle(color: Colors.white),
+      );
+    }
+
+    useEffect(() {
+      handleBarcode;
+      return () {};
+    }, []);
+
+    return GestureDetector(
+      onTap: () {
+        FocusManager.instance.primaryFocus!.unfocus();
+      },
+      child: Scaffold(
+        resizeToAvoidBottomInset: true,
+        backgroundColor: Constant.bgGrey,
+        bottomNavigationBar: BottomAppBar(
+          color: Colors.blueGrey.shade100,
+          height: Constant.getActualYPhone(
+            context: context,
+            y: 100,
+          ),
+          shape: const CircularNotchedRectangle(),
+          child: Row(
+            children: [
+              ElevatedButton.icon(
+                onPressed: () {
+                  ref.read(barcodeX.notifier).state = Barcode();
+                  isRekam.value = false;
+                  judulTombol.value = "MULAI REKAM";
+                  qrCodeStr.value = "";
+                  isSelesaiRekam.value = false;
+                  Navigator.of(context).pop();
+                },
+                icon: Icon(
+                  Icons.arrow_back,
+                  size: 17,
+                  color: Constant.textWhite,
+                ),
+                label: Text(
+                  'Kembali',
+                  style: Constant.cardText(context: context).copyWith(
+                    color: Constant.textWhite,
+                  ),
+                ),
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: Colors.green.shade400,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  elevation: 8,
+                  shadowColor: Constant.bgButton.withOpacity(0.24),
+                ),
+              ),
+              const Spacer(),
+              // button
+              ElevatedButton(
+                onPressed: (qrCodeStr.value.isEmpty || isSelesaiRekam.value)
+                    ? null
+                    : () {
+                        judulTombol.value = "SELESAI";
+                        isSelesaiRekam.value = true;
+                      },
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: (qrCodeStr.value.isEmpty || isSelesaiRekam.value)
+                      ? Constant.bgGrey
+                      : Constant.bgButton,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  elevation: 8,
+                  shadowColor: Constant.bgButton.withOpacity(0.24),
+                ),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Icon(
+                      Icons.mic,
+                      size: Constant.getActualXPhone(
+                        context: context,
+                        x: 20,
+                      ),
+                      color: Constant.textWhite,
+                    ),
+                    SizedBox(
+                      width: Constant.getActualXPhone(
+                        context: context,
+                        x: 10,
+                      ),
+                    ),
+                    Text(
+                      judulTombol.value,
+                      style: Constant.titleButton500(context: context).copyWith(
+                        color: Constant.textWhite,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+        appBar: AppBar(
+          title: Text(
+            'Rekam Audio',
+            style: Constant.titlePosisiHP(context: context),
+          ),
+          automaticallyImplyLeading: false,
+        ),
+        body: Padding(
+          padding: EdgeInsets.symmetric(
+            horizontal: Constant.getActualXPhone(context: context, x: 20),
+          ),
+          child: Column(
+            children: [
+              // scanner
+              if (isRekam.value == false) ...[
+                SizedBox(
+                  width: double.infinity,
+                  height: Constant.getActualYPhone(
+                    context: context,
+                    y: 450,
+                  ),
+                  child: MobileScanner(
+                    onDetect: handleBarcode,
+                  ),
+                ),
+                SizedBox(
+                  height: Constant.getActualYPhone(
+                    context: context,
+                    y: 15,
+                  ),
+                ),
+              ],
+
+              // text
+              Container(
+                alignment: Alignment.center,
+                padding: const EdgeInsets.symmetric(vertical: 10),
+                color: Constant.inputanGrey,
+                child: buildBarcode(ref.watch(barcodeX)),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -6,12 +6,14 @@ import FlutterMacOS
 import Foundation
 
 import audioplayers_darwin
+import mobile_scanner
 import path_provider_foundation
 import record_darwin
 import shared_preferences_foundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   AudioplayersDarwinPlugin.register(with: registry.registrar(forPlugin: "AudioplayersDarwinPlugin"))
+  MobileScannerPlugin.register(with: registry.registrar(forPlugin: "MobileScannerPlugin"))
   PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
   RecordPlugin.register(with: registry.registrar(forPlugin: "RecordPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))

pubspec.lock

@@ -320,6 +320,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.15.0"
+  mobile_scanner:
+    dependency: "direct main"
+    description:
+      name: mobile_scanner
+      sha256: "91d28b825784e15572fdc39165c5733099ce0e69c6f6f0964ebdbf98a62130fd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.6"
   path:
     dependency: transitive
     description:

pubspec.yaml

@@ -49,6 +49,7 @@ dependencies:
   audioplayers: ^6.2.0
   toastification: ^2.3.0
   record: ^5.2.1
+  mobile_scanner: ^6.0.6
 
 dev_dependencies:
   flutter_test: