Flutterを体験しよう3 ~動作テスト~

 前提記事

kenteiblog.hatenablog.com



 

ということで、公式のドキュメントを参考にしながら、手順通り進めていきたいと思います。今回は、実際にアプリを動かしてみる話ですね。

Get Started: Test Drive - Flutter

 

なお、私が文章をそのまま意訳した結果については最後のほうに「続きから」の形で隠しておきます。(説明上、余計な文もあるので)

 

では、以下からスタート。

 

Flutterアプリを動作させてみよう

※私はVisual Studio Code(VS Code)を利用します。

1. 新規アプリケーションの作成 

(0)VS Codeを起動します。

(1)「表示 > コマンドパレット」を呼び出し、「flutter」入力します。
 「Flutter: New Project」というものがあるので、それを選択します。

f:id:kentei0715:20180309003158p:plain

 

(2) プロジェクト名を入力するように言われるので、入力してEnterキーを押します。
以下の例は「myapp」という名前にしています。

f:id:kentei0715:20180309003406p:plain

 

 

(3) フォルダ選択ダイアログが表示されるので、プロジェクトフォルダを作成する適当なフォルダを選択します。 

 

(4)新しくVS Codeの画面が表示され、main.dartファイルが表示されるまで待ちます。
以下のようになれば完了です。

f:id:kentei0715:20180309003918p:plain

 

2. アプリの実行

(0)エミュレータを実行、またはデバイスを接続します。

(1)VS Codeの右下に対象デバイスが表示されていることを確認します。(赤く囲んでいる部分)

f:id:kentei0715:20180309004227p:plain

 

(2)キーボードのF5キーを押すか、「デバッグ > デバッグの開始」を呼び出します。

(3)アプリが起動すると、以下の画面がエミュレーター(またはデバイス)上に表示されます。

f:id:kentei0715:20180309004532p:plain

+ボタンをポチポチおすと、カウントが増えていきます。

とりあえずアプリの起動はここまで!!

 

3. Hot Reloadの動作確認

起動中のアプリを止めずに、コードの更新を反映するHot Reload機能の動作を確認してみましょう。

 

(1) VS Code上でlib/main.dartファイルを開きます。

(2)93行目あたりにある「You have pushed the button this many times:」という文字列を「You have clicked the button this many times:」に変更します。

(3)「停止」ボタンは押さずに、保存を呼び出すか、Hot Reloadボタン(緑色の円形の矢印ボタン)を押してください。

f:id:kentei0715:20180310001238p:plain

(4)実行中のアプリで文字列が更新されていることを確認してください。

 

f:id:kentei0715:20180310001540p:plain

 

と、ここまでが今日の説明。次回は小規模なアプリを作りつつ、Flutterの概念を学んでいくようです。

最初に述べた通り、私が訳した結果については、続きからの形で隠しておきます。

 

以上です。

2018/3/10 賢帝俊来

 

以下、日本語訳です。(間違っていても責任はとれませんのでご容赦)

 

動作テスト

本ページでは、Flutterの動作テストの方法を説明する。提供するテンプレートから新しいFlutterアプリを作り、それを動かし、
HotReloadによる変更の仕方を学ぶ。

Flutterはフレキシブルなツールキットなので、Flutterアプリケーションの作成、ビルド、実行のために最適な開発ツールを選択することができる。

(VS Codeで説明)
VS CodeはFlutterの実行とデバッグをサポートする軽量なエディタである。

◆新規アプリケーションの作成
(1)VS Codeを起動する
(2)「表示 > コマンドパレット」を呼び出す
(3)「flutter」と入力し、Flutter: New Projectアクションを選択する
(4)プロジェクト名(例:myapp)を入力し、Enterを押す。
(5)プロジェクトを配置する場所を指定し、青いOKボタンを押す。
(6)プロジェクトの作成が続行され、main.dartファイルが表示されるのを待つ。

上記の命令は、Materialコンポーネントを利用したシンプルなデモアプリを含んだmyappと呼ばれるFlutterプロジェクトディレクトリを作成する。

プロジェクトディレクトリでは、アプリケーションのコードはlib/main.dartに存在する。

◆アプリの実行
(1)対象デバイスがVS Codeの右下で選択されていることを確認する
(2)キーボードのF5キーを押すか、「デバッグ > デバッグの開始」を呼び出す
(3)アプリの起動を待つ
(4)すべてが動作している場合、アプリをビルドした後、デバイスまたはエミュレーターでスターターアプリが表示される


◆Hot Reload動作確認
Flutterはアプリを再起動状態にしたりロスト状態にしないで、動作中のアプリのコードを更新する機能であるhot reloadで高速な開発サイクルを提供します。単にソースコードに変更を与え、IDEコマンドラインツールにhot reloadすること指示し、シミュレーターやエミュレーター、デバイスの変更を確認する。

(1)任意のDart Codeエディタでlib/main.dartファイルを開く
(2)文字列を以下のように変更する
'You have pushed the button this many times:'
→'You have clicked the button this many times:'

(3)「停止」ボタンは押さずに、アプリを動かし続ける。
(4)保存を呼び出すか、Hot Reloadボタン(緑色の円形の矢印ボタン)を押すことで変更を確認する
(5)すぐに実行中のアプリで文字列の更新が確認できるはず


次のステップ
小規模なアプリを作成することで、Flutterのコンセプトを学んでいこう