Flutter 生成二维码

在这篇博客中，我们将学习如何使用 Flutter 创建二维码，并实现一些常见的自定义选项。通过使用 qr_flutter插件，我们可以轻松地生成基本二维码，甚至可以将图片嵌入二维码中。最终的效果将包括两个二维码：一个是普通二维码，另一个是带有嵌入图片的二维码。此外，我们还将实现一个文本输入框，用户可以动态修改二维码内容。

效果图（CSDN会屏蔽二维码，得加个马赛克）：

1、pubspec.yaml 文件中，添加 qr_flutter 插件：

  flutter:sdk: flutterqr_flutter: ^4.0.1

2、我们将在 QRCodeScreen 页面中实现两个二维码的显示：一个是普通的二维码，另一个是带有图像的二维码。

完整代码实现：

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';  // 导入 qr_flutter 插件void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: QRCodeScreen(),);}
}class QRCodeScreen extends StatefulWidget {@override_QRCodeScreenState createState() => _QRCodeScreenState();
}class _QRCodeScreenState extends State<QRCodeScreen> {// 用于存储二维码的文本内容TextEditingController _controller = TextEditingController();@overridevoid initState() {super.initState();// 默认二维码内容_controller.text = '输入内容改变二维码';}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('QR Code Example'),),body: Padding(padding: const EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[// 一行显示两个二维码Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[// 普通二维码Column(children: <Widget>[QrImageView(data: _controller.text,  // 使用输入框的内容version: QrVersions.auto,size: 160,  // 设置二维码大小gapless: false,),const SizedBox(height: 10),const Text('普通二维码', style: TextStyle(fontSize: 16)),],),const SizedBox(width: 20),// 带图像的二维码Column(children: <Widget>[QrImageView(data: _controller.text,  // 使用输入框的内容version: QrVersions.auto,size: 160,  // 设置二维码大小gapless: false,embeddedImage: const AssetImage('assets/weChat.png'),  // 嵌入图片embeddedImageStyle: const QrEmbeddedImageStyle(size: Size(20, 20),),),SizedBox(height: 10),Text('带图二维码', style: TextStyle(fontSize: 16)),],),],),const SizedBox(height: 30),// 输入框，用户可以更改二维码内容TextField(controller: _controller,  // 使用文本控制器decoration: const InputDecoration(labelText: 'Enter QR code content',border: OutlineInputBorder(),),onChanged: (value) {setState(() {});  // 更新UI，当输入框内容变化时刷新二维码},),],),),);}
}