Flutter-二维码生成与识别

3,030 阅读1分钟

二维码生成

  1. pubspec.yaml文件中添加qr_flutter: ^3.0.1(记得加载最新版本)

  2. 引入代码 import 'package:qr_flutter/qr_flutter.dart';

  3. 核心代码:

    QrImage(
     data: "生成二维码的数据",
     size: 100.0,
     errorStateBuilder: (cxt, err) {
       return Container(
         child: Center(
           child: Text(
             "生成二维码出错....",
             textAlign: TextAlign.center,
           ),
         ),
       );
     },
    )
    
  4. 效果如下:

    效果图
  5. 整体代码:

    void dialogQr(BuildContext context) {
        showDialog<Null>(
            context: context,
            builder: (BuildContext context) {
                return SimpleDialog(
                    title: Text('二维码', textAlign: TextAlign.center,),
                    children: <Widget>[
                      Container(
                          width: ScreenUtil().setWidth(600),
                          height: ScreenUtil().setHeight(520),
                          padding: EdgeInsets.only(left:35.0, right: 35.0),
                          child: QrImage(
                              data: "https://www.allhistory.com/",
                              size: 100.0,
                              errorStateBuilder: (cxt, err) {
                                return Container(
                                  child: Center(
                                    child: Text(
                                      "生成二维码出错....",
                                      textAlign: TextAlign.center,
                                    ),
                                  ),
                                );
                              },
                        ));
                    ],
                );
            },
        );
    }
    

二维码识别

  1. pubspec.yaml文件中添加barcode_scan: ^1.0.0(记得加载最新版本)

  2. 引入代码 import 'package:barcode_scan/barcode_scan.dart';

  3. 效果图:

    效果图
  4. 核心代码如下:

    Future scanQr(context) async {
        try {
          String barcode = await BarcodeScanner.scan();
            setState(() {
             return this.barcode = barcode;
            });
        } on PlatformException catch (e) {
          if (e.code == BarcodeScanner.CameraAccessDenied) {
            setState(() {
              return this.barcode = '暂无权限!';
            });
          } else {
            setState(() {
              return this.barcode = '$e';
            });
          }
        } on FormatException{
          setState(() => this.barcode = 'null (User returned using the "back"-button before scanning anything. Result)');
        } catch (e) {
          setState(() => this.barcode = 'Unknown error: $e');
        }
        // 这里是扫描完成后跳转到结果页面进行展示
        Application.router.navigateTo(context, "/scanResult?barcode=$barcode"); 
      }
    

权限设置

  1. 安卓

      Add the camera permission to your AndroidManifest.xml
    
      <uses-permission android:name="android.permission.CAMERA" />
      
      Add the Barcode activity to your AndroidManifest.xml
      
      <activity android:name="com.apptreesoftware.barcodescan.BarcodeScannerActivity"/>
    
  2. IOS

      <key>NSCameraUsageDescription</key>
      <string>"xxx"需要访问您的</string>
    

如果这篇文章对你有帮助的话,就请给我点个赞啊。。。