สแกน QR Code และ Barcode ด้วย mobile scanner ใน Flutter

  mobile_scanner: ^5.2.3
  flutter_ringtone_player: ^4.0.0+3
  url_launcher: ^6.3.0

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
        android:maxSdkVersion="28"/>
    <!-- For Android 13+ -->
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
    <application ....
....
</manifest>

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:url_launcher/url_launcher_string.dart';
import 'package:flutter_ringtone_player/flutter_ringtone_player.dart';


class Scanners extends StatefulWidget {
  static const routeName = '/scanner';

  const Scanners({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _ScannersState();
  }
}

class _ScannersState extends State<Scanners> with WidgetsBindingObserver {
  // กำหนดส่วนควบคุม scanner ปรับค่าต่างๆ
  final MobileScannerController controller = MobileScannerController(
    autoStart: false, // ไม่เริ่มอัตโนมัติ
    torchEnabled: false, // ไม่เปิดแฟลชทันที
    useNewCameraSelector: true, // ใช้การเรียกใช้กล้องแบบ API ใหม่ 
  );

  // กำหนดค่าเก็บผลลัพธ์ ในที่นี้เราจะมีอยู่ 2 ค่า
  // _barcode ค่าที่ได้จากการสแกน และ _result ค่าไว้เก็บชั่วคราวไปส่งต่อ หรือปรับแต่ง
  Barcode? _result;
  Barcode? _barcode;
  // ตัวแปรตรวจจับข้อมูลที่มีการส่งมาอยางต่อเนื่อง เช่น  ข้อมูลเซ็นเซอร์ หรือข้อมูลจากกล้อง
  StreamSubscription<Object?>? _subscription;
  // ตัวจัดการควบคุมข้อมูล String ที่ได้จากการสแกน
  TextEditingController _textController = TextEditingController();

