Flutter - 生成二維碼與識別二維碼

#生成二維碼

##首先需要在pubspec.yaml:中新增

qr_flutter: ^1.1.3

其次，引入程式碼：

import 'package:qr_flutter/qr_flutter.dart';

核心程式碼如下：

        child: QrImage(
          data: "這裡是需要生成二維碼的資料",
          size: 100.0,
          onError: (ex) {
            print("[QR] ERROR - $ex");
          },
複製程式碼

整體程式碼與效果如下：

#識別二維碼

這裡也用第三方的包在pubspec.yaml中新增庫連結；

barcode_scan: ^0.0.4

識別的主要程式碼如下：

  Future scan() 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 = 'The user did not grant the camera permission!';
        });
      } else {
        setState(() {
          return this.barcode = 'Unknown error: $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');
    }
  }
複製程式碼

整體程式碼如下：

import 'package:flutter/material.dart';
import 'package:barcode_scan/barcode_scan.dart';
import 'dart:async';
import 'package:flutter/services.dart';

class scanqr extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: sacnBody(),
    );
  }
}

class sacnBody extends StatefulWidget {
@override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyScanState();
  }
}

class _MyScanState extends State<sacnBody> {
  String barcode = "";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: new AppBar(
        title: new Text('QR Code'),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 15.0,vertical: 8.0),
              child: RaisedButton(
                  color: Colors.orange,
                  textColor: Colors.white,
                  splashColor: Colors.blueGrey,
                  onPressed: scan,
                  child: const Text('START CAMERA SCAN')

              ),
            ),
            Padding (
              padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
              child: Text(barcode, textAlign: TextAlign.center,),
            )
          ],
        ),
      ),
    );
  }


  Future scan() 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 = 'The user did not grant the camera permission!';
        });
      } else {
        setState(() {
          return this.barcode = 'Unknown error: $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');
    }
  }


}
複製程式碼

安卓和iOS工程設定如下：

Android For Android, you must do the following before you can use the plugin:

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"/>
複製程式碼

iOS To use on iOS, you must add the the camera usage description to your Info.plist

<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>
複製程式碼