Flutter二维码扫描插件flutter_qr_scanner_widget的使用

flutter_qr_scanner_widget

flutter_qr_scanner_widget 是一个用于在 Flutter 应用中实现二维码扫描功能的插件。它支持 Android 和 iOS 平台，并提供了丰富的功能来满足开发者的需要。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_qr_scanner_widget: ^版本号
  permission_handler: ^版本号

然后运行以下命令以更新依赖：

flutter pub get

2. 请求相机权限

在 Android 和 iOS 上，使用相机功能需要请求用户授权。这里我们使用 permission_handler 插件来处理权限请求。

3. 创建二维码扫描页面

以下是一个完整的示例代码，展示如何使用 flutter_qr_scanner_widget 实现二维码扫描功能。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_qr_scanner_widget/flutter_qr_scanner_widget.dart';
import 'package:permission_handler/permission_handler.dart';

void main() => runApp(const MaterialApp(home: FlutterQrScannerExample()));

class FlutterQrScannerExample extends StatefulWidget {
  const FlutterQrScannerExample({Key? key}) : super(key: key);

  @override
  State<FlutterQrScannerExample> createState() => _FlutterQrScannerExampleState();
}

class _FlutterQrScannerExampleState extends State<FlutterQrScannerExample> with WidgetsBindingObserver {
  FlutterQrScannerController? _flutterQrScannerController;

  bool isCameraPermissionGranted = false;

  String scannedText = 'Some Scanned Text';

  bool isFlashOn = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _checkCameraPermission();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      // 恢复扫描器
      _flutterQrScannerController?.resumeCamera();
    } else if (state == AppLifecycleState.paused) {
      // 暂停扫描器
      _flutterQrScannerController?.pauseCamera();
    }
  }

  void _checkCameraPermission() async {
    var status = await Permission.camera.status;
    if (!status.isGranted) {
      // 如果未获得权限
      isCameraPermissionGranted = false;
    } else {
      // 已获得权限
      setState(() {
        isCameraPermissionGranted = true;
      });
    }
  }

  void _requestPermission() async {
    final result = await Permission.camera.request();
    setState(() {
      isCameraPermissionGranted = result.isGranted;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Scan QR example')),
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: isCameraPermissionGranted
            ? Stack(
                children: [
                  // 扫描区域
                  SizedBox.expand(
                    child: FlutterQrScanner(
                      onMapViewCreated: _onMapViewCreated,
                    ),
                  ),
                  // 扫描结果显示
                  Positioned.fill(
                    top: 40,
                    child: Align(
                      alignment: Alignment.topCenter,
                      child: Text(
                        scannedText,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 32,
                        ),
                      ),
                    ),
                  ),
                  // 控制按钮区域
                  Positioned.fill(
                    bottom: 40,
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          // 开关闪光灯按钮
                          InkWell(
                            onTap: () {
                              _flutterQrScannerController?.toggleFlash();
                              setState(() {
                                isFlashOn = !isFlashOn;
                              });
                            },
                            child: Container(
                              width: 60,
                              height: 60,
                              decoration: const BoxDecoration(
                                shape: BoxShape.circle,
                                color: Colors.white,
                              ),
                              child: Icon(
                                isFlashOn ? Icons.flash_on : Icons.flash_off,
                                size: 36,
                                color: Colors.black,
                              ),
                            ),
                          ),
                          const SizedBox(width: 60),
                          // 切换摄像头按钮
                          InkWell(
                            onTap: () {
                              _flutterQrScannerController?.toggleCamera();
                            },
                            child: Container(
                              width: 60,
                              height: 60,
                              decoration: const BoxDecoration(
                                shape: BoxShape.circle,
                                color: Colors.white,
                              ),
                              child: const Icon(
                                Icons.cameraswitch,
                                size: 36,
                                color: Colors.black,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              )
            : SizedBox.expand(
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Text('Camera permission is required to proceed.'),
                      const SizedBox(height: 20),
                      ElevatedButton(
                        onPressed: _requestPermission,
                        child: const Text('Request Permission'),
                      ),
                    ],
                  ),
                ),
              ),
      ),
    );
  }

  // 初始化扫描器
  void _onMapViewCreated(FlutterQrScannerController controller) {
    _flutterQrScannerController = controller;
    _flutterQrScannerController!.setOnResultReceivedCallback((scannedValue) {
      setState(() {
        scannedText = scannedValue;
      });
    });
  }
}

功能说明

1. 权限检查：

   • 使用 Permission.camera 检查是否已授予相机权限。
   • 如果未授予权限，则提示用户请求权限。

2. 二维码扫描：

   • 使用 FlutterQrScanner 小部件实现二维码扫描功能。
   • 扫描到的结果会通过回调函数传递给开发者。

3. 控制按钮：

   • 提供开关闪光灯和切换摄像头的功能。

4. 生命周期管理：

   • 在应用进入后台时暂停扫描器，在返回前台时恢复扫描器。

注意事项

• 确保在 Android 的 AndroidManifest.xml 文件中添加相机权限声明：

  <uses-permission android:name="android.permission.CAMERA"/>
  

• 在 iOS 的 Info.plist 文件中添加相机权限描述：

  <key>NSCameraUsageDescription</key>
  <string>我们需要访问您的相机来扫描二维码</string>