Hello Flutterをやってみる【Part2 Chrome, エミュレータで実行】
Hello Flutterをやってみる【Part2 Chrome, エミュレータで実行】
今回使用した環境
Windows 11 25H2
Flutter 3.44.2, Dart 3.12.2
Android Studio Quail 1 | 2026.1.1 Patch 2
VSCode 1.108.2
前提条件
VSCodeは利用可能な状態としておいてください。
当投稿の手順では、コーディングをVSCode、Android Studioはエミュレータの管理として使用することを想定してます。
手順
Hello Flutterプロジェクトの作成
１．コマンドにてプロジェクトフォルダを作成したい場所へ移動し、「flutter create hello_flutter」を実行します。ここでは「C:\github」フォルダ配下に「hello_flutter」の新規プロジェクトを作成しています。
２．「C:\github\hello_flutter」が作成されました。
ChromeでHello Flutterを実行
１．VSCodeで「C:\github\hello_flutter」を開き、ターミナルにて「flutter run -d chrome」を実行します。
２．Chromeが起動され、Flutterのデモ画面が表示されました。
エミュレータでHello Flutterを実行
１．Android Studioを起動し「More Actions」から「Virtual Device Manager」をクリックします。
２．「Create virtual device」をクリックします。
３．左ペインにて「Phone」を選択し、一覧から「Pixel 10」を選択、「Next」をクリックします。※ここでは好きなエミュレータを選択すればよい。
４．デフォルト値のままで「Finish」をクリックします。
５．ディスク容量を2.2GB消費するけど問題ないか？と聞いてきます。「Yes」をクリックします。
６．エミュレータがダウンロード、インストールされます。「Finish」をクリックします。
７．エミュレータの一覧にて、インストールした「Pixel 10」で再生ボタンをクリックします。
８．エミュレータが起動されます。
９．エミュレータが起動した状態でVSCodeのターミナルにて「flutter devices」を実行します。ここで表示された「sdk gphone16k x86 64」がインストールした「Pixel 10」を表します。「emulator-5554」の値を覚えておきます。
１０．VSCodeのターミナルにて「flutter run -d emulator-5554」を実行します。
１１．エミュレータでHello Flutterのデモ画面が表示されました。
以上となります。
ここまでお読みいただきありがとうございました。
こちらPart 1です。→ Hello Flutterをやってみる【Part1 開発環境構築】