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

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

前言

在使用此插件之前，请确保为相机和图库设置权限。

特性

• 使用ScannerView在小部件树中显示扫描视图。
• 自定义可识别区域。
• 通过ScannerController.getQrFromImage从图像路径解码二维码。

准备工作

iOS

在info.plist文件中添加以下权限描述：

<key>NSCameraUsageDescription</key>
<string>你的使用描述</string>
<key>NSMicrophoneUsageDescription</key>
<string>你的使用描述</string>

Android

在AndroidManifest.xml文件中添加相机权限：

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

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

dependencies:
  perfect_scanner: ^newest

导入必要的包：

import 'package:perfect_scanner/perfect_scanner.dart';

使用方法

显示ScannerView

在小部件树中使用ScannerView来展示扫描界面：

Container(
  width: 250, 
  height: 250,
  child: ScannerView(
   qrOverlay: QrOverlay(
     borderColor: Colors.green,
     borderWidth: 15,
     borderRadius: 10,
     cutOutSize: 300,
   ),
   onScan: (image) {
     if (image.isNotEmpty) {
       ScaffoldMessenger.of(context).showSnackBar(
         SnackBar(
           content: Text('QR DATA : $image'),
         ),
       );
     }
   },
 ),
)

暂停或恢复扫描

可以使用ScannerController.resumeScanning()和ScannerController.pauseScanning()来控制摄像头的开启与关闭：

ScannerController.resumeScanning();
ScannerController.pauseScanning();

从图像路径获取二维码字符串

使用ScannerController.getQrFromImage方法从图像路径中获取二维码字符串：

String result = await ScannerController.getQrFromImage(imagePath);

切换闪光灯

使用ScannerController.toggleFlash()方法切换闪光灯：

ScannerController.toggleFlash();

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用perfect_scanner插件。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    permissionHandler();
    super.initState();
  }

  permissionHandler() async {
    Permission status = Permission.camera;
    await status.request();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Builder(builder: (context) {
            return ElevatedButton(
              onPressed: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (_) => const CamView()));
              },
              child: const Text('前往扫描页面'),
            );
          }),
        ),
      ),
    );
  }
}

class CamView extends StatefulWidget {
  const CamView({super.key});

  [@override](/user/override)
  State<CamView> createState() => _CamViewState();
}

class _CamViewState extends State<CamView> {
  bool isFlashOn = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            onPressed: () async {
              final image = await ScannerController.getQrFromImage();
              debugPrint(image);
            },
            icon: const Icon(
              Icons.image,
              color: Colors.white,
            ),
          ),
          IconButton(
            onPressed: () async {
              ScannerController.resumeScanning();
              isFlashOn = await ScannerController.toggleFlash();
              setState(() {});
            },
            icon: Icon(
              isFlashOn ? Icons.flashlight_off : Icons.flashlight_on,
              color: Colors.white,
            ),
          ),
        ],
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: ScannerView(
          qrOverlay: QrOverlay(
            borderColor: Colors.green,
            borderWidth: 15,
            borderRadius: 10,
            cutOutSize: 300,
          ),
          onScan: (image) {
            if (image.isNotEmpty) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('QR DATA : $image'),
                ),
              );
            }
          },
        ),
      ),
    );
  }
}