はじめに

メインPCは M1 Mac mini ですが、
私物の Macbook Pro 2019 でもアプリ開発を始めることになったので、
VSCodeで環境構築終えるまでの格闘を記します。

VSCodeはインストール済みとします。

環境

PCスペック

MacBook Pro (13-inch, 2019, Two Thunderbolt 3 ports)
プロセッサ 1.7 GHz クアッドコアIntel Core i7
メモリ 16GB 2133 MHz LPDDR3

macOS Big Sur ver.11.6

参考サイト

環境構築の流れ

Flutter SDK をインストール
JDK をインストール
Android Studio をインストール
Xcode をインストール
VSCode Plugin をインストール
Flutter doctor でチェック
Flutter アプリを作成
iOSのエミュレーターチェック
Androidのエミュレーターチェック

Flutter SDK をインストール

まずはFlutterの公式サイトに行ってみる。
https://flutter.dev/

とりあえず、"Get started" を押してみる。

https://flutter.dev/docs/get-started/install
ここは、もちろん MacOSをクリックする。

ここは、Get the Flutter SDK に沿っていきます。

https://flutter.dev/docs/get-started/install
ボタンをクリックし、「flutter_macos_2.5.3-stable.zip」をダウンロードします。

次に、ターミナルを立ち上げます。

ダウンロードしたディレクトリまで移動し、zipファイルを解凍します。

私のコマンドを残しておきます。

yw@YuyanoMacBook-Pro ~ % cd Downloads 
yw@YuyanoMacBook-Pro Downloads % ls
flutter_macos_2.5.3-stable.zip

zipファイルの存在を確認できたので、解凍していきます。

unzip flutter_macos_2.5.3-stable.zip

30秒ほどで終了し、"flutter" というディレクトリが出来上がりました。

個人的にダウンロードフォルダは削除するタイプなので、flutterフォルダをホームディレクトリ(~)に移動させます。

mv flutter ~

flutterの実行ファイルのパスを通します。

シェルは zsh を使用しているので、 .zshrc に以下の1文を書き込みます。

.zshrc

export PATH=$HOME/flutter/bin:$PATH

パスが通っているか確認しましょう。

//シェルを立ち上げ直す
zsh

//PATHの中身を見る
echo $PATH
yw@YuyanoMacBook-Pro ~ % echo $PATH
/Users/yw/flutter/bin:~略~

確認できました。

実際に動作するかも確認しましょう。

flutter doctor

実行結果を示します。

yw@YuyanoMacBook-Pro ~ % flutter doctor

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Running "flutter pub get" in flutter_tools...                       9.0s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 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
    ✗ 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)
[✓] VS Code (version 1.61.2)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

このように環境構築のチェックをしてくれていたらOKです。

これでflutter SDKのインストールは完了です。

Android Studio をインストール

Androidのエミュレーターを使用するために必要です。

Flutter公式サイトにもリンクが書いてありますね。

https://flutter.dev/docs/get-started/editor?tab=androidstudio

Android Studio公式サイト
https://developer.android.com/studio

とりあえず、"Download Android Studio"をクリックする。

同意書の後に、チップ毎にインストールボタンが用意されていた。
今回は "Mac with Intel chip" をクリックする。

ダウンロードファイル(android-studio-2020.3.1.25-mac.dmg)をFinderからダブルクリックで実行する。

ファイル（アイコン）をドラッグ&ドラッグでApplicationsフォルダに移動させる。

アプリを実行する。

設定について聞かれるが、今回は "Do not import settings" のままで行きます。

Kotlin は今回使わないので、右下のバナーは ignore します。

隠れていた "Next" をクリックします。

StandardのままでNext行きます。

暗めのカラーが好きなのでAndroid Studioも Darculeを選択します。

設定確認画面です。Finishを押すと設定のインストールが始まります。

この画面が現れれば、初期設定は終了です。

続いて、Android SDKをインストールします。

More Actions から SDK Manager を開きます。

最新のものを含めて、念の為別のversionもインストールしておきましょう。

確認画面はOKです。

Accept にチェックを入れて Nextを押すとインストールが始まります。

1分ほどで終了しました。

デフォルトではKotlinやJavaを使ったAndroid開発しか用意されていないので、Flutterのプラグインを入れます。

初期画面からPluginsタブを開き、Flutterをinstallします。

数秒で終わったので、Restrat IDE　ボタンを押して再起動します。

これで、AndroidStudioの環境構築は終わりです。

XCodeをインストール

これはAppStoreからインストールします。
私は約1時間かかったので、余裕のある時に行いましょう。

VSCode Plugin をインストール

ここでは、VSCodeのインストールは省略させてください。

Flutter開発で必要なプラグインは "Flutter" です。
インストールには10秒ほどかかりました。

これで、環境構築は終わりです。

Flutter doctor でチェック

以下のコマンドを実行してみましょう。

flutter doctor

Android studio と XCode でエラーが出ていますね。

    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.

上記はsdkmanagerを使ってdmline-toolsをインストールが必要なようです。

