Flutterの環境構築(MacOs 2022年8月1日現在)

はじめに

未経験からエンジニアに転職して4ヶ月ほど経ちました。
毎日壁にぶつかりながらも楽しく働いています。

普段はrailsを扱っていますが、最近Flutterも触ってみたいなーと思って休日はDartを勉強しております。

今回はFlutterの環境構築についてまとめました。

※Xcodeは元々実務で2ヶ月程Swiftを触っておりましたので元々インストール済みでした。
そのインストール方法は割愛しております。

flutterのインストール

基本的には公式に沿って進めます。

上記にアクセスします。

Get startをクリックします。

私はMacなのでmacOSを選択します。

SDKをインストールします。
M1チップ非搭載なのでflutter_macos_3.0.5-stable.zipをクリックします。

インストール出来たら展開します。

パスを通す

ホームディレクトリーにflutterファイルを移動します。

mv ~/Downloads/flutter ~

コマンドが使える様にパスを通します。

echo export PATH="$PATH:/Users/＊＊＊＊＊＊＊＊＊/flutter/bin" >> ~/.zshrc

flutterとターミナルに入力して

zsh: command not found:　flutter

とならなければOkです。

flutter docterの実行

パスが通っていることを確認したらセットアップを完了する為にインストールする必要があるものがあるかどうかを確認します。　　

以下のコマンドを実行して下さい。

flutter doctor

実行結果は以下の通りでした。

$ flutter doctor
Running "flutter pub get" in flutter_tools...                      13.5s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 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 (Xcode 13.4.1)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.66.2)
[✓] VS Code (version 1.62.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

Android Studioのセットアップ

先程の結果ではAndroid Studio not installedとなっているので
今度はAndroid Studioをインストールしに行きます。

下記にアクセスします。

赤丸をクリックします。

Download Android Studioをクリックします。

利用規約に同意します。
チェックを入れて私はM１チップ非搭載なのでMac with Intel chipをクリックします。

インストールが終わったらApplicationフォルダにドラッグアンドドロップします。

Do not import settingsにチェックを入れてOKを押します。

Nextをクリック

Nextをクリック

お好きなカラーテーマを選択してNextをクリック。
私はDarculaを選択しました。

Nextをクリック

Acceptにチェックを入れてFinishを押します。

ダウンロードが開始されます。

ダウンロードが完了したらFinishをクリックします。

この画面になったらPluginsをクリックします。

dartと検索してDartプラグインをインストールします。

flutterと検索してFlutterプラグインをインストールします。

Acceptします。

あともうちょっとです。
Android SDK Command-line toolsをインストールします。
More Actionsをクリック

SDK Managerをクリック

SDK Toolsをクリック

Android SDK Command-line Toolsにチェックを入れてOKをクリックします。

OKをクリックします。

ダウンロードが開始されます。

ダウンロードが終わったらFinishをクリックして完了です。

ここで一回flutter dockterを実行します。

flutter doctor

実行結果は以下の通りでした。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale
    ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.66.2)
[✓] VS Code (version 1.62.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

まだ一個問題がありました。。。
ここは上記のご指摘に従って下記の実行します。

flutter doctor --android-licenses

上記を実行すると何回かyesかnoで答える質問が来るので全てyesで回答します。

再度実行します。

flutter doctor

下記の通り問題なく終了することが出来ました！

$ flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.66.2)
[✓] VS Code (version 1.62.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

これでflutterの環境構築は完了です。
Xcodeがインストールされていなかった方は別途インストールする必要があるかと思いますので別途検索をお願いします。

ここまで読んで頂いてありがとうございました！