MENU
暮らしを少し便利にするアプリとサービスを作っています
  1. ホーム
  2. Flutter
  3. Flutter Webの世界へ

Flutter Webの世界へ

Flutter

今日はFlutter Webプロジェクト作成してみます。

目次

Step 1: プロジェクト作成

ターミナル/コマンドプロンプトを開いて:

# デスクトップに移動（または好きな場所）
cd ~/Desktop

# Flutter Webプロジェクト作成
flutter create sample_pwa

# プロジェクトに移動
cd gesshibukuro_pwa

これで基本的なFlutterプロジェクトが作成されます!

📁 sample_pwa/
├─ 📁 android/ (Androidアプリ用)
├─ 📁 ios/ (iOSアプリ用)
├─ 📁 lib/ ← Dartコード（メイン）
│ └─ main.dart
├─ 📁 web/ ← Web用（重要!）
│ ├─ index.html
│ ├─ manifest.json
│ └─ icons/
├─ 📁 test/
└─ pubspec.yaml

Step 2: Chromeで実行

ターミナル:

flutter run -d chrome

期待される結果:
✅ Chromeが自動で開く
✅ Flutterのデモアプリが表示される
✅ カウンターアプリが動く
✅ ホットリロードが使える

Flutter学習者におなじみのカウンターアプリが表示される

Step 3: 自分の作りたいアプリのUI作成

VS Codeで lib/main.dart を開く:
既存のコードを全部削除して、自分の作りたいアプリの簡易のコードに置き換えます:

import 'package:flutter/material.dart';

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

class XxxxxApp extends StatelessWidget {
  const XxxxxApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Xxxxxミニ PWA',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const StudentListPage(),
    );
  }
}・・・・・・

ホットリロード:ターミナルでr
✅ ホットリロードが自動実行される
✅ Chromeの画面が更新される→ すぐに反映される!

Step 4: 動作確認

全部動く!

Step 5: ビルド

ターミナルで（flutter run を停止してから）:（Ctrl+C または Cmd+C）

# Webアプリとしてビルド
flutter build web

build/web/ フォルダにファイルが生成される

→ これがWebアプリ!

Step 6: ビルドしたアプリを確認

Live Server（VS Code）ではうまくいかなかったので、flutter run を使う
ターミナルで

# pwa フォルダに移動
cd ~/Desktop/Xxxxx_pwa

# Chromeで実行（開発モード）
flutter run -d chrome

ホットリロードも簡単：
ターミナルで
r を押す → ホットリロード（Hot Reload）だけ
→色やタイトルなど簡単に変更できました！！

コマンド一覧

r を押す → ホットリロード（Hot Reload）
           変更した部分だけ更新
           状態は保持される
           
R を押す → ホットリスタート（Hot Restart）
           (Shift + R)
           アプリ全体を再起動
           状態はリセットされる

q を押す → アプリ終了（Quit）

h を押す → ヘルプ表示

Flutter Webの魅力

コードを変更
    ↓
保存（Cmd+S）
    ↓
ターミナルで r
    ↓
数百ミリ秒で反映!

→ 開発が超速い! 🚀
→ すぐに確認できる! 👀
→ 試行錯誤が楽! 💪

これから開発するとき

毎日の流れ:

1. ターミナルで:
   cd ~/Desktop/gesshibukuro_pwa
   flutter run -d chrome

2. VS Code でコード編集

3. 保存（Cmd+S）

4. ターミナルで r

5. ブラウザで確認

6. 2-5を繰り返す

7. 終わったら:
   ターミナルで q
Flutter
目次