Zenn
👶

M1 MacでサクッとFlutterの環境構築

2021/12/28に公開
Flutter
#
環境構築
tech

環境

  • OS：Catalina 10.15.7
  • Xcode 12.4

1. flutter をダウンロード

mac なら ここから ダウンロードして、~/development などのディレクトリを掘ってそこで解凍。

$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.5.3-stable.zip

2. PATH を通す

bash ならば以下の感じで .bash_profile に追加

# .bash_profile
export PATH=~/development/flutter/bin:$PATH

sourceコマンドで使用中のシェルに即座に反映

source .bash_profile

3. CocoaPods をインストール 

$ sudo gem install cocoapods

ここまでで flutter doctor を叩くと以下の通り

あとは Android Studio を入れれば終わるはず

Doctor summary (to see all details, run flutter doctor
-v):
[✓] Flutter (Channel stable, 2.5.3, on Mac OS X 10.15.7
    19H1417 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
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Community Edition (version 2020.1.3)
[✓] VS Code (version 1.61.1)
[✓] Connected device (1 available)


! Doctor found issues in 2 categories.

てことで Android Studio をダウンロード、インストール

こっち にある。M1の方を選ぶ。

Application ディレクトリに Android Studio をコピーし終わったら、Android Studio を起動して、初回起動時のセットアップを完了させる。

Android SDK Command-line Tools をインストールする

Android Studio を起動し、Preference - Appearance - System Settings - Android SDK を開き、SDK Tools タブから Android SDK Command-line Tools にチェックを入れインストールする。

Android 開発をする上でのライセンスについて諸々のお約束ごとの了解をする

以下のコマンドを叩き、ガンガン同意をしていく。

$ flutter doctor --android-licenses

これで flutter doctor を叩くを以下のようになる。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on Mac OS X 10.15.7 19H1417 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)
[✓] IntelliJ IDEA Community Edition (version 2020.1.3)
[✓] VS Code (version 1.61.1)
[✓] Connected device (1 available)

• No issues found!

Android Studio で開発できるようにする。

以下コピペ。

  1. Start Android Studio.
  2. Open plugin preferences (Preferences > Plugins as of v3.6.3.0 or later).
  3. Select the Flutter plugin and click Install.
  4. Click Yes when prompted to install the Dart plugin.
  5. Click Restart when prompted.

新しくプロジェクトを作って起動してみる

以下コピペ

  1. Open the IDE and select Create New Flutter Project.
  2. Select Flutter Application as the project type. Then click Next.
  3. Verify the Flutter SDK path specifies the SDK’s location (select Install SDK… if the text field is blank).
  4. Enter a project name (for example, myapp). Then click Next.
  5. Click Finish.
  6. Wait for Android Studio to install the SDK and create the project.

最後に

M1環境なら割とサクッと環境構築できるはずです。Windows環境の場合ちょっと違うのかな。途中で詰まっても冷静にエラー文を Google 検索の窓に貼り付けて解決策っぽいの探して改善すればゴールには辿り着けるはずなので頑張ってください。

Discussion