では、Android Studioを立ち上げます。

More Actions から SDK Managerを開きます。

SDK Tools というタブを開き、 Android SDK Command-line Tools (latest) にチェックを入れ、Applyでインストールを始めます。

それでは、flutter doctor　を実行してみましょう。

Android toolchainから

flutter doctor --android-licensesを実行してくださいと書いてありますね。

Android Studio 使うにあたってのライセンス関連を承諾する必要があります。

flutter doctor --android-licensesを実行し、何度かyを押すことで終了します。

XCodeのエラーだけ残りました。

CocoaPodsをインストールしてくださいと書いてありますね。

インストール方法が下記サイトに書いてあるそうです。

下記コマンドでインストールします。
パスワードを求められますが、PCのパスワードを入れてください。

sudo gem install cocoapods

おっとエラーが出ました。

yw@YuyanoMacBook-Pro ~ % sudo gem install cocoapods
Password:
Fetching i18n-1.8.11.gem
Fetching zeitwerk-2.5.1.gem
Fetching activesupport-6.1.4.1.gem
Fetching nap-1.1.0.gem
Fetching concurrent-ruby-1.1.9.gem
Fetching tzinfo-2.0.4.gem
Fetching fuzzy_match-2.0.4.gem
Fetching httpclient-2.8.3.gem
Fetching algoliasearch-1.27.5.gem
Fetching ffi-1.15.4.gem
Fetching ethon-0.15.0.gem
Fetching typhoeus-1.4.0.gem
Fetching netrc-0.11.0.gem
Fetching public_suffix-4.0.6.gem
Fetching addressable-2.8.0.gem
Fetching cocoapods-core-1.11.2.gem
Fetching claide-1.0.3.gem
Fetching cocoapods-deintegrate-1.0.5.gem
Fetching cocoapods-downloader-1.5.1.gem
Fetching cocoapods-plugins-1.0.0.gem
Fetching cocoapods-search-1.0.1.gem
Fetching cocoapods-trunk-1.6.0.gem
Fetching cocoapods-try-1.2.0.gem
Fetching molinillo-0.8.0.gem
Fetching atomos-0.1.3.gem
Fetching colored2-3.1.2.gem
Fetching nanaimo-0.3.0.gem
Fetching rexml-3.2.5.gem
Fetching xcodeproj-1.21.0.gem
Fetching escape-0.0.4.gem
Fetching fourflusher-2.3.1.gem
Fetching gh_inspector-1.1.3.gem
Fetching ruby-macho-2.5.1.gem
Fetching cocoapods-1.11.2.gem
Successfully installed concurrent-ruby-1.1.9
Successfully installed i18n-1.8.11
Successfully installed tzinfo-2.0.4
Successfully installed zeitwerk-2.5.1
Successfully installed activesupport-6.1.4.1
Successfully installed nap-1.1.0
Successfully installed fuzzy_match-2.0.4
Successfully installed httpclient-2.8.3
A new major version is available for Algolia! Please now use the https://rubygems.org/gems/algolia gem to get the latest features.
Successfully installed algoliasearch-1.27.5
Building native extensions. This could take a while...
ERROR:  Error installing cocoapods:
    ERROR: Failed to build gem native extension.

    current directory: /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.4/ext/ffi_c
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0 -r ./siteconf20211106-22183-fsqqz0.rb extconf.rb
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
    --with-opt-dir
    --without-opt-dir
    --with-opt-include
    --without-opt-include=${opt-dir}/include
    --with-opt-lib
    --without-opt-lib=${opt-dir}/lib
    --with-make-prog
    --without-make-prog
    --srcdir=.
    --curdir
    --ruby=/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/$(RUBY_BASE_NAME)
    --with-ffi_c-dir
    --without-ffi_c-dir
    --with-ffi_c-include
    --without-ffi_c-include=${ffi_c-dir}/include
    --with-ffi_c-lib
    --without-ffi_c-lib=${ffi_c-dir}/lib
    --enable-system-libffi
    --disable-system-libffi
    --with-libffi-config
    --without-libffi-config
    --with-pkg-config
    --without-pkg-config
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:467:in `try_do': The compiler failed to generate an executable file. (RuntimeError)
You have to install development tools first.
    from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:546:in `block in try_link0'
    from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/tmpdir.rb:93:in `mktmpdir'
    from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:543:in `try_link0'
    from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:570:in `try_link'
    from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:672:in `try_ldflags'
    from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:1832:in `pkg_config'
    from extconf.rb:9:in `system_libffi_usable?'
    from extconf.rb:42:in `<main>'

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-20/2.6.0/ffi-1.15.4/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.4 for inspection.
Results logged to /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-20/2.6.0/ffi-1.15.4/gem_make.out

rubyの環境が整っていないと出るエラーのようです。

その場合はHomebrewを使ってインストールをしましょう。

brew install cocoapods

上手く行ったようです。

やったー！！！

Flutter を Intel Macbookで環境構築してみた。【画像付き】