flutter：二维码生成与读取

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

前言

这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;
      });
    });
  }
}