当前位置：首页 > news >正文

flutter：二维码生成与读取

news 2025/8/2 23:10:11

前言

这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;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {// 创建一个全局的keyfinal GlobalKey qrKey = GlobalKey(debugLabel: 'QR');// 结果、控制器Barcode? result;QRViewController? controller;@overridevoid reassemble() {super.reassemble();if (controller?.pauseCamera != null) {controller!.pauseCamera();} else {controller!.resumeCamera();}}@overridevoid dispose() {super.dispose();controller?.dispose();}@overrideWidget 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) {// 默认振动500msVibration.vibrate();setState(() {result = scanData;});});}
}