Zenn
👨‍💻

（初心者向け）M2 MacにおけるFlutter開発環境構築

2023/04/07に公開
1件
Flutter
初心者
#
環境構築
tech

1. はじめに

こちらの開発環境構築において、PCスペックは以下環境をもとに構築しております。

項目 スペック
年式 2022
機種 Macbook Air
チップ Apple M2
メモリ 16GB
OS Ventura 13.2.1

2. Flutterの環境構築

こちらが公式のFlutterホームページとなります。

2-1. SDKのダウンロード

Flutter公式にアクセスし、以下の通りAppleシリコンのSDK（ZIPファイル）をダウンロードします。

公式ホームページダウンロード先

ダウンロードしたSDKを解凍し、以下に配置。
Users > (ユーザー名) > work > dev > flutter

2-2. Flutterの実行

flutterが保存されいている直下に移動。

cd /Users/yf/work/dev

デフォルトシェルの確認

echo $SHELL
  • zshの場合：~/.zshrc
  • bashの場合：~/.bash_profile

設定ファイルを以下コマンドで作成、開く。

vi ~/.zshrc

export PATH="$PATH:/Users/yf/work/dev/flutter/bin" を追記し、保存。

viコマンドを理解していない場合は以下手順でも可能。

touch ~/.zshrc ##ファイルを生成
open ~/.zshrc ##ファイルを開く

追記できた場合には以下コマンドにより設定ファイルを更新。

source ~/.zshrc

ターミナルで下記を実行し、パスが通っているか（表示されるか）を確認。

which flutter
/Users/yf/work/dev/flutter/bin/flutter

pathが通っていれば一度flutter doctorを実行。
場合によってはGitのインストールが促されるため、そのままインストールを実行。

flutter doctor

以下のように、準備できている箇所とできていない箇所を表示することができる。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.10, on macOS 13.2.1 22D68 darwin-arm64, 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 installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      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)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 3 categories.

現状下記の通り。次にAndroidStudioをインストールしていきます。

  • Flutter
  • Android Toolchain
  • xcode
  • chrome
  • Android Studio

2-3. AndroidStudioのinstall

こちらの公式HPからIDEをダウンロード。
同意にチェックし、Mac with Apple chipをダウンロード

Do not import settingsを選択。

データをGoogleに送るかどうか。どちらでも。

  • Welcome
    • Next
  • Install Type
    • Standard選択し Next
  • Select UI Theme
    • お好みどちらでも
  • Verify Settings
    • Next
  • License Agreement
    • Accept選択し Finish

Welcome to Android Studioが表示。

Android Studio > Settings
※⌘ + , のショートカットでも可

PluginsからFlutterをインストール、合わせてDartのインストールも促されるためOK

インストール完了後、OKを押すとPluginを適用するためRestartが促されるためRestart

New Flutter Projectが表示されるか確認。

Android Studio > Settings
※⌘ + , のショートカットでも可

System Settings > Android SDK
SDK Toolsのタブを選択

Hide Obsolete PackagesをUncheck

  • Android SDK Tools(Obsolete)をcheck
  • Android SDK Command-line Tools(latest)をcheck
    • Apply > OK > Finish

必要なインストールは完了。

2-4. Xcodeのinstall

App Storeを開き、xcodeを検索、入手 > インストール

xcodeを開き,同意の上インストール。

continueを押下。

xで閉じる。

必要なインストールは完了。

2-5. Flutter doctorによるチェック

flutter doctorによって環境構築できているかを確認。

flutter doctor -v                                  
[✓] Flutter (Channel stable, 3.7.10, on macOS 13.2.1 22D68 darwin-arm64, locale ja-JP)
    • Flutter version 3.7.10 on channel stable at /Users/yf/work/dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4b12645012 (3 days ago), 2023-04-03 17:46:48 -0700
    • Engine revision ec975089ac
    • Dart version 2.19.6
    • DevTools version 2.20.1

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/yf/Library/Android/sdk
    • Platform android-33-ext5, build-tools 33.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[!] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    ✗ 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
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.2.1 22D68 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 111.0.5563.146

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

まずは、Android toolchainの下記エラーを対応。

! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

上記の通り、コマンドを実行。

flutter doctor --android-licenses

Review licenses that have not been accepted (y/N)?のように同意するかを問われるため、完了するまでyを入力。

次に、Xcodeの下記エラーを対応。

     ✗ 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 gem install cocoapods

ERROR:  Error installing cocoapods:
	The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.3. Try installing it with `gem install activesupport -v 6.1.7.3` and then running the current command again
	activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

上記が表示された場合は先に以下コマンドを実行。

sudo gem install activesupport -v 6.1.7.3

再度flutter doctor -vを実行し以下の通り、No issues found!になるか確認

flutter doctor -v
[✓] Flutter (Channel stable, 3.7.10, on macOS 13.2.1 22D68 darwin-arm64, locale
    ja-JP)
    • Flutter version 3.7.10 on channel stable at /Users/yf/work/dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4b12645012 (3 days ago), 2023-04-03 17:46:48 -0700
    • Engine revision ec975089ac
    • Dart version 2.19.6
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/yf/Library/Android/sdk
    • Platform android-33-ext5, build-tools 33.0.2
    • Java binary at: /Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.12.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      11.0.15+0-b2043.56-8887301)

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.2.1 22D68
      darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 111.0.5563.146

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

これにてすべてチェックし完了、お疲れ様でした。

  • Flutter
  • Android Toolchain
  • xcode
  • chrome
  • Android Studio

Discussion

melodyclue_routermelodyclue_router

M2 Mac Airのこのスペックでflutter開発は快適に行えると感じました？ 買い替えたいのですが、そこらへんちょっと気になってます。