Flutter を使ってみようと思い立って、macOS 上の Visual Studio Code で開発できるよう整えてみた記録。
Flutter のインストール
macOS install を参考にインストール。
使っているのは M1 の MacBook Air なので
$ sudo softwareupdate --install-rosetta --agree-to-license
も必要
SDK のインストール
% curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.13.1-stable.zip
% unzip flutter_macos_arm64_3.13.1-stable.zip
% mv flutter_macos_arm64_3.13.1-stable /opt/flutter
% echo 'export PATH="/opt/flutter/bin:$PATH"' >> ~/.zshrc
flutter doctor で環境を調査
flutter doctor を実行して No issues found! と表示されればOK
Doctor found issues in 2 categories. 等と表示されている場合は指示に従いパッケージなどをインストールします。
※ 不要なプラットフォームの場合は警告を無視して問題ないです
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.1, on macOS 13.4.1 22F770820d darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.66.1)
[✓] Connected device (2 available)
[✓] Network resources
• No issues found!
flutter upgrade でアップデート
A new version of Flutter is available! 等とメッセージが出た場合や最新版がある事がわかっている場合は次のコマンドで更新できます。
% flutter upgrade
開発環境のセットアップ
Set up an editor を参考に Visual Studio Code の環境を整えます。
Flutter開発を高速化するVSCode拡張機能を5つ紹介🎉 を参考に拡張も入れます。
- Flutter
- Flutter Tree
- Flutter Widget Snippets
- Awesome Flutter Snippets
- Flutter-Auto-Import
- Error Lens
- Flutter Color
アプリを作る
Test drive を参考にアプリを作ります。
Command + Shift + Pでコマンドパレットを呼び出しflutterと入力し、Flutter: New Project を選択します。- Application を選択します。
- 新しいプロジェクト フォルダーの親ディレクトリを作成または選択します。
- プロジェクト名 (my_app など) を入力し、Enter を押します。
- プロジェクトの作成が完了し、 main.dart ファイルが表示されるまで待ちます。
アプリの実行
- デバイス セレクター 領域からデバイスを選択します。
- 実行 >デバッグの開始 を呼び出すか、F5 を押します。
とりあえず macOS で確認できる全種を起動してみました。
