プログラミング

Flutterのプロジェクト作成から実行までの手順を初心者向けにわかりやすく解説

Flutterのプロジェクト作成から実行までの手順を初心者向けにわかりやすく解説

Flutterでアプリ開発を始めたいと思っても、「プロジェクトはどうやって作るの？」「作成した後はどうやって起動するの？」と悩む方は多いのではないでしょうか。

Flutterでは、一度プロジェクトの作成手順を覚えてしまえば、新しいアプリを作るたびに同じ流れで開発を始められます。そのため、最初に基本的な手順をしっかり理解しておくことが大切です。

この記事では、Flutterのプロジェクト作成からアプリの実行・起動までの流れを初心者向けにわかりやすく解説します。VS Code・Android Studioどちらを利用している方でも参考になる内容なので、ぜひ最後までご覧ください。

目次

Flutterのプロジェクトを作成する前に準備するもの

Flutterのプロジェクトを作成する前に、以下の環境が整っていることを確認しましょう。

必要なもの内容
Flutter SDKインストール済み
Dart SDKFlutterと一緒にインストールされる
VS Code または Android Studio開発用エディタ
Androidエミュレーターまたは実機アプリを動作確認するため

Flutterの環境構築がまだ終わっていない場合は、先にFlutter SDKやAndroid Studioなどをインストールしておきましょう。

Flutter SDK・Android Studio・VS Code

Flutterで新しいプロジェクトを作成する方法

Flutterでは、VS Code・Android Studio・コマンドラインのいずれからでもプロジェクトを作成できます。

この記事では、初心者にも使いやすいVS Codeを例に紹介します。

VS Codeから作成する方法

  1. VS Codeを開く
  2. Ctrl + Shift + P を押す
  3. Flutter: New Project を選択
  4. Application を選択
  5. プロジェクトを保存するフォルダを選ぶ
  6. プロジェクト名を入力する
  7. Enterを押して作成完了

プロジェクト名には次のルールがあります。

  • 英小文字を使用する
  • スペースは使わない
  • 単語の区切りは「_（アンダースコア）」を使用する

例

hello_flutter
my_first_app
sample_project

数十秒待つと、自動でFlutterプロジェクトが生成されます。

ここに画像があるとよい
（Flutter: New Projectを選択している画面）

コマンドから作成する方法

ターミナルを利用する場合は、次のコマンドでも作成できます。

flutter create sample_app

作成後は、

cd sample_app

でプロジェクトへ移動します。

作成されたFlutterプロジェクトの構成を確認しよう

プロジェクトを作成すると、多くのファイルが自動で生成されます。

最初に覚えておきたいものだけ紹介します。

ファイル・フォルダ役割
libアプリのコードを書く場所
lib/main.dart最初に実行されるファイル
androidAndroid用設定
iosiPhone用設定
webWebアプリ用
pubspec.yamlパッケージや画像の設定

初心者のうちは、まずlib/main.dartだけ覚えておけば十分です。

ここにアプリの画面を作るコードを書いていきます。

Flutterプロジェクト全体のフォルダ構成
Flutterプロジェクト全体のフォルダ構成

最初に表示されるサンプルアプリ

プロジェクト作成直後は、Flutterのサンプルアプリが用意されています。

画面にはカウンターアプリが表示され、「+」ボタンを押すと数字が増える仕様になっています。

このサンプルを編集しながらFlutterを学習していくのがおすすめです。

Flutterアプリを実行・起動する方法

プロジェクトが完成したら、実際にアプリを起動してみましょう。

VS Codeから起動する方法

画面上部または右下から実行デバイスを選択します。

その後、

  • F5
  • Run > Start Debugging

のどちらかでアプリを起動できます。

初回のみビルドに数分かかることがあります。

ターミナルから起動する方法

プロジェクトフォルダで次のコマンドを実行します。

flutter run

ビルドが完了すると、エミュレーターまたは実機でアプリが起動します。

もし複数のデバイスが接続されている場合は、

flutter devices

で一覧を確認できます。

ホットリロードを活用しよう

Flutter最大の魅力の一つがホットリロードです。

コードを編集したあと、

  • VS Codeなら保存（Ctrl + S）
  • ターミナルなら r

を押すだけで、変更内容がほぼ瞬時に画面へ反映されます。

アプリを毎回起動し直す必要がないため、非常に効率よく開発できます。

Flutterプロジェクト作成時によくあるエラー

初心者がよく遭遇するトラブルをまとめました。

エラー原因対処方法
flutter command not foundPATH設定Flutter SDKをPATHへ追加する
No devices found実行端末がないエミュレーターまたは実機を接続する
GradleエラーAndroid環境Android StudioでSDKを確認する
Pub get failedパッケージ取得失敗flutter pub get を実行する

エラーが表示された場合でも慌てず、メッセージを確認しながら原因を一つずつ解決していきましょう。

まとめ

今回は、Flutterのプロジェクト作成からアプリの実行までの流れを紹介しました。

記事のポイントをまとめると、次のとおりです。

  • Flutter SDKと開発環境を準備する
  • VS Codeまたはコマンドでプロジェクトを作成する
  • lib/main.dart が最初に編集するファイル
  • flutter run または F5でアプリを起動できる
  • ホットリロードを使うと効率よく開発できる

Flutterでは、一度この流れを覚えてしまえば、新しいアプリを作るたびに同じ手順で開発を始められます。

次の記事では、「main.dartの構成」や「Textウィジェットを使って文字を表示する方法」を学ぶと、Flutterの基本をさらに理解できるでしょう。