Flutter初学者によるFlutter等個人学習記録 Advent Calendar 2025

Flutter学習備忘録② Windows11におけるエミュレータの見切れ解消との闘い

Last updated at 2025-12-01Posted at 2025-12-01

〇前提条件
本記事はWindows11でのVSCode・Android Studioを利用したAndroidアプリ開発に関する個人の学習備忘録です。

前回

でとりあえずデフォルトのアプリをChromeで起動するところまで行きました。
本記事は次に

エミュレータ（＝仮想スマホ（または仮想タブレット）画面）

あるコンピュータやシステム、ハードウェアの動作を模倣・再現するソフトウェアやハードウェア（≒スマホの代わりに動かしてみるもの）

を使って起動する方法を確認した際に少し時間を溶かした時の記事です。

エミュレータ（＝仮想スマホ（または仮想タブレット）画面）の設定

結論として、個人的には現状下記の方法②または方法③がプラットフォームに関係なく再現性が高いように気がしました。
※方法③は実際のところエミュレータを起動するわけではないので、エミュレータ固有の機能が仮にあってその機能を使うみたいなことがあれば、方法②がベターな気がするんですが、UI確かめる程度で性能として差がないのなら方法③が一番楽な気がしました

方法①VSCodeからエミュレータを選択して起動する　👈現状、解決せず

上手くいかなかった過程の詳細

以下の画像の通りポチポチしていきます。

※デフォルトではNo Deviceとなっていますが、Chrome、Edgeなどと表示されている場合もあります。

ここをクリックすると、以下のようなバーが出てくるので「Start【エミュレータ名】」を選択

すると、

出てきました。こいつがエミュレータです。けど見切れてる？？(@_@)？？
実際、下のアイコンにカーソルを当てるとスマホぐらいのサイズ感のウィンドウが・・・

そこで少し調べていると次のような記事がありました。

https://zenn.dev/hayate_doc/articles/0dcad1d336fa5b

実際、調べてみると確かにいました

その後、これの通り

emulator-user.ini

window.x = 100
window.y = 100

の100を300とか適当に修正して保存して直して再度、flutter runしてみたところ・・・

自分のPCは上手くいきませんでした(T_T)

https://www.youfit.co.jp/archives/645

こういう記事もあったんですが、結局はまた見切れる可能性もあるので、とりあえずここまでの過程をGPT大先生に壁打ちしてみました。

プロンプト

\.android\avd\Medium_Phone.avdにあるemulator-user.iniを変更＆保存して
何らかのFlutter Projectで起動しても
最初の window.x = 100 window.y = 100 状態でemulatorが起動されます。なぜでしょうか

ChatGPTの回答

原因は emulator-user.ini は起動時に上書きされるため、手動編集が無効になる からです。
Flutter で起動しても emulator が window.x = 100 / window.y = 100 に戻る理由はここにあります。

なぜ emulator-user.ini を書き換えても反映されないのか

Android エミュレータは以下の優先順位で設定を読み込みます：

.android/avd/＜AVD名＞.avd/config.ini
起動オプション（emulator コマンドの引数）
emulator-user.ini（起動後に作られ、次回起動時に OS / UI が再設定する）

つまり emulator-user.ini はユーザーワークスペース的なファイルであり、👈
手動編集しても起動時に再生成されます。👈

特に位置やサイズは起動後の UI が自動変更するため 保存されません。　👈

「emulator-user.ini を編集すれば window の位置を別に位置に固定し直せる」というのは（自分が調べた限りでは）
Android Emulator に関しては使えない方法のようです。

じゃあ、どうすればいいのか。GPT大先生は次の方法を示してくれました

config.ini を書き換える（emulator-user.ini ではなくこちらは起動時に上書きされない）

※上のemulator-user.iniのファイルのある場所を示した画像を見てもらうと分かるんですが、たしかに同階層にこいつがいました。そこで

~/.android/avd/Medium Phone.avd/config.ini

AvdId=Medium_Phone_API_36.1 
PlayStore.enabled=true 
abi.type=x86_64 
avd.ini.displayname=Medium Phone API 36.1 
avd.ini.encoding=UTF-8

---中略---

window.x = 0 👈最初はないので追加
window.y = 200　👈最初はないので追加

と直して再度、flutter runしてみたところ・・・

上手くいきませんでした(T_T)

再度GPTに聞いてみたところ、GPT先生が「はよ言ってくれや・・」という情報を吐き出してきました

原因：Google Play 付き AVD（google_apis_playstore）は位置設定を上書きする挙動を持つ

Google Play が有効な AVD は、起動後に Launcher ウィンドウマネージャが座標を再設定してしまいます。そのため、config.ini に window.x / window.y を書いても常にデフォルト位置に戻ることがあります。

特に以下の設定が該当です：

~/.android/avd/Medium Phone.avd/config.ini

tag.id=google_apis_playstore
tag.display=Google Play
PlayStore.enabled=true

これらがある AVD は Google Play 対応の「特殊な」エミュレータで、
ウィンドウ位置は config.ini よりも内部の UI システムが優先されます。

