【Flutter】エミュレータでアプリを起動する方法

【Flutter】エミュレータでアプリを起動する方法

 

Flutter勉強し始めで、エミュレータの起動方法は分かるけど、
アプリの起動が分かんなかったので、メモ。

flutterエミュレータの起動画面

 

結論から言うと、
下記の手順でFlutterアプリの起動を行うことができる。

Flutterアプリをエミュレータで起動する手順
  1. エミュレータの起動
  2. Flutterプロジェクトの作成(※済んでいる場合飛ばしてOK)
  3. Flutterアプリを起動

 

Flutterの開発環境構築手順(Mac向け)

こちらは参考までに、Flutterの開発環境構築手順の詳細(Mac向け)です。

 

Flutterアプリをエミュレータで起動する方法

では本題、
Flutterアプリをエミュレータで起動する方法について解説していく。

 

①エミュレータの起動

まずは下記コマンドでエミュレータを起動

open -a Simulator
モバイルエミュレータの起動画面

 

VSコードで開発している場合、下記方法でも可能。

コマンドパレットから、「flutter: Launch Emulator」を選択。モバイルエミュレータ起動コマンド入力画面

スマホデバイスの候補が表示されるので、任意のデバイスを選択する。エミュレータ用モバイルデバイスの一覧

選択したモバイルデバイスでエミュレータが起動する。起動したモバイルエミュレータの画像

 

②Flutterプロジェクトの作成(済んでいる場合飛ばしてOK)

次にFlutterプロジェクトの作成方法を紹介しておく(※既に作成済みの場合は飛ばしてOK)
プロジェクトを作成したいディレクトリで下記コマンドを実行。

flutter create flutter_practice

 

VSコードの場合、下記方法でも可能。

Visual Studio Codeより、「表示 > コマンドパレット」を選択。Visual Studio Codeでコマンドパレットを開く画像

入力用のテキストボックスが現れるので、「flutter」と入力する。
「Flutter: New Project」が選択肢に現れるので、クリック。Visual Studio CodeでFlutterプロジェクト立ち上げコマンドを検索する画像

テキストボックスにプロジェクト名を入力。Flutterのプロジェクト名を入力する画面

プロジェクトを保存するディレクトリを選択する。Flutterプロジェクト保存場所の選択画面

保存が済んだら、画面左上のフォルダを開くボタンから、
プロジェクトを保存した場所を開き、プロジェクトが存在することを確認する。Flutterプロジェクトの画像

 

③Flutterアプリを起動

最後に、作成したFlutterプロジェクトの階層に移動し、
flutter runコマンドを実行してアプリを起動する。

# プロジェクトフォルダに移動
cd flutter_practice

# アプリ起動
flutter run

すると下記のような出力がされ、同時に起動済みのエミュレータ上でアプリが起動される。flutter runコマンド実行後の出力

flutter runコマンドで起動されたエミュレータ

出力にある「Flutter run key commands」と言う下に、縦に白い文字で書いてある
「rRhcdq」と言うアルファベットのそれぞれが、起動中のアプリを操作できるFltterコマンドとなっている。

下記ではFlutter開発で最も有名な「ホットリロード(ソース変更の内容を即座にアプリに反映する)」の実行結果である。

まずは適当にアプリのタイトルを変更する。

次にホットリロードを実行する、
ターミナルでホットリロード実行の「r」キーを押す。flutterのホットリロード実行後の画像

するとエミュレータの表示に変更が反映される。
flutterのホットリロードで変更が反映されたエミュレータの画像

 

以上、ホットリロードまで話が膨らんじゃいましたが、Flutterアプリのエミュレータでの起動方法でした。

 

 

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。