flutter：二维码生成与读取

前言

这csdn真的是服了，图片里有个二维码就直接变成违规图片了。至于效果的话，自己运行一下看看吧。

生成

flutter中生成二维码可以使用 qr_flutter。

官方文档
https://pub-web.flutter-io.cn/packages/qr_flutter

安装

flutter pub add qr_flutter

示例

示例1

QrImageView(
    data: 'https://pub-web.flutter-io.cn/packages/qr_flutter', // 数据
    version: QrVersions.auto, // 版本选择自适应
    size: 200.0, // 大小
  ),

在这里插入图片描述

示例2

QrImageView(
           data: 'https://pub-web.flutter-io.cn/packages/qr_flutter', // 数据
           version: QrVersions.auto, // 版本选择自适应
           size: 200.0, // 大小
           embeddedImage: const AssetImage('lib/assets/image/flutter.png'), // 图片
           embeddedImageStyle: const QrEmbeddedImageStyle(  // 设置图像样式
             size: Size(40, 40),
           ),
         ),

在这里插入图片描述
官方提供的方式，无法在图片周围生成间隙。但其实我们可以使用堆叠组件来实现。

Stack(
	     children: [
	       QrImageView(
	         data: qrData, // 数据
	         version: QrVersions.auto, // 版本选择自适应
	         size: 200.0, // 大小
	       ),
	       Positioned(
	           top: 0,
	           left: 0,
	           right: 0,
	           bottom: 0,
	           child: Center(
	             child: Container(
	               width: 30,
	               height: 30,
	               margin: const EdgeInsets.all(5),
	               padding: const EdgeInsets.all(5),
	               decoration: BoxDecoration(
	                 borderRadius: BorderRadius.circular(5),
	                 color: Colors.white,
	               ),
	               child: Image.asset('lib/assets/abc.png'),
	             ),
	           ))
	     ],
)

在这里插入图片描述
注意： 要保证二维码的信息量足够多，也就是二维码本身的内容多（也不要太多），图片也不要太大。如果二维码的信息丢失过多会导致无法识别二维码。

读取

flutter中读取二维码可以使用qr_code_scanner。

官方网站
添加链接描述

安装

flutter pub add qr_code_scanner

问题
在进行真机运行时，报错了

uses-sdk:minSdkVersion 16 cannot be smaller than version 20 declared in library [:qr_code_scanner]

原因是：qr_code_scanner库要求的最低Android SDK版本为20。可以打开项目的android/app/build.gradle文件，找到minSdkVersion并将其修改为20或更高的值

补充
这里再使用vibration库，该库可以处理振动。当扫描成功后，再振动一下，更加的友好。

官方文档：https://pub-web.flutter-io.cn/packages/vibration

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 创建一个全局的key
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  // 结果、控制器
  Barcode? result;
  QRViewController? controller;

  @override
  void reassemble() {
    super.reassemble();
    if (controller?.pauseCamera != null) {
      controller!.pauseCamera();
    } else {
      controller!.resumeCamera();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 5,
            child: QRView(
                key: qrKey,
                onQRViewCreated: _onQRViewCreated,
                // 中间的扫描区域，也可以不要，加上看着更舒服
                overlay: QrScannerOverlayShape(
                    borderColor: Colors.red,
                    borderRadius: 10,
                    borderLength: 30,
                    borderWidth: 10,
                    cutOutSize: 300)),
          ),
          Expanded(
            flex: 1,
            child: Center(
              child: (result != null)
                  ? Text(
                      'Barcode Type: ${describeEnum(result!.format)}   Data: ${result!.code}')
                  : const Text('Scan a code'),
            ),
          )
        ],
      ),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      // 默认振动500ms
      Vibration.vibrate();
      setState(() {
        result = scanData;
      });
    });
  }
}