MacでFlutterの環境構築をする手順

MacでFlutterの環境構築をする手順を解説します。

1. Android Studioのインストール

ここからAndroid Studioをダウンロード&インストールします。

Download Android Studio and SDK tools | Android Developers

https://developer.android.com/studio

2. Android Studioのプラグインインストール

Android Studioを起動し、この画面まで進めたら「Plugins」を選択。（すべてデフォルトで選択されているものを押していけばOK）

検索ボックスに「flutter」と入力し、Flutterの「install」をクリック。

Flutterの「Install」ボタンが「Restart IDE」に代わるので「Restart IDE」をクリックする。

Android Studioを再起動すると「New Flutter Project」というのが増えるので、「New Flutter Project」を選択。

ここで、「Flutter SDK path」というのが求められるので、FlutterのSDKをインストールする必要があります。

3. Flutterのインストール

FlutterのSDKをインストールする手順です。

3-1. SDKのダウンロード

ここからFlutterをダウンロード。

macOS install | Flutter

https://docs.flutter.dev/get-started/install/macos

3-2. ダウンロードしたzipを解答

1. ダウンロードしたSDKをクリックして解凍する（通常ダウンロードフォルダに入ってます）
2. 解凍したflutterというフォルダをFinderの任意の場所に移動する（今回は ~/Document/SDKs/ へ移動して進めます）
3. 任意の場所にflutter（例の場合 ~/Document/SDKs/flutter）というフォルダがある事を確認

3-3. Flutterのコマンドパスを通す

1. ターミナルを開く

2. 以下のコマンドを入力する

   echo $SHELL
   

   /bin/zsh の場合は3(a)へ、/bin/bash の場合は3(b)へ。

3. (a)以下のコマンドを入力する
   「ユーザー名」の部分はあなたがパソコンで使用しているユーザー名に変更してください

   echo "export PATH=\"\$PATH:/Users/ユーザー名/Documents/SDKs/flutter/bin\"" >> ~/.zshrc
   source ~/.zshrc
   

   
   

   (b)以下のコマンドを入力する
   「ユーザー名」の部分はあなたがパソコンで使用しているユーザー名に変更してください

   echo "export PATH=\"\$PATH:/Users/ユーザー名/Documents/SDKs/flutter/bin\"" >> ~/.bash_profile
   source ~/.bash_profile
   

4. 以下のコマンドを入力する

   flutter doctor
   

   command not found: flutter と言われなければ一旦OK！

4. アプリを作成する

2の最後の状態で「Flutter SDK path」が求められていました。
ここに/Users/ユーザー名/Documents/SDKs/flutter を指定しましょう。

「Next」を押した後のこの入力項目は、こちらを参考にしてみてください。ここで「Finish」を押します。

プロジェクトの作成が完了！！

5. iOSシミュレータの起動

Xcodeがインストールされてない場合は、MacAppStoreでXcodeを検索しXcodeをインストールします。（数時間かかります）

Xcodeがインストールされている場合は、「Open iOS Simulator」を選択。

デバイスを選択し、アプリを起動。

うまくいかない場合は？

ターミナルで

flutter doctor

と入力して、Xcodeにチェックマークが入っているか確認してください。
入っていなければ、エラーが表示されて、あれしろこれしろと書いてあるので、それに従ってコマンドを入力したりすれば動くようになると思います！！

それでも分からなければ塾長のDMまでどうぞ〜。WindowsでのFlutter開発環境構築の方法は機会があれば書きます！
https://twitter.com/kamo_it_juku