  // ฟังก์ชั่นจัดการข้อมูล barcode ถ้าไม่มีให้มีค่าเป็น null
  void _handleBarcode(BarcodeCapture barcodes) {
    if (mounted) {
      setState(() {
        _barcode = barcodes.barcodes.firstOrNull;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    // ตรวจจับสถานะของแอป เมื่อใช้ร่วมกับ  mixin WidgetsBindingObserver
    WidgetsBinding.instance.addObserver(this);
    // ตรวจจับค่า stream การเปลี่ยนแปลงข้อมูลที่ต่อเนื่อง
    _subscription = controller.barcodes.listen(_handleBarcode);
    // เรียกใช้ controller.start() โดยไม่ต้องรอให้ทำงานเสร็จ
    unawaited(controller.start());
  }

  // ตรวจจับการเปลี่ยนแปลงของสถานะแอปต่างๆ แล้วกำหนดการทำงาน
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (!controller.value.isInitialized) {
      return;
    }

    switch (state) {
      case AppLifecycleState.detached:
      case AppLifecycleState.hidden:
      case AppLifecycleState.paused:
        return;
      // แอปกลับมาทำงานต่อ  
      case AppLifecycleState.resumed:
        // ตรวจจับค่าข้อมูล
        _subscription = controller.barcodes.listen(_handleBarcode);
        unawaited(controller.start());
      case AppLifecycleState.inactive:
        // เมื่อไม่ active หรือเปิดแอปอื่นขึ้นมาใช้งานอยู่
        unawaited(_subscription?.cancel());
        _subscription = null;
        unawaited(controller.stop());
    }
  }

  // ฟังก์ชั่นสำหรับเปิดหรือเรียกใช้ค่าจาก รูปแบบข้อมูล
  Future<void> _launchURL(String url) async {
    try {
      // ตรวจสอบว่ามันเป็น URL หรือไม่
      final Uri? parsedUrl = Uri.tryParse(url);
      
      if (parsedUrl != null && (parsedUrl.isAbsolute || url.startsWith('geo:'))) {
        // ถ้าเป็น URL ที่ถูกต้องหรือ geo link
        if (await canLaunchUrl(parsedUrl)) {
          await launchUrl(parsedUrl);
        } else {
          throw 'xdebug: Could not launch $url';
        }
      } else {
        String finalUrl = url; 
          // ถ้าไม่ใช่ URL ให้ใช้ canLaunchUrlString
          if (await canLaunchUrlString(finalUrl)) {
            await launchUrlString(finalUrl);
          } else {
            throw 'xdebug: Could not launch $url';
          }
      }
    } catch (e) {
      print('Error launching URL: $e');
      // สามารถแสดงข้อความแสดงข้อผิดพลาดให้ผู้ใช้ได้ที่นี่ เช่น:
      // ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Error launching URL: $e')));
    }
  }

  // การล้างค่าต่างๆ เมื่อไม่มีการใช้งาน
  @override
  Future<void> dispose() async {
    _textController.dispose();
    WidgetsBinding.instance.removeObserver(this);
    unawaited(_subscription?.cancel());
    _subscription = null;
    super.dispose();
    await controller.dispose();
  }

  // ฟังก์ชั่นสำหรับคัดลองข้อความที่สแกน
  Future<void> _copyToClipboard() async {
    await Clipboard.setData(ClipboardData(text: _textController.text));

  // แสดงข้อความเมื่อคัดลอกข้อความแล้ว
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('คัดลอกข้อมูลเรียบร้อยแล้ว')),
    );    
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('สแกน บาร์โค้ด / คิวอาร์โค้ด'),
      ),
      body: SingleChildScrollView(
        child: Column(
          // mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              height: MediaQuery.of(context).size.height * 0.60, // กำหนดความสูงที่ต้องการ
              child: _buildScanner(context),
            ),            
          //  Expanded(flex: 3, child: _buildScanner(context)),
            Container(
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  // ส่วนของการแสดงข้อมูล เมื่อสแกนแล้ว ไม่เป็นค่า null
                  if (_barcode != null)
                    Builder(builder: (context) {
              //        print("xdebug: ${_barcode!.rawValue!}");
                      // ถ้าผลลลัพธ์ชั่วคราวเป้น null หรือ ค่าเดิมไม่เหมือนค่าใหม่ที่สแกน
                      if (_result == null ||
                          (_result!.displayValue! != _barcode!.displayValue!)) {
                        // เก็บค่าชั่วคราว จากค่าที่เพิ่งสแกนมา    
                        _result = _barcode;
                        // เล่นไฟล์เสียงแจ้งเตือนใช้ค่าเริ่มต้นของระบบ
                        FlutterRingtonePlayer().playNotification();
                      }
                      // กำหนดค่า string ข้อความที่สแกนมาได้
                    /*  _textController.value =
                          TextEditingValue(text: _barcode!.displayValue!); */
                      // กรณีเป็นค่าที่ไม่ใช่ข้อความ เช่น พวก vCard WIFI Event ใช้ค่า rawValue 
                      _textController.value =
                          TextEditingValue(text: _barcode!.rawValue!);       

                      // กำหนดรูปแบบข้อมูลที่รองรับการเปิด้วย url_launcher
                      // ในที่นี้จะไม่รองรับการเปิด WIFI VCard และ Event Calendar
                      final canLaunchList = ['http:','https:','tel:','sms:', 'mailto:', 'geo:'];
                      bool showLaunch = canLaunchList.any((field) => _textController.text.toString().contains(field));

                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          width: 300.0,
                          child: TextFormField(
                            controller: _textController,
                            decoration: InputDecoration(
                              fillColor: Color(0xFFfeeeee), // สีพื้นหลัง
                              filled: true, // กำหนดถ้ามีใส่สีพื้นหลัง fillColor
                              prefixIcon: IconButton(
                                  onPressed: _copyToClipboard, // คัดลอกข้อความ
                                  icon: const FaIcon(FontAwesomeIcons.copy)),
                              // ตรวจสอบรูปแบบข้อความ เพื่อกำหนดปุ่มด้านหลัง สามารถเรียกใช้งานหรือไม่                      
                              suffixIcon: showLaunch
                                  ? IconButton(
                                      onPressed: () {
                                        // ถ้าเป็นลิ้งค์ เรียกใช้งานฟังก์ชั่น _launchURL
                                        _launchURL(_textController.text);
                                      },
                                      icon: Builder(builder: (context) {
                                        // ตรวจสอบว่าเป็นลิ้งค์ประเภทไหน เช่น ไลน์ อีเมล sms เบอร์โทร หรืออื่นๆ
                                        // แล้วกำหนดรูปแบบไอคอนให้สอดคล้อง
                                        if (_textController.text
                                                .toString()
                                                .indexOf(':\/\/line') >
                                            -1) {
                                          return const FaIcon(
                                              FontAwesomeIcons.line);
                                        } else if (_textController.text
                                                .toString()
                                                .indexOf('mailto:') >
                                            -1) {
                                          return const FaIcon(
                                              FontAwesomeIcons.envelope);
                                        } else if (_textController.text
                                                .toString()
                                                .indexOf('sms:') >
                                            -1) {
                                          return const FaIcon(
                                              FontAwesomeIcons.commentSms);
                                        } else if (_textController.text
                                                .toString()
                                                .indexOf('tel:') >
                                            -1) {
                                          return const FaIcon(
                                              FontAwesomeIcons.mobileScreenButton);
                                        } else if (_textController.text
                                                .toString()
                                                .indexOf('geo:') >
                                            -1) {
                                          return const FaIcon(
                                              FontAwesomeIcons.map);
                                        } else if (_textController.text
                                                    .toString()
                                                    .indexOf('youtu.be') >
                                                -1 ||
                                            _textController.text
                                                    .toString()
                                                    .indexOf('youtube.com') >
                                                -1) {
                                          return const FaIcon(
                                              FontAwesomeIcons.youtube);
                                        } else if (_textController.text
                                                    .toString()
                                                    .indexOf('facebook.com') >
                                                -1 ||
                                            _textController.text
                                                    .toString()
                                                    .indexOf('fb:\/\/') >
                                                -1) {
                                          return const FaIcon(
                                              FontAwesomeIcons.facebook);
                                        } else if (_textController.text
                                                .toString()
                                                .indexOf('tiktok.com') >
                                            -1) {
                                          return const FaIcon(
                                              FontAwesomeIcons.tiktok);
                                        } else {
                                          return const FaIcon(FontAwesomeIcons
                                              .upRightFromSquare);
                                        }
                                      }),
                                    )
                                  : null,
                            ),
                            maxLines: null, // ทำให้ TextField ขยายได้ไม่จำกัด
                            minLines: 1, // จำนวนแถวขั้นต่ำ
                            readOnly: true, // ทำให้เป็นแบบอ่านอย่างเดียว
                          ),
                        ),
                      );
                    }),
                    // แสดงข้อความแนะนำ หรือคำอธิบายการใช้งาน
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Center(
                        child: const Text(
                          'สแกนบาร์โค้ด หรือคิวอาร์โค้ด',
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.black54,
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      // ส่วนของการกำหนดการใช้งานแฟลช
                      ValueListenableBuilder(
                        valueListenable: controller,
                        builder: (context, state, child) {
                          // ถ้ากล้องไม่พร้อมใช้งานหรือยังไม่ทำงน แสดง
                          // สร้าง widget กล่องที่มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ ขนาด 0
                          // หรือ widget ที่ "ว่างเปล่า"                          
                          if (!state.isInitialized || !state.isRunning) {
                            return const SizedBox.shrink();
                          }
                          // เงื่อนไขของการแสดงปุ่มเปิดแฟลช หรือปิดแฟลช หรือแบบ auto
                          switch (state.torchState) {
                            case TorchState.auto:
                              return ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                    //        backgroundColor: Color(0xFFf8a8ab),
                                    ),
                                onPressed: () async {
                                  await controller.toggleTorch();
                                  setState(() {});
                                },
                                child: const Icon(
                                  Icons.flash_auto,
                                  color: Color(0xFF404040),
                                ),
                              );
                            case TorchState.off:
                              return ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                    //        backgroundColor: Color(0xFFf8a8ab),
                                    ),
                                onPressed: () async {
                                  await controller.toggleTorch();
                                  setState(() {});
                                },
                                child: const Icon(
                                  Icons.flash_off,
                                  color: Color(0xFF404040),
                                ),
                              );
                            case TorchState.on:
                              return ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                    //       backgroundColor: Color(0xFFf8a8ab),
                                    ),
                                onPressed: () async {
                                  await controller.toggleTorch();
                                  setState(() {});
                                },
                                child: const Icon(
                                  Icons.flash_on,
                                  color: Color(0xFF404040),
                                ),
                              );
                            case TorchState.unavailable:
                              return ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                    //            backgroundColor: ui.Color.fromARGB(255, 226, 221, 222),
                                    ),
                                onPressed: () async {
                                  setState(() {});
                                },
                                child: const Icon(
                                  Icons.no_flash,
                                  color: Colors.grey,
                                ),
                              );
                          }
                        },
                      ),
                      SizedBox(
                        width: 10.0,
                      ),
                      // ส่วนของการกำหนดกล้องหน้า กล้องหลัง ถ้ามี ตรวจสอบจาก controller
                      ValueListenableBuilder(
                        valueListenable: controller,
                        builder: (context, state, child) {
                          // ถ้ากล้องไม่พร้อมใช้งานหรือยังไม่ทำงน แสดง
                          // สร้าง widget กล่องที่มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ ขนาด 0
                          // หรือ widget ที่ "ว่างเปล่า"
                          if (!state.isInitialized || !state.isRunning) {
                            return const SizedBox.shrink();
                          }
                          
                          // ตรวจสอบค่าสถานะจากกล้อง
                          final int? availableCameras = state.availableCameras;
                     //     print("xdebug: ${availableCameras}");
                            // ตรวจสอบค่าสถานะจำนวนกล้องที่รองรับ 
                            // ถ้ามีแค่กล้องเดียว ไม่ต้องแสดงอะไร โขว์ widget ที่ "ว่างเปล่า" แทน
                            // เพราะไม่จำเป็นต้องสลับกล้อง
                          if (availableCameras != null &&
                              availableCameras < 2) {
                            return const SizedBox.shrink();
                          }
                          // กำหนด widget สำหรับไอคอนแสดงกล้อง
                          final Widget icon;
                          // กรณีมีมากกว่า 1 กล้อง
                          // ใช้กล้องไหนอยู่แสดงไอคอนตามกล้องนั้น
                          switch (state.cameraDirection) {
                            case CameraFacing.front:
                              icon = const Icon(Icons.camera_front,
                                  color: Color(0xFF404040));
                            case CameraFacing.back:
                              icon = const Icon(Icons.camera_rear,
                                  color: Color(0xFF404040));
                          }
                          // แสดงปุ่มสลับกล้อง
                          return ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              // backgroundColor: Color(0xFFf8a8ab),
                              // elevation: 0.0,
                            ),
                            onPressed: () async {
                              // เรียกใช้คำสั่งสลับกล้อง
                              await controller.switchCamera();
                              setState(() {});
                            },
                            child: icon,
                          );
                        },
                      ),
                      SizedBox(
                        width: 10.0,
                      ),
                      // ส่วนปุ่มใช้งาน และหยุดชั่วคราว ให้แสดงขึ้นกับค่า controller
                      ValueListenableBuilder(
                        valueListenable: controller,
                        builder: (context, state, child) {
                          // ถ้ากล้องหยุดชั่วคราวอยู่ หรือยังไม่ทำงาน แสดงปุ่มใช้งานต่อ
                          if (!state.isInitialized || !state.isRunning) {
                            return ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.white,
                              ),
                              onPressed: () async {
                                // เรียรกใช้คำสั่งใช้งานกล้องต่อ
                                await controller.start();
                                setState(() {});
                              },
                              child: const Text('ใช้งานต่อ',
                                  style: TextStyle(
                                      fontSize: 20,
                                      color:
                                          Color(0xFFf92D050))),
                            );
                          }
                          // ถ้ากล้องใช้งานอยู่ แสดงปุม หยุดชั่วคราว
                          return ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Colors.white,
                            ),
                            onPressed: () async {
                              // เรียกใช้คำส่งหยุดกล้องชั่วคราว
                              await controller.stop();
                              setState(() {});
                            },
                            child: const Text('หยุดชั่วคราว',
                                style: TextStyle(
                                    fontSize: 20,
                                    color: Color(0xFFf92D050))),
                          );
                        },
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // ฟังก์ชั่นสร้างส่วนของช่องสแกน
  Widget _buildScanner(BuildContext context) {
    // กำหนดความกว้าง ความสูง ตามต้องการ
    final double overlayHeight = 250.0; // Set custom height
    final double overlayWidth = 300.0; // Set custom width
    return Stack(
      fit: StackFit.expand,
      children: [
        Positioned.fill(
          child: Container(
            color: Colors.black, // Background overlay
          ),
        ),
        // วางตำแหน่งของสแกนเนอร์
        Center(
          child: Container(
            width: overlayWidth,
            height: overlayHeight,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(
                  16.0), // กำหนดความมนของกรอบ
              child: MobileScanner(
                fit: BoxFit.cover,
                controller: controller,
              ),
            ),
          ),
        ),
        // ปรับแต่งพื้นที่สแกนเพิ่มเติม เช่นใส่เส้นขอบ
        Center(
          child: Container(
            width: overlayWidth,
            height: overlayHeight,
            decoration: BoxDecoration(
              border: Border.all(
                color: Color(0xFFf92D050),
                width: 3.0,
              ),
              borderRadius: BorderRadius.circular(16.0),
            ),
          ),
        ),
      ],
    );
  }
}

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
        android:maxSdkVersion="28"/>
    <!-- For Android 13+ -->
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

    <application
        android:label="Demo App"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
     ..........
    </application>

    <queries>
        <intent>
            <action android:name="android.intent.action.PROCESS_TEXT"/>
            <data android:mimeType="text/plain"/>
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="sms" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="tel" />
        </intent>
        <intent>
            <action android:name="android.support.customtabs.action.CustomTabsService" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="geo" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="http" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
        <intent>
            <action android:name="android.intent.action.SENDTO" />
            <data android:scheme="mailto" />
        </intent>
    </queries>
</manifest>