Flutter二维码扫描插件flutter_code

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

flutter_code_scanner 是一个用于在 Flutter 应用中实现二维码扫描功能的插件。通过这个插件，你可以在你的应用中集成二维码扫描功能。

获取开始

首先，确保你已经安装了 flutter_code_scanner 插件。你可以在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_code_scanner: ^版本号

然后运行 flutter pub get 来获取依赖。

示例代码

下面是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_code_scanner 插件进行二维码扫描。

// 忽略文件中的导入警告
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_code_scanner/ai_barcode_scanner.dart';
import 'package:flutter_code_scanner/src/flutter_code_scanner.dart';
import 'package:flutter_code_scanner/src/flutter_code_scanner_overlay_shape.dart';
import 'package:flutter_code_scanner/src/types/barcode.dart' as bc;

void main() => runApp(const MaterialApp(home: Home()));

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String barcode = 'Tap to scan';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 使用AI扫描条形码
              ElevatedButton(
                child: const Text('Scan Barcode'),
                onPressed: () async {
                  await Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => AiBarcodeScanner(
                        hasAppBar: true,
                        customAppBarWidget: Container(
                          height: 120,
                          color: Colors.blue,
                          child: Center(child: Text("Scanning")),
                        ),
                        validateText: 'https://', // 验证链接
                        validateType: ValidateType.startsWith,
                        canPop: false,
                        onScan: (String value) {
                          debugPrint(value);
                          setState(() {
                            barcode = value;
                          });
                        },
                        onDetect: (p0) {},
                        controller: MobileScannerController(
                          detectionSpeed: DetectionSpeed.noDuplicates,
                        ),
                      ),
                    ),
                  );
                },
              ),
              Text(barcode),
              // 普通扫描二维码
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => const QrExample(),
                  ));
                },
                child: const Text('Scan Qr Code'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<StatefulWidget> createState() => _QrExampleState();
}

class _QrExampleState extends State<QrExample> {
  bc.Barcode? result;
  QrController? controller;
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');

  void resumeC() async {
    await controller?.resumeCamera();
  }

  @override
  void initState() {
    super.initState();
    resumeC();
  }

  String barcode = 'Tap to scan';
  @override
  Widget build(BuildContext context) {
    resumeC();
    return Scaffold(
        backgroundColor: const Color(0xFF4A4A4A).withOpacity(1),
        body: Center(
          child: _buildQrView(context),
        ));
  }

  Widget _buildQrView(BuildContext context) {
    // 根据设备宽度或高度调整扫描区域和覆盖层
    var scanArea = (MediaQuery.of(context).size.width < 400 || 
            MediaQuery.of(context).size.height < 400)
        ? 180.0
        : 240.0;
    return QRView(
      key: qrKey,
      onQRViewCreated: _onQRViewCreated,
      overlay: QrScannerOverlayShape(
        borderColor: Colors.white,
        borderLength: 30,
        borderWidth: 5,
        cutOutSize: scanArea,
      ),
      onPermissionSet: (ctrl, p) => _onPermissionSet(context, ctrl, p),
    );
  }

  void _onQRViewCreated(QrController controller) {
    setState(() {
      this.controller = controller;
    });
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        result = scanData;
      });
    });
  }

  void _onPermissionSet(BuildContext context, QrController ctrl, bool p) {
    log('${DateTime.now().toIso8601String()}_onPermissionSet $p');
    if (!p) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('no Permission')),
      );
    }
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
}

代码说明

导入库：

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_code_scanner/ai_barcode_scanner.dart';
import 'package:flutter_code_scanner/src/flutter_code_scanner.dart';
import 'package:flutter_code_scanner/src/flutter_code_scanner_overlay_shape.dart';
import 'package:flutter_code_scanner/src/types/barcode.dart' as bc;

主入口：

void main() => runApp(const MaterialApp(home: Home()));

