投稿日: 2026年04月15日
004. Flutter 最初のプロジェクト作成と実行
開発環境の構築完了後(Flutter、VS Code、Visual Studioインストール後)、最初に行うべき「Hello World !」アプリの作成手順を整理する。 VS Codeの基本操作から、実際に画面に文字が表示されるまでの流れを解説する。
1. プロジェクトの新規作成(VS Code操作)
VS Codeを起動し、以下の手順でFlutterプロジェクトの雛形を作成する。
- コマンドパレットの起動: キーボードの
Ctrl + Shift + Pを同時に押す。 - コマンドの選択: 入力欄に
flutterと入力し、候補からFlutter: New Projectを選択する。 - プロジェクトタイプの選択:
Applicationを選択し、プロジェクトを保存するフォルダを決定する。 - プロジェクト名の入力: 任意の名前(例:
hello_world_app)を入力し、Enterキーを押す。
※プロジェクト作成後、「Do you trust the authors...」と表示された場合は「Yes, I trust the authors」を選択する。
2. ソースコードの書き換え(Hello World実装)
初期状態で作成されるサンプルコードを削除し、最小限の表示コードに書き換える。
- 左側のエクスプローラーから
lib/main.dartを開く。 - 既存のコードをすべて削除し、以下の内容を貼り付けて保存(Ctrl + S)する。
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello World !', style: TextStyle(fontSize: 24)),
),
),
),
);
}
3. 実行デバイスの選択とデバッグ開始
作成したプログラムを実際に動作させる。
- 実行デバイスの切り替え: VS Code右下のステータスバーにあるデバイス名(Windows等)をクリックし、ターゲットを選択する(まずは
Windows (desktop)またはChrome推奨)。 - デバッグ実行:
F5キーを押す(またはメニューの [Run] > [Start Debugging])。
コンパイル後、新しいウィンドウまたはブラウザが立ち上がり、画面中央に Hello World ! と表示されれば成功である。
4. 動作確認後のチェックポイント
- ホットリロードの試行:
'Hello World !'のテキストを書き換えて保存(Ctrl + S)してみる。再実行することなく、瞬時に画面が更新されることを確認する。 - エラーが出た場合:
flutter doctorを再実行し、特にVisual StudioやSDKのパス設定に不備がないか再確認する。
免責事項
本記事の内容は、投稿時点における個人的な備忘録としてまとめたものです。正確性には万全を期しておりますが、GitHubの仕様変更や利用規約の改定により、内容が古くなっている可能性があります。本記事を参考に操作を行ったことによるいかなる損害についても、当方では一切の責任を負いかねますのでご了承ください。最新の情報は公式ドキュメントをご確認ください。
無償ソフト公開活動へのご支援
NetEnumをはじめ、NetEnumMobile、オンラインソフト、FreeTools など、
弊社では20年以上にわたり各種ソフトを無償で公開してまいりました。
これまでのご利用へのお気持ちや、公開継続へのご支援をいただけますと大変励みになります。
業務利用されている方からのご支援も歓迎しております。
※ ご支援は特定ソフトの更新や機能追加をお約束するものではなく、
無償ソフト公開活動全体の維持・運営に活用させていただきます。
※ Stripeの安全な決済ページへ移動します(決済画面の表示名は仕様上「ECサイト」となりますが、当社のStripeアカウントによる決済です)