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

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

这是用于Flutter的一个简单二维码扫描插件。它通过摄像头扫描二维码并返回结果字符串。

该插件的基础原生扫描器是ZXing。

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用qr_scanner_flutter插件来实现二维码扫描功能。

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

import 'package:flutter/services.dart';
import 'package:flutter_qr_scanner_example/qr_scan_view.dart';
import 'package:qr_scanner_flutter/qr_scanner_flutter.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> {
  String _platformVersion = '未知';
  final _flutterQrScanPlugin = FlutterQrScanner();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 异步方法初始化平台状态
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，所以我们使用try/catch处理PlatformException。
    // 我们还处理了消息可能返回null的情况。
    try {
      platformVersion = await _flutterQrScanPlugin.getPlatformVersion() ?? 
          '未知平台版本';
    } on PlatformException {
      platformVersion = '获取平台版本失败。';
    }

    // 如果小部件在异步平台消息还在飞行时从树中移除，我们希望丢弃回复而不是调用
    // setState来更新我们的不存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('二维码扫描插件示例'),
        ),
        body: SafeArea(
          child: Column(
            children: [
              Center(
                child: Text('运行于: $_platformVersion\n'),
              ),
              Builder(builder: (context) {
                return ElevatedButton(
                  onPressed: () async {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const QRScanView(),
                      ),
                    );
                  },
                  child: const Text('开始扫描'),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}

扫描页面 QRScanView

接下来是扫描页面QRScanView的代码。这个页面负责展示摄像头界面，并进行二维码扫描。

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

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

  [@override](/user/override)
  _QRScanViewState createState() => _QRScanViewState();
}

class _QRScanViewState extends State<QRScanView> {
  late FlutterQrScanner _flutterQrScanner;

  [@override](/user/override)
  void initState() {
    super.initState();
    _flutterQrScanner = FlutterQrScanner(onScanResult: (result) {
      // 当扫描到二维码时触发的回调
      print("Scanned data: $result");
      // 这里可以添加更多逻辑，例如导航到另一个页面或显示一个对话框
      Navigator.of(context).pop(result);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('扫描二维码'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _flutterQrScanner.startScan();
          },
          child: const Text('打开摄像头开始扫描'),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _flutterQrScanner.dispose(); // 释放资源
    super.dispose();
  }
}