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 賢帝俊来