ヴェズルフェルニルの研究ノート

座右の銘「ただ一人犀の角のように歩め」的な研究活動ノート

Flutterのインストールと開発環境の構築〔基本編〕

Flutter

近況報告になるが、去年末から本業仕事でIoT系プロジェクトに関わっていたが、最近それが一段落した。この仕事のターゲット機はESP32を搭載しているが、小生はそのファームウェアの開発を行った。また、AWS上で稼働するNestJSベースのWebアプリ・サーバープログラムの改造も手伝ったりした。こちらで得た技術知見もブログ記事に書いていこうと思っている。

本業に復帰する前の一昨年から去年前半まで（コロナ禍の最盛期）はIT開発は副業としてやっていたが、主に関わっていたのはスマホアプリ開発でフレームワーク（プログラミング言語）はFlutter（Dart）を使っていた。Flutterを好んで使っていたのは、一つのプログラムコードでデスクトップ、Web、スマホアプリの全部に対応できるからだ。モダンなオブジェクト指向＋宣言型の言語パラダイムも理解し易くて（小生の場合、使いこなしている自信レベルの習得に２ヶ月だった）、いまでもスマホアプリ開発用のフレームワーク・言語としてFlutter/Dartがベストの選択だと思っている。

一年近くブランクができてしまったので、再スタートのつもりで改めてスマホアプリ開発に取り組みたい。クリーンインストール新調したMacとUbuntu機にFlutterによるスマホアプリ開発環境を構築したので、その作業内容を記事に書いていく。

小生がFlutterを使い始めたの頃はすでにSDKバージョン3.xはリリースされていたが、まだ2.xが主流だった。いまは3.xが主流になっており、色々と変わってしまっている点があるようだ。

Flutterのインストール

Flutter（Flutter SDK）は素のまま直接インストールすることもできるが、言語バージョン管理ツールを利用した方がプログラム毎のプロジェクト管理がやり易くなる。

Flutter用のバージョン管理ツールとして、FVM（Flutter Version Management）またはasdfが広く使われているようだ。

fvm.app

asdf-vm.com

FVMによるFlutterのインストール

FVMのインストール

% brew tap leoafarias/fvm
% brew install fvm
$ curl -fsSL https://fvm.app/install.sh | bash

Flutterバージョンのインストール

% fvm releases
% fvm install 3.19.6
% fvm list
Cache directory:  /Users/LOGNAME/fvm/versions
Directory Size: 73.02 MB

┌─────────┬─────────┬─────────────────┬──────────────┬──────────────┬────────┐
│ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │
├─────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┤
│ 3.19.6  │         │ Need setup      │              │              │        │
└─────────┴─────────┴─────────────────┴──────────────┴──────────────┴────────┘

本記事執筆時点のFlutter SDKの最新Stable版は3.19.6-stableなのでこれをインストールしているが、任意のバージョンを指定してインストールすることもできる。

グローバルなFlutterバージョンの設定

プロジェクトディレクトリ外でもFlutter SDKのコマンドが利用できるように、グローバルなFlutterのバージョンを設定しておくことを薦める。

% fvm global 3.19.6
% cd
% fvm flutter --version
Flutter 3.19.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 54e66469a9 (2 weeks ago) • 2024-04-17 13:08:03 -0700
Engine • revision c4cd48e186
Tools • Dart 3.3.4 • DevTools 2.31.1

asdfによるFlutterのインストール

asdfのインストール手順については下の記事を参照してほしい。

blog.ketus-ix.work

Flutterバージョンのインストール

% asdf plugin add flutter
% asdf list all flutter
% asdf install flutter latest
% asdf reshim
% asdf list flutter
  3.19.6-stable

コマンド "asdf install flutter latest" はFluter SDKの最新Stable版をインストールする場合だが、下のようなコマンドによって指定したバージョンをインストールすることもできる。

% asdf install flutter 3.16.8-stable

補足情報

Homebrew環境のasdfでFlutter 3.0以降をインストールしようすると、下のようなエラーになることがある。

