【天下のGoogle先生】Flutterの開発をVSCodeで行うための環境構築まとめ【Dart・Anrdoid・iOS】

一番ホットなアプリ開発技術

巷ではFlutterが流行っていますね。

Flutter(フラッター)とは、Googleによって開発されたモバイルアプリケーションSDK (Software Development Kit)の事を指します。

Made by Google logo
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Flutter – Beautiful native apps in record time

クロスプラットフォーム

最大の特徴は、一つのコードからAndroidとiOSどちらのプラットフォームでもアプリケーションがビルド出来るという点でしょう。

今回はMacでのFlutterの開発環境構築までを実際にやってみたので備忘録としてまとめようと思います。

Flutter本体のインストール

まずはFlutterの本体をインストールしましょう。

OSに合わせた最新のZIPをダウンロードします。
今回はflutter_macos_v1.9.1+hotfix.6-stable.zipでした。

Select the operating system on which you are installing Flutter:Install – Flutter

ダウンロードが完了したら、任意のディレクトリ(今回はdevelop)に移動し解凍します。

パスの追加

次に、Flutterへのパスを追加します。

今回はfishを使っているので以下のような形で修正してください。

確認

コマンドを確認してみましょう。

無事に通っていますね♪

flutter doctorの確認

次に細かい設定を進めていきましょう。

環境構築のサポートをしてくれる便利なコマンドが用意されているので、まずはそちらを実行して現状を確認してみます。

色々とエラーが出たのでそちらを順番に潰していきましょう。

Android toolchain – develop for Android devices

Unable to locate Android SDK.

AndroidのSDKが見つからないよと怒られました。

このマシンでは、Androidの開発をしたことが無いので初期設定をする必要がありそうです。

ただ出力によると、Android Studioをインストールすればよしなに設定してくれるとの事なのでAndroidStudioをインストールします。

なんの問題もなくインストール出来ると思うので詳細は割愛します。

Android Studio provides the fastest tools for building apps on every type of Android device.Download Android Studio and SDK tools  |  Android Developers

Android licenses not accepted.

以下のエラーは、Androidのライセンスに承諾していないよ！と言われています。

ログに出ている通りに、flutter doctor --android-licensesを実行し、ライセンスの承諾を行いましょう。

基本的には全てyでOKです。

ここまでやればAndroid toolchainの部分が設定完了となります。

Xcode – develop for iOS and macOS

Xcode installation is incomplete; a full installation is necessary for iOS development.

これはXcodeがインストールされていない際に出るエラーなので、AppStoreからXcodeをインストールしましょう。

Xcodeのインストールが完了したら、sudo xcode-select --switch /Applications/Xcode.app/Contents/DeveloperでインストールしたものにSwitchしましょう。

この状態でflutter doctorを実行すると以下のようなエラーが出力されるようになりました。

ログに出た通りのコマンドを実行してみます。

すると、以下のように同意を求められるのでよしなに確認して承認しましょう。

これでXcodeのチェックはOKです。

CocoaPods not installed.

こちらもMacにCocoaPodsがインストールされていない際に出るエラーです。

CocoaPodsとは、iOS/Mac用のアプリを開発する際のライブラリ管理ツールとなっています。



以下のコマンドでgem経由インストールしましょう。

VS Code (version 1.40.0)

Flutter extension not installed; install from

今回はVSCodeで開発をしようと思っているので、こちらも解決しておきましょう。

こちらはVSCodeの拡張がインストールされていないのでインストールしてね、という警告になります。

なので、言われるがままにインストールしておきましょう。

これでVSCodeについてもパスする事が出来ました。

今回はAndroidStudioもIntelliJも使わないので他のエラーについてはスルーします。

Flutterプロジェクトの作成

では、実際にFlutterプロジェクトでHellowWorldを動かしてみようと思います。

VSCodeを開いたら、Flutter: New Projectを実行しましょう。

次にプロジェクト名を入力します。

最後に、プロジェクトを作成するディレクトリを求められるので任意の作業ディレクトリを指定しましょう。

Could not find a Flutter SDK.と言われる場合

初回は以下のようなエラーダイアログが出る場合があります。

その場合はLocate SDKをクリックして、Flutterのbinディレクトリを指定しましょう。

これで以下のようなディレクトリが生成されると思います。

実行

以下のようなログが出ているので、試しに実行してみましょう。

すると、以下のようなエラーが出ると思います。

接続済のサポートしているデバイスが無いよと怒られました。。。orz

iOSエミュレーターの起動

では、iOSのエミュレーターを起動してもう一回試してみましょう。

open -a Simulatorでエミュレーターを起動して、、、

再度実行！

おぉ！きた！！

とても簡単ですね♪

ちなみに、VSCodeのステータスバーのNo DeviceからiOSエミュレーターを起動する事も出来ました。

Andoidエミュレーターの起動

では、せっかくなのでAndroidエミュレーターでの起動してみましょう。

ステータスバーのNo Deviceをクリックし、Creatiung Android emulatorを選択しましょう。

No suitable Android AVD system images are available.

筆者の環境では以下のようなエラーが発生しました。

まだ一つもAVDを作成していないからですね。

今回はAndroidStudioにて基本的なAVDを作成してみます。

特に問題無く作れると思うので、詳細は割愛します。

正常にAVDが作成出来ると、VSCodeにてAndroidエミュレーターが選択出来るようになります。

この状態でAndroidエミュレーターを起動した上でflutter runを実行してみます。

無事に起動出来ました！

これでiOS/Androidの両エミュレーターでの開発環境の準備が出来ました♪

以上のように、簡単に両OSの開発環境が整いました。

アプリ開発は個人でも手を出しやすい分野ですので、皆さんもぜひ試してみてください♪