前提
- 使用OS:macOS(Big Sur)
- Xcodeインストール済み
- Homebrewインストール済み
はじめに
Flutterの導入方法は、以下の2通りあるのですが
- 公式サイトからSDKをダウンロード
- Homebrewを使用
Homebrewを使用してFlutterを導入した方が簡単なので、後者の「Homebrewを使用」する方法を紹介します
本記事の目標
Flutterでクロスプラットフォーム開発できるようにする
Flutter開発環境構築の流れ
- Xcodeのインストール(本記事では導入済みの前提)
- Homebrewのインストール(本記事では導入済みの前提)
- Flutterのインストール(Homebrewを使用)
- Android Studioのインストール(Homebrewを使用)
- Visual Studio Codeのインストール(Homebrewを使用)
この記事では、「3.Flutterのインストール」から「5.Visual Studio Codeのインストール」までをやります!
Flutterのインストール
まずは、ターミナルを開いて次のコマンドを打ち込んで実行してください
brew install flutter
インストールが完了するまで少々お待ちください
$ brew install flutter
==> Downloading https://storage.googleapis.com/flutter_infra_release/releases/st
######################################################################## 100.0%
==> Installing Cask flutter
==> Linking Binary 'dart' to '/usr/local/bin/dart'
==> Linking Binary 'flutter' to '/usr/local/bin/flutter'
🍺 flutter was successfully installed!
上記のようになるとインストール完了です!
しっかりインストールができているか確認しましょう!
ターミナルで以下のコマンドを実行してください
flutter doctor
おそらく以下のようなエラーが出ると思います!
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
✗ Could not determine java version
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] Connected device (1 available)
! Doctor found issues in 2 categories.
解消するために「4.Android Studioのインストール」へ行きましょう!
Android Studioのインストール
Android Studioをインストールするためにターミナルに次のコマンドを打ち込んで実行しましょう〜
brew install android-studio
インストールが完了するまで少々お待ちください
$ brew install android-studio
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask).
==> Updated Formulae
Updated 1 formula.
==> Updated Casks
Updated 12 casks.
==> Downloading https://dl.google.com/dl/android/studio/install/4.2.2.0/android-studio-ide-202
######################################################################## 100.0%
==> Installing Cask android-studio
==> Moving App 'Android Studio.app' to '/Applications/Android Studio.app'
🍺 android-studio was successfully installed!
上記のようになるとインストール完了です!
再度確認してみましょう
flutter doctor
Homebrewを使ってAndroid Studioをインストールすると
以下のような確認ポップアップが表示されると思うので「開く」をクリックしてください!

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
✗ 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
[✓] Android Studio (version 4.2)
[✓] Connected device (1 available)
! Doctor found issues in 1 category.
1つエラー解消されましたね!
残りのエラー内容を見ると「Androidライセンスの状態が不明」的なことが書かれているので
ライセンスを許可するために、以下のコマンドを実行してください
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.<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
よくわからなかったので「Exception in thread "main" java.lang.NoClassDefFoundError flutter」と検索して一番上に出てきた、こちらの記事を参考にしました(参考:FlutterはじめたらJavaのClassNotFoundExceptionに遭遇した)
Android Studioを開いて「Android Studio configure > SDK Manager > SDK Tools」にある「Android SDK Command-line Tools(latest)」にチェックを入れて右下の「OK」をクリック

インストールが完了したらAndroid Studioを閉じてターミナルに戻り再度コマンドを実行してみてください
flutter doctor --android-licenses
$ flutter doctor --android-licenses
All SDK package licenses accepted.======] 100% Computing updates...
今度はエラーが出ずに完了したみたいなのでFlutter検査してみましょう
flutter doctor
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] Connected device (1 available)
• No issues found!
全てのエラーが解消されました!!
これでFlutter開発をするための最低限の環境構築は終わりですが
僕は、Visual Studio Code(VSCode)で開発していきたいのでインストールします!
Visual Studio Codeのインストール
Homebrewを使えばすぐにインストールできます!
便利な世の中ですね〜〜
brew install visual-studio-code
$ brew install visual-studio-code
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask).
==> Updated Formulae
Updated 3 formulae.
==> Updated Casks
Updated 7 casks.
==> Downloading https://update.code.visualstudio.com/1.58.2/darwin/stable
==> Downloading from https://az764295.vo.msecnd.net/stable/c3f126316369cd610563c75b1b1725e0679
######################################################################## 100.0%
==> Installing Cask visual-studio-code
==> Moving App 'Visual Studio Code.app' to '/Applications/Visual Studio Code.app'
==> Linking Binary 'code' to '/usr/local/bin/code'
🍺 visual-studio-code was successfully installed!
これで完了です!
お疲れ様でした〜〜〜〜