どーも！りゅうです(｢･ω･)｢
「MacOSでFlutter（フラッター）を始めたい！！」という方の為に、
環境構築の手順を画像付きでわかりやすく解説していきます！
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 |
※空き容量なくて詰んでる人は、記事最後に紹介しているWeb上プレイグラウンドの「DartPad」と「CodePen」がおすすめです！
Flutterをダウンロードする
まずは以下の公式ページリンクからFlutterをダウンロードします。
https://flutter.dev/docs/get-started/install/macos
・「flutter_macos_1.20.4-stable.zip」をクリック
・「許可」
※今後このサイトでファイルをダウンロードすることを許可するかどうか
・「flutter」フォルダがダウンロードされます。
Flutter SDKにPATH(パス)を通す
解凍後、Flutter SDKにPATHを通すことで、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の実行環境に必要なツールを揃える
以下コマンドで必要なツールを確認する
以下のような結果が出力されました。
上図の全て[✓]マークにする必要があります！
Xcodeはインストール済みなので[✓]となっており、
[ ! ]の箇所はAndoroid SDKをインストールして、
Androidのデバイス接続したら解決しそうですね！
まずはAndroid Studioのインストールからしていきましょう！
Android Studio インストール
Developer.android.comに接続し「DOWNLOAD ANDOROID STUDIO」をクリック
・同意チェックをし、自分のPCのプロセッサに対応している方を選択してクリック
・PC左上のマーク > このMacについて
・Intel chipの場合
プロセッサの行に「Intel Core」の記載あり
・Apple Chipの場合
・「許可」を選択
・「android-studio-2020.XX.XX.XX-mac.dmg」を起動し「Applications」フォルダへドラッグで移す
・「Android Studio.app」を起動
・「開く」
・「Do not impoert setting」を選択し「OK」
・「Send usage statistics to Google」を選択
※使用統計を Google に送付するか否かの選択なので、任意です
・セットアップ画面で「Next」をクリック
・「Standard」を選択し「Next」
・見た目をお好みで選んで「Next」
男は黙ってダークモード(∩’-‘⊂)ｼｭｯ
・設定内容を確認し「Finish」
・インストール待ち…
・インストール中、以下が出ますが管理者Password（ログインする時のやつ）を入力し「OK」
※出ない場合はスキップ
・「”セキュリティ”環境設定を開く」
※出ない場合はスキップ
・「鍵マークをクリック（閉じた状態）」→「パスワード入力」→「ロックを解除」
※出ない場合はスキップ
・「許可」→「鍵マークをクリック（開いた状態）」
※出ない場合はスキップ
・「Finish」
・Andoroid Studio が起動されたら完了です！
・一旦ここで flutter doctor で確認
※ターミナルで矢印上を押せば、コマンド履歴が表示されます
Could not determine java version
→「javaがないよ」という意味なのでインストールしていきましょう！
javaをインストールする
・ Java公式HPで「無料Javaのダウンロード」をクリック
・「同意して無料ダウンロードを開始」をクリック
・「許可」を選択
・ダウンロードした.dmgファイルを開き「Java 8 Update 301」をダブルクリック
・「開く」を選択
・「インストール」を選択
・パスワードを入れて「OK」
・「閉じる」
・javaインストール後にflutter診断コマンド
Unable to find bundled Java version.
→以下コマンドを上から順に実行したら解決します(∩’-‘⊂)ｼｭｯ
・さらに診断コマンドすると「Androidのライセンスステータスは不明です」と表示される
Android license status unknown.
`flutter doctor –android-licenses`を実行して、SDKライセンスを受け入れてください。
と記載があるのですが、言われた通りのコマンドを実行する前に
いくつか設定する必要があります＼_(･ω･`)ｺｺ重要！
設定しないと「Exception in thread “main” java.lang.NoClassDefFoundError」エラーが表示される
・More Actions > SDK Manager
・SDK Manager で以下の順に設定
❶SDK Tools タブを選択
❷Hide Obsolete Packagesのチェックを外す
❸Android SDK Command-line Tools (latest) にチェック
❹Android SDK Tools (Obsolete) にチェック
❺OK
・OK
・Accept > Next
・インストール完了したら「Finish」で閉じる
・`flutter doctor –android-licenses`を実行
・承認されていないライセンスを確認する
上記コマンドの出力結果に対して「y（yesの意味）→Enter」を7回くらい繰り返し入力します
・これで、すべてのSDKパッケージライセンスが受け入れられました！
・再度 flutter doctor コマンドで状態確認
「Android toollchain」が [ ✓ ] になりました！
Android Studioプラグインを導入する
× になっている以下2点をインストールします。
・Flutter plugin
・Dart plugin
最新版のAndroidStudioをインストールした場合、 [ ✓ ] がついていますが、「flutter doctor -v」コマンドで詳細確認すると、DartもFlutterも「plugin can be installed from」と表示されます。
つまり「インストール可能な状態だけど、まだインストールはしてないよ」って意味なので、必ずプラグインをインストールしてください！
・Flutter Plugin の追加
左メニューの「Plugins」を選択後に表示される検索窓から「flutter」で絞り込み「Install」をタップ
・「Accept」同意する
・「install」
・Dart Plugin の追加
実はFlutterプラグインインストール時に一緒にインストールされています。
Flutterプラグインを追加完了していたらAndroid Studioを再起動しましょう！
IDE = 統合開発環境 = Android Studio
・はい、ここで診断コマンド！
「Andoroid Studio」も [ ✓ ] になりました！
次で最後です！
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上に仮想デバイスがビルドされました！
・ここで恒例の診断コマンド
No issues found!
無事全てに[ ✓ ]がつきました＼( ‘ω’)／！！！
Xcodeインストール方法もさくっと解説
自分はインストール済みでissueにならなかったので、
さくっとした説明で済ませます(˙◁˙ )
・新規インストール
AppStoreからXcodeをインストール
※2、3時間かかります(´•ω•｀)
・Xcode最新版インストールコマンド
インストール済み、または上記で新規インストールした方は以下コマンドを実行
※この時に要求されるパスワードはPCログイン時のパスワードと一緒です！
・仕様許諾に同意するコマンド（Xcodeを開いて確認してもOK）
・CocoaPods（Xcodeのプラグイン）インストールコマンド
※この時に要求されるパスワードはPCログイン時のパスワードと一緒です！
最後にこんな感じのメッセージが表示されればCocoaPodsインストール完了です！
・診断コマンドで確認
これでXcodeに[ ✓ ]がついていなかった方もついたはずです！！
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」とはzshの設定ファイルのことです
上記を確認するために.zshrcファイルを確認しましょう！
.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キーで保存して終了
・ターミナルの再起動
関連ツール
ちなみにこんな長い手順を踏まなくても、
Web上でのプレイグラウンドツールがあるので、
そちらも合わせてご確認ください✨
Dartpad（登録不要）
Web上のプレイグラウンドで、
簡単なコード確認などができます！
CODEPEN（要アカウント作成）
※紹介＆設定記事は作成中
これもWeb上のプレイグラウンドですが、
Dartpadとは違うのは自分のアカウントに保存しておけることです！
メソッドなどを作成して保存しておくことができるので便利ですね＼_(･ω･`)ｺｺ重要！
そして編集した結果が即時プレビュー で変わるのでスピード編集でき、
コードをそのままブログに埋め込みできることも魅力の一つです！＼_(･ω･`)ｺｺﾓ重要！
埋め込み例
See the Pen
【Flutter#82】AboutDialog by Riumaru (@Riumaru)
on CodePen.
あとがき
とても長い手順お疲れ様でした！
これで開発する環境が整いました₍₍ (ง ˙ω˙)ว ⁾⁾
「プログラミングの基本を理解しているよ！」って方は、
Googleさん公式のWidget of the Weekのサンプル記事を見て頂き、
「一応文法から確認しておこうかな？」って方は
Dartの基礎（作成中）の記事を参考にして頂ければと存じます( ˘ω˘ )
自分はこんなエラーで詰まっています！
というコメントもお待ちしております( *˙ω˙*)و ｸﾞｯ!
※解決できるとは言ってません
【追記】2021.9.8
違う環境で自分のサイト見ながら環境構築していたら、
Android Studioの新バージョン登場により、
画像が新旧混在していますが悪しからず、、(´•ω•｀)
随時更新していきます！
