[Flutter] Android エミュレータで Hot Reload を実行



Hot Reload

 
Hot Reloadは体感的には、コードの変更を即実行できるという感じです。
一々ビルドを待つ時間がなく速い開発ができます(できそうです)

SwiftUIも似たようなデバッグができますが、残念ながらSwiftUIではAndroidアプリは作れませんね

ここでは、デフォルトのコードを使ってHot ReloadでHellow Wroldを表示させてみたいと思います。

環境設定の続きとなります。

logo flutter 1080px clr 100x100 - [Flutter]  Android エミュレータで Hot Reload を実行
Flutter   FlutterはGoogleが提供するものでクロスプラットフォーム開発が可能です。Android以外にもiOSアプリ...

 

Flutter Project

 
FlutterのプラグインをインストールするとAndroid StudioのTop画面に
「Start a new Flutter project」が現れ、ここからプロジェクトを作成していきます。

これが表示されていない場合はもう一度環境設定を見直してください。

flutter 09b - [Flutter]  Android エミュレータで Hot Reload を実行

「Flatter Application」を選択し「Next」

flutter 10 - [Flutter]  Android エミュレータで Hot Reload を実行

アプリケーションの名前などの設定です。

flutter 11 - [Flutter]  Android エミュレータで Hot Reload を実行

Project name:プロジェクト名、これはDart package nameに沿って決めます。 小文字 数字 それと _ しか使えません。

Flutter SDK Path:設定されていない場合はflutterフォルダがある場所を設定します。間違っていると下にエラーが出て「Next」がグレーアウトされます。
(ここでは例として C:\_Flutter\src\flutter です)

Project location:プロジェクトの場所を適当に指定します

Description:プロジェクトの説明です

「Next」でパッケージ名の設定です。最初のテストであれば
com.example.「アプリ名」
ではじめられますが、本番ではオリジナルのものに変更してリリースしないといけません

flutter 12 - [Flutter]  Android エミュレータで Hot Reload を実行

問題が無ければAndroid Studioからプロジェクトが立ち上がります。

flutter 14 - [Flutter]  Android エミュレータで Hot Reload を実行

 

エミュレータで実行

 
エミュレータの上部にあるメニューアイコンはこのようになっています。

flutter 13 - [Flutter]  Android エミュレータで Hot Reload を実行

「Flutter Device Selection」が<no devices> となっているので
AVD Managerからエミュレータを起動させます。
もしエミュレータをまだ作成していなければ以下を参考に最低1つは作成します。
 

avd a00 100x100 - [Flutter]  Android エミュレータで Hot Reload を実行
Androidアプリが動作するか確認するためには、エミュレータは便利です。AVD Managerを使ってエミュレータの設定方法について見...

 
エミュレータが起動するとdeviceが選択できるようになるので、三角アイコンでプロジェクトを実行させます。

flutter 15 - [Flutter]  Android エミュレータで Hot Reload を実行

アプリが起動しました。

+ボタンで数値が上がれば成功です。

エミュレータが遅い:
エミュレータがとても遅い場合があります。(基本的に重いのですが私の場合5分以上かかりました)

改善点としては:

  • Intel x86 Emulator Accelerator (HAXM installer)バージョンアップ
  • Android Emulator関連のバージョンを30以上の最新にアップ

以上の対策で相当早くなりました。(1分程度)
「Flutter Device Selection」が<no devices>からAndroid SDK build for…
になっているかどうかです。

 

Hot Reload

 
少しだけコードを変更してみます。
100行辺りの「You have pushed the button this many times:」を「Hello World」に変更してみると

 
ここでアプリを停止して再起動するのが今までのやり方ですが、メニューを見ると雷アイコンの「Hot Reload」が黄色くなっています。これをクリックすると即実行できます。
 
flutter 17 - [Flutter]  Android エミュレータで Hot Reload を実行
 
表示が変わりました。
 
flutter 16b - [Flutter]  Android エミュレータで Hot Reload を実行
 
今までの一々停止させて再起動する手間が省けます。

尚、Hot Reloadができない場合は設定を確認します。
Android Studioのメニュー「File」「Settings…」から

「Languages & Frameworks 」「Flutter」にある
「Perform hot reload save」にチェックが入っていると
Hot Reloadが機能します。

flutter 18 - [Flutter]  Android エミュレータで Hot Reload を実行 

References:
Test drive – FlutterFlutter
Flutter architectural overview

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加

 

アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

オンラインスクールは色々ありますが、以下の3つはAndroidが学習できる老舗スクールです。


TECH ACADEMY
Androidアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


無料で転職まで
これはアプリ限定ではありませんが無料です
その代わり就職することを前提にしたスクールでエンジニアになって職を得たいのであれば手っ取り早いかもしれません

受講料無料:社会人転職コース




シェアする

  • このエントリーをはてなブックマークに追加

フォローする