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

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

简介

QR FLUTTER SCANNER 是一个用于扫描和生成二维码的 Flutter 插件。该插件基于 Dart 实现，可以轻松地将条形码扫描和生成功能集成到您的 Flutter 应用程序中。

完整示例代码

以下是一个完整的 Flutter 项目示例，展示了如何使用 qr_flutter_scanner 插件进行二维码扫描和生成。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:qr_flutter_scanner/flutter_zxing.dart';

void main() {
  zx.setLogEnabled(kDebugMode);
  // 打印 zxing 版本信息
  debugPrint('ZXing version:  ${zx.version()}');
  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)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Zxing Example',
      debugShowCheckedModeBanner: false,
      home: DemoPage(),
    );
  }
}

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

  [@override](/user/override)
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  Uint8List? createdCodeBytes;

  Code? result;
  Codes? multiResult;

  bool isMultiScan = false;

  bool showDebugInfo = true;
  int successScans = 0;
  int failedScans = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final isCameraSupported = defaultTargetPlatform == TargetPlatform.iOS || defaultTargetPlatform == TargetPlatform.android;
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: const TabBar(
            tabs: [
              Tab(text: 'Scan Code'),
              Tab(text: 'Create Code'),
            ],
          ),
        ),
        body: TabBarView(
          physics: const NeverScrollableScrollPhysics(),
          children: [
            if (kIsWeb)
              const UnsupportedPlatformWidget()
            else if (!isCameraSupported)
              const Center(
                child: Text('Camera not supported on this platform'),
              )
            else if (result != null && result?.isValid == true)
              ScanResultWidget(
                result: result,
                onScanAgain: () => setState(() => result = null),
              )
            else
              Stack(
                children: [
                  ReaderWidget(
                    onScan: _onScanSuccess,
                    onScanFailure: _onScanFailure,
                    onMultiScan: _onMultiScanSuccess,
                    onMultiScanFailure: _onMultiScanFailure,
                    onMultiScanModeChanged: _onMultiScanModeChanged,
                    onControllerCreated: _onControllerCreated,
                    isMultiScan: isMultiScan,
                    scanDelay: Duration(milliseconds: isMultiScan ? 50 : 500),
                    resolution: ResolutionPreset.high,
                    lensDirection: CameraLensDirection.back,
                  ),
                  if (showDebugInfo)
                    DebugInfoWidget(
                      successScans: successScans,
                      failedScans: failedScans,
                      error: isMultiScan ? multiResult?.error : result?.error,
                      duration: isMultiScan
                          ? multiResult?.duration ?? 0
                          : result?.duration ?? 0,
                      onReset: _onReset,
                    ),
                ],
              ),
            if (kIsWeb)
              const UnsupportedPlatformWidget()
            else
              ListView(
                children: [
                  WriterWidget(
                    messages: const Messages(
                      createButton: 'Create Code',
                    ),
                    onSuccess: (result, bytes) {
                      setState(() {
                        createdCodeBytes = bytes;
                      });
                    },
                    onError: (error) {
                      _showMessage(context, 'Error: $error');
                    },
                  ),
                  if (createdCodeBytes != null)
                    Image.memory(createdCodeBytes ?? Uint8List(0), height: 400),
                ],
              ),
          ],
        ),
      ),
    );
  }

  void _onControllerCreated(_, Exception? error) {
    if (error != null) {
      // 处理权限或未知错误
      _showMessage(context, 'Error: $error');
    }
  }

  _onScanSuccess(Code? code) {
    setState(() {
      successScans++;
      result = code;
    });
  }

  _onScanFailure(Code? code) {
    setState(() {
      failedScans++;
      result = code;
    });
    if (code?.error?.isNotEmpty == true) {
      _showMessage(context, 'Error: ${code?.error}');
    }
  }

  _onMultiScanSuccess(Codes codes) {
    setState(() {
      successScans++;
      multiResult = codes;
    });
  }

  _onMultiScanFailure(Codes result) {
    setState(() {
      failedScans++;
      multiResult = result;
    });
    if (result.codes.isNotEmpty == true) {
      _showMessage(context, 'Error: ${result.codes.first.error}');
    }
  }

  _onMultiScanModeChanged(bool isMultiScan) {
    setState(() {
      this.isMultiScan = isMultiScan;
    });
  }

  _showMessage(BuildContext context, String message) {
    ScaffoldMessenger.of(context).hideCurrentSnackBar();
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }

  _onReset() {
    setState(() {
      successScans = 0;
      failedScans = 0;
    });
  }
}

说明

• ReaderWidget: 用于二维码扫描的组件。
• WriterWidget: 用于生成二维码的组件。
• ScanResultWidget: 显示扫描结果的组件。
• DebugInfoWidget: 显示调试信息的组件。
• UnsupportedPlatformWidget: 在不支持的平台上显示提示信息的组件。

使用方法

1. 初始化插件:

   void main() {
     zx.setLogEnabled(kDebugMode);
     debugPrint('ZXing version:  ${zx.version()}');
     runApp(const MyApp());
   }
   

2. 创建主应用页面:

   class MyApp extends StatefulWidget {
     const MyApp({super.key});
   
     [@override](/user/override)
     State<MyApp> createState() => _MyAppState();
   }
   
   class _MyAppState extends State<MyApp> {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return const MaterialApp(
         title: 'Flutter Zxing Example',
         debugShowCheckedModeBanner: false,
         home: DemoPage(),
       );
     }
   }
   

3. 创建演示页面:

   class DemoPage extends StatefulWidget {
     const DemoPage({super.key});
   
     [@override](/user/override)
     State<DemoPage> createState() => _DemoPageState();
   }
   
   class _DemoPageState extends State<DemoPage> {
     // 其他状态变量
   }
   

4. 构建UI:

   [@override](/user/override)
   Widget build(BuildContext context) {
     final isCameraSupported = defaultTargetPlatform == TargetPlatform.iOS || defaultTargetPlatform == TargetPlatform.android;
     return DefaultTabController(
       length: 2,
       child: Scaffold(
         appBar: AppBar(
           title: const TabBar(
             tabs: [
               Tab(text: 'Scan Code'),
               Tab(text: 'Create Code'),
             ],
           ),
         ),
         body: TabBarView(
           physics: const NeverScrollableScrollPhysics(),
           children: [
             // 扫描二维码部分
             // 生成二维码部分
           ],
         ),
       ),
     );
   }