Flutter開発環境の構築について

はじめに

Flutter入門時、環境構築する際に残していた備忘録です。

環境バージョン

Flutter 3.24.5
cocoapods 1.11.2
Xcode 15.2

環境構築

• 公式サイトInstall | Flutterに遷移、platformを選択、iOSを選択します。
• 公式サイトの手順でFlutterのダウンロード・インストールを行います。
  • MacOS/iOSの場合：Make iOS apps | Flutter
• VSCode、VSCodeのFlutterプラグインを使用します。
  • VSCode
  • VSCodeのFlutterプラグイン
    • VS Codeの拡張機能で「Flutter」を検索、インストールします。

Flutter拡張機能インストール後、下記の通知が来ていたらSDKをダウンロードします。

Could not find a Flutter SDK. Please download, or, if already downloaded, click 'Locate SDK'.

下記のようなエラーが発生するなどダウンロードに失敗した場合は、Make iOS apps | Flutterから手動ダウンロードを行います。

Failed to clone Flutter using Git. Please clone or download the Flutter SDK manually.

ダウンロード先は下記にしました。

/Users/ユーザー名/development/flutter

下記でパスを通します。

$ vim ~/.zshrc

// 以下を.zshrcに追加
export PATH=$HOME/development/flutter/bin:$PATH

$ which flutter
/Users/ユーザ名/development/flutter/bin/flutter

$ which dart
/Users/ユーザ名/development/flutter/bin/dart

% flutter --version
Flutter 3.24.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2663184aa7 (9 weeks ago) • 2024-09-11 16:27:48 -0500
Engine • revision 36335019a8
Tools • Dart 3.5.3 • DevTools 2.37.3

パスが通ったら、VSCodeを再起動します。

VSCodeに下記の通知が来ていた場合、通知に従ってRun 'pub get'を実行します。

Some packages are missing or out of date, would you liketo get them now?
一部のパッケージが欠品または期限切れですが、今すぐ入手しますか？

flutter doctorを実行して環境が正しく構築できたか確認します。
✗の項目があった場合は確認、全てが✓になっていれば環境構築は完了になります。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.3, on macOS 14.7 23H124 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.95.2)
[✓] Connected device (6 available)
[✓] Network resources

• No issues found!

flutter ライブラリのインストール

flutter pub getを実行します。

デバッグについて

コマンドライン

flutter runを実行、デバイスを選択します。

VSCodeのFlutterプラグイン使用

• VSCodeのコマンドパレットからFlutter Select Deviceを実行、デバッグに使用するデバイスを選択します。

• VSCodeのコマンドパレットからDebug: Attach to Flutter on Deviceを実行します。

その他

VSCodeの実行とデバッグからも起動いけますが、ここでは割愛します。

おわり

Flutter拡張機能インストール後のエラー以外はスムーズにできました。