Technically Impossible

Lets look at the weak link in your statement. Anything "Technically Impossible" basically means we haven't figured out how yet.

Flutterの導入からVSCodeでAVDを作成するまで - VSCode編

flutter.io
AndroidiOS共通SDK、Flutter 1.0がリリースされた。iOS開発にも利用できるとは言え、利用するにはAndroid Studioを必要とする。

Note: Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step will discuss that.

これはFlutterにより開発をAndroid Studioで実行しなければならないという制約を意味するのではなく、あくまでもFlutterを導入、利用するにあたってAndroid Studioが依存関係になっているということだ。
Flutterの開発はVSCode (Visual Studio Code)でも対応できる。

Flutterの導入から、VSCodeでのエミュレータ起動、作成までを次のステップで紹介する。

  1. 事前準備からFlutter導入
  2. Flutter導入チェック、flutterコマンドによるAVD (Android Virtual Device)の作成
  3. VSCode環境での動作確認

このエントリーでは「VSCode環境での動作確認」を取り扱う。

Windows 10 Pro 64bitを対象環境としている。念のため、私の環境をまとめておく。

VSCodeの環境整備

VSCode用拡張プラグイン「Flutter」をインストールする。
marketplace.visualstudio.com

Android Studioプラグイン同様、Dartプラグインと依存関係にある。Flutterプラグインをインストールすると、Dartプラグインも自動的にインストールされる。

VSCodeの設定画面からDartプラグインの設定を確認する。Androidアプリを作成する場合の言語として、JavaかKotlinを選択する。またiOSアプリを作成する場合の言語として、Objective-Cかswiftを選択する。
f:id:espio999:20181207101233p:plain

Flutterプロジェクト

ファイル・メニューを次のようにたどり、「flutter」と入力する。

View > Command Palette

候補が表示されるので、「Flutter: New Project」を選択する。
f:id:espio999:20181207101311p:plain

プロジェクト名を問われるので、任意の名称を入力する。ここでは「test20181207」とした。
f:id:espio999:20181207101336p:plain

保存フォルダを選択すると、自動的にスケルトンの生成が始まる。画像の右下に注目してほしい。
f:id:espio999:20181207101400p:plain

AVDの作成、起動、デバッグ

「No Devices」と表示されている。これはデバッグ用AVDが指定されていないことを示している。該当部分をクリックすると、VSCode画面上部に、選択可能なAVDが一覧表示される。
f:id:espio999:20181207101422p:plain
ここで表示されている「flutter_emulator」は前回のエントリーでコマンドから作成したAVDである。
「Create New」を選択すると、VSCode上から新しいAVDを作成することができる。「flutter_emulator」が存在しているので、「flutter_emulator_2」が生成された。
ここで選択したAVDがエミュレータとして起動する。
f:id:espio999:20181207101522p:plain

まだスケルトンは何も編集していないが、F5キー押下でデバッグを開始する。アプリケーションがビルドされ、しばらく待つとエミュレータの画面が変化する。AVD上でコードが実行されていることが分かる。
f:id:espio999:20181207101555p:plain

プロジェクト内のファイル「lib/main.dart」の赤線の箇所を書き換えてみる。titleとして指定されている文字列を次のように変更する。
f:id:espio999:20181207101632p:plain

変更前 Flutter Demo Home Page
変更後 書き換えた

デバッグのReloadボタン(リング状の緑矢印)をクリックすると、エミュレータ上の表示も変化する。
f:id:espio999:20181207101731p:plain
f:id:espio999:20181207101701p:plain