Flutterラボ

📘 概要 Intro

Flutterは、1つのコードベースでiOS/Android/Web/デスクトップ向けのUIを構築できるGoogle製フレームワークです。描画エンジン（Skia）により高速で一貫したUIを提供し、Dart言語で開発します。

Hot ReloadMaterial 3CupertinoWidgetState管理

💡 基本 Basics

Dartの基本構文と、Flutterにおける「すべてはWidget」の考え方。


// Dartの基礎
void main() {
  var name = "Flutter";
  int ver = 3;
  print("Hello, $name $ver");
}
      

// 最小Flutterアプリ
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Lab',
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: const Color(0xFF02569B)),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State createState() => _HomePageState();
}
class _HomePageState extends State {
  int counter = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Lab')),
      body: Center(child: Text('Count: $counter')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => counter++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

🧱 基礎 Layout

レイアウトの基本は Row / Column / Stack と Flex の組み合わせ。レスポンシブ対応には LayoutBuilder や MediaQuery を活用します。

レスポンシブ・ブレークポイントの例 

Widget responsive(BoxConstraints c) {
  if (c.maxWidth >= 1200) return const Text("Desktop");
  if (c.maxWidth >= 800)  return const Text("Tablet");
  return const Text("Phone");
}

🚀 導入 Setup

  1. Flutter SDK をダウンロード → パス設定
  2. flutter doctor で環境チェック（Android/iOSツールチェーン）
  3. 好みのIDE（VS Code / Android Studio）へFlutter/Dart拡張を導入
  4. エミュレータ/シミュレータ または 実機を用意
📱 アプリ開発へ進む 🔗 公式リンク集

📰 最新情報 News

※外部RSSの取得は環境により制限される場合があります（失敗時はダミーを表示）。

🧩 応用 State

  • 状態管理：Riverpod / Provider / BLoC
  • ルーティング：go_router で宣言的ナビゲーション
  • HTTP/API：Dio + retrofit.dart、JSON変換に json_serializable
  • ローカルDB：Drift / Isar
  • CI/CD：Codemagic / GitHub Actions
go_router の最小例 

final _router = GoRouter(routes: [
  GoRoute(path: '/', builder: (c, s) => const HomePage()),
  GoRoute(path: '/detail/:id', builder: (c, s) => DetailPage(id: s.pathParameters['id']!)),
]);

🌊 発展 Pro

  • テスト：flutter_test / integration_test / ゴールデンテスト
  • パフォーマンス：レイアウト jank 計測、トレース、RepaintBoundary最適化
  • 並列処理：Isolate、compute、ネイティブ連携は ffi

📱 アプリ開発 Build

プロジェクト構成のヒント

  • lib/ は feature ごとに分割（domain/data/ui）
  • Flavor（本番/検証/開発）を切替、--dart-define で環境注入
  • L10n（多言語）とアクセシビリティを最初から考慮

リリースの流れ

  1. アセット最適化＆アイコン生成
  2. ビルド：iOS（ipa）/ Android（aab）
  3. ストア審査要件チェック（プライバシー、スクショ、説明）

🔧 活用方法 Usecases

モバイルだけでなく、Web/PWA や デスクトップ向けにも同一コードで展開可能。バックエンドには Firebase / Supabase などを組み合わせると、開発～運用がスムーズです。