flutter.io
Android、iOS共通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でのエミュレータ起動、作成までを次のステップで紹介する。
このエントリーでは「VSCode環境での動作確認」を取り扱う。
Windows 10 Pro 64bitを対象環境としている。念のため、私の環境をまとめておく。
- Windows 10 Pro 1803
- Android Studio 3.2.1
- Visual Studio Code 1.29.1
- Flutter 1.0
VSCodeの環境整備
VSCode用拡張プラグイン「Flutter」をインストールする。
marketplace.visualstudio.com
Android Studioプラグイン同様、Dartプラグインと依存関係にある。Flutterプラグインをインストールすると、Dartプラグインも自動的にインストールされる。
VSCodeの設定画面からDartプラグインの設定を確認する。Androidアプリを作成する場合の言語として、JavaかKotlinを選択する。またiOSアプリを作成する場合の言語として、Objective-Cかswiftを選択する。
Flutterプロジェクト
ファイル・メニューを次のようにたどり、「flutter」と入力する。
View > Command Palette
候補が表示されるので、「Flutter: New Project」を選択する。
プロジェクト名を問われるので、任意の名称を入力する。ここでは「test20181207」とした。
保存フォルダを選択すると、自動的にスケルトンの生成が始まる。画像の右下に注目してほしい。
AVDの作成、起動、デバッグ
「No Devices」と表示されている。これはデバッグ用AVDが指定されていないことを示している。該当部分をクリックすると、VSCode画面上部に、選択可能なAVDが一覧表示される。
ここで表示されている「flutter_emulator」は前回のエントリーでコマンドから作成したAVDである。
「Create New」を選択すると、VSCode上から新しいAVDを作成することができる。「flutter_emulator」が存在しているので、「flutter_emulator_2」が生成された。
ここで選択したAVDがエミュレータとして起動する。
まだスケルトンは何も編集していないが、F5キー押下でデバッグを開始する。アプリケーションがビルドされ、しばらく待つとエミュレータの画面が変化する。AVD上でコードが実行されていることが分かる。
プロジェクト内のファイル「lib/main.dart」の赤線の箇所を書き換えてみる。titleとして指定されている文字列を次のように変更する。
| 変更前 | Flutter Demo Home Page |
| 変更後 | 書き換えた |
