Closed2023/08/04にクローズ18

【2023】M2MacでFlutterの環境構築をしてみた

Flutter

macOS

環境構築

手羽先

目標

Flutterの環境構築

環境

M2MacPro
- VSCode,Homebrewなどは入れてある状態
時期
- 2023/08/04

手羽先

Flutter環境構築

今回は以下の記事を参考に進めていきます。
※なので、インストール方法や詳細は省きます
※ただ、独自で追加でエラー対応などをしていきます

手羽先

.zshrc

# Flutter
export PATH="$PATH/Users/nano/development/flutter/bin"

手羽先

flutter

flutter not found

手羽先

$PATHの後に:が抜けてた。

export PATH="$PATH:/Users/nano/development/flutter/bin"

手羽先

source ~/.zshrc

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4.1 22F82 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
      and macOS 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)
[✓] VS Code (version 1.80.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 3 categories.

手羽先

Android Studioを入れる

https://developer.android.com/studio

ワクワク…。こういうのが楽しい！

手羽先

遅すぎて心配になってきた。

手羽先

FlutterとDartのプラグインを入れた。

手羽先

なぜかSystem SettingsにSDKがないので、ここから入れてみる。

手羽先

XCodeを入れる

かなりインストールが長い。

手羽先

やっとできたー。インストールに時間がかかりすぎたので、続きは明日。

手羽先

xcodeのerrorの対処

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4.1 22F82 darwin-arm64, locale
    ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor
      --android-licenses
[✗] 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/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 (version 2022.3)
[✓] VS Code (version 1.80.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

installしたのにエラーが出ている。

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

 flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4.1 22F82 darwin-arm64, locale
    ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor
      --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    ✗ 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 (version 2022.3)
[✓] VS Code (version 1.80.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

手羽先

android toolchainの対処

flutter doctor --android-licenses

全部yを押した。

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4.1 22F82 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)
    ✗ 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 (version 2022.3)
[✓] VS Code (version 1.80.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 1 category.

手羽先

CocoaPods not installedの対処

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.4. Try installing it with `gem install activesupport -v 6.1.7.4` and then running the current command again
	activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

gem install activesupport -v 6.1.7.4

Fetching activesupport-6.1.7.4.gem
Fetching zeitwerk-2.6.11.gem
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

permission errorが出た。多分許可すれば良いんだろうけど、普通にrubyのversionあげてみる作戦をやってみる。

rubyのバージョンあげてみる

activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

と書かれていたので、多分M2Macのsystemに入ってるrubyのバージョンが2.7よりも古いのが問題。なので、rbenvというrubyのバージョン管理システムを使って2023/08/04現在最新のrubyを入れてみる。

brew install rbenv
rbenv install --list

3.0.6
3.1.4
3.2.2
jruby-9.4.3.0
mruby-3.2.0
picoruby-3.0.0
truffleruby-23.0.0
truffleruby+graalvm-23.0.0

https://www.ruby-lang.org/ja/downloads/

rbenv install 3.2.2
To follow progress, use 'tail -f /var/folders/hr/n0hlxbys4t3451nbg3bgvzhr0000gn/T/ruby-build.20230804001839.58798.log' or pass --verbose
Downloading openssl-3.1.1.tar.gz...
-> https://dqw8nmjcqpjn7.cloudfront.net/b3aa61334233b852b63ddb048df181177c2c659eb9d4376008118f9c08d07674
Installing openssl-3.1.1...
Installed openssl-3.1.1 to /Users/nano/.rbenv/versions/3.2.2

Downloading ruby-3.2.2.tar.gz...
-> https://cache.ruby-lang.org/pub/ruby/3.2/ruby-3.2.2.tar.gz
Installing ruby-3.2.2...
ruby-build: using readline from homebrew
ruby-build: using libyaml from homebrew
Installed ruby-3.2.2 to /Users/nano/.rbenv/versions/3.2.2


NOTE: to activate this Ruby version as the new default, run: rbenv global 3.2.2

これで3.2.2がinstallできた。

rbenv versions
* system
  3.2.2

入っていることを確認。ただ、選択されていないので、選択する。

rbenv global 3.2.2
rbenv versions

  system
* 3.2.2 (set by /Users/nano/.rbenv/version)

切り替わった。

rbenv version
3.2.2 (set by /Users/nano/.rbenv/version)

手羽先

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.4. Try installing it with `gem install activesupport -v 6.1.7.4` and then running the current command again
	activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin22]

なぜか切り替わってないみたい。

こちらの記事に解決方法が書いてあった。

zshrc

eval "$(rbenv init -)"

zshrcの末尾に一行追加する。

source ~/.zshrc
ruby -v
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]

ちゃんと切り替わった！素晴らしい！

手羽先

cocoa podsのインストール

sudo gem install cocoapods


~~~
Done installing documentation for nanaimo, colored2, claide, CFPropertyList, atomos, xcodeproj, ruby-macho, nap, molinillo, gh_inspector, fourflusher, escape, cocoapods-try, netrc, cocoapods-trunk, cocoapods-search, cocoapods-plugins, cocoapods-downloader, cocoapods-deintegrate, ffi, ethon, typhoeus, public_suffix, fuzzy_match, concurrent-ruby, httpclient, algoliasearch, addressable, tzinfo, i18n, activesupport, cocoapods-core, cocoapods after 8 seconds
33 gems installed

A new release of RubyGems is available: 3.4.10 → 3.4.18!
Run `gem update --system 3.4.18` to update your installation.

パスワードを入れる必要があるときは、入力する（※入力しても文字は何も見えない）

Run gem update --system 3.4.18 to update your installation.
については、多分gemが古いから新しくしなよっていうメッセージですね。

手羽先

Flutterの環境構築完了🎉

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4.1 22F82 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.80.2)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

過去にM1Macでやった時に比べて時間が経ってたり、環境が違うせいかrbenvは初めてやりましたが、なんとかうまく行ってよかった！何気に環境構築でつまずいている方の参考になるかも？

とにかく、これで環境構築完了なので、明日からは実際にアプリを実装していきます。

このスクラップは2023/08/04にクローズされました