Home 页面：

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String barcode = 'Tap to scan';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(
                child: const Text('Scan Barcode'),
                onPressed: () async {
                  await Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => AiBarcodeScanner(
                        hasAppBar: true,
                        customAppBarWidget: Container(
                          height: 120,
                          color: Colors.blue,
                          child: Center(child: Text("Scanning")),
                        ),
                        validateText: 'https://',
                        validateType: ValidateType.startsWith,
                        canPop: false,
                        onScan: (String value) {
                          debugPrint(value);
                          setState(() {
                            barcode = value;
                          });
                        },
                        onDetect: (p0) {},
                        controller: MobileScannerController(
                          detectionSpeed: DetectionSpeed.noDuplicates,
                        ),
                      ),
                    ),
                  );
                },
              ),
              Text(barcode),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => const QrExample(),
                  ));
                },
                child: const Text('Scan Qr Code'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

QrExample 页面：

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

  @override
  State<StatefulWidget> createState() => _QrExampleState();
}

class _QrExampleState extends State<QrExample> {
  bc.Barcode? result;
  QrController? controller;
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');

  void resumeC() async {
    await controller?.resumeCamera();
  }

  @override
  void initState() {
    super.initState();
    resumeC();
  }

  String barcode = 'Tap to scan';
  @override
  Widget build(BuildContext context) {
    resumeC();
    return Scaffold(
        backgroundColor: const Color(0xFF4A4A4A).withOpacity(1),
        body: Center(
          child: _buildQrView(context),
        ));
  }

  Widget _buildQrView(BuildContext context) {
    var scanArea = (MediaQuery.of(context).size.width < 400 || 
            MediaQuery.of(context).size.height < 400)
        ? 180.0
        : 240.0;
    return QRView(
      key: qrKey,
      onQRViewCreated: _onQRViewCreated,
      overlay: QrScannerOverlayShape(
        borderColor: Colors.white,
        borderLength: 30,
        borderWidth: 5,
        cutOutSize: scanArea,
      ),
      onPermissionSet: (ctrl, p) => _onPermissionSet(context, ctrl, p),
    );
  }

  void _onQRViewCreated(QrController controller) {
    setState(() {
      this.controller = controller;
    });
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        result = scanData;
      });
    });
  }

  void _onPermissionSet(BuildContext context, QrController ctrl, bool p) {
    log('${DateTime.now().toIso8601String()}_onPermissionSet $p');
    if (!p) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('no Permission')),
      );
    }
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
}

更多关于Flutter二维码扫描插件flutter_code_scanner的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

songsunli 1楼作者

更多关于Flutter二维码扫描插件flutter_code_scanner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_code_scanner 是一个用于在 Flutter 应用中实现二维码扫描功能的插件。它基于 mobile_scanner 插件，提供了简单易用的 API 来扫描二维码和条形码。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_code_scanner 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_code_scanner: ^0.1.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用

1. 导入依赖

在你的 Dart 文件中导入 flutter_code_scanner：

import 'package:flutter_code_scanner/flutter_code_scanner.dart';

2. 创建扫描页面

你可以创建一个新的页面来显示二维码扫描界面。以下是一个简单的示例：

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

class QRScannerPage extends StatefulWidget {
  @override
  _QRScannerPageState createState() => _QRScannerPageState();
}

class _QRScannerPageState extends State<QRScannerPage> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  String? _result;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Scanner'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 5,
            child: CodeScanner(
              key: qrKey,
              onScan: (String? result) {
                setState(() {
                  _result = result;
                });
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: Center(
              child: Text('Scan result: $_result'),
            ),
          ),
        ],
      ),
    );
  }
}

3. 导航到扫描页面

在你的应用中，你可以通过导航器将用户引导到扫描页面：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => QRScannerPage(),
  ),
);

参数配置

flutter_code_scanner 提供了多个参数来配置扫描行为：

onScan: 当扫描到二维码或条形码时触发的回调函数。
cameraFacing: 设置摄像头方向，可以是 CameraFacing.front（前置摄像头）或 CameraFacing.back（后置摄像头）。
formats: 指定要扫描的格式，例如 BarcodeFormat.qrCode 或 BarcodeFormat.all。
autoFocus: 是否启用自动对焦，默认为 true。

示例

CodeScanner(
  onScan: (String? result) {
    print('Scanned: $result');
  },
  cameraFacing: CameraFacing.back,
  formats: [BarcodeFormat.qrCode],
  autoFocus: true,
);

处理权限

在使用摄像头功能时，确保你已经处理了摄像头的权限。你可以在 AndroidManifest.xml 和 Info.plist 中添加相应的权限声明。

Android

在 android/app/src/main/AndroidManifest.xml 中添加：

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

iOS

在 ios/Runner/Info.plist 中添加：

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to scan QR codes.</string>