Flutterはじめる

【Flutter】Homebrewを使用して開発環境構築(Mac)

前提

  • 使用OS:macOS(Big Sur)
  • Xcodeインストール済み
  • Homebrewインストール済み

はじめに

Flutterの導入方法は、以下の2通りあるのですが

  • 公式サイトからSDKをダウンロード
  • Homebrewを使用

Homebrewを使用してFlutterを導入した方が簡単なので、後者の「Homebrewを使用」する方法を紹介します

本記事の目標

Flutterでクロスプラットフォーム開発できるようにする

Flutter開発環境構築の流れ

  1. Xcodeのインストール(本記事では導入済みの前提
  2. Homebrewのインストール(本記事では導入済みの前提
  3. Flutterのインストール(Homebrewを使用)
  4. Android Studioのインストール(Homebrewを使用)
  5. 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をインストールすると

以下のような確認ポップアップが表示されると思うので「開く」をクリックしてください!

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!

これで完了です!

お疲れ様でした〜〜〜〜

  • この記事を書いた人

てるりんぴっく

-Flutterはじめる