【Flutter】Macで環境構築（VS Code対応）

1:　DockにあるLaunchpadを開きます。

2:　［その他］をクリックします。

3:　ターミナルを開きます。

4:　ターミナルに以下のコマンドを入力し、［enter］キーを押します。

sudo softwareupdate --install-rosetta --agree-to-license

1:　以下のリンクよりFlutterの公式サイトを開きます。

https://docs.flutter.dev/get-started/install/macos/mobile-ios#install-the-flutter-sdk

2:　［flutter_macos_arm64_3.22.3-stable.zip］をクリックしmす。

※Apple silicon搭載のMacを使用していない場合は、左側のボタンからzipファイルをダウンロードします。

3:　ターミナルを起動して、以下のコマンドを入力し、［enter］キーを押します。

mkdir development

4:　以下のコマンドを入力し、［enter］キーを押します。

cd development

5:　以下のコマンドを入力し、［enter］キーを押します。

unzip ~/Downloads/［ダウンロードしたzipファイルの名前］

［ダウンロードしたファイル名］には、ダウンロードしたzipファイルの名前を入力します。

今回僕がダウンロードしたzipファイルの名前は、「flutter_macos_arm64_3.22.3-stable.zip」

でしたので、以下のようになります。

unzip ~/Downloads/flutter_macos_arm64_3.22.3-stable.zip

1:　ターミナルに、以下のコマンドを入力し、［enter］キーを押します。

vim .zshenv

2:　［I］（アイ）キーを押して、編集モードに変更します。

3:　以下のように入力します。

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

4:　［esc］キーを押して、「:wq」と入力し、［enter］キーを押します。

5:　以下のコマンドを入力し、［enter］キーを押します。

source ~/.zshenv

すると、書き換えたファイルが読み込まれます。

1:　ターミナルに、以下のコマンドを入力し、［enter］キー押してみましょう。

flutter

はじめてであれば、ターミナルに以下の画面が表示されます。

2:　以下の画面のように表示されたら、［インストール］をクリックします。

1:　AppStoreを開きます。

2:　検索ボックスで「Xcode」と入力し［enter］キーを押します。

3:　［入手］をクリックします。

4:　ターミナルを開きます。

5:　以下のコマンドを入力し、［enter］キーを押します。

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

すると、パスワードの入力を求められますので、Macを起動する時のパスワードを入力します。

その後、ライセンスへの同意が求められます。

［enter］キーを押して、ライセンスを表示させたら、「agree」と入力してライセンスに同意していきましょう。

1:　ターミナルに、以下のコマンドを入力し、［enter］キーを押します。

xcodebuild -downloadPlatform iOS

2:　以下のコマンドを入力し、［enter］キーを押します。

open -a Simulator

すると、以下のようにシミュレーターが立ち上がります。

1:　ターミナルに、以下のコマンドを入力し、［enter］キーを押します。

sudo gem install cocoapods

すると、パスワードの入力を求められますので、Macを起動する時のパスワードを入力します。

CocoaPodsをインストールしようするときに、以下のようなエラーメッセージが出る場合があります。

これは、Rubyのバージョンが足りていないときに表示されます。

以下の記事を参考にRubyのバージョンを上げ、再度CocoaPodsをインストールしましょう。

あわせて読みたい

【Ruby】rbenv のインストール方法（Mac編） 【動作環境】＜パソコン＞機種：MacBook Air（13inch）OS：macOS Sonoma（ver.14.5）チップ：Apple M3シェル：zsh ＜ソフトウェア＞Homebrew（ver.4.3.12） 今回は、Mac…

1:　ターミナルに、以下のコマンドを入力し、［enter］キーを押します。

vim .zshenv

2:　［I］（アイ）キーを押して、編集モードに変更します。

3:　以下のように入力します。

export PATH=$HOME/.gem/bin:$PATH

先ほど書き込んだパスの下に、入力するようにしましょう。

4:　［esc］キーを押して、「:wq」と入力し、［enter］キーを押します。

5:　以下のコマンドを入力し、［enter］キーを押します。

source ~/.zshenv

1:　以下のリンクよりAndroid Studioの公式サイトを開きます。

https://developer.android.com/studio

2:　［Download Android Studio Koala］をクリックします。

3:　下にスクロールします。

4:　［I have read and agree with the above terms and conditions］に  を入れます。

5:　［Mac with Apple chip］をクリックします。

※Apple silicon搭載のMacを使用していない場合は、左側のボタンからzipファイルをダウンロードします。

6:　Finderを起動し、［ダウンロード］をクリックします。

7:　ダウンロードしたdmgファイルをクリックします。

以下のような画面が表示されます。

8:　Android Studioのアイコンをアプリケーションにドラッグ＆ドロップします。

9:　Finder 起動し、［アプリケーション］をクリックします。

10:　［Android Studio.app］ をクリックします。

以下のように、初期設定を進めていきます。

11:　［Don’t send］をクリックします。

12:　［Next］をクリックします。

13:　［Standard］をクリックして選択します。

14:　［Next］をクリックします。

15:　［Next］をクリックします。

16:　［android-sdk-arm-dbt-license］をクリックして選択します。

17:　［Accept］をクリックして選択します。

18:　［android-sdk-license］をクリックして選択します。

19:　［Accept］をクリックして選択します。

20:　［Finish］をクリックします。

21:　［Finish］をクリックします。

1:　［More Actions］をクリックします。

2:　［SDK Manager］をクリックします。

3:　［Android SDK］をクリックします。

4:　［SDK Tools］をクリックします。

5:　［Android SDK Command-line Tools（latest）］にチェック  をいれます。

6:　［OK］をクリックします。

1:　［More Actions］をクリックします。

2:　［Virtual Device Manager］をクリックします。

3:　［起動］ボタンをクリックします。

4:　以下のようにAndroid Emulatorが起動します。

1:　［More Actions］から［Virtual Device Manager］を起動して、［追加］ボタンをクリックします。

2:　［Phone］をクリックします。

3:　具体的な端末をクリックします。

4:　［Next］をクリックします。

1:　VS Codeを開きます。

2：　アクティビティバーの［拡張機能］をクリックします。

3：　検索ボックスに「flutter」と入力します。

4：　Flutter 拡張機能にある［インストール］をクリックします。

1:　ターミナルを起動して、以下のコマンドを入力し、［enter］キーを押します。

flutter doctor

2:　以下と同じような画面が表示されたら、OKです。

［ ］と［！］が表示されている箇所は、まだ設定が完了していない部分です。

すべてが、［ ］になっていなければ、もう一度設定を行いましょう。