Realize,Inc.

投稿日: 2026年04月15日

004. Flutter 最初のプロジェクト作成と実行

#HelloWorld #VSCode #Flutter #初心者

開発環境の構築完了後(Flutter、VS Code、Visual Studioインストール後)、最初に行うべき「Hello World !」アプリの作成手順を整理する。 VS Codeの基本操作から、実際に画面に文字が表示されるまでの流れを解説する。

1. プロジェクトの新規作成(VS Code操作)

VS Codeを起動し、以下の手順でFlutterプロジェクトの雛形を作成する。

  1. コマンドパレットの起動: キーボードの Ctrl + Shift + P を同時に押す。
  2. コマンドの選択: 入力欄に flutter と入力し、候補から Flutter: New Project を選択する。
  3. プロジェクトタイプの選択: Application を選択し、プロジェクトを保存するフォルダを決定する。
  4. プロジェクト名の入力: 任意の名前(例: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. 実行デバイスの選択とデバッグ開始

作成したプログラムを実際に動作させる。

  1. 実行デバイスの切り替え: VS Code右下のステータスバーにあるデバイス名(Windows等)をクリックし、ターゲットを選択する(まずは Windows (desktop) または Chrome 推奨)。
  2. デバッグ実行: F5 キーを押す(またはメニューの [Run] > [Start Debugging])。

コンパイル後、新しいウィンドウまたはブラウザが立ち上がり、画面中央に Hello World ! と表示されれば成功である。

4. 動作確認後のチェックポイント

  • ホットリロードの試行: 'Hello World !' のテキストを書き換えて保存(Ctrl + S)してみる。再実行することなく、瞬時に画面が更新されることを確認する。
  • エラーが出た場合: flutter doctor を再実行し、特にVisual StudioやSDKのパス設定に不備がないか再確認する。

免責事項

本記事の内容は、投稿時点における個人的な備忘録としてまとめたものです。正確性には万全を期しておりますが、GitHubの仕様変更や利用規約の改定により、内容が古くなっている可能性があります。本記事を参考に操作を行ったことによるいかなる損害についても、当方では一切の責任を負いかねますのでご了承ください。最新の情報は公式ドキュメントをご確認ください。

無償ソフト公開活動へのご支援

NetEnumをはじめ、NetEnumMobile、オンラインソフト、FreeTools など、 弊社では20年以上にわたり各種ソフトを無償で公開してまいりました。
これまでのご利用へのお気持ちや、公開継続へのご支援をいただけますと大変励みになります。
業務利用されている方からのご支援も歓迎しております。

※ ご支援は特定ソフトの更新や機能追加をお約束するものではなく、 無償ソフト公開活動全体の維持・運営に活用させていただきます。
※ Stripeの安全な決済ページへ移動します(決済画面の表示名は仕様上「ECサイト」となりますが、当社のStripeアカウントによる決済です)

次世代メンバー募集中