その後、「Google Play なしの AVD を作る（もしくは選ぶ）」 という回避策をGPT先生はお示しになったので、Andoroid Studio経由でそれにたぶん該当しているであろうデフォルトのエミュレータを主な参考資料④のように追加して再度同様に試みたのですが見切れたままでした...(/_;)

方法②Android Studioで「Running Devices」のウィンドウを開き、そこでエミュレータ（※）を選択してFlutterのプロジェクトを起動する

※なぜか全然分かってないんですが、エミューレータによってはプロジェクトを表示するのではなく、自分の個人のスマホの情報をしないかと聞いてきました。

以下、Medium Phone API36.1で上手くいった様子

（１）VSCodeは落として、Android Studioで起動するFlutterプロジェクトを開いたあと、図にあるようにRuning Devicesのウィンドウを開く

※該当のプロジェクトが開いていない場合は下図のようにたどる

正直まだAndroid Studioに慣れてなさすぎて、VSCodeの100倍くらいどこに何があるかまだワカラナイ..(^^;)

（２）Running Devices ウィンドウにおいて下図の「＋」マークを押して、エミュレータを選択

※ここでは、Medium Phone API36.1を利用

なお、プロジェクト起動後Running Devicesウィンドウを閉じても、上図の停止・再生ボタンはそのまま（プロジェクトは動いているけど表示されていないだけ）なので、プロジェクトを止めるには、上の停止ボタンを押す必要があるようです。

〇Running Devicesウィンドウのボタンをいちいち押すのが面倒な場合

下記の通り、SDK Managerを開いた後、「Tools」⇒「Emulator」を選択し、「Launch in the Runnning Devices tool window」にチェックを入れておくと、上記のDevice Managerの再生ボタンを押すだけで同様の結果が得られるようにるようです。

方法③「エミュレータを使う」ことは諦め、Chromeの検証ツールで「Toggle device toolbar」を用いる　👈これでいいなら個人的にはこれが楽です

方法②でやると、なぜか出力できるエミュレータが限られている一方、この③の方法をエミュレータと見なせるなら選べるデバイスが多種多様で、何よりVSCodeだけで済むのが楽だなと思いました。

ちょっと試してみた様子

（１）何らかのWebブラウザで起動（DartはGoogle製だし、やっぱりChromeがよい？？）

（２）ブラウザ上のどこかで右クリック⇒検証（開発者ツール）で検証ツールを開く

（３）「Toggle device toolbar」のアイコンをクリックし、適当にどのデバイス（※本来の「機器」という意味）の場合かを選択

スマホで動画とか見るときの状態の場合も試せる

ところで、Flutterプロジェクトを起動するとは何なのか

自分は転職活動期はスクールでLaravel学習中に「php artisan serve」コマンドとか「npm run dev」コマンドとか連打してたので、ターミナル上で

flutter run

とかして「プロジェクトを起動する」＝「開発者サーバーを起動する？」とぼんやりしてたんですが、ChatGPTに聞いてみたところ、このコマンドは開発者用サーバーを起動するものではないようです。

以下、GPT大先生に教えてもらった情報まとめ

・「flutter run」は正確には「開発中のFlutterアプリをデバイス（※）やエミュレータ上でビルドして実行するコマンド」

別の言葉で表現すると ネイティブアプリ開発（Android/iOS） では、開発サーバーという概念は基本的に存在せず、flutter run はアプリ本体をビルドしてデバイス（※）にインストールし、デバッグ実行する処理

※ここでは「Chrome」などのブラウザを指す（仮想デバイスというらしい）

〇「flutter run」が行うこと

（１）Flutterアプリをビルドしてデバイスへ転送
（２）デバッグ接続を確立（Observatory / DevTools）
（３）Hot reload / Hot restart を利用可能にする
　　⇒開発効率を上げるための仕組みだが「サーバー」ではない

〇Webでの起動を考える場合はどうなっているか

以下のコマンドのようにWebブラウザを指定してアプリを実行する場合も
「Web サーバーを手動で立てている」わけではなく、
「Web アプリをローカルで動かすためにFlutterツールが内部で動作しているだけ」らしい。

flutter run -d chrome

※上記の一連の流れを見て、FlutterってJavaScriptぽいよな（´｡｀)と思ってぼんやりぐぐっていたら実際こういう記事もありました（「Flutter on the web の仕組み」部分）

学習を進める過程で出てきた用語・再度意味を確認した用語②

①ビルド

Laravelとかさわってたときに実際

npm run build

とかして確認はしてたので、たぶんそういう意味（ブラウザが読み取りやすいようにコンパイル＋＠してブラウザ用にファイルを再生成みたいな意味）なんだろうなと思ってたんですが、概ねそれでした。「完全に理解」した気がする・・

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典（「ビルド」）
https://wa3.i-3-i.info/word12775.html

主な参考資料

①動かして学ぶ！Flutter開発入門　　掛内一章著　翔泳社

Amazonリンク

https://www.amazon.co.jp/%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E5%AD%A6%E3%81%B6%EF%BC%81Flutter%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-%E6%8E%9B%E5%86%85-%E4%B8%80%E7%AB%A0/dp/4798177369

②Flutterで始めるはじめてのモバイルアプリ開発　Tamappe (著)　技術評論社