Flutterの旅を始める最初の実践的ステップは、新しいFlutterプロジェクトの作成です。この章では、Visual Studio Codeを使用して新しいFlutterプロジェクトを作成し、基本的なアプリの構造について理解を深めることを目指します。
・Flutterの環境作成はできたけど、実際にアプリを作成する方法がわからない。
・新規プロジェクトの作成方法がわからない。
こんな疑問に答えます。
・新しいプロジェクトを作成し、カウントアップのアプリを作成できる。
・Flutterのプロジェクトの構成を理解することができる
Visual Studio Codeでのプロジェクトの作成
Visual Studio Code（VS Code）は、Flutterアプリ開発に非常に人気のあるエディターです。その理由は、シンプルで直感的なインターフェースと、強力なFlutterプラグインが提供する豊富な機能にあります。
ではVS Codeを使用して新しいプロジェクトを作成してみましょう。
ステップ 1: 新しいプロジェクトの作成
VS Codeを開きます。 FlutterとDartの拡張機能がインストールされていることを確認してください。
下記画面が表示されます。
コマンドパレットを開きます。 View > Command Palette...を選択するか、Ctrl+Shift+P（Windows）またはCmd+Shift+P（Mac）を押します。
Flutterプロジェクトの作成を選択します。 コマンドパレットで「Flutter: New Project」と入力し、選択します。
プロジェクトタイプを選択します。 「Application」を選択して続けます。これにより、完全に機能するスターターアプリが作成されます。
プロジェクト名を入力します。
フォルダを選択して、”Select a folderを押します。
test_appとプロジェクトの名称を入力します。
Enterを押します。
ステップ 2: プロジェクト構造の理解
プロジェクトが作成されると、VS Codeのエクスプローラーにはいくつかのフォルダとファイルが表示されます。主要なものには以下のものがあります。
下記のように複数のフォルダが作成されます。
- lib/main.dart: アプリのエントリーポイントです。FlutterアプリのUI部分はここで定義されます。
- pubspec.yaml: プロジェクトのメタデータと依存関係を定義するファイルです。フォントや画像などのアセットをプロジェクトに追加するときにも使用します。
下記のようにlibのmain.dartを選択すると、Flutter demoのプログラムが記載されています。
ステップ 3: スターターアプリの実行
プロジェクトの作成が完了したら、エミュレーターまたは実際のデバイスでスターターアプリを実行してみましょう。
- エミュレーターを起動します。 Android Studioで設定したエミュレーターを起動するか、実際のデバイスをPCに接続します。
- アプリを実行します。
F5を押すか、VS Codeの「Run」メニューから「Start Debugging」を選択します。
ではエミュレータを起動します。“Ctrl + Shift + p”を押します。Flutter Launch Emulatorを選択。（事前にEmulatorの設定がされていない場合は設定を進めてください。
emulatorを起動すると、設定している携帯が表示されます。
この状態で、main.dartのRunを押します。
Runを押すと携帯にFlutter Demo Home Pageが表示されます。
では携帯で、＋ボタンを押してみましょう。どうなりますか？
このように画面のカウントが増えます。
初めてのFlutterアプリが実行されると、画面にはインクリメントカウンターが表示されます。これは、FlutterのインタラクティブなUI要素を理解するのに役立つシンプルなアプリケーションです。
最後に、画面の色を変えるため、下記色を変更してHot Reloadボタン（⚡のマーク）を押してみましょう。
こんな感じで簡単に緑色に変更することができます。
まとめ
新しいFlutterプロジェクトの作成は、Flutter開発の旅の始まりに過ぎません。このプロセスを通じて、VS CodeでのFlutterアプリ開発の基本を理解し、プロジェクト構造に慣れることができました。次の章では、Flutterのウィジェットと、基本的なアプリ構造の構築について詳しく学んでいきます。Flutter開発の世界へようこそ！
