..

MacBook Air (M1,2020)で、Flutter開発環境をつくる(2)

モバイルアプリケーションを開発するため、MacBook Air (M1,2020)を購入し、Fluterに入門することとした。 どちらも未経験であるため、誤解している箇所も含まれるかもしれない。 また、2021年8月末ごろに実施した内容をメモを元に記述しているので、勘違いや記憶違いもあるかもしれない。

1.-7.は、 前回 の記事参照。

  1. Homebrew (gitをインストールするために必要)
  2. Git
  3. Xcode (iPhone向けアプリケーションの作成に必要)
  4. CocoaPos (なんだろう)
  5. JDK8 (AndroidSDKが、JDK8でないと動かない)
  6. Android Emulator Apple Silicon
  7. Android Studio
    （ここからが、今回の記事）
  8. Flutter SDK
  9. Android Studio で新規プロジェクトを作成

8. Flutter SDK

8.1. インストール

以下のページから、Flutter SDKをダウンロードする。

macOS install / Flutter

今回は、以下の通りだった。

  1. Finderの「移動」で「ダウンロード」を開く(すでに展開済みだった)
  2. ターミナルで、展開されたディレクトリを、移動する 
    ~ % mkdir development
~ % mv ~/Downloads/flutter ~/development
  3. ~/.zshrc に、以下を記入し保存 
    export PATH="$PATH:/Users/ユーザー名/development/flutter/bin"
  4. ターミナルを終了する（上の設定を反映）

8.2. Androidのライセンス承認

Androidのライセンスを承認する。以下のコマンドを実行し、すべてyで返答する。

~/ flutter doctor --android-licenses

8.3. チェック

チェックを実行する。

~ % flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.2 20G95 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (version 2020.3)
    ✗ Unable to find bundled Java version.
[✓] Connected device (1 available)
! Doctor found issues in 2 categories.

JAVAが実行できるように、リンクを作成する。

~ % cd /Applications/Android\ Studio.app/Contents/jre
% pwd
/Applications/Android Studio.app/Contents/jre
% ls -a
.		..		Contents
% ln -s ../jre jdk
% ls -a           
.		..		Contents	jdk
% ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk
% ls
Contents		JavaAppletPlugin.plugin	jdk

もう一度、チェックを実行する。

% flutter doctor                                                
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.2 20G95 darwin-arm, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    ✗ 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.
[✓] Xcode - develop for iOS and macOS
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2020.3)
[✓] Connected device (1 available)
! Doctor found issues in 2 categories.

もう一度、Androidのライセンスを承認する。が、エラーが発生した。

~ % flutter doctor --android-licenses                             
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

Android stadioを起動し、右上のアイコンからSDK managerを起動する

  • タブ「SDK Tools」を開き、Android SDK Command-line Tools(latest)にチェック
  • Hide Obsolete Packagesのチェックを外して、Android SDK Tools(Obsolete)にチェック：これはチェックが入っていた

参考ページ

もう一度、Androidのライセンスを承認する。

% flutter doctor --android-licenses
All SDK package licenses accepted.======] 100% Computing updates...

もう一度、チェックを実行する。

% flutter doctor   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.2 20G95 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2020.3)
[✓] Connected device (1 available)
! Doctor found issues in 1 category.
%

webは対象外なので、これでよい。

9. plugin

  1. Android Stadioを起動し、pluginからFlutter,Dartを追加する
  2. Android Stadioのメニュー「File」->「New」->「New Flutter Project」を選択して、新規プロジェクトを作成してみる。

ここまで。