[Flutter]プロジェクトを作成〜サンプルアプリを起動

2023年4月10日2023年11月24日

FlutterはGoogleが開発したクロスプラットフォームのアプリ開発フレームワークであり、Dartというプログラミング言語を使用します。このページではFlutterアプリ作成のためのプロジェクト作成〜サンプルアプリ起動までの流れを記載します。

Flutterのインストールがまだの場合はこちらが参考になれば幸いです。

プロジェクトを作成

ターミナルまたはコマンドプロンプトでプロジェクトを作成したいディレクトリに移動し、以下のコマンドを入力します。

flutter create [プロジェクト名]

iOS・Androidの初期設定言語はそれぞれobject-c・javaです。それぞれの言語をobjectc->swift・java->kotlinに変更する場合は以下のコマンドを入力します。

flutter create -i swift -a kotlin [プロジェクト名]

[プロジェクト名]に使用できる文字は公式サイト記載しているとおり、英小文字・0-9・_(アンダーバー)です。[プロジェクト名]は数字で始まっておらず、予約語(公式サイト)と異なる必要があります。

プロジェクトの実行

プロジェクトを作成すると、予めサンプルアプリコードが lib/main.dart 内に含まれています。
以下のコマンドを使用して、作成したFlutterプロジェクトを実行してみましょう。

cd [プロジェクト名]
flutter run

端末にインストール済みのブラウザが複数ある場合(Edge,FireFox,Chrome等々)、以下のように、どのブラウザで実行結果を表示するか確認メッセージが表示されますので、ブラウザの選択をしてください。

Multiple devices found:
macOS (desktop) • macos  • darwin-arm64   • macOS 13.2.1 22D68 darwin-arm64 (Rosetta)
Chrome (web)    • chrome • web-javascript • Google Chrome 112.0.5615.49
[1]: macOS (macos)
[2]: Chrome (chrome)

以下のようなアプリケーションがブラウザで表示されれば、プロジェクト作成の完成です、(簡単!)

VS CODE を利用してコーディングしている場合、デバッグモード(F5 or 実行->デバッグ開始)で起動しないとホットリロードが有効にならないので注意が必要

作成するアプリを複数言語対応(localization)する場合は以下のいずれかを参考にしてください。