FlutterでQRコードスキャナーを使ってみる

Flutterのbarcode_scanパッケージを使ってQRコードスキャンを行ってみた。

必要な設定とパッケージの導入

以下のURLのパッケージを使用する。
barcode_scan | Flutter Package

Android

まずはAndroidManifest.xmlにpermissionとactivityを追加する。

<manifest>
  ...
  <uses-permission android:name="android.permission.CAMERA" />　←追加
  <application>
    ...
    <activity
        ...
        >
        ...
    </activity>
    <activity android:name="com.apptreesoftware.barcodescan.BarcodeScannerActivity" />  ←追加
  </application>
</manifest>

このパッケージはKotlinで書かれているためプロジェクトにKotlinサポートを追加する。
まずandroid/build.gradleに以下を追加する。

buildscript {
    ext.kotlin_version = '1.3.21'  ←追加
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"　←追加
    }
}

次にandroid/app/build.gradleに以下を追加する。

apply plugin: 'kotlin-android'　←追加
...
dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version" 　←追加
    ...
}

iOS

iOSで使用するには、カメラの使用方法の説明をInfo.plistに追加する必要がある

<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>

---

pubspec.yaml にパッケージを追加しPackages getする

dependencies:
  ...
  barcode_scan: ^0.0.3

コードを書いてQRリーダーを起動する

ボタンタップでQRリーダー起動、QRコードのスキャンが成功したらボタンの下に読み取った内容を表示する簡単なアプリを作る。

まず必要パッケージをimportする

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

QRリーダーはBarcodeScanner.scan()で起動し、スキャンした内容が戻り値として返ってくる。
以下のようなコードになる

String barcode = '';

  /// QRスキャン開始、結果取得
  Future scan() async {
    try {
      String barcode = await BarcodeScanner.scan();
      setState(() => this.barcode = barcode);
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          this.barcode = 'The user did not grant the camera permission!';
        });
      } else {
        setState(() => 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');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              color: Colors.blueAccent,
              child: Text('QR SCAN', style: TextStyle(color: Colors.white),),
              onPressed: scan,
            ),
            Text(barcode)
          ],
        ),
      ),
    );
  }