Flutter自定义二维码创建与集成及qr_code_scanner适用性咨询

一、自定义二维码生成与集成 #

1. 依赖选择 #

推荐使用qr_flutter包，它支持自定义二维码样式（颜色、Logo、模块形状等），步骤如下：

• 在pubspec.yaml中添加依赖：

dependencies:
  qr_flutter: ^4.1.0

• 执行命令安装依赖：

flutter pub get

2. 基础生成代码 #

快速生成普通二维码：

import 'package:qr_flutter/qr_flutter.dart';

QrImageView(
  data: '你的自定义内容（如URL、文本、JSON字符串）',
  version: QrVersions.auto,
  size: 200.0,
)

3. 自定义样式配置 #

• 自定义前景/背景色：

QrImageView(
  data: '自定义内容',
  size: 200,
  backgroundColor: Colors.white,
  foregroundColor: Colors.blueAccent,
)

• 自定义码眼/模块形状+添加中心Logo：

QrImageView(
  data: '自定义内容',
  size: 200,
  eyeStyle: QrEyeStyle(
    eyeShape: QrEyeShape.square,
    color: Colors.black,
  ),
  dataModuleStyle: QrDataModuleStyle(
    dataModuleShape: QrDataModuleShape.circle,
    color: Colors.grey.shade700,
  ),
  embeddedImage: AssetImage('assets/app_logo.png'),
  embeddedImageStyle: QrEmbeddedImageStyle(
    size: Size(40, 40),
  ),
)

4. 保存二维码到本地（可选） #

配合image和path_provider包，将二维码转为本地图片：

import 'dart:typed_data';
import 'package:image/image.dart' as img;
import 'package:path_provider/path_provider.dart';

Future<void> saveQrToLocal() async {
  final qrValidationResult = QrValidator.validate(
    data: '自定义内容',
    version: QrVersions.auto,
  );
  final qrCode = qrValidationResult.qrCode;

  final image = img.Image(qrCode!.moduleCount, qrCode.moduleCount);
  for (var x = 0; x < qrCode.moduleCount; x++) {
    for (var y = 0; y < qrCode.moduleCount; y++) {
      final color = qrCode.isDark(y, x) ? 0xFF000000 : 0xFFFFFFFF;
      image.setPixel(x, y, color);
    }
  }

  final directory = await getApplicationDocumentsDirectory();
  final savePath = '${directory.path}/custom_qr.png';
  await img.encodePngFile(savePath, image);
}

二、扫码功能实现 #

1. 依赖选择 #

qr_code_scanner是主流的扫码包，下面基于它实现扫码功能。

2. 平台权限配置 #

• Android：在AndroidManifest.xml中添加相机权限：

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

• iOS：在Info.plist中添加权限说明：

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

3. 基础扫码页面代码 #

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

class QrScannerPage extends StatefulWidget {
  @override
  _QrScannerPageState createState() => _QrScannerPageState();
}

class _QrScannerPageState extends State<QrScannerPage> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController? controller;
  String? scannedResult;

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

  void _onScannerCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        scannedResult = scanData.code;
      });
      // 扫码成功后返回结果并关闭页面
      Navigator.pop(context, scannedResult);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: QRView(
        key: qrKey,
        onQRViewCreated: _onScannerCreated,
        overlay: QrScannerOverlayShape(
          borderColor: Colors.red,
          borderRadius: 10,
          borderLength: 30,
          borderWidth: 10,
          cutOutSize: MediaQuery.of(context).size.width * 0.8,
        ),
      ),
    );
  }
}

4. 调用扫码页面 #

void launchScanner() async {
  final scanResult = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => QrScannerPage()),
  );
  if (scanResult != null) {
    // 处理扫码结果，如跳转URL、解析数据等
    print('扫码结果：$scanResult');
  }
}

三、关于qr_code_scanner是否适用你的需求 #

qr_code_scanner完全匹配你的需求：

• 支持实时扫码，识别速度快，兼容标准QR码
• 允许自定义扫码界面的覆盖层（边框样式、裁剪区域）
• 支持Android和iOS双平台，适配主流机型
• 提供扫描数据流，可在扫码成功后即时处理结果

唯一需要注意：需正确配置平台相机权限，部分低版本Android设备可能存在兼容性问题，测试时需覆盖主流机型。

内容的提问来源于stack exchange，提问作者Emre Çifçi