Flutter如何实现条码扫描功能

在Flutter中如何实现条码扫描功能？目前尝试了几个插件但效果不太理想，有没有推荐的稳定方案？具体实现步骤是什么？需要注意哪些兼容性问题？

2 回复

使用camera和ml_kit插件。先配置相机权限，用CameraController预览画面，再通过BarcodeScanner检测条码。注意处理权限和生命周期。

更多关于Flutter如何实现条码扫描功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现条码扫描功能，推荐使用 camera 和 mobile_scanner 插件。以下是实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  mobile_scanner: ^3.6.0
  camera: ^0.10.5

2. 配置权限

Android

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

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

iOS

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

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

3. 实现代码

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

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

class _BarcodeScannerPageState extends State<BarcodeScannerPage> {
  MobileScannerController controller = MobileScannerController();
  String? barcode;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('条码扫描')),
      body: Column(
        children: [
          Expanded(
            child: MobileScanner(
              controller: controller,
              onDetect: (capture) {
                final List<Barcode> barcodes = capture.barcodes;
                if (barcodes.isNotEmpty) {
                  setState(() {
                    barcode = barcodes.first.rawValue;
                  });
                  // 扫描成功后可以停止相机
                  controller.stop();
                }
              },
            ),
          ),
          if (barcode != null)
            Padding(
              padding: EdgeInsets.all(16),
              child: Text('扫描结果: $barcode'),
            ),
        ],
      ),
    );
  }

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

4. 使用方式

在需要的地方跳转到扫描页面：

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

主要特性：

  • 自动识别多种条码格式（QR码、EAN、UPC等）
  • 实时扫描反馈
  • 支持前后摄像头切换
  • 可控制扫描开始/停止

注意事项：

  • 首次使用需要授权相机权限
  • 测试时建议使用真机
  • 可自定义扫描界面样式

这种方法简单高效，适合大多数条码扫描需求。

回到顶部