どーも！りゅうです(｢･ω･)｢
「MacでFlutter（フラッター）を始めたい！！」という方の為に、
Android Studioでの環境構築の手順を画像付きでわかりやすく解説していきます！
これまでIntelチップM1・M2チップ(Apple Silicon)、MacbookAir・Proなど色々な環境で環境構築してきた際につまずいたことを備忘録として随時更新していきます！
Flutterとは
FlutterはGoogleによって開発された、1つソースコードでiOS / Android / Web に対応するアプリを作れるフレームワークです。
つまり、iOSのアプリを作る為にSwiftを勉強し、Androidのアプリを作成する為にKotlinを勉強し、Web言語も勉強…という必要がなくなり開発スピードが早くなります！
先日Flutter3が発表され、
MacのデスクトップアプリケーションのIntelチップだけでなく、Apple Silicon（ARM64、M1）チップのデスクトップアプリケーションへのビルドも正式対応されたり、Firebase連携が強化されたり、これから盛り上がっていくこと間違いなしな言語だと確信しました！（願望）
変更点の詳細は公式サイトの Flutter 3.0.0 release notesをチェック！
MacOSでの動作環境
Flutter開発環境が次の最小要件を満たしている必要があります。
| OS | macOS (64-bit) |
| 空きディスク容量 | 2.8 GB（IDE /ツールのディスク容量は含まれません） |
| コマンドラインツール | bash, mkdir, rm, git, curl, unzip, zip, which |
Flutter SDKをインストール
・ Flutter公式サイトにアクセスしFlutter SDKをインストール
Apple Silicon Mac(M1,M2チップ)にインストールする場合、いくつかの補助ツールでRosetta翻訳環境を以下のコマンドで利用できるようにしておく必要があります。
sudo softwareupdate –install-rosetta –agree-to-license
・自分のMacのチップに合わせてダウンロード
・PC左上のマーク > このMacについて
Intel chipの場合の表記
プロセッサの行に「Intel Core」の記載あり
Apple Chipの場合の表記
・ダウンロードしたzipファイルをダブルクリックで解凍すると以下の「flutter」フォルダが展開される
Flutter SDKにPATH(パス)を通す
解凍後、Flutter SDKにPATHを通すことで、Macのターミナルでflutterコマンドが利用できるになります。
・任意の場所に「flutter」フォルダを移動
自分はアプリケーションに移動しました。。（本来どこで管理するのが良いのかわからん）
・PATHの取得
flutter直下のbinフォルダを右クリック後、「optionキー」を長押しで表示された「”bin”のパス名をコピー」クリックする。
・PATHを通すコマンドを実行する
ターミナル内のシェルスクリプトの種類の確認する為にターミナルで以下のコマンドを実行
前Stepの結果によって、実行するコマンドが変わります。
「bin/zsh」の場合は①のコマンド
「bin/bash」の場合は②のコマンド
→①「bin/zsh」の場合 ※１行ずつ実行してください
→②「bin/bash」の場合 ※１行ずつ実行してください
[PATH_TO_FLUTTER]は先ほど取得したbinフォルダまでのPATHを入力してください。
自分と同じように「アプリケーションフォルダ＞flutterファイル」に格納した場合、以下のパスになります。
echo export PATH=”$PATH:/Applications/flutter/bin” >> ~/.zshrc
・flutterコマンドが使えるのか確認
以下のコマンドを実行
こんな感じの結果になればOK！
「zsh: command not found: flutter」と表示された場合は、ターミナルを再起動してみてください！
それでもダメなら記事後半のトラブルシューティングを確認！
Flutterの実行環境に必要なツールを揃える
以下のような結果が出力されました。
上図の全て[✓]マークにする必要があります！
Flutterは最初にインストールしたので必ず[✓]になっています。
Xcodeはインストール済みで[×]になっているのは、CocoaPodsがインストールされていなかったり、コマンド打てばどうにかなりそうです。
Andoroid SDKとAndroid Studioはインストールしたら解決しそう。
…という風に、メッセージ通りに足りないツールをインストールしていきます！
その他の項目も併せて解説していきますので、一緒に進めていきましょう！
まずはAndroid Studioのインストールからです。
初期の頃はJavaも必要でしたが不要になりました。
Android Studio インストール
Developer.android.comに接続し「Download Android Studio Giraffe」をクリック
・同意チェックをし、自分のPCのプロセッサに対応している方を選択してクリック
・PC左上のマーク > このMacについて
Intel chipの場合
プロセッサの行に「Intel Core」の記載あり
Apple Chipの場合
・「許可」を選択
※出ない場合はスキップ
・「android-studio-202X.XX.XX.XX-mac.dmg」を起動し「Applications」フォルダへドラッグで移す
※ドラッグ後はウィンドウ閉じてOKです
・「Android Studio.app」を起動
・「開く」
・「Do not impoert setting」を選択し「OK」
・「Send usage statistics to Google」を選択
※使用統計を Google に送付するか否かの選択なので、任意です
・セットアップ画面で「Next」をクリック
・「Standard」を選択し「Next」
・見た目をお好みで選んで「Next」
男は黙ってダークモード(∩’-‘⊂)ｼｭｯ
・設定内容を確認し「Next」
・コンポーネントのライセンスに「Accept（同意）」する。
android-sdk-license
android-sdk-preview-license
「android-sdk-license」と「android-sdk-preview-license」それぞれ選択してAcceptしないと「Finish」が選択できないです。
・インストール待ち…
・インストール中、以下が出ますが管理者Password（ログインする時のやつ）を入力し「OK」
※出ない場合はスキップ
・「”セキュリティ”環境設定を開く」
※出ない場合はスキップ
・「鍵マークをクリック（閉じた状態）」→「パスワード入力」→「ロックを解除」
※出ない場合はスキップ
・「許可」→「鍵マークをクリック（開いた状態）」
※出ない場合はスキップ
・「Finish」
・Andoroid Studio が起動されたら完了です！
・一旦ここで flutter doctor で確認
※ターミナルで矢印上を押すと、コマンド履歴が表示されます
Android Studioにプラグインをインストール
以下2点のプラグインをインストールします。
・Flutter
・Dart
最新版のAndroidStudioをインストールした場合、 [ ✓ ] がついていますが、
つまり「インストール可能な状態だけど、まだインストールはしてないよ」って意味なので、ここでプラグインをインストールしておきましょう！
Flutterのプラグインをインストール
左メニューの「Plugins」を選択後に表示される検索窓から「flutter」で絞り込み「Install」をタップ
・「Accept」同意する
Third-Party Plugin Privacy Note
The following plugins aren’t coming from JetBrains: Flutter (flutter.dev) Using third-party plugins may involve a plugin vendor processing your personal data. Please check the plugin vendor’s documentation for details concerning personal data processing. JetBrains is not responsible for any processing of your personal data by any third-party plugin vendors.
↓翻訳
サードパーティプラグインのプライバシー
以下のプラグインはJetBrainsからのものではありません： Flutter (flutter.dev) サードパーティのプラグインを使用すると、プラグインベンダーがあなたの個人データを処理する可能性があります。個人データ処理に関する詳細については、プラグインベンダーのドキュメントを確認してください。 JetBrainsは、サードパーティのプラグインベンダーによるお客様の個人データの処理について一切責任を負いません。
・「install」
Install Required Plugins
The ‘Flutter’ plugin requires “Dart” to be installed.
↓翻訳
必要なプラグインをインストールする
Flutter’プラグインには “Dart”がインストールされている必要があります。
・インストール後に「Restart IDE」（AndroidStudioの再起動）をクリック
Flutterプラグインをインストール後に再起動することで、Dartのプラグインもインストールされます。
Android toolchain インストール
Android toolchain自体はAndroid Studioインストール時に一緒にインストールされていますが、
別途、必要対応を記載されている内容を確認しながら進めていきます。
cmdline-toolsコンポーネントのインストール
コンポーネントのインストールコマンドですが、メッセージ通りのコマンド通りに打ってもうまくいかないので、違う方法で進めます。
・Android Studio > Settings
・以下の順に選択（※画像参照）
❶Languages&Frameworks
❷Android SDK
❸SDK Tools タブを選択
❹Hide Obsolete Packagesのチェックを外す
❺Android SDK Command-line Tools (latest) にチェック
❻Android SDK Tools (Obsolete) にチェック
❼OK
❹Hide Obsolete Packagesのチェックを外さないと❻Android SDK Tools (Obsolete) の項目が表示されません。
・「OK」を選択
・インストール完了したら「Finish」で閉じる
Android SDK ライセンスを受け入れる
・以下コマンドを実行
・承認されていないライセンスを確認する
上記コマンドの出力結果に対して「y（yesの意味）→Enter」を5回くらい繰り返し入力します
・これで、すべてのSDKパッケージライセンスが受け入れられました！
・再度
Android toolchainにもチェックマークがついて、残りはXcodeのみです。
Xcodeのインストール
Xcodeのインストールや、付随したライブラリのインストール手順を解説していきます。
・ AppStoreからXcodeを新規インストール（XcodeがMacにない方）
※2、3時間かかります…
・インストール後に以下コマンドをターミナルにて実行する。
Xcodeの名前を変更している場合はパスも変わります！
例えば、名前を「Xcode14」にしていた場合のパスは以下になります。
また、「Xcode 14」のようにXcode名にスペースを入れている場合は、パスをダブルクォーテーションで囲むことで正しく認識されます！
・仕様許諾に同意するコマンド
・以下の文が表示されたらqキーを押す
Software License Agreements 'space' for more, or 'q' to quit
上記はversionによって出ない場合はスキップ
・以下の文が表示されたら「agree」と打ち込んでreturn ⏎キーを押す
By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel]
agree入力後に以下のメッセージが表示されればOK
・CocoaPods（Xcodeのプラグイン）インストールコマンド
最後にこんな感じのメッセージが表示されればCocoaPodsインストール完了です！
“extconf failed, exit code 1″エラーがでる場合は、Rubyのバージョンが低いために拡張モジュールのffi gemをビルドしようとして失敗しているので、以下の記事を参照にRubyのバージョンをあげてみてください
【Mac】sudo gem install cocoapodsしたら「extconf failed, exit code 1」になる
・診断コマンドで確認
これでXcodeに[ ✓ ]がついたはずです！！
GoogleChromeダウンロード
GoogleChrome公式サイトからインストールすることで「Chrome – develop for the web」に[ ✓ ]がつきます。
Deviceを接続（追加する）
[ ! ] Connected device を解消する方法は以下のどちらかです。
・デバイスを繋げる
・エミュレーター（仮想デバイス）を追加する
それぞれ解説していきます！
デバイスを繋げる
これはデバイス（端末）とMacをUSB接続するだけです！
iPhoneなら「USBC TypeC」で接続でき、
iPadProまたはAndoirdの方は「USBC to USBC」のコードで接続できます！
実機の接続設定方法については別記事にて紹介します。
カメラを使うようなアプリを開発する場合、
実機がないとテストが出来ないので、
コードを買っておくことをおすすめします！
エミュレーター（仮想デバイス）を追加する
実機がなくても、Android Virtual Device Managerのエミュレーター機能を使えば、
Mac上で仮想デバイスを動作させることが可能です！
今回はこちらの方法を詳しく説明していきます。
実機がなくても気軽に動作確認できるのでコチラがおすすめ！
※マシンのスペックが低いとMacが悲鳴を上げますが。
・More Actions > AVD Manager
プロジェクト作成後の場合、
以下の方法でAVD Managerを開けます
・Android Studio起動して右上「３点リーダ」→「AVD Manager」
・プロジェクトを開いている状態で「Tool」→「AVD Manager」
・「＋ Create Virtual Device」
・「Phone」→「Pixel（※任意のデバイスを選択）」→「Next」
・任意のOSを「Download」
とりあえず最新OSをダウンロードしておけば間違いないです！
・ダウンロード待ち…
・ダウンロード完了したら「Finish」を選択
・先ほどDownloadしたデバイスを選択した状態で「Next」
・任意の端末名を入力して「Finish」
※その他は設定不要です
・仮想デバイスが使用出来る状態になったので、赤枠の▶︎アイコンをクリック
・エミュレーター（仮想デバイス）が起動されるまで待機…
・「OK」で ”Android Studio” からマイクにアクセスを許可
・PC上に仮想デバイスがビルドされました！
インターネットに接続
「Network resources」はMacをインターネットに接続すればOKです！
Flutterサンプルアプリを起動してみよう！
環境は整ったので、プリセットで用意されているサンプルアプリを動かしてみましょう！
・Android Studio の「New Flutter project」を選択
・「Flutter」を選択して「Next」
pathはデフォルトで入力してあるので触らないでOKです！
・プロジェクト名を入力して「Next」
Platformの「Web」にチェックをしておくことでWebアプリも同時に作成できるのでチェックしておきましょう！
・「main.dart」を開くとサンプルアプリのコードがあります
Project > flutter_sample_app > lib > main.dart ダブルクリック
・サンプルアプリを起動
「Run」→「Run ’main.dart’」
ショートカットキー「Ctrl + R」でもビルドできるので覚えておくと便利です！
めっちゃシンプルなカウンターアプリが起動されたら成功です！
トラブルシューティング
自分が詰まったところやエラーが出たものをメモしておきます_φ(･_･ )
エミュレーター実行時に以下のエラーで落ちた場合
“The emulator process for “デバイス名” was killed”
・Andoroid Studio下部メニューの「Events▼」からエラー内容を確認
・エラー内容
Emulator: emulator: ERROR: Not enough space to create userdata partition. Available: 2649.933594 MB at /Users/user123456/.android/avd/Pixel_API_30.avd, need 7372.800000 MB.
和訳：エミュレーター：エミュレーター：エラー：ユーザーデータパーティションを作成するための十分なスペースがありません。
利用可能：/Users/user123456/.android/avd/Pixel_API_30.avdで2649.933594 MB、7372.800000MBが必要です。
エミュレーター「Pixel_API_30.avd」を起動する為に必要な空き容量がないっていうことですね(›´ω`‹ )
Xcodeのキャッシュやらデバイスデータが圧迫していたので削除したら起動できました！
Android Studio メニュー内に「Start a new Flutter project」がない場合
以下の二つのプラグインが入っていない
以下のプラグインが入っていなくても診断コマンド時にチェックマークがついてしまうこともあるとかないとか
・Flutter plugin
・Dart plugin
手順「Android Studioプラグインを導入する」を再確認しましょう！
IDE（AndroidStudio）を再起動していない
上記の二つのプラグインを入れた後に再起動しないとボタンは表示されません。
FlutterへのPATHを通しても「flutter not found」が表示される
原因は以下のどちらかになると思います。
・binまでのPATHが間違っている
・export文が複数ある
上記を確認するために.zshrcファイルを確認しましょう！
「zshrc」とはzshの設定ファイルのことです
.zshrcファイル確認・編集手順
・ターミナルを起動して以下コードを入力してEnter
「.zshrc」ファイルには複数のPATHが「：」区切りで存在している。
上記画像の場合、以下のPATHが登録されていることになる
/user/local/bin
/usr/bin
/bin
/usr/sbin
/sbin
/user/local/share/dotnet
~/.dotnet/tools
usr/bin/vim
/Applications/flutter/bin
・iキー を押してInsertモード（編集モード）に変更
編集モードの状態で誤りがあれば修正しましょう！
・編集完了したら、escキー(エスケープキー)後に:wq（:wq!）と入力してEnterキーで保存して終了
・最後に以下コマンドで設定を反映
source ~/.zshrc
もし設定が反映されなかったらターミナルの再起動してみる
「CocoaPods not installed.」が表示される
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.
これは以下コマンドでCocoaPodsをインストールすればOKです！
brew install cocoapods
あとがき
これで開発する環境が整いました！
とても長い手順お疲れ様でした。
Googleさん公式Youtube「Widget of the Week」で紹介されているウィジェットのサンプルコードを紹介している記事もありますのでぜひご覧ください！
【Flutter】Widget of the Week #1 SafeArea
それでは次の記事でお会いしましょう！