【Flutter】VSCodeで環境構築｜macOSにインストールする方法

2023年8月26日2023年8月29日

Macユーザー向けにVSCodeを使用してFlutterでアプリ開発をするための環境構築の仕方を画像を使いながら分かりやすく解説して行きます。

本記事ではFlutter SDKのインストールからVSCode(Visual Studio Code)を使用してFlutterアプリを起動させるまでの一通りの作業を行います。

Flutter＋VSCodeの環境構築の流れ

VSCodeでFlutterアプリをiOS、Androidシミュレーターで起動するまでの流れは以下の通りです。

それでは順番に紹介していきます。

Flutter SDKのインストール
Xcodeのインストール
CocoaPodsのインストール
Android Studioのインストール
VSCodeのインストール
Flutterプロジェクトの作成
iOSシミュレーターでアプリを起動
Androidエミュレーターでアプリを起動

Flutter SDKのインストール

Flutter SDKをダウンロード

Flutter公式サイトの「Install」からmacOSを選択。

「Get the Flutter SDK」からIntel対応のFlutter SDKをダウンロードします。

Flutter SDKの解凍と配置

ターミナルを開いて次のコマンドを順に実行します。

3行目のコマンドはFlutter公式サイトで指示されているバージョン（下画像の赤矢印の部分）をコピペします。

$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_3.13.0-stable.zip

ターミナルを使わず手動でSDKを配置も可能

Flutter SDKをターミナルを使用せず手動で配置することもできます。

手動の場合はダウンロードしたファイルを解凍し、ユーザーフォルダ直下にdevelopmentを作成し解凍したflutterをドラッグ&ドロップします。

Flutter SDKのパスを通す

Flutter SDKをdevelopment直下に配置したらパスを通す作業を行います。

ターミナルを開き次のコマンドを実行して使用しているシェルを確認します。

$ echo $SHELL

コマンドを実行して/bin/zshと返ってきたら「zsh」、/bin/bashと返ってきたら「bash」となります。

シェルを確認したら、使用しているシェルに応じてターミナルで次のコマンドを実行します。

//zshの場合
$ vim .zshrc

//bashの場合
$ vim .bash_profile

コマンドを実行するとVimと呼ばれるエディタが起動されるので、キーボードの「i」をクリックしてINSERTモードに切り替えFlutter SDKのパスを入力します。

本記事と同じようにユーザーフォルダ直下にdevelopmentを作成した方は次のコマンドの【ユーザーフォルダ】の箇所にMacのユーザー名を入力します。

$ export PATH="$PATH:/Users/【ユーザーフォルダ】/development/flutter/bin"

パスの入力が完了したらターミナルで:wqを入力＆実行してVimエディタを終了しターミナルを再起動します。

ターミナルを再起動したら次のコマンドを実行してパスが通っているか確認します。パスが通っている場合は先ほどVimエディタで入力したパスが返ってきます。

$ which flutter

これでFlutter SDKのパスを通す作業は完了です。

Xcodeのインストール

Appleストアで「Xcode」と検索しアプリをダウンロードします。

ダウンロードが完了したら次のコマンドを順に実行します。

3行目のコマンドを実行すると利用規約が表示されるので「スペース」を押しながら最後まで読み進め最後に「agree」とコマンドを入力し実行します。

$ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
$ sudo xcodebuild -license

Xcodeアプリを開いて利用規約に同意して、次の画面が表示されればインストール完了です。

最後にターミナルで次のコマンドを実行してiOSシミュレーターを起動できるか確認しておきましょう。

$ open -a Simulator

問題がなければ次のようなiOSシミュレーターが起動されます。

これでXcodeでの作業は完了です。

CocoaPodsのインストール

Flutterアプリの開発をしていく上で様々なプラグインを使用するためにCocoaPodsが必要となるのでインストールしておきます。

ターミナルを開いて次のコマンドを実行します。しばらくするとCocoaPodsがインストールされます。

//intelの場合
$ sudo gem install cocoapods

Android Studioのインストール

Android Studio公式サイトを開き「Download Android Studio」をクリック。

利用規約にチェックを入れて、使用しているMacのAndroid Studioをダウンロードします。

ダウンロードしたファイルを開き「Android Studio」を「Applications」にドラッグ&ドロップします。

ダウンロードが完了したら「Applications」から「Android Studio」を起動し、案内に従ってインストールしてます。

Android Studioのインストールが完了したらホーム画面の左サイドバーにある「Plugins」をクリック。

検索ボックスから「Flutter」、「Dart」を検索しインストールします。

インストールが完了したらAndroid Studioを再起動します。

すると「New Flutter Project」が追加されています。

「More Actions」から「SDK Manager」を開きます。

「Android SDK」＞「SDK Tools」を選択します。

そして「Android SDK Build-Tools」、「Android SDK Command-line Tools (latest)」、「Android Emulator」、「Android SDK Platform-Tools」の4つにチェックが入っているのを確認し「OK」をクリック。