flutter:二维码生成与读取

前言

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

生成

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

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

安装

javascript 复制代码
flutter pub add qr_flutter

示例

示例1

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

示例2

javascript 复制代码
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),
           ),
         ),

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

dart 复制代码
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

官方网站
添加链接描述

安装

javascript 复制代码
flutter pub add qr_code_scanner

问题

在进行真机运行时,报错了

dart 复制代码
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

dart 复制代码
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;
      });
    });
  }
}
相关推荐
小红星闪啊闪13 小时前
Flutter开发 -- 需要了解的Dart知识
flutter
小李A_Z14 小时前
[Flutter]介绍些flutter的弹窗
flutter
小李A_Z14 小时前
[Flutter]介绍写Flutetr的按钮
flutter
恋猫de小郭19 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
tangweiguo0305198720 小时前
FlutterActivity vs FlutterFragmentActivity:全面对比与最佳实践
android·flutter
ITKEY_20 小时前
flutter日期选择国际化支持
开发语言·javascript·flutter
农夫三拳_有点甜20 小时前
Flutter SystemChrome 完整指南
flutter
葱段20 小时前
【Flutter】TextField 监听长按菜单粘贴点击事件
android·flutter·dart
2501_919749031 天前
flutter鸿蒙:使用flutter_local_notifications实现本地通知
flutter·华为·harmonyos
浮生若茶80881 天前
Flutter环境搭建全攻略之-Macos环境搭建
flutter·macos