Flutter如何使用mobile_scanner插件

在Flutter项目中集成mobile_scanner插件时遇到问题，按照官方文档配置后仍然无法正常扫描二维码。具体表现为相机预览界面黑屏，但权限都已正确申请。请问该如何解决？是否还需要额外配置？如果能提供完整的示例代码会更方便理解。

2 回复

在Flutter中使用mobile_scanner插件步骤：

  1. 添加依赖：flutter pub add mobile_scanner
  2. 导入包：import 'package:mobile_scanner/mobile_scanner.dart';
  3. 在页面中使用MobileScanner控件
  4. 处理扫描结果回调

支持相机控制、闪光灯切换等功能。

更多关于Flutter如何使用mobile_scanner插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用mobile_scanner插件实现二维码/条形码扫描非常简单，以下是详细步骤：

1. 添加依赖

在pubspec.yaml中：

dependencies:
  mobile_scanner: ^3.6.0

运行：flutter pub get

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 ScannerPage extends StatefulWidget {
  @override
  _ScannerPageState createState() => _ScannerPageState();
}

class _ScannerPageState extends State<ScannerPage> {
  MobileScannerController controller = MobileScannerController();
  String? scannedCode;

  @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;
                for (final barcode in barcodes) {
                  setState(() {
                    scannedCode = barcode.rawValue;
                  });
                  // 扫描成功后可以停止扫描
                  // controller.stop();
                }
              },
            ),
          ),
          if (scannedCode != null)
            Padding(
              padding: EdgeInsets.all(16),
              child: Text('扫描结果: $scannedCode'),
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 切换摄像头
          controller.switchCamera();
        },
        child: Icon(Icons.cameraswitch),
      ),
    );
  }

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

4. 主要功能

  • 自动检测：支持二维码和条形码
  • 摄像头控制：开始/停止扫描、切换摄像头
  • 自定义界面：可自定义扫描框样式
  • 多码识别：支持同时识别多个二维码

5. 常用配置选项

MobileScanner(
  controller: controller,
  fit: BoxFit.cover,
  allowDuplicates: false, // 防止重复扫描
  onDetect: (barcode, args) {
    // 处理扫描结果
  },
)

这样就完成了基本的二维码扫描功能。记得处理相机权限请求，确保应用有访问相机的权限。

回到顶部