🌳 やまとトロー流 🌳 FlutterでQRコードを読み取るアプリを作ろう📸✨

〜カメラをかざすだけの魔法〜

こんにちは、やまとトトローです＾＾
今回はいよいよ…

📱 QRコードを読み取るスマホアプリ を作ります✨

Flutter環境構築ができたあなたは、
もう 冒険の入口 に立っています🌈

---

🌱 今回やること（ゴール）

✔ カメラを起動する
✔ QRコードを読み取る
✔ 中身（文字・URL）を取得する
✔ 画面に表示する

👉 たったこれだけで「使えるアプリ」完成！

---

🧰 使う道具（ライブラリ）

今回はシンプルで安定している
mobile_scanner を使います📸

• Android / iPhone 両対応
• 設定が簡単
• 個人開発にやさしい✨

---

① QR読み取りライブラリを追加しよう 🌸

pubspec.yaml を開いて、
dependencies: の下に追加👇

dependencies:
  flutter:
    sdk: flutter
  mobile_scanner: ^5.0.0

保存したら、ターミナルで👇

flutter pub get

---

② QRコードを読み取る基本コード 📱

lib/main.dart を 全部置き換え します👇

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: QRScannerPage(),
    );
  }
}

class QRScannerPage extends StatefulWidget {
  const QRScannerPage({super.key});

  @override
  State<QRScannerPage> createState() => _QRScannerPageState();
}

class _QRScannerPageState extends State<QRScannerPage> {
  String qrResult = 'まだ読み取っていません🌱';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('やまとトローQRスキャナー'),
        backgroundColor: Colors.green,
      ),
      body: Column(
        children: [
          Expanded(
            flex: 3,
            child: MobileScanner(
              onDetect: (barcode, args) {
                final String? code = barcode.rawValue;
                if (code != null) {
                  setState(() {
                    qrResult = code;
                  });
                }
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              width: double.infinity,
              color: Colors.green.shade50,
              padding: const EdgeInsets.all(16),
              child: Text(
                '読み取り結果👇\n\n$qrResult',
                style: const TextStyle(fontSize: 16),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

③ 実行してみよう 🚀

flutter run

📱 スマホでアプリ起動
📸 QRコードをかざす

👇
✨ 文字やURLが表示されたら大成功！ ✨

---

🌳 仕組みをやさしく解説 🌳

📸 カメラ起動

MobileScanner(
  onDetect: (barcode, args) {

→ カメラ映像を常にチェック👀

---

🔍 QRを検出

final String? code = barcode.rawValue;

→ QRコードの中身を取得✨

---

🔄 画面を更新

setState(() {
  qrResult = code;
});

→ 読み取った内容を画面に反映🌱

---

🌈 よくある使い道アイデア（やまとトロー流）

• 🌾 農産物の説明ページを開く
• 🏡 モバイルハウス紹介
• 🧾 商品管理コード
• 🌐 WordPressの記事URL
• 🎫 自給自足村の入場QR

QRは「現実とデジタルをつなぐ森の入口」🌲✨

---

🌳 やまとトローのひとこと 🌳

QRコードが読めるということは、
もう 世界とつながるスイッチ を持ったということ😊

あとは
🌱 デザイン
🌱 保存
🌱 通信
🌱 ワクワク

を足していくだけ✨