Visual Studio Codeを使ってFlutterでHello Worldまでの手順

はじめに

この記事ではVisual Studio Code（以降、VS Code）を使ってFlutterのプロジェクトを新規作成から実機でデモアプリを動かすまでの手順をまとめます。この記事は、以下の記事のVisual Studio Code版になります。

前提と環境

以下の通りです。この記事の内容は、Ubuntu18.04で実施した流れになりますが、基本的に他のOSでも同様の手順になると思います。

• OS：Ubuntu18.04
• Flutter : ver1.2.1
• Dart : ver2.1.2
• Visual Studio Codeはインストール済とする
• Visual Studio CodeにFlutterのプラグインをインストール済とする
• デバッグにAndroid端末実機を使用する場合は、Android端末のUSBデバッグ機能を有効化済とする

基本的な手順は公式ドキュメントに従います。

VS CodeでFlutterの新規プロジェクトを作成する

VS Codeを起動し、以下のようにメニューから「View」→「Command Palette...」をクリックします。

するとコマンド入力バーが開くので、そこで「flutter」と入力します。表示される「Flutter: New Project」をクリックします。

ここで「Flutter: New Project」が表示されない場合は、まずFlutterのプラグインをVS Codeにインストールする必要があります。（インストール手順はこちら。）

続いて、プロジェクト名を入力するよう指示されるので、適当に入力してEnterを押します。

次にプロジェクトの場所を指定します。任意のディレクトリを指定し、以下の赤矢印先にある「Select a folder to create the project in」をクリックします。

以下のようにプロジェクトが作成されてmain.dartが表示されれば完了です。

VS Codeを使ってFlutterアプリのデバッグを行う

パソコンにAndroid端末（Mac OSであればiOS端末も可）をUSB接続した状態で、以下のようにメニューの「Debug」→「Start Debugging」をクリックします。もしくはF5キーを押しても実行可能です。

デバッグが開始されると、以下の赤線枠の部分に色々と出力されるようになり、「Built build/app/outputs/apk/debug/app-debug.apk」というような表示されれば完了です。

接続しているAndroid端末を確認してみると、以下のようなデモアプリが動作していると思います。

なお、試しにmain.dartの適当な箇所を修正してみると、即座に実機端末上のアプリにもその修正が反映されます。 また、ここでは実機上でデバッグを行いましたが、もしすでにAndroid用のエミュレータをパソコンにインストール済の場合は、実機ではなくエミュレータを使ってデバッグももちろん可能です。 パソコンにAndroid端末実機が接続されておらず、Android用のエミュレータが作成済であれば、メニューの「Debug」→「Start Debugging」をクリック（もしくはF5を押す）すると、以下のように作成済のAndroidエミュレータが表示され選択できます。

まとめ

VS CodeでもFlutterの開発をするにあたって十分な環境を構築できます。