% asdf install flutter latest
/Users/LOGNAME/.asdf/plugins/flutter/bin/install: line 25: jq: command not found
/Users/LOGNAME/.asdf/plugins/flutter/bin/install: line 26: jq: command not found
/Users/LOGNAME/.asdf/plugins/flutter/bin/install: line 27: [: -gt: unary operator expected
Cannot find the download url for the version: 3.19.6-stable

この場合は、jqというパッケージをインストールすると解決できる。

% brew install jq

グローバルなFlutterバージョンの設定

プロジェクトディレクトリ外でもFlutter SDKのコマンドが利用できるように、グローバルなFlutterのバージョンを設定しておくことを薦める。

% asdf global flutter 3.19.6-stable
% cd
% flutter --version
Flutter 3.19.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 54e66469a9 (2 weeks ago) • 2024-04-17 13:08:03 -0700
Engine • revision c4cd48e186
Tools • Dart 3.3.4 • DevTools 2.31.1

必要なツールのインストール

Google Chromeのインストール

FlutterによるWebアプリの動作確認に使われるので、Google Chromeが必要となる。Google Chromeの公式サイトから入手できる。

下のようなコマンドによって、Homebrewを使ってGoogle Chromeをインストールすることもできる。

% brew install --cask google-chrome

なお、Chrome派生の他のWebブラウザ（Vivaldiなど）を使っている場合は、環境変数CHROME_EXECUTABLEにそのパスを指定しておけば、そちらが使われる。

Xcodeのインストール

macOSデスクトップ・アプリの開発はXcodeを使わないとできない。XcodeはiOSアプリにも対応しているので、Xcodeをインストールすればこの両方を開発できる。

最新版のXcodeはApp Storeから入手できる。ただし、最新版Xcodeはインストール可能なmacOSのバージョンがその時点の最新版に限定されている。

Xcode

Xcode

  • Apple
  • 開発ツール
  • 無料
apps.apple.com

最新版より古いバージョンはApple DeveloperのXcode公式サイトから入手できる。

developer.apple.com

あるいは、Xcodesというユーティリティアプリを使ってXcodeをインストールこともできる。Xcodesについては下の記事を参照してほしい。

blog.ketus-ix.work

XcodesによってXcodeをインストールした場合は、同アプリのファイル名は /Applications/Xcode-VERSION.appになってしまうので、対象バージョンのコンテキストメニューから [Xcode.appとしてシンボリックリンクを作成] を実行しておくと良いだろう。

Xcodeをインストールしたら、下のコマンドを実行しておくこと。

% sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Flutter開発環境の状態確認

Flutter SDKにはFlutter開発環境の状態を調べてくれるコマンドがある。下のコマンドがそれだ（FVMを使っている場合のコマンドは "fvm flutter doctor"）。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.6, on macOS 12.7.4 21H1123 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 14.2)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.89.0)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 3 categories.

ここまでの手順操作が済んでいれば、多分上のような表示になるだろう。

問題として指摘されている "Android toolchain - Unable to locate Android SDK."、"Android Studio (not installed)" はAndroidアプリの開発に必要なコンポーネントなので、FlutterでAndroidアプリの開発を行わない場合は無視しても構わない。"Xcode - CocoaPods not installed." で指摘されているCocoaPodsはiOSアプリの開発に必要なもので、この状態でもmacOSデスクトップ・アプリの開発は行える。FlutterでiOSアプリの開発を行わない場合はこの指摘は無視しても構わない（これらのインストール方法については次の記事で説明する）。

Flutterプロジェクトの環境構築

新規プロジェクトの作成

FVMを使っている場合

% mkdir flutter_project
% cd flutter_project
% fvm use 3.19.6

No pubspec.yaml detected in this directory
✔ Would you like to continue? · yes                                                                                                                                                                                                                 
[WARN] Project is not a git repository. 
 But will set .gitignore as IDEs may use it,to determine what to index and display on searches,
You should add the fvm version directory ".fvm/" to .gitignore.
✔ Would you like to do that now? · yes                                                                                                                                                                                                              
✓ Added .fvm/ to .gitignore

✗ Could not resolve dependencies. (0.9s)

Expected to find project root in current working directory.

The error could indicate incompatible dependencies to the SDK.
✔ Would you like to continue pinning this version anyway? · yes                                                                                                                                                                                     
✓ Project now uses Flutter SDK : SDK Version : 3.19.6

