需求：
今天正好做生成二維碼和掃描二維碼的功能，整理一下方便以后學(xué)習(xí)，順便分享給大家。
一、生成二維碼
1、導(dǎo)入依賴
在 pubspec.yaml 中 dependencies 節(jié)點下添加：
# 二維碼生成 https://pub.dev/packages/qr_flutter
qr_flutter: ^3.2.0
2、引入代碼
import 'package:qr_flutter/qr_flutter.dart';
3、屬性
| 屬性 | 類型 | 描述 |
|---|---|---|
| version | int | QrVersions.auto或者介于1和40之間的值。有關(guān)限制和詳細(xì)信息，請訪問http://www.qrcode.com/en/about/version.html。 |
| errorCorrectionLevel | int | 定義的值QrErrorCorrectLevel。例如：QrErrorCorrectLevel.L。 |
| size | double | 二維碼的（方形）大小。如果沒有給出，將使用最短大小約束自動調(diào)整大小。 |
| padding | EdgeInsets | 二維碼內(nèi)邊距 |
| backgroundColor | Color | 背景顏色（默認(rèn)為無） |
| errorStateBuilder | QrErrorBuilder | 允許您Widget在呈現(xiàn)QR碼時出現(xiàn)錯誤時顯示錯誤狀態(tài)（例如：版本太低，輸入太長等） |
| foregroundColor | Color | 前景色（默認(rèn)為黑色） |
| gapless | bool | 添加一個額外的像素以防止間隙（默認(rèn)為true） |
| constrainErrorBounds | bool | 如果為true，則錯誤Widget將被限制為將要繪制QR碼的平方。如果為false，則錯誤狀態(tài)Widget將增大/縮小到所需的任何大小 |
| embeddedImage | ImageProvider | 個ImageProvider限定的圖像以在QR碼的中心重疊 |
| embeddedImageStyle | QrEmbeddedImageStyle | 用于設(shè)置嵌入圖像樣式的屬性 |
| embeddedImageEmitsError | bool | 如果為true，則任何加載嵌入圖像的失敗都將觸發(fā)errorStateBuilder或呈現(xiàn)為空Container。如果為false，則將呈現(xiàn)QR碼，并且將忽略嵌入的圖像 |
4、代碼以及結(jié)果
Column(
crossAxisAlignment: CrossAxisAlignment.center, //居中
children: [
Text("普通二維碼"),
SizedBox(height: 20,),
QrImage(data: "這是普通二維碼",size: 100,),
Text("中間有圖片的二維碼"),
SizedBox(height: 20,),
QrImage(data: "這是中間有圖的二維碼",size: 100,embeddedImage: NetworkImage(""
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2491682377,1019940373&fm=26&gp=0.jpg"),),
],
),
二、掃描二維碼
1、導(dǎo)入依賴
在 pubspec.yaml 中 dependencies 節(jié)點下添加：
# 二維碼掃描 https://pub.dev/packages/barcode_scan
barcode_scan: ^3.0.1
2、引入代碼
import 'package:barcode_scan/barcode_scan.dart';
3、代碼以及結(jié)果
class _QRCodeState extends State<QRCode> {
var textStr = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("二維碼"),
),
body: Container(
width: MediaQuery.of(context).size.width, //充滿屏幕寬度,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center, //居中
children: [
SizedBox(height: 50,),
RaisedButton(
child: Text("二維碼掃描"),
onPressed: () {
getQrcodeState().then((value) => setState(() {
this.textStr = value;
}));
},
),
SizedBox(height: 20,),
Text("掃描內(nèi)容為${this.textStr}"),
],
),
),
);
}
//掃描二維碼
static Future<String> getQrcodeState() async {
try {
const ScanOptions options = ScanOptions(
strings: {
'cancel': '取消',
'flash_on': '開啟閃光燈',
'flash_off': '關(guān)閉閃光燈',
},
);
final ScanResult result = await BarcodeScanner.scan(options: options);
return result.rawContent;
} catch (e) {
}
return null;
}
}
掃描二維碼以后的結(jié)果
在這里插入圖片描述
基礎(chǔ)篇
Flutter之實現(xiàn)生成二維碼，掃描二維碼——Flutter基礎(chǔ)系列
Flutter之基本路由，命名路由跳轉(zhuǎn)，返回上一頁，替換路由和返回根路由——Flutter基礎(chǔ)系列
