前提
- 使用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 doctorHomebrewを使って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!これで完了です！
お疲れ様でした〜〜〜〜
