Flutter アプリ開発の道 〜その⑥ VSCodeセットアップ〜

前回はSDKを最新バージョンへ更新方法の記事を書きました。

今回はVSCodeのエディタでの開発が快適ということを教えていただいたのでVSCodeでのFlutter開発環境構築方法を紹介します。

VSCodeインストール

公式サイトからインストールします。
Flutter開発意外でも活躍できる優秀なエディタです。

https://code.visualstudio.com/

ダウンロードが完了したら解凍してVSCodeを起動します。

Flutterプラグインをインストール

VSCodeを起動したらFlutterの開発ができるようにセットアップする必要があります。
左タブのExtensions（赤枠の部分）をクリックします。

検索欄（赤枠の部分）でFlutterと入力します。
Flutterを選択してFlutterをインストールします。

FlutterをインストールするとDartも一緒にインストールされます。

Flutter Widget Snippetsが良いとのことで、一緒にインストールしておきましょう。

プロジェクトを開く

1.新規でプロジェクト作成
ショートカットキー「Cmd + Shift + P」
もしくは、↓のメニューから「View」→「Command Palette」を選択します。

「flutter」と入力して「New Project」を選択します。
プロジェクトの名前を入力し、作成場所を選ぶと、自動でプロジェクトが開きます。

2.既存のプロジェクトを開く
ショートカットキー「Cmd + O」
もしくは、↓のメニューから「File」→「Open」を選択します。

赤枠の部分のOpenをクリックでもOKです。

Analyzing… が終わるのを待ちます。
※初回は時間がかかります

プロジェクト実行

1.エミュレータ選択
プロジェクトが起動すると↓のような表示になると思います。
VSCode右下の赤枠の部分をクリックすると、エミュレータが選択できます。

選択が完了したら次は実行です。

2.デバック実行
ショートカットキー「F5」
もしくは、↓の「Run」→「Start Debugging」をクリックします。

↓のVSCode右上のアイコン（赤枠の部分）をクリックでもOKです。

しばらくするとアプリが起動します。
また、↓のパレット（赤枠の部分）のようなものがVSCode上に出現します。
ここから、ホットリロードやリスタート、実行の停止ができますので視覚的にも簡単に開発が進められます。