% fvm flutter create .
Recreating project ....
  pubspec.yaml (created)
  README.md (created)
  lib/main.dart (created)
  test/widget_test.dart (created)
  windows/runner/flutter_window.cpp (created)
  windows/runner/utils.h (created)
  windows/runner/utils.cpp (created)
  windows/runner/runner.exe.manifest (created)
  windows/runner/CMakeLists.txt (created)
  windows/runner/win32_window.h (created)
  windows/runner/Runner.rc (created)
  windows/runner/win32_window.cpp (created)
  windows/runner/resources/app_icon.ico (created)
  windows/runner/main.cpp (created)
  windows/runner/resource.h (created)
  windows/runner/flutter_window.h (created)
  windows/flutter/CMakeLists.txt (created)
  windows/.gitignore (created)
  windows/CMakeLists.txt (created)
  ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  ios/Runner/Info.plist (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png (created)
  ios/Runner/Base.lproj/LaunchScreen.storyboard (created)
  ios/Runner/Base.lproj/Main.storyboard (created)
  ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata (created)
  ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  ios/Flutter/Debug.xcconfig (created)
  ios/Flutter/Release.xcconfig (created)
  ios/Flutter/AppFrameworkInfo.plist (created)
  ios/.gitignore (created)
  flutter_project.iml (created)
  web/favicon.png (created)
  web/index.html (created)
  web/manifest.json (created)
  web/icons/Icon-maskable-512.png (created)
  web/icons/Icon-192.png (created)
  web/icons/Icon-maskable-192.png (created)
  web/icons/Icon-512.png (created)
  macos/Runner.xcworkspace/contents.xcworkspacedata (created)
  macos/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/RunnerTests/RunnerTests.swift (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_32.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_16.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_256.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_64.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_512.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_128.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_1024.png (created)
  macos/Runner/DebugProfile.entitlements (created)
  macos/Runner/Base.lproj/MainMenu.xib (created)
  macos/Runner/MainFlutterWindow.swift (created)
  macos/Runner/Configs/Debug.xcconfig (created)
  macos/Runner/Configs/Release.xcconfig (created)
  macos/Runner/Configs/Warnings.xcconfig (created)
  macos/Runner/Configs/AppInfo.xcconfig (created)
  macos/Runner/AppDelegate.swift (created)
  macos/Runner/Info.plist (created)
  macos/Runner/Release.entitlements (created)
  macos/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/Runner.xcodeproj/project.pbxproj (created)
  macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  macos/Flutter/Flutter-Debug.xcconfig (created)
  macos/Flutter/Flutter-Release.xcconfig (created)
  macos/.gitignore (created)
  android/app/src/profile/AndroidManifest.xml (created)
  android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  android/app/src/main/res/drawable/launch_background.xml (created)
  android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  android/app/src/main/res/values-night/styles.xml (created)
  android/app/src/main/res/values/styles.xml (created)
  android/app/src/main/res/drawable-v21/launch_background.xml (created)
  android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  android/app/src/main/AndroidManifest.xml (created)
  android/app/src/debug/AndroidManifest.xml (created)
  android/settings.gradle (created)
  android/gradle/wrapper/gradle-wrapper.properties (created)
  android/gradle.properties (created)
  android/.gitignore (created)
  android/app/build.gradle (created)
  android/app/src/main/kotlin/com/example/flutter_project/MainActivity.kt (created)
  android/build.gradle (created)
  android/flutter_project_android.iml (created)
  ios/RunnerTests/RunnerTests.swift (created)
  ios/Runner/Runner-Bridging-Header.h (created)
  ios/Runner/AppDelegate.swift (created)
  ios/Runner.xcodeproj/project.pbxproj (created)
  ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  analysis_options.yaml (created)
  .idea/runConfigurations/main_dart.xml (created)
  .idea/libraries/Dart_SDK.xml (created)
  .idea/libraries/KotlinJavaRuntime.xml (created)
  .idea/modules.xml (created)
  .idea/workspace.xml (created)
  linux/main.cc (created)
  linux/my_application.h (created)
  linux/my_application.cc (created)
  linux/flutter/CMakeLists.txt (created)
  linux/.gitignore (created)
  linux/CMakeLists.txt (created)
Resolving dependencies... (1.4s)
Got dependencies.
Wrote 128 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in ./lib/main.dart.

コマンド "fvm use 3.19.6" によって、指定バージョンのFlutter SDKがプロジェクトディレクトリ内の.fvmディレクトリへインストールされる。また、コマンド "fvm flutter create ." によってプロジェクトディレクトリ内にpubspec.yamlファイルが作成され、プロジェクトの基本構成ファイル一式（サンプルソースやビルド用ファイルなど）が追加される。

補足情報

FVMでインストールしたFlutterを使用する場合、Flutter SDK側のコマンド実行はすべて "fvm flutter ..." という形式になってしまう。

下のような記述を.bashrcや.zshrcに追加しておくと、"fvm" を省略できるので便利だろう。

alias dart='fvm dart'
alias flutter='fvm flutter'

asdfを使っている場合

% mkdir flutter_project
% cd flutter_project
% asdf local flutter 3.19.6-stable
% flutter --version
% flutter create .

既存プロジェクトの使用

既存のFlutterプロジェクトにはpubspec.yamlというファイルが含まれており、これにプロジェクトが利用しているFlutter SDKのパッケージ情報が記載されている。

FVMを使っている場合

% cd PROJECT_DIR
% fvm use 3.19.6
% fvm flutter --version
% fvm flutter pub get

asdfを使っている場合

% cd PROJECT_DIR
% asdf local flutter 3.19.6-stable
% flutter --version
% flutter pub get

"flutter pub get" はFlutterの公式パッケージ配布サイトpub.devからパッケージを取得するコマンドで、このコマンドはpubspec.yamlの内容を参照しながらプロジェクトのすべての依存パッケージをインストールする。

pub.dev

Visual Studio CodeのFlutter環境設定

Flutterによるプログラム開発もVisual Studio Codeを使って行っていた。iOS/Androidアプリの開発ではXcodeやAndroid Studioも併用していたが、これらはシュミレータや実機ターゲットでのプログラムのデバッグ・動作確認の目的にしか使っていなかった。

VSCode上でのFlutter開発の準備

VSCodeを使ってFlutterプログラムの開発を行うにあたって、"Dart" と "Flutter" という２つの拡張機能を入れておく。

他にもFlutter開発向けの拡張機能が在るが、最初は最低限この２つを入れておけば良いだろう。

VSCodeでの新規プロジェクトの作成

FVMを使っている場合

VSCodeのメニュー [Manage (管理)]（左下の歯車マーク） > [Settings (設定)] によって設定画面を開き、左上の [Open Settings (JSON)]（書類マーク）ボタンを押す。

すると、下のような画面が開く。

このファイルの既存の内容に下のような記述を追加して、編集内容を保存する。

  • /Users/LOGNAME/Application Support/Code/User/setttings.json
  {
      "workbench.colorCustomizations": {},
      "telemetry.telemetryLevel": "off",
      "editor.minimap.enabled": false,
-     "workbench.startupEditor": "none"
+     "workbench.startupEditor": "none",
+     "dart.flutterSdkPath": "/Users/LOGNAME/fvm/versions/3.19.6"
  }

※"3.19.6" の部分は作成するプロジェクトで使用予定の（FVMでインストール済みの）Flutter SDKのバージョン、"LOGNAME" はログインユーザ名。

その後、VSCodeを再起動するか、コマンドパレット・メニュー "Developer: Reload Window" を実行する。

VSCodeが再起動したら、コマンドパレットに"Flutter" と入力し、メニューから "Flutter: New Project" を選択すると、さらにメニューが表示されるので、そのメニューから "Application"を選ぶ。

すると、ファイル選択ダイアログが開くので、プロジェクトの保存場所を選んでから、新しいプロジェクトの名前を入力する。

上記の手順に従ってVSCode上でFlutterのプロジェクトを作成すると、プロジェクトディレクトリが作成され、その中にpubspec.yamlとプロジェクトの基本構成ファイル一式が追加される。

続けて、メニュー [Terminal (ターミナル)] > [New Terminal (新しいターミナル)] によってターミナルパネルを開き、下のコマンドを実行する。

% fvm use 3.19.6

※"3.19.6" の部分は最初のsettings.json内で指定したバージョンと同一であること。

これによって、指定バージョンのFlutter SDKがプロジェクトディレクトリ内の.fvmディレクトリへインストールされ、同時に下のような内容の .vscode/settings.json ファイルも作成される。

  • .vscode/setttings.json
{
  "dart.flutterSdkPath": ".fvm/versions/3.19.6"
}

.vscode/settings.json の内容を下のように編集する。

  • .vscode/settings.json
  {
-   "dart.flutterSdkPath": ".fvm/versions/3.19.6"
+   "dart.flutterSdkPath": ".fvm/versions/3.19.6",
+   "search.exclude": {
+     "**/.fvm": true
+   },
+   "files.watcherExclude": {
+     "**/.fvm": true
+   }
  }

エクスプローラパネル内のファイル lib/main.dart を選択している状態で右下ステータスバー上の "{ }"（"Dart" の左横）をクリックして、表示されるメニュー項目に "3.19.6 - Flutter SDK"（"3.19.6" の部分は上のコマンド "fvm use VERSION" のバージョン文字列と一致）が存在することを確認する。存在している場合は、同項目右横のピン・マークを押す。

すると、ステータスバー上にそのバージョン番号が表示される。

この最後の操作はオプションだが、プロジェクトで使用しているFlutter SDKのバージョンが常に表示されている方が判り易くなる。

asdfを使っている場合

VSCodeのメニュー [Manage (管理)]（左下の歯車マーク） > [Settings (設定)] によって設定画面を開き、左上の [Open Settings (JSON)]（書類マーク）ボタンを押す。すると、/Users/LOGNAME/Application Support/Code/User/setttings.jsonというファイルが画面に表示される。

このファイルの既存の内容に下のような記述を追加して、編集内容を保存する。

  • /Users/LOGNAME/Application Support/Code/User/setttings.json
  {
      "workbench.colorCustomizations": {},
      "telemetry.telemetryLevel": "off",
      "editor.minimap.enabled": false,
-     "workbench.startupEditor": "none"
+     "workbench.startupEditor": "none",
+     "dart.flutterSdkPath": "/Users/LOGNAME/.asdf/installs/flutter/3.19.6-stable"
  }

※"3.19.6-stable" の部分は作成するプロジェクトで使用予定の（asdfでインストール済みの）Flutter SDKのバージョン、"LOGNAME" はログインユーザ名。

その後、VSCodeを再起動するか、コマンドパレット・メニュー "Developer: Reload Window" を実行する。

VSCodeが再起動したら、コマンドパレットに"Flutter" と入力し、メニューから "Flutter: New Project" を選択すると、さらにメニューが表示されるので、そのメニューから "Application"を選ぶ。

すると、ファイル選択ダイアログが開くので、プロジェクトの保存場所を選んでから、新しいプロジェクトの名前を入力する。

上記の手順に従ってVSCode上でFlutterのプロジェクトを作成すると、プロジェクトディレクトリが作成され、その中にpubspec.yamlとプロジェクトの基本構成ファイル一式が追加される。

続けて、メニュー [Terminal (ターミナル)] > [New Terminal (新しいターミナル)] によってターミナルパネルを開き、下のコマンドを実行する。

% asdf local flutter 3.19.6-stable

※"3.19.6-stable" の部分は最初のsettings.json内で指定したバージョンと同一であること。

さらに、下のような内容の .vscode/settings.json ファイルを作成する（本ファイルが存在しない場合は、コマンドパレット・メニュー "Prefereces: Open Workspace Settings (JSON)" によって作成できる）。

  • .vscode/setttings.json
{
  "dart.flutterSdkPath": "/Users/LOGNAME/.asdf/installs/flutter/3.19.6-stable"
}

※"3.19.6-stable" の部分はプロジェクトで使用するFlutter SDKのバージョン（上のコマンド "asdf local flutter VERSION" で指定したバージョンと同一）、"LOGNAME" はログインユーザ名。

エクスプローラパネル内のファイル lib/main.dart を選択している状態で右下ステータスバー上の "{ }"（"Dart" の左横）をクリックして、表示されるメニュー項目に "3.19.6 - Flutter SDK" （"3.19.6" の部分は上のコマンド "asdf local flutter VERSION" のバージョン番号と一致）が存在することを確認する。存在している場合は、同項目右横のピン・マークを押す。すると、ステータスバー上にそのバージョン番号が表示される。

この最後の操作はオプションだが、プロジェクトで使用しているFlutter SDKのバージョンが常に表示されている方が判り易くなる。

VSCodeでの既存プロジェクトの使用

FVMを使っている場合

VSCodeを起動して、既存プロジェクトのディレクトリを開く。

メニュー [Terminal (ターミナル)] > [New Terminal (新しいターミナル)] によってターミナルパネルを開き、下のコマンドを実行する。

% fvm use 3.19.6

※"3.19.6" の部分はプロジェクトで使用予定の（FVMでインストール済みの）Flutter SDKのバージョン。

これによって、指定バージョンのFlutter SDKがプロジェクトディレクトリ内の.fvmディレクトリへインストールされ、同時に下のような内容の .vscode/settings.json ファイルも作成される。

  • .vscode/setttings.json
{
  "dart.flutterSdkPath": ".fvm/versions/3.19.6"
}

.vscode/settings.json の内容を下のように編集する。

  • .vscode/settings.json
  {
-   "dart.flutterSdkPath": ".fvm/versions/3.19.6"
+   "dart.flutterSdkPath": ".fvm/versions/3.19.6",
+   "search.exclude": {
+     "**/.fvm": true
+   },
+   "files.watcherExclude": {
+     "**/.fvm": true
+   }
  }

エクスプローラパネル内のファイル lib/main.dart を選択している状態で右下ステータスバー上の "{ }"（"Dart" の左横）をクリックして、表示されるメニュー項目に "3.19.6 - Flutter SDK" （"3.19.6" は上のコマンド "flutter use VERSION" のバージョン文字列と一致）が存在することを確認する。存在している場合は、同項目右横のピン・マークを押す。すると、ステータスバー上にそのバージョン番号が表示される。

この操作はオプションだが、プロジェクトで使用しているFlutter SDKのバージョンが常に表示されている方が判り易くなる。

コマンドパレットでメニュー "Flutter: Get Packages" を実行する。これによって、プロジェクトのすべての依存パッケージがインストールされる。

asdfを使っている場合

VSCodeを起動して、既存プロジェクトのディレクトリを開く。

メニュー [Terminal (ターミナル)] > [New Terminal (新しいターミナル)] によってターミナルパネルを開き、下のコマンドを実行する。

% asdf local flutter 3.19.6-stable

※"3.19.6-stable" の部分はプロジェクトで使用予定（asdfでインストール済みの）Flutter SDKのバージョン。

さらに、下のような内容のファイル .vscode/settings.jsonを作成する（本ファイルが存在しない場合は、コマンドパレット・メニュー "Prefereces: Open Workspace Settings (JSON)" によって作成できる）。

  • .vscode/setttings.json
{
  "dart.flutterSdkPath": "/Users/LOGNAME/.asdf/installs/flutter/3.19.6-stable"
}

※"3.19.6-stable" の部分は上のコマンド "asdf local flutter VERSION" で指定したバージョン文字列と一致していること、"LOGNAME" はログインユーザ名。

エクスプローラパネル内のファイル lib/main.dart を選択している状態で右下ステータスバー上の "{ }"（"Dart" の左横）をクリックして、表示されるメニュー項目に "3.19.6 - Flutter SDK" （"3.19.6" の部分は上のコマンド "asdf local flutter VERSION" のバージョン番号と一致）が存在することを確認する。存在している場合は、同項目右横のピン・マークを押す。すると、ステータスバー上にそのバージョン番号が表示される。

この操作はオプションだが、プロジェクトで使用しているFlutter SDKのバージョンが常に表示されている方が判り易くなる。

コマンドパレットでメニュー "Flutter: Get Packages" を実行する。これによって、プロジェクトのすべての依存パッケージがインストールされる。

Flutterプロジェクトのビルドと動作確認

VSCodeでのFlutterプロジェクトのビルドと起動実行は簡単だ。

最初に、Flutterプロジェクトのディレクトリを開いている状態でステータスバー上のターゲットデバイス表示を押す。すると、下のようなメニューが開くので、プログラムの実行対象デバイスを選択する。

本記事の内容に従って手順操作を行っていれば、Flutterのターゲットデバイスとして上のように "Chrome" と "macOS" の２つしか表示されないはずだ。

ターゲットデバイスを選択すると、それがステータスバー上に表示される。

この状態でメニュー [Run (実行)] > [Start Debugging (デバッグの開始)　F5] または [Run Without Debugging (デバッグなしで実行)　^ F5] を選ぶと、プロジェクトのビルドが行われ、ビルドに成功すれば、プログラムが起動する。

【参照リンク】

zenn.dev 　　 　

次の記事で、FlutterによるiOSとAndroidアプリ開発環境の追加的な構築手順について書くつもりだ。

ランキング参加中
エンジニアグループ