[Flutter] すぐ使える！FlutterでQRコードを読み取る方法

今回は、FlutterアプリでQRコードを読み取る方法をご紹介します。またバーコードももちろん読み取ることができます。

動作イメージは「Start QRCode Scan」ボタンをタップすると、QRコードスキャナが起動して、スキャンしたらスキャナを終了して結果をボタンの上に表示します。

ITエンジニアが利用したい転職エージェントNo.1

flutter_barcode_scannerのインストール

pubspec.yaml にパッケージを追加して flutter pub get します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0
  //以下を追加
  flutter_barcode_scanner: ^1.0.1

iOS用のInfo.plistの設定

iOS用にカメラへのアクセスの設定を、以下のように Info.plist に追加します。これを追加しないと iPhone実機でカメラを起動した際にアプリが落ちてしまいます。

Info.plist

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>

Xcodeの設定

iOSでは flutter_barcode_scannerの公式にあるように、以下の手順を行います。

iOSディレクトリを右クリックから「Open in Xcode」を選択してXcodeを開きます。

TARGES「Runner」-> General -> Deployment Info の iOS を11.0以上に、画面右の Project Document を Xcode 11.0 以上にします。

Build Settings の検索窓に swift と入力して表示を絞ります。Swift Complier – Language -> Swift Language VersionをSwift 5 にします。

Flutterでの実装

まずパッケージを import します。

import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';

次にQRコードを読み取る処理を追加します。scanBarcode メソッドを使用してバーコードスキャンにアクセスし、結果を表示します。

Future scanQrCode() async {
  final qrCode = await FlutterBarcodeScanner.scanBarcode(
    '#EB394B',
    'Cancel',
    true,
    ScanMode.QR,
  );
  if (!mounted) return;

  setState(() {
    this.qrCode = qrCode;
  });
}

全体のソースコード

import 'package:flutter/material.dart';
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  String qrCode = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Scanner'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '$qrCode',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Start QRCode Scan'),
              onPressed: () => scanQrCode(),
            ),
            SizedBox(height: 10),
          ],
        ),
      ),
    );
  }

  Future scanQrCode() async {
    final qrCode = await FlutterBarcodeScanner.scanBarcode(
      '#EB394B',
      'Cancel',
      true,
      ScanMode.QR,
    );
    if (!mounted) return;

    setState(() {
      this.qrCode = qrCode;
    });
  }
}

お疲れさまでした。