Mac の環境構築をしよう
1.Flutter SDK をダウンロード
まずは Flutter SDK を公式 HP からダウンロードします。下記 URL にアクセスしましょう。
「Get the Flutter SDK」の項で SDK をダウンロードしてください
ダウンロードしたファイルを Zip 形式になっているので解凍した上で、ユーザーフォルダ直下に開発用フォルダを作成し、その中に配置してください
ここでは分かりやすく development という名前でフォルダを作成し、その直下に解凍した flutter フォルダを配置しています
2. PATH を通す
コマンドラインから flutter フォルダにアクセス出来るように PATH を通します
$ echo 'export PATH="$PATH:[flutterフォルダが格納されているディレクトリ]/flutter/bin"' >> [SHELLの設定ファイルのパス]
Flutter フォルダのパス確認
Flutter フォルダのパスの調べ方が分からないという方は、ターミナル内にドラッグ&ドロップすることでディレクトリのパスを表示してくれるので、そちらで確認してみてください
SHELL の設定ファイルがない、もしくは分からない場合
使っている SHELL の確認
まずお使いのシェルをターミナルから以下のコマンドで確認しましょう。/bin/zshなら zsh、/bin/bashなら bash を使っています。
$ echo $SHELL
/bin/zsh
# もしくは
/bin/bash
SHELL の設定ファイル名
zsh であれば.zshrc、bash であれば.bash_profileというファイルが設定ファイルになります。
設定ファイルがない場合
これらの設定ファイルがない場合は以下コマンドでルートディレクトリ配下に作成しましょう
# zshの場合
$ touch ~/.zshrc
# bashの場合
$ touch ~/.bash_profile
PATH を通したら設定の有効化をします
$ source [.zshrcもしくは.bash_profileのパス]
最後に下記コマンドを実行し、パスが表示されれば設定成功です
$ which flutter
3.Android Studio のセットアップ
こちらの公式サイトからAndroid Studioをダウンロードします
Android Studio をダウンロード
利用規約文末の同意にチェックを入れ、Intel Macをお使いであれば左を、Apple シリコン Macをお使いであれば右をクリックします
任意のフォルダにダウンロードをしたファイルを開き、指示に従っって Application に追加しましょう
Application フォルダから Android Studio を立ち上げ、指示に従ってインストールを進めます
Android Studio をインストール
Do not import settings を選んで、OK を押します
Android Studio の Setup Wizard が起動するのでそのまま Next を押して進みます
Standard を選択し、Next
お好きな UI を選択し、Next
設定の確認画面が出るのでそのまま Next
契約条件が表示されるので Accept を選択し、Finish を押します
インストールが自動的に始まり、終われば完了です
次に Flutter を使う為のプラグインを Android Studio にインストールしましょう
Flutter プラグインをインストール
Android Studio を開き、Plugin から flutter を探し、インストールを押します
以下のダイアログが出たら内容確認の上、Accept を押します
次に Dart プラグインも導入するか問われるので、install を押します
インストールが完了したら、「Restart IDE」を押して完了です
最後にコマンドラインから Android を実行する為のAndroid SDK Command-line Toolsをインストールします
Android SDK CLI をインストール
まず Android Studio を起動し、「SDK Manager」を開きます
次に「Android SDK」欄の「SDK Tools」タブを開き、 「Android SDK Command-line Tools (latest)」にチェックを入れ、「Apply」を押します
その後、確認画面が出るので OK を押してインストールしてください
これで Android Studio のセットアップは完了です
4. Xcode のセットアップ
Xcode はApp Storeからインストールするだけです
時間がかなりかかるので、ネットが安定していて時間に余裕がある環境で行いましょう
次に iOS のプラグインを管理するcocoapods のインストールを行います
$ sudo gem install cocoapods
パスワード入力を求められるので、PC のパスワードを入力しインストールを完了してください
5. flutter doctor
Android Studio と Xcode の設定が完了したら以下コマンドを実行してみましょう
$ flutter doctor
flutter doctorコマンドでは Flutter SDK、 Dart、Android Studio、Xcode など Flutter 開発で必要とされるツールの設定状況を確認する事が出来ます
末尾に-vを付ける事で詳細な情報を表示してくれるので、エラーが発生しているような場合はflutter doctor -vで詳細を確認してください
ここまで来ればもう一息です。
7. Android License の設定
flutter doctorコマンドを叩いた際に Android toolchain に以下の様に!マークでメッセージが表示されていると思います。
最後にこの android license を設定しましょう
メッセージの指示通り、ターミナルから下記コマンドを実行しましょう
$ flutter doctor --android-licenses
すると下記の通り、いくつかのライセンス契約書を確認する様に求められるので y を入力した後 Enter を押して進みます
Review licenses that have not been accepted (y/N)? y
すると５枚ほどライセンスの確認書類が表示されるので全て y を入力して Enter で承認します
通常のターミナルに戻ったら設定完了です
8. 全て Green になれば終了！🎉
最後にもう一度flutter doctorを実行し、全ての項目が緑色になっていれば終了です。
お疲れ様でした！！👏