ロボット研究開発、ソフトウェア開発、コンテンツ制作配信

【Flutter】MacOS Sequoia15.2にFlutter環境を構築(備忘録)


どうもこんにちは、
今まで、モバイルアプリ開発は、主にAndroid javaで開発してました。
そろそろ新しい技術もキャッチアップしたいと思い、iOSやAndroidのマルチプラットフォームの開発ができるFlutterを勉強してみることにしました。
今回は、自PC(MacOS Sequoia15.2)にFlutter環境を構築したので備忘録としてまとめておきます。

スポンサーリンク

Flutter

Flutterの特徴は、以下が挙げられるようです。

・マルチプラットフォーム・・・独自レンダリングを使ったしくみでiOSやAndroidでの差異が少なくなっている。
・高速な実行速度
・便利な開発機能・・・ホットロードなど。

環境構築

私のMAC(intel)のOSバージョンは以下です。また、すでにAndroidStudioはインストール済です。
・macOS Sequoia15.2
・Android Studio Ladybug | 2024.2.1 Patch3

Flutterのインストール

以下のページからFlutterのSDKをダウンロードします。
Flutter install

私のMacはIntel Processorなので以下をダウンロードしました

ダウンロードしたzipファイルを解凍し、以下に格納しました。
/Users/ユーザー名/development/flutter

SDK内の実行ファイルのパスを通します。

echo "export PATH=\"\$PATH:$HOME/development/flutter/bin\"" >> ~/.zshenv
. ~/.zshenv

Flutterのバージョンを確認してインストールできているか確認します。

flutter --version

以下のような結果が表示されました。Flutterインストールできました。

Flutter 3.27.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 68415ad1d9 (6 days ago) • 2025-01-13 10:22:03 -0800
Engine • revision e672b006cb
Tools • Dart 3.6.1 • DevTools 2.40.2

Android toolchainをインストール

Android Studioはすでにインストール済でしたので、Android StudioのSettingsを開きます。
Android SDKの「SDK Tools」タブから、Android SDK Command-line Tools(latest)をインストールします。

ターミナルで以下のコマンドを実行し、インストール状況を確認します。

flutter doctor

以下のようなlicensesのエラーが出ます。


[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor
--android-licenses

以下のコマンドを実行して、ライセンスに同意します。

flutter doctor --android-licenses

再度、flutter doctorでインストール状況を確認しました。
Xcodeだけ✗でそれ以外はOKとなりました。

iOS開発環境をインストール

App StoreからまずはXcodeをインストールします。

インストール後、Xcodeを起動し、利用規約に同意します。

ターミナルから、以下を実行し関連パッケージをインストールします。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo xcodebuild -license

flutter doctorを実行してインストール状況を確認します。

Unable to get list of installed Simulator runtimes.
が出たので、以下でiOS Simulator runtimesをインストールします。

xcodebuild -downloadPlatform iOS

あとは、CocoaPods not installed.なので、インストールしてみます。

brew install cocoapods

flutter doctorを実行して状況見てみます。
ようやくすべてチェックがつきました。

Android Studioの設定

Android StudioからSettingsメニューを開き、Pluginsを開きます。
Marketplaceから「Flutter」と「Dart」をインストールします。
なぜか、Dartがすでにインストール済になっており、何度かAndroidStudioを再起動したり、Flutterプラグインを入れ直したりしてようやくFlutterとDartが入りました。これらのプラグインが正しく入ってないと、後述するAndroid Studio→NewメニューからNew Flutter Projectが表示されません

バージョン管理ソフトfvmのインストール

Flutterのバージョンを管理するソフトfvmをインストールしました。

brew tap leoafarias/fvm
brew install fvm

以下コマンドでFlutterのリリースバージョンを確認します。

fvm releases

最新の安定版は、Ver3.72.2ですので、これをfvmでインストールします。
※最初に、Flutter SDKを手動でインストールしましたが、fvmでバージョン管理したいので、再度インストールしました。

fvm install 3.27.2

fvmからインストールしたFlutter SDKは以下にインストールされたようです。
/Users/inomatakohei/fvm/versions/3.27.2

fvmでインストールしたFlutter SDKを使っていくので、最初に設定したパスを変更します。
ここでパスを変更しておかないと、後述のAndroid StudioからSDKパスを設定するときに、エラーが表示され、次の設定に進めません。

~/.zshenvを以下のように変更しました。

[変更前] ※手動でインストールしたSDKのパス
export PATH="$PATH:/Users/inomatakohei/development/flutter/bin"

[変更後] ※fvmでインストールしたSDKのパス
export PATH="$PATH:/Users/inomatakohei/fvm/versions/3.27.2/bin"

~/.zshenvを変更したので以下を実行

. ~/.zshenv

Flutterアプリのサンプルを動かしてみる

Android Studio→New→New Flutter Projectを選択します。
GeneratorでFlutterを選択し、SDKパスは、fvmでインストールしたSDKのパスを記載。

プロジェクトの詳細設定はとりあえず以下の様に設定しました。

作成したプロジェクトのルートで以下のコマンドを入力して、Flutterのバージョンを指定しました。

fvm use 3.27.2

あとは、Select Deviceで「Open iOS Simulator」を選択すると、iOSシミュレーターが起動します。
起動したシミュレーターを選択し、実行ボタンを押すと、iOSシミュレーターにサンプルアプリがインストールされました。

Androidは、USBで所有のAndroidタブレットを接続し、実行を押すとこちらも無事にインストールされました。
(※Androidシミュレーターは実行が重そうだったので、Androidは実機で確認しました。)

最後に

以上、Flutterの環境環境でした。
結構いろいろ面倒でしたが、これでアプリ開発が試せます。
また勉強した内容はブログにまとめていこうと思います。
それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン