kun432's blog

Alexaなどスマートスピーカーの話題中心に、Voiceflowの日本語情報を発信してます。たまにAWSやkubernetesなど。

〜スマートスピーカーやVoiceflowの記事は右メニューのカテゴリからどうぞ。〜

Flutterに入門してみる ②デモアプリを動かしてみる

f:id:kun432:20201207110008p:plain

前回環境構築まで終わったので、"Get Started"に従ってすすめてみます。

flutter.dev

iOSシミュレータ/Androidエミュレータででもアプリを動かしてみる

まずはサンプルのアプリを使ってiOSシミュレータ/Androidエミュレータを試してみましょう。前回のサンプルで作ったプロジェクトをそのまま開きます。

f:id:kun432:20201207201941p:plain

画面下部の"Terminal"をクリックして、ターミナルを開きます。

f:id:kun432:20201207202100p:plain

ターミナルが開きました。カレントディレクトリはプロジェクトのディレクトリになっていますね。ここはちょっと後で使います。

f:id:kun432:20201207202201p:plain

では、画面上部の"no devices"から、iOSシミュレータ/Androidエミュレータをそれぞれ起動します。

f:id:kun432:20201207202650p:plain

起動しました。左がAndroidエミュレータ、右がiOSシミュレータです。

f:id:kun432:20201207202945p:plain

では、Android Studioのターミナルに戻って、アプリを実行します。-d allでiOS/Android両方でアプリが起動します。

$ flutter run -d all

以下のように表示されればOKです。

f:id:kun432:20201207203527p:plain

シミュレータ/エミュレータでも立ち上がっていますね!これがデフォルトのサンプルアプリです。

f:id:kun432:20201207203632p:plain

それぞれの右下のプラスアイコンをクリックするとカウンターがインクリメントされます。

f:id:kun432:20201207203814p:plain

では少しコードを変更してみましょう。101行目あたりに画面中央のメッセージが表示されている箇所があります。

f:id:kun432:20201207214257p:plain

ここを日本語にしてCtrl+S(WIndows)かCommandS(Mac)で保存します。

f:id:kun432:20201207214324p:plain

ターミナルをもう一度見てみましょう。ここにコマンドラインで使えるキーが記載されています。

f:id:kun432:20201207214453p:plain

Hot reloadを試してみましょう。ターミナルでそのままrを入力してみてください。すると・・・

f:id:kun432:20201207214756p:plain

シミュレータ/エミュレータが両方とも反映されていますね!これがHot reloadです。変更していちいちビルドみたいなことをしなくても、即時に反映されるのは開発がはかどりますね!

f:id:kun432:20201207214920p:plain

まとめ

iOS/Android同時にプレビュー見ながら修正も即反映されるというのはいいですねー。次回も引き続き"Get Started"を写経します。

flutter.dev