22
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-06-21

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?