Flutter二维码扫描与生成插件google_barcode_kit的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter二维码扫描与生成插件google_barcode_kit的使用

Pub Version

一个用于在Android和iOS上使用Google独立版ML Kit的Flutter插件。

要求

iOS

  • 最低iOS部署目标版本:10.0
  • Xcode 12或更新版本
  • Swift 5
  • ML Kit仅支持64位架构(x86_64和arm64)。请检查此列表以查看您的设备是否具有所需的功能。

由于ML Kit不支持32位架构(i386和armv7)(阅读更多),您需要在Xcode中排除amrv7架构才能运行flutter build iosflutter build ipa

转到Project > Runner > Building Settings > Excluded Architectures > Any SDK > armv7

然后您的Podfile应如下所示:

# 添加这一行:
$iOSVersion = '10.0'

post_install do |installer|
  # 添加这些行:
  installer.pods_project.build_configurations.each do |config|
    config.build_settings["EXCLUDED_ARCHS[sdk=*]"] = "armv7"
    config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = $iOSVersion
  end
  
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    
    # 添加这些行:
    target.build_configurations.each do |config|
      if Gem::Version.new($iOSVersion) > Gem::Version.new(config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'])
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = $iOSVersion
      end
    end
    
  end
end

请注意,最低IPHONEOS_DEPLOYMENT_TARGET为10.0,您可以将其设置为更新的版本,但不能低于此版本。

Android

  • minSdkVersion: 21
  • targetSdkVersion: 29

使用方法

将此插件作为依赖项添加到您的pubspec.yaml文件中。

  • 在您的项目级build.gradle文件中,确保在buildscriptallprojects部分包含Google的Maven仓库(适用于所有API)。
  • 配置您的应用程序从Play商店自动下载模型到设备上。如果未配置,则相应的模型将在API首次调用时下载。
<meta-data
        android:name="com.google.mlkit.vision.DEPENDENCIES"
        android:value="ocr" />

1. 创建InputImage

从路径创建:

final inputImage = InputImage.fromFilePath(filePath);

从文件创建:

final inputImage = InputImage.fromFile(file);

从字节创建:

final inputImage = InputImage.fromBytes(bytes: bytes, inputImageData: inputImageData);

从CameraImage创建(如果您正在使用camera插件):

final camera; // 您的相机实例
final WriteBuffer allBytes = WriteBuffer();
for (Plane plane in cameraImage.planes) {
  allBytes.putUint8List(plane.bytes);
}
final bytes = allBytes.done().buffer.asUint8List();

final Size imageSize = Size(cameraImage.width.toDouble(), cameraImage.height.toDouble());

final InputImageRotation imageRotation =
    InputImageRotationMethods.fromRawValue(camera.sensorOrientation) ??
        InputImageRotation.Rotation_0deg;

final InputImageFormat inputImageFormat =
    InputImageFormatMethods.fromRawValue(cameraImage.format.raw) ??
        InputImageFormat.NV21;

final planeData = cameraImage.planes.map(
  (Plane plane) {
    return InputImagePlaneMetadata(
      bytesPerRow: plane.bytesPerRow,
      height: plane.height,
      width: plane.width,
    );
  },
).toList();

final inputImageData = InputImageData(
  size: imageSize,
  imageRotation: imageRotation,
  inputImageFormat: inputImageFormat,
  planeData: planeData,
);

final inputImage = InputImage.fromBytes(bytes: bytes, inputImageData: inputImageData);

2. 创建检测器实例

final barcodeScanner = GoogleMlKit.vision.barcodeScanner();

3. 调用相应的方法

final List<Barcode> barcodes = await barcodeScanner.processImage(inputImage);

4. 从响应中提取数据

for (Barcode barcode in barcodes) {
  final BarcodeType type = barcode.type;
  final Rect boundingBox = barcode.value.boundingBox;
  final String displayValue = barcode.value.displayValue;
  final String rawValue = barcode.value.rawValue;

  // 查看API引用以获取完整的支持类型列表
  switch (type) {
    case BarcodeType.wifi:
      BarcodeWifi barcodeWifi = barcode.value;
      break;
    case BarcodeValueType.url:
      BarcodeUrl barcodeUrl = barcode.value;
      break;
  }
}

5. 释放资源

barcodeScanner.close();

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

1 回复

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


当然,以下是如何在Flutter应用中使用google_barcode_kit插件来实现二维码扫描与生成的代码案例。

添加依赖

首先,你需要在你的pubspec.yaml文件中添加google_barcode_kit的依赖:

dependencies:
  flutter:
    sdk: flutter
  google_barcode_kit: ^1.0.0  # 请注意版本号,使用最新版本

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

二维码生成

以下是一个简单的示例,展示如何使用google_barcode_kit生成二维码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('二维码生成'),
        ),
        body: Center(
          child: QRCodeGenerator(),
        ),
      ),
    );
  }
}

class QRCodeGenerator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String data = "https://flutter.dev";

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('生成的二维码数据: $data'),
        SizedBox(height: 20),
        BarcodeWidget(
          barcode: Barcode.qrCode()
            ..data = data
            ..width = 250
            ..height = 250,
          options: BarcodeWidgetOptions(
            color: Colors.black,
            backgroundColor: Colors.white,
          ),
        ),
      ],
    );
  }
}

二维码扫描

以下是一个简单的示例,展示如何使用google_barcode_kit扫描二维码:

首先,创建一个新的Dart文件barcode_scanner.dart,并添加以下代码:

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

class BarcodeScannerPage extends StatefulWidget {
  @override
  _BarcodeScannerPageState createState() => _BarcodeScannerPageState();
}

class _BarcodeScannerPageState extends State<BarcodeScannerPage> {
  String result = "";

  Future<void> scanBarcode() async {
    try {
      final Barcode? barcode = await BarcodeScanner.scan();
      if (barcode != null) {
        setState(() {
          result = barcode.data;
        });
      }
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          result = "相机访问被拒绝";
        });
      } else {
        setState(() {
          result = "扫描失败: ${e.message}";
        });
      }
    } catch (e) {
      setState(() {
        result = "扫描失败: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('二维码扫描'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(result),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: scanBarcode,
              child: Text('扫描二维码'),
            ),
          ],
        ),
      ),
    );
  }
}

然后,在你的主应用文件中(比如main.dart),你可以这样导航到扫描页面:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 二维码示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => QRCodeGenerator()),
                ),
                child: Text('生成二维码'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => BarcodeScannerPage()),
                ),
                child: Text('扫描二维码'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何使用google_barcode_kit插件在Flutter应用中生成和扫描二维码。请确保你已经授予应用必要的相机权限,并在实际项目中根据需要进行错误处理和UI优化。

回到顶部