Flutter: QRコードを読み取る方法

プログラミング
スポンサーリンク




こんにちは、おみです。

今回は、FlutterでQRコードを読み取る方法について、解説していきたいと思います。

 

 

スポンサーリンク

開発環境

Android Studio: 4.0.1

flutter: 47.1.2

dart: 193.7361

 

 

下準備

下記サイトを参考に、barcode_scanパッケージをインポートします。

barcode_scan | Flutter Package
A flutter plugin for scanning 2D barcodes and QRCodes via camera.

※途中でkotlinのプラグインをインストールする箇所がありますが、AndroidStudioの場合最初からインストールされているので、やらなくて大丈夫です。(2020/09/06時点)

 

ソースコード

・main.dart

import 'dart:io';

import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/common/QrcodeReader.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Link Scanner',
      theme: new ThemeData.dark(),
      home: MyHomePage(title: 'リンクスキャナー'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScanResult result;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            result == null
                ?
            Text("コードをスキャンすると、ここに内容が表示されます。")
                :
            Card(
                child: Column(
                    children: <Widget> [
                      ListTile(
                        title: Text("Result Type"),
                        subtitle: Text(result.type?.toString() ?? ""),
                      ),
                      ListTile(
                        title: Text("Raw Content"),
                        subtitle: Text(result.rawContent ?? ""),
                      ),
                      ListTile(
                        title: Text("Format"),
                        subtitle: Text(result.format?.toString() ?? ""),
                      ),
                      ListTile(
                        title: Text("Format note"),
                        subtitle: Text(result.formatNote ?? ""),
                      ),
                    ]
                )
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
      // ①
          result = await QrcodeReader.reader();
          setState(() {});
        },
        child: Icon(Icons.camera)
      ),
    );
  }
}

 

・QrcodeReader.dart

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

// --------------------------
// QRコード読み込み処理
// --------------------------
class QrcodeReader {
  static Future<ScanResult> reader() async {
    try {
      ScanResult result = await BarcodeScanner.scan();
      return result;
    } on PlatformException catch (e) {
      var result = ScanResult(
        type: ResultType.Error,
        format: BarcodeFormat.unknown,
      );

      if (e.code == BarcodeScanner.cameraAccessDenied) {
          result.rawContent = 'カメラアクセスが許可されていません。';
      } else {
        result.rawContent = '未知のエラー: $e';
      }
      return result;
    }
  }
}

 

 

解説

ソースコード内①の箇所で、QrcodeReaderクラスのreaderメソッドを呼び出して、QRコードの読み込みを行います。

読み込み後、result変数に結果が返却され、その後のsetStateで更新後の値を使用してWidgetを再描画することで、読み込んだ値を画面に表示しています。

 

QrcodeReaderクラスのreaderメソッドでは、BarcodeScannerクラスのscanメソッドを使用して、QRコードの読み込みを行い、その結果を戻り値として返却します。

例外が発生した場合は、PlatformExceptionとしてキャッチし、例外処理を行った後処理結果を返却します。

 

 

おすすめの書籍

私は、Flutterの勉強をする際、下記の書籍を使用しています。

Flutterを使用したアプリ開発の方法を、実際にアプリの開発を通してわかりやすく解説しているので、おすすめです。

 

 

参考文献

barcode_scan | Flutter Package
A flutter plugin for scanning 2D barcodes and QRCodes via camera.

 

 

 

 

 

コメント

タイトルとURLをコピーしました