Flutter二维码读取插件flutter_qr_reader的使用

flutter_qr_reader 是一个用于在Flutter应用中实现二维码扫描功能的插件。它支持从图片中识别二维码，以及通过摄像头实时扫描二维码。

DEMO

以下是插件提供的示例截图和动画演示：

Getting Started

基本用法

识别图片中的二维码

import 'package:flutter_qr_reader/flutter_qr_reader.dart';
import 'dart:io';

final String data = await FlutterQrReader.imgScan(File('path_to_image'));

嵌入二维码扫描视图

QrReaderView(
  width: 320,
  height: 350,
  callback: (container) {
    // 初始化控制器
    QrReaderViewController controller = container;
    // 开始扫描
    controller.startCamera();
    // 打开手电筒
    controller.setFlashlight();
  },
)

iOS配置

对于iOS平台，需要在Info.plist文件中添加以下配置以启用嵌入视图，并确保相机权限描述已正确设置，否则应用可能会崩溃。

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

<key>NSCameraUsageDescription</key>
<string>The purpose explaining why you will use the camera</string>

内置UI示例

下面是一个使用内置UI进行二维码扫描的完整示例：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  GlobalKey<QrcodeReaderViewState> qrViewKey = GlobalKey();

  Future onScan(String data) async {
    await showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text("扫码结果"),
          content: Text(data),
          actions: <Widget>[
            TextButton(
              child: Text("确认"),
              onPressed: () => Navigator.pop(context),
            )
          ],
        );
      },
    );
    // 继续扫描
    qrViewKey.currentState?.startScan();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("二维码扫描")),
      body: Center(
        child: QrcodeReaderView(
          key: qrViewKey,
          onScan: onScan,
        ),
      ),
    );
  }
}

完整示例Demo

以下是基于官方示例代码的一个完整demo，展示了如何集成和使用flutter_qr_reader插件：

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter_qr_reader/flutter_qr_reader.dart';
import 'package:image_picker/image_picker.dart';
import 'package:permission_handler/permission_handler.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  bool _flashlightState = false;
  bool _showScanView = false;
  QrReaderViewController? _controller;

  void alert(String tip) {
    ScaffoldMessenger.of(scaffoldKey.currentContext!).showSnackBar(SnackBar(content: Text(tip)));
  }

  Future<bool> permission() async {
    var status = await Permission.camera.status;
    if (status.isDenied || status.isPermanentlyDenied) {
      status = await Permission.camera.request();
    }

    if (!status.isGranted) {
      alert("请必须授权照相机权限");
      return false;
    }
    return true;
  }

  Future openScan(BuildContext context) async {
    if (!(await permission())) return;
    setState(() {
      _showScanView = true;
    });
  }

  Future startScan() async {
    assert(_controller != null);
    _controller?.startCamera((String result, _) async {
      await stopScan();
      showDialog(
        context: scaffoldKey.currentContext!,
        builder: (context) {
          return AlertDialog(
            title: Text('扫码结果'),
            content: Text(result),
          );
        },
      );
    });
  }

  Future stopScan() async {
    assert(_controller != null);
    await _controller?.stopCamera();
    setState(() {
      _showScanView = false;
    });
  }

  Future flashlight() async {
    assert(_controller != null);
    final state = await _controller?.setFlashlight();
    setState(() {
      _flashlightState = state ?? false;
    });
  }

  Future imgScan() async {
    var image = await ImagePicker().getImage(source: ImageSource.gallery);
    if (image == null) return;
    final rest = await FlutterQrReader.imgScan(image.path);

    showDialog(
      context: scaffoldKey.currentContext!,
      builder: (context) {
        return AlertDialog(
          title: Text('扫码结果'),
          content: Text(rest),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        key: scaffoldKey,
        appBar: AppBar(
          title: const Text('二维码扫描演示'),
        ),
        body: Builder(builder: (context) {
          return Column(
            children: [
              ElevatedButton(onPressed: () => openScan(context), child: Text('启动扫描视图')),
              ElevatedButton(onPressed: flashlight, child: Text(_flashlightState == false ? '打开手电筒' : '关闭手电筒')),
              Container(
                height: 12,
                color: Colors.black12,
              ),
              _showScanView == true
                  ? Container(
                      width: 320,
                      height: 350,
                      child: QrReaderView(
                        width: 320,
                        height: 350,
                        callback: (container) {
                          this._controller = container;
                          this.startScan();
                        },
                      ),
                    )
                  : Container()
            ],
          );
        }),
      ),
    );
  }
}

此示例包括了启动扫描视图、处理相机权限请求、切换手电筒开关等功能。希望这些信息对你有所帮助！