はじめに（Day2までの簡単なおさらい）🎄
前回（Day2）までで、Flutterでモバイルアプリを開発するための環境構築がすべて完了しました。
Android Studio・iOS Simulator・CocoaPodsのセットアップを終え、flutter doctorでもNo issues found!を確認できました。
いよいよ今日からは、実際にFlutterのプロジェクトを作成し、Android/iOS のシミュレータ上でアプリを動かしていきます。
Day3のゴール
今日の目標は以下の3つです。
- Flutterプロジェクトを新規作成する
- Android/iOSのシミュレータでアプリを起動する
- Hot Reload/Hot Restartによるコード変更の反映の違いを体感する
Flutterプロジェクトを作成する
VSCodeから新規プロジェクトを作成
まずはVSCodeを起動し、コマンドパレット（Cmd + Shift + P）を開きます。
Flutter: New Project を選択。
続いて以下を選択します。
1. Project Type：Application
2. 保存先ディレクトリを指定
3. プロジェクト名を入力（例：flutter_app_day3）
少し待つと、Flutterのテンプレートアプリが自動生成されます。
プロジェクト構成を確認する
Flutterのテンプレートプロジェクトは、Android / iOS / Web / Desktop など
複数プラットフォームに対応しているため多くのファイルが生成されます。
しかし、この連載の中で理解すべきなのは次の4つだけです。
lib/
└── main.dart ← アプリ本体
android/ ← Android ネイティブ設定
ios/ ← iOS ネイティブ設定
pubspec.yaml ← 依存関係や設定の定義
-
Flutter開発で最も触るのはlib/main.dartです。
このファイルがアプリの起点となり、画面表示や動作の流れを定義しています。 -
android、ios ディレクトリはFlutterが自動生成するネイティブ側の設定が入っており、当面触る必要はありません。
-
pubspec.yaml は、Flutterプロジェクト全体の設定ファイルです。
依存パッケージの管理や、アプリ名・バージョン、使用するアセット（画像やフォント）などを定義します。
最初のうちは、- パッケージを追加するとき
- アプリ名や設定を変更したいとき
に編集する程度で問題ありません。
それでは、次から実際にアプリがどのように起動しているのかを、
main.dartを見ながら確認していきましょう。
main.dartを開いて最初の画面を理解する
main.dartを開くと、以下のようなコードが入っています。
void main() {
runApp(const MyApp());
}
main.dartはFlutterアプリのエントリポイントです。
テンプレートでは main → MyApp → MyHomePage という流れでアプリが起動し、これらのクラスによってカウンターアプリの画面が構成されています。
FlutterではUIのすべてが「Widget」で構成されており、画面はWidgetの入れ子構造（一般的に「Widgetツリー」と呼ばれます）として表現されます。
テンプレートには多くのWidgetやクラスが含まれていますが、最初からすべてを理解する必要はありません。
シミュレータでアプリを実行する
それでは、作成したテンプレートのカウンターアプリを実際にシミュレータで起動してみましょう。
Androidでは「Emulator」、iOSでは「Simulator」と名称が異なりますが、どちらも実機を模した動作確認用の環境です。
Android Emulatorで実行
-
Android Emulatorの起動
Android StudioのVirtual Device Managerを選択します。
Device Managerで右端の ▶ ボタン（起動アイコン）を選択します。
暫く待つとAndroid Emulatorが起動します。
※ディスク容量が少ないと以下のようなエラーが表示されることがあります。この機会にディスクの大掃除をしましょう💦
-
テンプレートのカウンターアプリの起動
コマンドパレットからFlutter: Select Deviceを選択します。先程起動したAndroidデバイスが表示されるので選択します。
VS Codeの左メニューから実行とデバッグを選択します。
デバッガーの選択になるのでDart & Flutterを選択します。
しばらく待つとAndroid Emulator上でカウンターアプリが起動されます。右下の＋ボタンを押すと画面中央の数字がカウントアップされていきます。
これで、AndroidでFlutterアプリを実行できる状態になりました🎉
iOS Simulatorで実行
-
iOS Simulator の起動
iOS シミュレータは、以下のコマンドで直接起動できます。open -a Simulator暫く待つとiOS シミュレータが起動します。
-
テンプレートのカウンターアプリの起動
アプリの起動方法はAndroid Emulatorの時と同じです。
コマンドパレットからFlutter: Select Deviceを選択すると起動したiOSデバイスが表示されるので選択します。
VS Codeの左メニューから実行とデバッグを選択してデバッガーはDart & Flutterを選択します。
暫く待つとカウンターアプリが起動します。
これで、iOSでFlutterアプリを実行できる状態になりました🎉
Hot Reload/Hot Restartを試す
Flutter開発の大きな特徴の1つがHot Reload/Hot Restartです。
Hot Reloadでは、アプリを停止・再起動せずにコード変更をすぐに反映できます。
Hot Restartではアプリ全体を初期状態から再起動します。
ただし、Hot ReloadとHot Restart。この2つは似ていますが、動きが全く違います。
-
Hot Reloadとは
→「UIの変更だけを即座に反映する」- 画面の見た目（Widgetツリー）が更新される
- 基本的にはState（アプリ内の値）はそのまま保持される
- よって _counterのような初期値を変えても反映されない
-
Hot Restartとは
→「アプリを初期状態から再起動する」- Stateを含めてアプリ全体を再生成
- 初期値の変更（例：_counter = 100）も反映される
- 実行中の画面がまっさらな状態に戻る
Hot Reloadを試してみる
- UIを少し変更してみる
main.dart内のテキスト部分を変更してみます。
- home: const MyHomePage(title: 'Flutter Demo Home Page'),
+ home: const MyHomePage(title: 'Day3 Demo'),
- 編集したコードを保存する
保存すると
このように変更内容が即反映されます。
Hot Restartを試してみる
カウンターアプリの初期値_counterを変更してみます。
- ボタンのカウントを変更してみる
カウンターの初期値 _counterを0→999に変更します。
- int _counter = 0;
+ int _counter = 999;
-
編集したコードを保存する
先ほどWidgetのタイトルを変更したときとは違い、Stateとして管理されているカウンターの値は、保存しただけではすぐに画面へ反映されません。
-
アプリの再起動をする
コードを変更しても画面に変化はありませんが、↻再起動ボタンを押してみます。
すると、アプリが初期状態から起動しカウンターが999からスタートします。
まとめ
ここまででできるようになったこと
- FlutterアプリをVSCodeから実行
- Android/iOSのシミュレータで挙動確認
- Hot Reload/Hot Restartによるコード変更の反映の違いを理解
次回予告（Day4）
- Flutter UIについてもう少し深掘り
- State管理の基本
- スワイプゲーム試作のためにGestureDetectorを触ってみる