【Flutter】エディタ設定~VS Code編~


ここではAndroid向けFlutterアプリをVS Codeを用いて開発するための設定を行います。

Flutter自体のインストール等は以前の記事を参考にしてください。
[Flutter入門①]環境構築(win10)


1.VS Codeのインストール

以下のサイトからVS Codeをダウンロードしてお好みの設定でインストールしてください。
VS Code

※VS Codeは最新のstable版でOKです。insider版じゃなくてもFlutterは使用可能です。


2.FlutterとDartの拡張機能をインストール

①VS Codeを立ち上げて[拡張機能]のタブを開きます(Ctrl+Shift+X)。

②検索窓に”flutter”と入力します。

③一番上にDart Code製の”Flutter”が表示されるので、[install]をクリックします。

※Flutterの拡張機能をインストールするとDartの拡張機能も自動的にインストールされます。


3.Flutter拡張機能のセットアップ

①VS Codeのコマンドパレットを開きます。(Ctrl+Shift+P)

②”> doctor“と入力すると、”Flutter: Run Flutter Doctor“が候補に表示されるので、クリックします。

③flutter doctorが実行されるので、runnnigの表示が消えるまで待ちます。
(私の環境では2-3分掛かりました)

④VS Codeの出力の部分に結果が表示されます。

Connected deveiceの項目が[!]になっていますが、エミュレータを使う場合は問題ないです。


4.終わりに

今回は FlutterアプリをVS Codeを用いて開発するための設定を行いました。

Andoroid Studioも悪くは無いですが、個人的にはVS Codeが使い慣れているのでVS Codeで開発ができるのはとてもGoodです。

次回はVS CodeでFlutterアプリを作成し実際に動かしてみたいと思います。

Leave a Reply

Your email address will not be published. Required fields are marked *