Flutter環境構築(M2Mac)

はじめに

表題通り、Flutterの環境構築をしていきます。

スタート

下記サイトでインストール方法が記載してます。

1. Flutter SDKのダウンロード

今回はM2 Macのため、Appleシリコンをインストールします。

2. zipを解凍

zipを解凍します。解凍時に処理が走っているので、コマンドで実行しましょう。

unzip ~/Downloads/flutter_macos_arm64_3.16.2-stable.zip

その場で解凍するとDownloadになります。必要に応じてディレクトリを移動してください。

3. Pathを通す。

zshの場合、~/.zshrcに下記を追記しておくのが良いでしょう。

export PATH="$PATH:~/develop/flutter/bin"

インストール先は書く個人で異なると思うので、必要に応じて変更してください。

4. flutterのインストール確認

flutterのインストール確認

~/develop$ flutter --version
Flutter 3.16.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 9e1c857886 (3 days ago) • 2023-11-30 11:51:18 -0600
Engine • revision cf7a9d0800
Tools • Dart 3.2.2 • DevTools 2.28.3

5. flutterで必要なツールの確認

flutterで利用するツールがインストールされているか確認しましょう。flutter doctorのコマンドで確認できます。

flutter doctor実行

~/develop$ flutter doctor
Found an existing Pub cache at /Users/kawamurakouji/.pub-cache.
It can be repaired by running `dart pub cache repair`.
It can be reset by running `dart pub cache clean`.
Found an existing Dart Analysis Server cache at /Users/kawamurakouji/.dartServer.
It can be reset by deleting /Users/kawamurakouji/.dartServer.
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.2, on macOS 13.4 22F66 darwin-arm64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ 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
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
      Download at: https://developer.apple.com/xcode/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ 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.84.2)
[✓] VS Code (version 1.81.1)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 3 categories.

→結構、ないやつがあるようですね。Android toolchain,Xcode,Android Studio。
これからinstallしていきます！！！

Xcodeのインストール

下記に記載の通り、実行していきましょう。

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
      Download at: https://developer.apple.com/xcode/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ 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.

コマンド実行

 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
 sudo xcodebuild -runFirstLaunch

・CocoaPodsのインストール
CocoaPodsとは、iOSアプリのライブラリ管理ツールです。
brewコマンドでインストールしましょう。

cocoapodsインストール

brew install cocoapods

Cocoapodsの公式サイトのインストール方法ではインストールに失敗しました。
AppleSilicon製のMacではcocoapodsのインストール方法だとうまくできないようです。
公式サイトを下記に添付しますが、失敗前提で見ておくといいかもです。

Android Studioのインストール

Android toolchain、Android StudioはAndroidStudioのインストール時に自然に解決されるようだ。
そのため、Android Studioのインストールをします。

1.Android Studioのダウンロード

2.Android Studioのインストール

3.Android Studioのセットアップ

3-1. Android Studioを開き、SDK Managerを開きます。

3-2. SDK Toolsタブの`Androdi SDK Command-line Tools(latest)'にチェックを入れ、OKボタンを押します。

3-3. 再度OKボタンを押す。

3-4. Instrallerが動き出す。

3-5. ライセンスに同意する。
3-4の状態でも十分なんですが、flutter doctorを動かした際にWarningが発生。
下記コマンドでyes連打で解決。
flutter doctor --android-licenses

最終確認

flutter doctor実行時、全てチェックが入っていれば解決です。
環境構築お疲れ様でした〜〜〜〜〜〜〜〜〜〜〜〜〜〜🥳

インストール状態確認

~$ flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.2, on macOS 13.4 22F66 darwin-arm64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.84.2)
[✓] VS Code (version 1.81.1)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!