🌳 やまとトロー流 🌳 FlutterでQRスキャナーを「森・和モダン」デザインにする🌲

〜自然×シンプル×やさしさ〜

こんにちは、やまとトトローです＾＾
今回は、前回作った QRコード読み取りアプリ を
🌿 森
🏯 和モダン
🌱 やさしい色と余白

で、見ていて心地いいアプリ に進化させます✨

技術 × デザイン = わくわく😊

---

🌱 デザインコンセプト（やまとトロー流）

🎨 色

• 深緑：森・安心感
• 薄緑：若葉・やさしさ
• 白：余白・清潔感

🪵 形

• 角は丸く（木のやわらかさ）
• 余白をたっぷり
• 情報は少なく、わかりやすく

---

🎨 カラーパレット（今回使用）

const Color forestGreen = Color(0xFF2E7D32);
const Color leafGreen   = Color(0xFFA5D6A7);
const Color woodWhite   = Color(0xFFFDFDFB);

---

① 森・和モダン版 QRスキャナー完成コード 🌲

lib/main.dart を以下に置き換えてください👇

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

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

// 🌲 カラー定義
const Color forestGreen = Color(0xFF2E7D32);
const Color leafGreen   = Color(0xFFA5D6A7);
const Color woodWhite   = Color(0xFFFDFDFB);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'sans-serif',
        scaffoldBackgroundColor: woodWhite,
      ),
      home: const QRScannerPage(),
    );
  }
}

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

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

class _QRScannerPageState extends State<QRScannerPage> {
  String qrResult = 'QRをかざしてください🌱';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: forestGreen,
        elevation: 0,
        title: const Text(
          'やまとトローQR',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            letterSpacing: 1.2,
          ),
        ),
        centerTitle: true,
      ),
      body: Column(
        children: [
          // 🌲 カメラエリア
          Expanded(
            flex: 4,
            child: Container(
              margin: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(24),
                border: Border.all(color: forestGreen, width: 2),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(22),
                child: MobileScanner(
                  onDetect: (barcode, args) {
                    final String? code = barcode.rawValue;
                    if (code != null) {
                      setState(() {
                        qrResult = code;
                      });
                    }
                  },
                ),
              ),
            ),
          ),

          // 🌱 結果表示エリア
          Expanded(
            flex: 2,
            child: Container(
              width: double.infinity,
              margin: const EdgeInsets.fromLTRB(16, 0, 16, 16),
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: leafGreen,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    '読み取り結果',
                    style: TextStyle(
                      fontSize: 14,
                      color: forestGreen,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    qrResult,
                    style: const TextStyle(
                      fontSize: 16,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

🌳 見た目の進化ポイント解説 🌳

🪵 枠を木のように丸く

borderRadius: BorderRadius.circular(24)

→ 森のやさしさ🌲

---

🌿 緑の濃淡で安心感

forestGreen × leafGreen

→ 和モダン感アップ✨

---

🌱 情報は「少なく・太く」

• 見出しは小さく
• 結果は読みやすく
• 余白たっぷり

→ 心が疲れないUI 😊

---

🌈 やまとトロー的デザイン哲学

便利すぎない
主張しすぎない
でも、あたたかい

これが
🌲 森・和モダンUI 🌲

---

🚀 次の進化（おすすめ順）

次はどれ行く？😆👇

1️⃣ 読み取ったURLを自動で開く🌐
2️⃣ QR履歴を保存する📒
3️⃣ ロゴ・フォントを和風にする🖌
4️⃣ WordPressと連携する🔗
5️⃣ 「自給自足村」公式アプリ化🏡

やまちゃんの世界観、
アプリとして完成させに行きましょ💪🌱
次もわくわく全開でいきましょう〜！