VSCodeでFlutter開発環境を作る（Android Studioは入れない）

衝動的にスマホアプリを作ってみたくなったので、とりあえず開発環境を作りました。

以下ご承知おきください。

• VSCodeがあるのにIDEとしてのAndroid Studioは入れたくない（SDKダウンロードのみ）
• Macbook Pro M1です
• 本当に0→1でやってるので、抜けていたり間違っていたりしたらごめんなさい
• VSCodeは入っていて、使える前提で書いてます。

Flutter環境の構築

拡張機能のインストール

VSCodeを開き、拡張機能で「Flutter」と入力して先頭に出てきたFlutterをインストールします。

ここは詳しく説明するまでもないですね。

Flutter SDKをインストール

ダウンロード

1. コマンドパレットを開く
2. 「Flutter:New Project」を選択
3. 画面右下に以下画像のポップアップが表示されるので、「Download SDK」ボタンを押す。
4. フォルダを指定する画面になるため、任意の配置場所を指定する
   • あとでPath通すのでそのつもりで
5. ダウンロードが完了したら、指定した場所に「flutter」フォルダが作成される

Pathを通す

保存したflutterのパスを通します。

パスを指定するためのファイルは

• シェルがzshの場合は.zshrc
• bashの場合は.bash_profile

以下を実行してファイルに追記する

echo export PATH="$PATH:{flutterフォルダのパス}/bin" >> ~/.zshrc

ファイルをリロードしてパスを通す

source ~/.zshrc

以下を実行してバージョン情報が出ていれば完了

flutter --version
> Flutter 3.24.1...

Android開発環境の構築

Android SDKをインストール

ダウンロード

Android Studioの公式サイトからコマンドラインツールのみをダウンロードします。

公式サイトを開くとページの下の方に「コマンドライン ツールのみ」という欄があるので、自分のOSにあったものをダウンロードします。

Pathを通す

ダウンロードしたコマンドラインツールを解凍したものを任意の場所に配置します。
※私はこの後出たエラーの都合上、$HOMEの場所に配置しています。

配置したら、Flutterと同じ要領で、cmdline-tools/binのパスを通します。

echo export PATH="$PATH:{$HOMEのパス}/android/cmdline-tools/bin" >> ~/.zshrc

例にならってsource ~/.zshrcでリロード。

sdkmanagerを実行して、パスが通ったか確認。
※私はここでエラーが出たので、対処しました（次章に記載）

sdkmanager --version
> 12.0

エラーが出た時の対処法

私の環境ではいくつかエラーが出ましたので、対処法を記録しておきます。

Could not determine SDK root

Error: Could not determine SDK root. Error: Either specify it explicitly with –sdk_root= or move this package into its expected location: /cmdline-tools/latest/

$HOME以外の場所においた時にこのエラーが出ました。

私は$HOMEにおいてやり直したら動きました。どうしても別の場所が良い方は頑張ってください。

Java Runtime Error

The operation couldn’t be completed. Unable to locate a Java Runtime. Please visit http://www.java.com for information on installing Java.

Javaが無いよってエラーです。対処手順は以下のとおり。

1. エラー文に出てきたリンクにアクセスする。
2. 「Javaのダウンロード」ではなく、「Java SE Development Kit」をクリック
3. インストールしたいJDKと、自分のPC（OS）にあったものを選択してダウンロード

私は最新JDKの”ARM64 DMG Installer”を選びました。設定が楽だからね。

ちなみにあまり分かってない仲間に念の為お伝えしておきますが、JREが入っているだけじゃダメです。

必要なモジュールのインストール

sdkmanager –listでモジュール一覧が確認できる。

sdkmanager --install platform-tools 
sdkmanager --install emulator

その他各androidバージョン向けのモジュールも追加が必要になる。

今回は34にします。

sdkmanager --install "build-tools;34.0.0" "platforms;android-34"

エミュレータを用意する

システムイメージのインストール

まずシステムイメージが必要となるため、sdkmanagerでインストールします。

今回34を必要としていて、かつ私のPCがMacのM1チップであるため、以下を選択しました。

sdkmanager --install "system-images;android-34;default;arm64-v8a"

自分に合ったものを調べる際は、sdkmanager --listを叩くと一覧が見られるので、そこから探してください。

また、GoogleのAPIが必要な機能を試したい場合は

sdkmanager --install "system-images;android-30;google_apis_playstore;arm64-v8a"

このように、google_apis_playstoreと書かれたものを使いましょう。

エミュレーターを作成

多分システムイメージからエミュレーターを作成してます。多分。認識誤ってたらごめんなさい。
でも必要な手順のはず。

avdmanager create avd --name android34 --device "pixel" --package "system-images;android-34;default;arm64-v8a"

--deviceがないとエラーになりました。

