【zsh】MacのBigSurでFlutterの環境構築2021年最新

Flutterのインストール

公式サイトから、FlutterSDKの最新の安定版リリースをダウンロードします。

ダウンロードができたら解凍して、flutterのフォルダごと任意のディレクトリに配置します。

今回は、/Users/username/Desktop/dev/flutter に配置しました。

パスを通す

flutterのフォルダを設置したら次はパスを通してflutterコマンドを使用できるようにしていきます。

.zshrc をエディターで開き、下記を追加します。

export PATH="$PATH:/Users/username/Desktop/dev/flutter/bin"

ファイルを編集して保存した後は、下記を実行して反映させましょう。

% source ~/.zshrc

次に、以下を実行して、パスが表示されたら完了です。

% which flutter
/Users/username/Desktop/dev/flutter/bin/flutter

Flutterのコマンドを実行

以下のコマンドを実行します。

% flutter doctor
Running "flutter pub get" in flutter_tools...                       9.5s
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
    ✗ 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
    ✗ 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.59.0)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

インストール済みは✅になっていますがインストールされていなければ✖️になっているのでインストールしていきます。

Xcodeをインストール

まずは、xcodeのエラーから。すでにXcodeはインストールしていましたが、cocoapodsがなかった模様。

% sudo gem install cocoapods

上記のインストール完了で、[✓] Xcode - develop for iOS and macOS 解決されます。

AndroidStudioをインストール

まずはAndroid Studioをインストールします。

https://developer.android.com/studio

まずは上記からアクセスしてダウンロードしてください。

ダウンロードできて、アプリを起動したらプラグインをインストールします。

Image from Gyazo

インストールが終わったら一度再起動しておきましょう。

Image from Gyazo

これが表示されていたら完了です!

最後に、Android Studioから、SDK Managerを選択して、インストールします。

Image from Gyazo

$ flutter doctor --android-licenses を実行したら、長いライセンスが表示されて、 Accept? (y/N):の確認が表示されました。

全て、yでOKです。

Javaをインストール

Android studioだけでは、だめでした。

% 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 31.0.0)
    ✗ Could not determine java version
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[!] Android Studio (version 2020.3)
    ✗ Unable to find bundled Java version.
[✓] VS Code (version 1.59.0)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

どうやらJavaが無いと言っています。

インストールしていきましょう。

% java --version
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

homebrewでインストールします。

% brew update
% brew install java

これで使用できるようになりました。確認を行います。

% java --version
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

なんで? Homebrewで確認しました。

For the system Java wrappers to find this JDK, symlink it with
sudo ln -sfn $(brew –prefix)/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk

シンボリックをはってやる必要があるようです。(超適当)

% sudo ln -sfn $(brew --prefix)/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk

もう一度確認します。

% java --version
openjdk 16.0.1 2021-04-20
OpenJDK Runtime Environment Homebrew (build 16.0.1+0)
OpenJDK 64-Bit Server VM Homebrew (build 16.0.1+0, mixed mode, sharing)

これでOK

最後のエラー(java15以上は使えない)

ほぼ解決されてきました。(長い。。)

% 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 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[!] Android Studio (version 2020.3)
    ✗ Unable to find bundled Java version.
[✓] VS Code (version 1.59.0)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

先ほどインストールしたjavaが16だったので、Flutterでは使えないらしい。

まずは、java11があるかを確認。

% brew search java11
==> Formulae
java11 ✔                                 javacc

java11があるようなので、javaのバージョン11をインストールします。

% brew install java11

色々とコマンドを実行しろと書いているので、その通りに。

% echo 'export PATH="/usr/local/opt/openjdk@11/bin:$PATH"' >> ~/.zshrc
% export CPPFLAGS="-I/usr/local/opt/openjdk@11/include"
% source ~/.zshrc
% java --version
openjdk 11.0.10 2021-01-19
OpenJDK Runtime Environment (build 11.0.10+9)
OpenJDK 64-Bit Server VM (build 11.0.10+9, mixed mode)

これで完了!

ただ、これでは、まだUnable to find bundled Java versionが解決されません。

パスを通す必要があります。(以下の記事参考)

Android Studio Arctic Fox(2020.3.1)Flutter Errorを更新した後、バンドルされたJavaバージョンが見つからない問題を解決する方法

% cd /Applications/Android\ Studio.app/Contents/jre

% ln -s ../jre jdk

% ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk

これで、全ての問題が解決されました!!!

% 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 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.59.0)
[✓] Connected device (1 available)

• No issues found!

これでようやくFlutterをはじめれますね!

他にもこんな記事があります!