Zenn
Open7

Mac OS11.6.2 Flutter 環境構築のメモ

Flutter
macOS
setup
KiKiKi KiKiKiKiKi KiKi

📗 https://docs.flutter.dev/get-started/install/macos

  1. Flutter SDK の zip を DL flutter_macos_2.8.1-stable.zip
  2. zip を展開
  3. Downloads にあるままなのキモいので /Users/<user_name> 直下に移動させた
  4. path を通す
$ export PATH="$PATH:`pwd`/flutter/bin"
$ flutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (6 weeks ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

大丈夫そう

.zshrc にもパスを追加しておいた

export PATH="$PATH:/Users/<user name>/flutter/bin"

export PATH="~/flutter/bin:$PATH" だとなんでかわからんけど flutter へのパスが通らなかった。よく分かってないけど動いてるからヨシ！

KiKiKi KiKiKiKiKi KiKi
$ flutter doctor

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Running "flutter pub get" in flutter_tools...                      11.0s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.6.2 20G314 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed
      instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.
  • Android toolchain - develop for Android devices
  • Xcode CocoaPods not installed.

の 2つの問題が発生している

KiKiKi KiKiKiKiKi KiKi

Xcode のエラーを解消していく

一応 Xcode を起動しておく。Flutter を使うときに Xcode を起動しておく必要があるのか分かってない。

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

https://guides.cocoapods.org/using/getting-started.html#installation に書かれている通り cocoapods をダウンロードする

$ sudo gem install cocoapods

<small>Mac 何もしてないけど gem install できるんですね</small>
インストールしただけでパスをとか特に設定しなかったけど flutter docter したらOKになっていた

$ flutter doctor
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)

cf.

KiKiKi KiKiKiKiKi KiKi

Android SDK 関連のエラーを解消していく

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed
      instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

Android Studio をダウンロードする
https://developer.android.com/studio/index.html

  1. Download Android Studio から ダウンロード
  2. android-studio-2021.1.1.20-mac.dmg を展開して Android Studio.app を Application ディレクトリに入れる
  3. 記憶がないけど flutter config --android-studio-dir <path/to/Android Studio.app> を指定してた
$ flutter config --android-studio-dir /Applications/Android\ Studio.app
Setting "android-studio-dir" value to "/Applications/Android Studio.app".
  1. Android Studio.app を起動する
  2. Import Android Studio settings from: のプロンプト デフォルトの Do not import settings でOK
  3. 後も全部デフォルトで Next をした
  • Choose the type of setup you want for Android Studio: [x] Standard
  1. flutter doctor したらエラーが変わってた
$ flutter doctor
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

cf.

KiKiKi KiKiKiKiKi KiKi

Android SDK 関連のエラーを解消していくの続き

Android Studio > Preferences > Appearance & Behavior > Android SDK
Android API 32 にチェックが入っている状態

  1. Android Studio > Plugins から Dart, Flutter を install した

    Android Studio の再起動を促されたので再起動

  2. flutter doctor をしても変化なし

$ flutter doctor
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
  1. ✗ cmdline-tools component is missing
    Run path/to/sdkmanager --install "cmdline-tools;latest" コマンドを実行しろとあるのでやってみる
    sdkmanager は /Users/<USER_NAME>/Library/Android/sdk/tools/bin らしい
$ cd /Users/<USER_NAME>/Library/Android/sdk/tools/bin
$ ./sdkmanager --install "cmdline-tools;latest"
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
	at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
	at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
	at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(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

JAVA のエラーが出ている

  1. ✗ Android license status unknown.
    Run flutter doctor --android-licenses to accept the SDK licenses. ある通り実行してみる
$ flutter doctor --android-licenses
Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are
installed to resolve this.

解決方法の記事には Android SDK から Command-line Tools にチェックを入れれば良いと書かれている記事が多いけど、そもそもその項目がない。先に 3. の cmdline-tools の問題を解決しなければだめっぽい

cf.

KiKiKi KiKiKiKiKi KiKi

Android SDK 関連のエラーを解消していくの続き flutter doctor が All green になるまで

cmdline-tools component is missing 問題をまずかいけつする必要がある

結論 Android Studio の Preferences の見方が間違っていた

  1. Android Studio > Preferences > Appearance & Behavior > Android SDK
  2. タブから SDK tools を選択
  3. Android SDK Command-line Tools (latest) にチェックをして OK をして何かをインストール

flutter doctor で ✗ cmdline-tools component is missing のエラーが消えている

$ flutter doctor
 [!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    ✗ Android license status unknown.

✗ Android license status unknown. の解決

flutter doctor --android-licenses を実行してライセンスとか規約が表示されるので yを入力していけば OK

$ flutter doctor --android-licenses
Accept? (y/N): y
All SDK package licenses accepted

cf. https://dtpscriptin.com/flutter-android-license-status-unknown/

flutter doctor

$ flutter doctor
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.6.2 20G314 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.63.2)
[✓] Connected device (2 available)
• No issues found!

₍ᐢ⑅•ᴗ•⑅ᐢ₎♡ できた