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

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

code_scanner 是一个用于Flutter的二维码扫描插件，支持通过摄像头扫描二维码以及从相册中选择图片读取二维码。该插件会响应相机和相册的权限请求，并提供扫描和读取功能。

平台支持

• iOS: 支持iOS 8.0及以上版本
• Android: 最低支持API 23

配置

iOS配置

在 info.plist 文件中添加以下内容：

<key>NSCameraUsageDescription</key>
<string>需要访问您的相机以进行二维码扫描</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问您的相册以读取二维码图片</string>
<key>io.flutter.embedded_views_preview</key>
<true/>

Android配置

在 AndroidManifest.xml 文件中添加以下内容：

<manifest ... xmlns:tools="http://schemas.android.com/tools">
    <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
</manifest>

依赖库

• iOS: 使用 MTBBarcodeScanner
• Android: 使用 zxing-android-embedded

使用方法

View & View Controller

CodeScanner 是用于显示二维码扫描界面的Widget，CodeScannerController 是用于控制扫描行为的控制器。

/// 扫描Widget
CodeScanner(
  controller: controller,
  isScanFrame: true, // 是否显示扫描框，默认为true
  scanFrameSize: Size(200, 200), // 扫描框大小，默认为200x200
  frameWidth: 8, // 扫描框边框宽度，默认为8
  frameColor: Color(0xcc222222), // 扫描框颜色，默认为深灰色
)

/// Widget控制器
controller = CodeScannerController();

获取扫描数据

通过监听 scanDataStream 流来获取扫描到的二维码数据。

/// 监听扫描数据
controller.scanDataStream.listen((data) {
  print('扫描到的数据: $data');
});

获取读取数据

如果从相册中读取二维码图片成功，isSuccessReadDataStream 流会返回 true；如果失败，则返回 false。你也可以直接监听 readDataStream 流来获取读取结果，成功时返回实际数据，失败时返回 null。

/// 监听读取成功的标志
controller.isSuccessReadDataStream.listen((success) {
  if (success) {
    print('读取成功');
  } else {
    print('读取失败');
  }
});

/// 监听读取数据
controller.readDataStream.listen((data) {
  if (data != null) {
    print('读取到的数据: $data');
  } else {
    print('读取失败');
  }
});

方法

• 开始扫描：await controller.startScan();（当 CodeScanner 创建时会自动调用此方法）
• 停止扫描：await controller.stopScan();（默认在控制器销毁时调用）
• 从相册读取二维码：await controller.readDataFromGallery();
• 打开闪光灯：await controller.lightON();
• 关闭闪光灯：await controller.lightOFF();
• 切换闪光灯：await controller.toggleLight();

完整示例代码

以下是一个完整的示例代码，展示了如何使用 code_scanner 插件进行二维码扫描和从相册读取二维码。

import 'package:code_scanner/code_scanner.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: CodeScannerHome()));
}

class CodeScannerHome extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Scanner Example'),
      ),
      body: Center(
        child: FloatingActionButton(
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => CodeScannerExample()),
            );
          },
          child: Icon(Icons.camera_alt),
        ),
      ),
    );
  }
}

class CodeScannerExample extends StatefulWidget {
  [@override](/user/override)
  _CodeScannerExampleState createState() => _CodeScannerExampleState();
}

class _CodeScannerExampleState extends State<CodeScannerExample> {
  CodeScannerController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    this.controller = CodeScannerController();
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Scanner'),
        leading: IconButton(
          key: Key('closeButton'),
          icon: const Icon(Icons.close),
          onPressed: () {
            Navigator.pop(context, '');
          },
        ),
      ),
      body: Stack(
        alignment: AlignmentDirectional.center,
        children: [
          // 扫描区域
          CodeScanner(
            controller: controller,
            isScanFrame: true,
            frameColor: Color(0xcc222222),
          ),
          
          // 提示文本
          Container(
            margin: const EdgeInsets.only(bottom: 500),
            padding: const EdgeInsets.all(5.0),
            width: 300,
            decoration: BoxDecoration(
              color: Color(0xcc222222),
              border: Border.all(color: Color(0xcc222222)),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Text(
              'Scan code',
              style: TextStyle(color: Colors.white, fontSize: 17),
              textAlign: TextAlign.center,
            ),
          ),
          
          // 显示扫描结果
          Container(
            margin: const EdgeInsets.only(top: 350),
            padding: const EdgeInsets.all(5.0),
            width: 300,
            decoration: BoxDecoration(
              color: Color(0xcc222222),
              border: Border.all(color: Color(0xcc222222)),
              borderRadius: BorderRadius.circular(10),
            ),
            child: StreamBuilder<String>(
              stream: controller.scanDataStream,
              builder: (context, snapshot) {
                return Text(
                  'Scan Data: ${snapshot.data}',
                  style: TextStyle(color: Colors.white, fontSize: 17),
                  textAlign: TextAlign.center,
                );
              },
            ),
          ),
          
          // 显示读取结果
          Container(
            margin: const EdgeInsets.only(top: 450),
            padding: const EdgeInsets.all(5.0),
            width: 300,
            decoration: BoxDecoration(
              color: Color(0xcc222222),
              border: Border.all(color: Color(0xcc222222)),
              borderRadius: BorderRadius.circular(10),
            ),
            child: StreamBuilder<String>(
                stream: controller.readDataStream,
                builder: (context, snapshot) {
                  return (snapshot.hasData)
                      ? Text(
                          'Read Data: ${snapshot.data}',
                          style: TextStyle(color: Colors.white, fontSize: 17),
                          textAlign: TextAlign.center,
                        )
                      : Text(
                          'Read Failure',
                          style: TextStyle(color: Colors.white, fontSize: 17),
                          textAlign: TextAlign.center,
                        );
                }),
          ),
          
          // 操作按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                margin: const EdgeInsets.only(top: 600),
                child: FloatingActionButton(
                  heroTag: "hero1",
                  child: Icon(Icons.lightbulb_outline),
                  backgroundColor: Color(0xcc222222),
                  onPressed: () async {
                    await controller.toggleLight();
                  },
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 600),
                child: FloatingActionButton(
                  heroTag: "hero2",
                  child: Icon(Icons.photo_library),
                  backgroundColor: Color(0xcc222222),
                  onPressed: () async {
                    await controller.readDataFromGallery();
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}