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)
],
),
),
);
}