Flutterをインストールして開発環境を構築する方法（Mac環境編）

WindowsにFlutterをインストールして開発環境を構築する方法を解説します。

【1】Android Studioのインストール

① 公式ページhttps://developer.android.com/studio?hl=jaを開きます。

① [Android Studio 〇〇をダウンロード]をクリックします。

③ 利用規約画面が出てくるので、下にある「上記の利用規約を読んだうえで利用規約に同意します。」にチェックを入れ、その下にある[ダウンロード]ボタンをクリックすると、イメージがダウンロード開始されます。
※サイズが大きいので時間がかかります。

④ イメージファイルのダウンロードが完了したら、ダブルクリックして起動します。

④ 「Next」を選択します。

⑤ 「Next」を選択します。

⑥ 「I Agree」を選択します。

⑦ 「Next」を選択します。

⑧ 「Install」を選択します。

⑨ インストールが完了したら「Next」→「Finish」を選択します。

⑩ インストール作業は以上です。

【2】Flutterのインストール

① 「Android Studio + Android SDK + Build-Tools」をインストールします。

② Android Studioを起動し、「Configure」→「Plugins」を開きます。

③ 2つのプラグイン「Flutter」「Dart」をインストールします。

④ Android Studioを再起動し、「Flutterプロジェクト」を作成します。

⑤ 以下ページからFlutterのSDKファイルのZIPファイルをダウンロードし、解凍して任意のディレクトリに置きます。
https://flutter.dev/docs/get-started/install/macos

⑥ ターミナルを開いてFlutterのパスを設定します。

bashの場合

echo 'export PATH="$PATH:[flutterディレクトリを配置している絶対パス]/flutter/bin"' >> ~/.bash_profile
source ~/.bash_profile

zshの場合

echo 'export PATH="$PATH:[flutterディレクトリを配置している絶対パス]/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

【.zshrcの例】

export PATH=$PATH:/Users/libs/flutter/bin

⑦コマンドプロンプトで以下のコマンドを実行し、ヘルプが表示されたらパス設定は成功です。

$ flutter

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.25.0-8.2.pre, on macOS 11.1 20C69 darwin-arm,
    locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.52.1)
[✓] Connected device (1 available)

• No issues found!

● Android StudioのFlutterプロジェクト作成画面で「Flutter SDK Path」に「flutterディレクトリを配置している絶対パス/flutter/bin」を指定してやります。

Android toolchainのライセンス承諾エラー

  • 「flutter doctor」を実行したとき、Android toolchainのライセンス承諾ができていないとエラーが出ることがあります。

  • 以下のコマンドを実行し、「y」を押して同意していくと問題が解決します。

% flutter doctor --android-licenses
  • もし以下のようなエラーが出た場合、Android Studio configure > SDK Manager > SDK Tools を開いて、「Android SDK Command-line Tools(latest)にチェック」「Hide Obsolete Packagesのチェックを外す」「Android SDK Tools(Obsolete)」して「OK」ボタンを押して「flutter doctor –android-licenses」を実行しなおします。
$ flutter doctor --android-licenses
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
    at com.android.repository.api.SchemaModule$SchemaModuleVersion.(SchemaModule.java:156)
    at com.android.repository.api.SchemaModule.(SchemaModule.java:75)
    at com.android.sdklib.repository.AndroidSdkHandler.(AndroidSdkHandler.java:81)
    at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
    at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
    at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
    at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
    at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
    ... 5 more
【Flutter】ライセンス承認できていない場合の対処
Flutterでビルドした時のエラーメッセージ「Some Android licenses not accepted」の対策方法について紹介します。
flutter.joho.info
2021.01.16
【Flutter超入門】使い方とサンプルアプリを解説
Flutterの使い方とサンプルアプリ(iOS、Android、Windows)について入門者向けに解説します。
flutter.joho.info
2024.07.05

コメント