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

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

简介

flexible_barcode_scanner 是一个高度可定制且高效的二维码扫描库，基于Flutter构建。该插件使用了camera包和Google ML Kit Barcode Scanning功能，提供了实时二维码扫描，并支持自定义配置、动画覆盖等功能。

功能特性

• 可定制的相机视图：可以通过自定义覆盖层和操作来修改相机预览。
• 二维码检测：支持多种二维码格式，使用Google ML Kit进行识别。
• 动画覆盖：包含优雅的动画效果，提供扫描反馈。
• 相机切换：轻松切换前后摄像头。
• 手电筒开关：在低光环境下启用或禁用手电筒以提高扫描效果。
• 平台兼容性：完全支持Android和iOS平台。

示例截图

安装

在pubspec.yaml文件中添加以下依赖：

dependencies:
  flexible_barcode_scanner: ^0.0.12

设置

iOS设置

在Podfile中添加以下内容：

platform :ios, '15.5.0'  # 或更新版本
$iOSVersion = '15.5.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

在Info.plist中添加以下权限：

<key>NSCameraUsageDescription</key>
<string>需要相机权限来扫描二维码</string>

Android设置

在android/App/build.gradle中设置以下内容：

minSdkVersion: 21
targetSdkVersion: 33
compileSdkVersion: 34

在android/app/src/main/AndroidManifest.xml中添加以下权限：

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

使用示例

下面是一个完整的示例代码，展示了如何使用flexible_barcode_scanner插件进行二维码扫描：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Barcode Scanner',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Barcode Scanner'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String barcode = "";

  void _scanBarcode() async {
    // 调用scanBarcode方法进行二维码扫描
    final resultbarcode = await scanBarcode(
      context,
      backButtonIcon: const Icon(
        Icons.arrow_back,
        color: Colors.blue,
      ),
      loadingWidget: CircularProgressIndicator(
        color: Colors.green,
      ),
      flashButtonIcon: const Icon(
        Icons.sunny,
        color: Colors.yellow,
      ),
      openedFlashIcon: const Icon(
        Icons.dark_mode,
        color: Colors.red,
      ),
      switchCameraButtonIcon: const Icon(
        Icons.camera_alt,
        color: Colors.orange,
      ),
      strokeColor: Colors.purple,
      lineColor: Colors.pink,
      backButtonBackgroundColor: Colors.cyanAccent,
      flashBackgroundColor: Colors.indigo,
      initialCameraDirection: CameraDirection.back,
      switchCameraBackgroundColor: Colors.amber,
    );

    // 更新UI显示扫描结果
    setState(() {
      if (resultbarcode != "-1") {
        barcode = resultbarcode;
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '下方将显示扫描到的二维码信息:',
            ),
            Text(
              barcode,
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _scanBarcode,
        tooltip: '扫描二维码',
        child: const Icon(Icons.barcode_reader),
      ),
    );
  }
}