Flutterでアプリ開発を始めるには、まずFlutterプロジェクトを作成する必要があります。しかし、初めてFlutterに触れる方の中には、「どこからプロジェクトを作ればいいの？」「作成したプロジェクトはどうやって開くの？」と悩む方も多いでしょう。
FlutterではVisual Studio Codeを使用することで、簡単に新しいプロジェクトを作成できます。また、Androidアプリだけでなく、iPhoneやWindows、Webアプリ向けの開発環境も同時に準備されるため、クロスプラットフォーム開発を始めやすいのも魅力です。
この記事では、Visual Studio Codeを使用したFlutterプロジェクトの作成方法から、作成したプロジェクトを開く手順までを初心者向けに分かりやすく解説します。
Flutterプロジェクトを作成する
Flutterでアプリ開発を始めるには、まず新しいプロジェクトを作成する必要があります。Flutterプロジェクトを作成すると、AndroidやiPhone、Windows、Webなど複数のプラットフォーム向けの開発に必要なファイルが自動で生成されます。
ここではVisual Studio Codeを使用して、新しいFlutterプロジェクトを作成する手順を紹介します。
① Visual Studio Codeを起動
Visual Studio Codeを起動します。
左上の「View」→「Command Palette」を選択するか、キーボードの「Ctrl + Shift + P」を押してコマンドパレットを開きます。
② Flutter: New Projectを選択
コマンドパレットの検索欄に「Flutter: New Project」と入力します。
表示された「Flutter: New Project」をクリックすると、新しいFlutterプロジェクトの作成画面が表示されます。
③ Applicationを選択
プロジェクトの種類を選択する画面が表示されるので、「Application」を選択します。
PackageやPluginなど他の選択肢もありますが、通常のアプリ開発ではApplicationを選択すれば問題ありません。
④ 保存先を選択
作成するFlutterプロジェクトの保存先フォルダを選択します。
例えば「D:\FlutterProjects」のように、Flutterプロジェクト専用のフォルダを作成しておくと管理しやすくなります。
⑤ プロジェクト名を入力
プロジェクト名を入力します。
例：
test_app
プロジェクト名には次のルールがあります。
- 小文字を使用する
- アンダースコア（_）を使用できる
- 日本語は使用できない
- スペースは使用できない
⑥ Flutterプロジェクトが作成される
プロジェクト名を入力すると、Flutterが必要なファイルを自動生成します。
数秒待つと、以下のようなフォルダ構成のプロジェクトが作成されます。
test_app
├─ android
├─ ios
├─ linux
├─ windows
├─ web
├─ test
├─ lib
│ └─ main.dart
├─ pubspec.yaml
Flutterでは主に「lib」フォルダ内の「main.dart」を編集しながらアプリ開発を進めていきます。
作成したFlutterプロジェクトを開く方法
Flutterプロジェクトを作成しただけでは、まだソースコードの編集はできません。続いて、作成したプロジェクトをVisual Studio Codeで開いてみましょう。
① フォルダーを開くを選択
Visual Studio Codeの上部メニューから「ファイル」→「フォルダーを開く」を選択します。
② 作成したプロジェクトを選択
先ほど作成したFlutterプロジェクトのフォルダを選択します。
例えば以下のようなフォルダです。
test_app
選択後、「フォルダーの選択」をクリックします。
③ プロジェクトのファイルが表示される
プロジェクトを開くと、左側のエクスプローラーにFlutterプロジェクトのファイル一覧が表示されます。
以下のようなフォルダやファイルが確認できれば正常に開けています。
test_app
├─ android
├─ ios
├─ linux
├─ windows
├─ web
├─ lib
├─ test
├─ pubspec.yaml
④ main.dartを開く
Flutterアプリの開始地点となるファイルは「lib」フォルダ内の「main.dart」です。
libフォルダを展開し、「main.dart」をクリックして開きましょう。
⑤ Flutterアプリを実行する
プロジェクトを開いたら、画面上部の「実行」→「デバッグの開始」をクリックするか、キーボードの「F5」を押してアプリを実行できます。
Androidエミュレーターや実機が接続されている場合は、自動的にFlutterアプリが起動します。
ポイント
Flutter開発では主に以下のファイルを編集することになります。
- main.dart：アプリの開始地点
- pubspec.yaml：パッケージや画像の設定
- libフォルダ内の各Dartファイル：アプリの画面や機能
まずはmain.dartを編集して、Flutterアプリの動作を確認してみましょう。
