FlutterでQRコードの生成とスキャン

Flutterを使用して、アプリ内でQRコードの生成とスキャンを実装する方法

必要なパッケージの追加

まず、pubspec.yamlファイルに以下のパッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  qr_flutter: ^4.0.0        # QRコード生成用
  mobile_scanner: ^2.0.0    # QRコードスキャン用

ターミナルで以下のコマンドを実行し、パッケージをインストールします。

flutter pub get

QRコードの生成

qr_flutterパッケージを使用して、簡単にQRコードを生成できます。

import 'package:qr_flutter/qr_flutter.dart';

// ...

QrImage(
  data: 'https://example.com',
  version: QrVersions.auto,
  size: 200.0,
),

• data: エンコードする文字列
• version: QRコードのバージョン（QrVersions.autoで自動設定）
• size: QRコードのサイズ
• backgroundColor: 背景色
• foregroundColor: QRコードの色

QRコードのスキャン

mobile_scannerパッケージを使用して、デバイスのカメラでQRコードをスキャンします。

基本的な実装

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

class QRScannerPage extends StatefulWidget {
  @override
  _QRScannerPageState createState() => _QRScannerPageState();
}

class _QRScannerPageState extends State<QRScannerPage> {
  String? barcode;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QRコードスキャン'),
      ),
      body: Stack(
        children: [
          MobileScanner(
            onDetect: (barcode, args) {
              final String code = barcode.rawValue ?? '---';
              setState(() {
                this.barcode = code;
              });
              // 必要に応じて、結果を表示したり、別の画面に遷移
              print('QRコードの内容: $code');
            },
          ),
          if (barcode != null)
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                color: Colors.white54,
                padding: EdgeInsets.all(16),
                child: Text(
                  '検出されたコード: $barcode',
                  style: TextStyle(fontSize: 16),
                ),
              ),
            ),
        ],
      ),
    );
  }
}

カメラの権限設定

iOSの場合: ios/Runner/Info.plistに以下を追加します。

<key>NSCameraUsageDescription</key>
<string>カメラを使用してQRコードをスキャンします。</string>

Androidの場合: android/app/src/main/AndroidManifest.xmlに以下を確認してください。

<uses-permission android:name="android.permission.CAMERA" />

追加のオプション

MobileScannerウィジェットには、以下のオプションがあります。
• controller: カメラのフラッシュやフォーカス、ズームを制御するためのコントローラー。
• formats: スキャンするバーコードの形式を指定（デフォルトですべての形式をスキャン）。
• fit: カメラプレビューのアスペクト比を指定。

コントローラーの使用例

MobileScannerController cameraController = MobileScannerController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('QRコードスキャン'),
      actions: [
        IconButton(
          icon: Icon(Icons.flash_on),
          onPressed: () => cameraController.toggleTorch(),
        ),
        IconButton(
          icon: Icon(Icons.cameraswitch),
          onPressed: () => cameraController.switchCamera(),
        ),
      ],
    ),
    body: MobileScanner(
      controller: cameraController,
      onDetect: (barcode, args) {
        // スキャン結果を処理
      },
    ),
  );
}

おわり〜