LoginSignup
0
1

MacでAndroid Flutterの環境構築

Last updated at Posted at 2024-02-22

1.はじめに

MacでAndroid Flutterの環境構築したので、備忘録として残しています。

2.前提条件

Android Stdioがすでにインストールしている事。
Android Stdioのインストール手順、環境構築は割愛しています。

注意(2024.02.20時点)
Flutter(SDK、プラグイン)をインストール後、最新のAGP(8.2)にアップデートすると以下のメッセージが表示されFlutter(プラグイン)がインストール出来ないです。

Plugin 'Dart' (version '223.8977') is not compatible with the current version of the IDE, because it requires build 223.* or older but the current build is AI-231.9392.1 Plugin 'Flutter' cannot be loaded because it depends on plugin 'Dart' which failed to load

その場合の対応方法
一度、Android StudioからDart、Flutterプラグインをアンインストールしてから、再度、Dart、Flutterプラグインの順番でインストールすれば問題なくFlutterプロジェクトが作成出来るようになります。

3.Mac環境構築

以下のサイトを参考にして作業を実施しています。(2024.02.20時点)


Flutter SDKのインストール
Androidアイコンを選択する。

Flutter図1.png


Appleメニューから「このMacについて」を選択し、以下の表記によりダウンロードzipを選択する。
  • 「プロセッサ」の欄にIntelを含む記載があれば、「Intel Processor」のzip
  • 「チップ」の欄にAppleを含む記載があれば、「Apple Silicon」のzip

Flutter図2.png


zipファイルを解凍後、flutterフォルダが出来る。(解凍方法はコマンドでもダブルクリックのどちらでも良い。) flutterフォルダをユーザーフォルダ直下に開発用フォルダを作成し、その中に配置する。 公式では開発用フォルダを「development」にしている。

Flutter図3.png


設定ファイルの作成
ターミナルから以下のコマンドを実行し、使っているSHELLを確認する。(大文字じゃないと認識されない)
echo $SHELL

/bin/zshなら zsh、/bin/bashなら bash を使っています。
ここから先は、zshを元に説明していきます。

既に環境設定ファイルが存在すれば既存設定ファイルにパスを追加する。
環境設定ファイルは、zshrc ファイル ではなく、zshenv ファイルです。
(公式サイト参照)
環境設定ファイルが存在しない場合、ターミナルから以下のコマンドを実行し、zshenv ファイルを新規作成します。

touch ~/.zshenv

zshenv ファイルを新規作成すると、ユーザーフォルダ -> 【ユーザー名】フォルダ の直下に作成されると思います。別な箇所にファイルが作成された場合、ファイルを移動すれば大丈夫です。
Flutter図18.png

zshenv ファイルに以下のPATHを追加します。
追加する方法は、コマンドでもテキストエディターのどちらでも構いません。
PATHは、zipファイルを解凍後に開発用フォルダ「development」に配置したflutterフォルダの場所です。

//相対パスの場合
export PATH=$HOME/development/flutter/bin:$PATH

//絶対パスの場合
export PATH=/Users/ユーザー名/development/flutter/bin:$PATH

もしくは、Finderからflutterフォルダをドラッグ&ドロップでターミナルに置くことでもパス確認は出来きます。
PATH を通したら設定の有効化をします。zshenv ファイルを閉じて、ターミナルも再起動します。

再起動後に下記コマンドを実行し、PATHが表示されれば設定成功です。

which flutter

以下のコンソールは、絶対パスで設定した場合のパスです。
Flutter図4.png

Androidライセンスに同意する為、以下のコマンドを実行する。(公式サイト参照)

flutter doctor --android-licenses

成功時には、以下のメッセージが表示されます。
Flutter図6.png

失敗時には、以下の様なメッセージが表示されます。
(個人の環境によって表示されるエラーが異なる為です。)
Flutter図5.png

上記のエラーの場合、Android SDKをアップデートすれば解決します。
メニューバーから、Tools -> SDK Manegar を選択します。
Flutter図7.png

注)この画面は既にAndroid SDKがアップデート後なのでステータスがInstalledになっています。

Android SDK の 「SDK Platforms」タブを選択します。

Flutter図8 .png

アップデートは「Check for Updates 」を選択する。
メニューバーから、Android Studio の Check for Updates... を選択します。
Flutter図9.png

注)この画面は既にAndroid SDKがアップデート後なのでステータスがInstalledになっています。

Android SDK の 「SDK Platforms」タブを選択します。
Flutter図10.png

SDKToolsからも必要なツールを選択してインストールします。
何が必要かは公式サイトに記載してあります。
スクリーンショット 2024-02-22 9.05.43.png


Android SDK の 「SDK Tools」タブを選択します。
Flutter図11.png


必要なSDK、Toolsをインストール後、再度、ターミナルから 次のコマンドを実行して、ライセンスへの署名を有効にします。
flutter doctor --android-licenses

成功すると、「review licenses that have not been accepted」メッセージが表示されます。
すると下記の通り、いくつかのライセンス契約書を確認する様に求められるので y を入力した後 Enter を押して進みます。
通常のターミナルに戻ったら設定完了です。

Flutter図12.png

4.Flutterプラグインのインストール

注)プラグインをインストールしないと、「New Flutter Project...」メニューがAndroid Studioに表示されないです。

メニューバーから、Android Studio の Settings... を選択する。
Plugins の Flutterを選択します。
Flutter図13.png

後は確認ダイアログがいくつか表示されるので許可します。
Flutter図14.png

Flutterプラグインのインストールが完了すると、「New Flutter Project...」メニューがAndroid Studioに表示されます。これでFlutterプロジェクトの作成が可能になります。

5.Flutterプロジェクトの新規作成

メニューバーから、File -> New -> New Flutter Project... を選択します。
Flutter図15.png

左メニューから、「Generators」 -> 「Flutter」 を選択します。
Flutter図16.png

プロジェクト設定画面でプロジェクト名、プロジェクトフォルダの作成場所を入力し作成します。
作成方法は公式サイトに記載があります。
Choose your IDE -> Android Studio and IntelliJ のタブです。

Flutter図17.png

6.Flutterプロジェクトの実行

後は、今まで通りのAndroid Studioの実行と同じです。
メニューバーから、Run -> Run を選択します。

スクリーンショット 2024-02-22 9.49.13.png


説明は以上となります。
間違っているなど、ご意見ご要望があれば、お気軽にコメントください。
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1