LoginSignup
3
2

More than 1 year has passed since last update.

M1 MacbookPro2021でFlutterの環境構築メモとつまづいたところ

Last updated at Posted at 2022-01-25

目次

1.はじめに
2.環境
3.準備
4.各種ツールインストールコマンド
5.homebrew以外でインストールしたもの
6.flutterのパスを通す
7.gitの設定
8.JDKの設定(2021年2月17日更新)
9.flutterサンプルアプリを作成してみる
10.Firebaseプロジェクトの設定
11.参考サイト

1. はじめに

以前使用していたMacBookProが諸事情により使えなくなり、新しくMacBookProを購入して環境構築した時のメモと、つまづいた部分があったためメモとして残しておく。

2. 環境

使用しているMacBook Proのスペック。

  • macOS Monterey
  • バージョン12.2 Beta
  • MacBook Pro(16インチ、2021)
  • チップ Apple M1 Max
  • メモリ 64 GB

3. 準備

  • Homebrew公式からコマンドをコピーしてHomebrewをインストール。
// brewのバージョン
$ brew --version
Homebrew 3.3.9
Homebrew/homebrew-core (git revision 616d606702e; last commit YYYY-MM-DD)

4. 各種ツールインストールコマンド

インストールするツールのコマンドメモ。

// Google Chrome
brew install --cask google-chrome

// Visual Studio Code
brew install visual-studio-code --cask

// Clipy
brew install --cask clipy

// dropbox
brew install --cask dropbox

// docker
brew install --cask docker

// Slack
brew install --cask slack

// iTerm2
brew install --cask iterm2

// nodebrew
brew install nodebrew

// DeepL
brew install --cask deepl

// JDK(パスを通す作業は以下の番参照。)
brew install openjdk

// flutter
brew install flutter

// git
brew install git

5. homebrew以外でインストールしたもの

6. flutterのパスを通す

// 「.zshrc」という名前のファイルを作成
touch ~/.zshrc

// テキストエディタを開いて追記
export PATH={ダウンロードして解凍した場所}/flutter/bin:$PATH
// パス設定例
// export PATH=/Users/xxx/work/flutter/bin:$PATH

flutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (5 weeks ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

7. gitの設定

// 「.zshrc」という名前のファイルを作成(既に作成されている場合はスキップ。)
touch ~/.zshrc

// パスを追記
export PATH=/opt/homebrew/bin:$PATH

git --version
git version 2.34.1

// Githubのアクセストークンを登録する
こちらを参照。
https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

8. JDKの設定(2021年2月17日更新)

2022年2月17日追記。

インストールした時に表示されるコマンドを実行する。

// 上記で実行したコマンド。
brew install openjdk

==> Pouring openjdk--17.0.2.arm64_monterey.bottle.tar.gz
==> Caveats
For the system Java wrappers to find this JDK, symlink it with
  // このコマンドを実行する。
  sudo ln -sfn /opt/homebrew/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk

If you need to have openjdk first in your PATH, run:
  // このコマンドを実行する。
  echo 'export PATH="/opt/homebrew/opt/openjdk/bin:$PATH"' >> ~/.zshrc

zshrcファイルに、エクスポートしたコマンドが反映されていることを確認。
念のためターミナルを再起動する。

java --version
openjdk 17.0.2 2022-01-18
OpenJDK Runtime Environment Homebrew (build 17.0.2+0)
OpenJDK 64-Bit Server VM Homebrew (build 17.0.2+0, mixed mode, sharing)

問題なく反映されていることを確認。

9. flutterサンプルアプリを作成してみる

  • 環境確認
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.2 21D5039d darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.63.2)
[✓] Connected device (2 available)
  • サンプルのアプリを作成してみる
// orgは後々変更するのは大変なので今のうちに指定する
flutter create --org com.example app_name
  • プラットフォームのバージョンを変更
    「/ios/Podfile」のバージョンを「9.0」から「10.0」に変更する。
# Uncomment this line to define a global platform for your project
platform :ios, '10.0'
  • 試しに起動
$ flutter run

-- Other runtime information -----------------------------------------------
Loaded script: /usr/local/bin/pod
Loaded features:

* Loaded script: /usr/local/bin/pod

* Loaded features:

    0 enumerator.so
    1 thread.rb
    2 rational.so
    3 complex.so
    4 /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/universal-darwin21/enc/encdb.bundle
    5 /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/universal-darwin21/enc/trans/transdb.bundle
    6 /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/universal-darwin21/rbconfig.rb
    7 /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/compatibility.rb
    8 /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/defaults.rb
    9 /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/deprecate.rb
   10 /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubyg

============= 一部省略 =============

ems/errors.rb
  665 /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi/version.rb
  666 /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi/ffi.rb
  667 /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi.rb

[NOTE]
You may have encountered a bug in the Ruby interpreter or extension libraries.
Bug reports are welcome.
For details: https://www.ruby-lang.org/bugreport.html

[IMPORTANT]
Don't forget to include the Crash Report log file under
DiagnosticReports directory in bug reports.

zsh: abort      pod install
  • エラーになったので調査してみると以下の記事と同じような現象なので試してみる

  • 上記のissuesにあるコマンドを実行
$ ls
README.md android ios pubspec.yaml
web analysis_options.yaml build lib	pubspec.lock test

$ cd ios
$ sudo arch -x86_64 gem install ffi
$ arch -x86_64 pod install
$ pod install
  • もう一度起動してみる
$ flutter run

============= 一部省略 =============

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

// 問題なく起動して、iOS/Android両者シュミレータでカウンターアプリが実行されることを確認。

10. Firebaseプロジェクトの設定

Flutterで新規アプリ作る時にやることまとめ
こちらのまとめてくださっている記事が分かりやすく参考にさせていただきました。
私は既にFirebaseプロジェクトを作成済みで、新しくアプリを登録するところからでしたが、配置して問題なくビルドは通っています。
(引き続き実装してみてデータが正しく取得出来るか実装します)

11. 参考サイト

3
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2