Zenn
🛫

ゼロからはじめるFlutterの環境構築 (Apple Silicon)

2023/04/12に公開
Flutter
Android Studio
Dart
tech

開発用のMacを新調したため、何も入っていない状態から環境構築を行いました。備忘録を兼ねて残します。

Environment

  • MacBook Pro 14-inch (2023)　(M2 Pro)
  • macOS Ventura 13.3.1
  • zsh環境 (macOS Catalina以降は標準で設定されています)
  • Chromeインストール済み

Steps

1 Xcodeをインストールする

AppStoreからインストールしました。

2 Homebrewの導入

https://brew.sh/index_ja
上に従いインストールします。下記コマンドはあくまで参考とし、公式サイトからコマンドをコピーしてください。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

下記コマンドを実行するよう、ターミナルに出力されていると思います。指示に従い実行します。UserNameは自身の環境に合わせて変更してください。(下記コマンドのコピペそのままでは実行しないでください)

$ (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/UserName/.zprofile
$ eval "$(/opt/homebrew/bin/brew shellenv)"

インストールに伴って(Xcodeがあるのに)Command Line Tools for Xcodeが追加され、xcode-selectで設定が変更されます。戻しておきます。

$ xcode-select -p
/Library/Developer/CommandLineTools
$ xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ xcode-select -p
/Applications/Xcode.app/Contents/Developer

3 rbenvとRubyの導入

$ brew install ruby-build rbenv

下記コマンドでインストール可能なRubyのバージョンが確認できます。

$ rbenv install -l
2.7.8
3.0.6
3.1.4
3.2.2
jruby-9.4.2.0
mruby-3.2.0
picoruby-3.0.0
truffleruby-22.3.1
truffleruby+graalvm-22.3.1

Ruby 3.1.4をインストールします。執筆時点で最新の3.2.2を導入しようとしたところエラーが出たため、一つ前のバージョンの3.1.4をインストールしました。

$ rbenv install 3.1.4

$ rbenv global 3.1.4

$ rbenv init
# Load rbenv automatically by appending
# the following to ~/.zshrc:

eval "$(rbenv init - zsh)"

指示に従って、　.zshrcを編集します。

$ open ~/.zshrc

テキストエディタが開くので、下を追加します。

eval "$(rbenv init - zsh)"

設定を反映させます。

$ source ~/.zshrc

きちんとrbenv環境となっていることを確認します。

$ which ruby
/Users/UserName/.rbenv/shims/ruby

$ which gem
/Users/UserName/.rbenv/shims/gem

上記のように出力されれば正しく構築できています。

4 CocoaPodsの導入

$ gem install cocoapods

下記コマンドでバージョンが表示されることを確認します。

$ pod --version
1.12.0

5 Android Studioのインストール

https://developer.android.com/studio/install?hl=ja

インストール後、FlutterプラグインとDartプラグインを追加しておきます。

4 flutterの導入

https://docs.flutter.dev/get-started/install/macos
はじめに、まだRosettaを導入していない場合は導入します。

$ sudo softwareupdate --install-rosetta --agree-to-license

Flutter SDKを上記公式サイトからダウンロードします。
その次に、~/developmentにFlutter SDKを配置します。

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_arm64_3.7.10-stable.zip

~/developmentがない場合には作成します。

$ mkdir ~/development

次にパスを通します。

$ open ~/.zshrc

テキストエディタが開くので、下を追加します。

export PATH="$PATH:`pwd`/flutter/bin"

設定を反映させます。

$ source ~/.zshrc

flutterの状態を確認します。

$ flutter doctor 
...
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    ✗ 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.
...

上記のように表示されると思います。

cmdline-toolsの追加

コマンドからも実行できると思いますが、今回はAndroid Studioで設定します。
Android Studioで適当なプロジェクトを作成します。
[Tools]→[SDK Manager]から、
[SDK Tools]を選択し、[Android SDK Command-line Tools (latest)]にチェックを入れ、ApplyまたはOKを選択します。

Androidライセンスの確認

flutter doctorでの指示に従って作業します。

$ flutter doctor --android-licenses

yとnを入力することで同意、不同意を選択します。

再度flutter doctorを確認

上記の作業を完了後、再度flutter doctorをして確認します。

$ flutter doctor

全てチェックがついていることを確認します。
以上でFlutterを利用するための環境構築が完了しました。

間違いなどがあればご指摘ください。

フォロー、Twitterフォローもよろしくお願いいたします。
https://twitter.com/kouki__ito

Discussion