さて、前回の続きよ。

Flutterの開発環境を整えてAVDを作成するところまで終わらせてるわ。今日はVisual Studio CodeからAVDを利用できるようにするわよ。

Visual Studio CodeでADVを使えるようにする

VS CodeでADVを使えるようにするには拡張機能からFlutterとDartを入れてやる必要があるわ。

Visual Studio Codeに拡張機能を入れる

ファイルメニューから拡張機能を選ぶか左のメニュー一覧から四角が並んでいるアイコンを選んで拡張機能追加ウィンドウを開いてね。

検索ボックスにFlutterを入れてインストール、Dartを入れてインストール。これだけよ。簡単ね。

動くかどうか試すわよ。

VS Codeの表示メニューから コマンドパレット を呼び出して Flutter って入れてみて。いくつか候補が出るはずよ。そこから Flutter New Application Project を選ぶと保存場所を聞かれるわ。

保存場所を決めたらプロジェクト名を聞かれるから決めてね。メンドーだったらMyAppとかでいいわよ。

しばらく待ってると自動でコードが生成されるわ。main.dartファイルが表示されるまで待ってね。

main.dartが表示されたらそのまま何も触らずに実行メニューからデバッグの開始を選んで。そうすると「どこで」実行するのか聞かれるわ。

リストの中に作成済みのAVDがあるはずよ。選ぶと自動で起動するわ。

もしこんなエラーが出て起動しなかった...私が思いつく可能性は2つね。

イメージファイルが壊れているならAndroid StudioからAVDを作り直せば大丈夫よ。VS Codeでデバイスを選ぶウィンドウにAVDを作成できるみたいなメニューがあるんだけれど、今のところ動かないみたいだから使えないわ。素直にAndroid Studioを使いましょ。

ただ、イメージファイルが壊れているケースって、ダウンロードに失敗しているってことなのよ。主な原因に容量不足があるわ。一度Android SDKが置いてあるディスクの容量が十分かチェックすることをオススメするわ。

Android StudioでAVD Managerを開いたら右端の▼メニューからDelを選べば既存のAVDは消せるわ。ほっといても害はないけれど容量が勿体ないし、置いておく理由はないわね。

後は + Create Virtual Device で作り直してちょうだい。

パーミッションに問題があるのなら、AVDを立ち上げたときに左上とか右横とかに赤い字でpermission deniedみたいな警告表示があるはずよ。確認してみて。これがあると起動できないのよ。

chmodなんかを使って権限を追加してあげてね。

こんな画面になるはずよ。

起動はできたのにホーム画面が表示されたままなら、VS Codeの上の方にあるコントロールパネルから再起動かホットリロードを選んでみて。それで動くはずよ。

メニューバーの下辺りに出ているはずよ。探してみて。

くるんと巻いた緑色のボタンが再起動よ。横の黄色のフラッシュマークみたいなのはホットリロードボタンよ。コードを書き換えた後に押すと実行結果がAVDに反映されるわ。

今日はここまで。スムーズに来たのならあっさりだったと思うわ。

私はイメージファイルが壊れてたのよ。残り容量がちょっと不安だったから、AVDを作り直す前にAndroid SDKの場所を変えたの。環境変数をちゃんと設定したのに上手く行かなくて大分時間を取られたわ。

次はおなじみの「Hello World」をやるわよ。

あでぃおす。