エミュレーターのパスを通す

私の環境では、通すべきパスは~/android/emulatorとなります。

echo export PATH="$PATH:~/android/emulator" >> ~/.zshrc
source ~/.zshrc

キーボードからの入力を受け付けるようにする

Androidのエミュレータは、初期状態ではキーボードからの入力を受け付けないようになっているらしいです。

これは嫌なので設定を変更します。

設定ファイルは~/.android/avd/android{ダウンロードしたバージョン}.avd/config.ini で、このファイルを編集すると設定を変えられます。

hw.keyboard = noとなっている箇所を hw.keyboard = yes に変更して保存。

Android開発環境の確認

必要なものが揃っているか確認

flutter doctor 

これでバツ印がついている箇所は問題あり。
指示のとおりにインストールやらコマンドやらを実行して解決しましょう。

これまでの設定通りにすすめると、私の環境では以下のようなエラーがでました。

[✗] Android toolchain – develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/to/macos-android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use flutter config --android-sdk to update to that location.

これはパスのAndroid SDKの場所が参照できてない模様。

案内のとおり、flutter config --android-sdkを実行する。 ただし、パスも指定してあげること。

flutter config --android-sdk {SDKを配置したパス}

ここまでの手順を実施した私の場合は {$HOMEのパス}/android となります。

次にdoctorをしたら、以下のようになりました。

Android toolchain – develop for Android devices (Android SDK version 34.0.0) Some Android licenses not accepted. To resolve this, run: flutter doctor –android-licenses

これが出る場合、ライセンス規約に同意してねってことみたいです。

案内のとおりflutter doctor --android-licensesを実行し、規約を読み進めてaccept（同意）したら完了です。

改めてdoctor実行

これでOKです。
※iOS開発の環境が揃ってない場合はXcodeなどがバツになります。この後に手順書いてます。

Android Studio (not installed) となっていますが、今回はAndroid Studioを入れないで環境を作ることが目的なので問題なしです。

エミュレーターを起動する

環境ができたら、エミュレーターを起動して確認しましょう。

emulator -avd android34

これで画面にAndroidのエミュレーターが立ち上がります。

flutterでの確認

flutterコマンドでもエミュレーターが立ち上げられることを確認しましょう。

flutter emulators --launch android34

これでemulator -avdと同じようにエミュレーターが立ち上がればOKです。

iOS開発環境の構築

XCodeのインストール

iOS開発に必要なのが、Xcodeというdeveloperツールです。

これはIDEとかではないのでそのまま入れちゃいましょう。
以下注意点です。

• サイズが大きいので容量に注意
• 古いOSだとインストールできない可能性がある
  • インストールできても古いiPhoneにしか対応できないかも

XcodeはAppStoreで普通のアプリと同じように入れられます。

（インストールには時間がかかるので、その間に次のcocoapodsのインストールをしておくとちょっとだけ時短になります）

Xcodeのインストールが完了したら起動。

上記の画面が表示されたら完了。

cocoapodsのインストール

cocoapodsはiOSアプリを作成する際に使うもので、ライブラリ管理をしてくれます。
これがないとライブラリ管理とか全部手作業です。

今回はHomebrewを使ってインストールします。

brew install cocoapods pod setup

“Setup completed”となれば完了です。

iOS開発環境の確認

VSCodeを再起動したうえで、flutter doctorを実行します。

“Xcode – develop for iOS and macOS (Xcode XX.X)” のように表示されていれば無事にインストールできている状態です。

“Xcode installation is incomplete”エラー

私の環境ではflutter doctorで以下のエラーが出ました。

Xcode installation is incomplete; a full installation is necessary for iOS and macOS development. Download at: https://developer.apple.com/xcode/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select –switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch

確認してちゃんとインストールできていなかった場合は、やり直します。

インストールできている場合は、記載されているコマンドを実行します。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

これでXcodeを再起動。案内とか諸々出るかも。
問題なく先ほどのトップ画面までいったらVSCodeも再起動。

再度flutter doctorで無事チェックがついていることを確認。

iOS Simulatorを起動する

シミュレーターを起動します。

iOSはシミュレーターなんですね。エミュレーターじゃなくて良いのかな。

ともかく、以下のコマンドを実行して、iPhoneの画面が立ち上がれば完了

open -a Simulator

VSCodeから起動させられるようなんですが、flutterプロジェクトを作ってからじゃないと使えなさそうなのでここまでで結構疲れたし今回は割愛します。

まとめ

環境設定ってやっぱり面倒。

これから実際に開発していって、それに合わせてこの記事も修正したり必要なものを付け足したりしていきたいと思います。

flutter開発について教えてくれる方とか、一緒に勉強楽しもうぜって方はX（旧Twitter）でぜひ仲良くしてください。