Flutterを体験しよう4-2 ~Flutterでアプリを作ってみる2~

 前提記事

kenteiblog.hatenablog.com



 

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

Write Your First Flutter App - Flutter

 

1ページが長いので、今日は第2弾ということで最後まで読み進めます。

 

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

 

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

 

自分のFlutterアプリを書いてみよう

ドキュメント上は以下の7つのステップに分かれています。

  • Step1: Flutterアプリの開始点を作成
  • Step2: 外部パッケージを使用
  • Step3: Stateful Widgetを追加
  • Step4: 無限にスクロールするリストビューを作成
  • Step5: 対話性を追加
  • Step6: 新しい画面への遷移
  • Step7: テーマを利用しUIを変更

本記事では、Step5~Step7を説明していきます。(上記の青文字部分)

 

 

1. Step5: 対話性を追加

Step4までで、名前の一覧を表示するという動きを実現できました。

次は、対話性(インタラクティブ)を実装していきます。
先に結論から述べてしまうと、以下ができるようになります。

  • 一覧の各行にハートマークが表示され、押すことでONOFFを切り替えられる。
  • 上記のONOFFはスクロールして戻ってきても残ったままになっている。(状態を保存している)

 

(1) 以下のように、lib/main.dartを修正します。(コードの説明はコメントで書いています。文頭の番号は実装順と同じです)

 

flutterアプリを作ってみたい5-1

 

(2)Hot Reloadして以下のような表示となります。

 

f:id:kentei0715:20180325121356p:plain

 

ハートアイコンを押すことで、ON(ハートが赤い状態)とOFF(ハートが白抜きの状態)を切り替えることができます。この状態は、無限スクロールを繰り返した後でも、消えることなく残っています。

 

2. Step6: 新しい画面への遷移

 

ここでは、新しい画面への遷移の方法を示します。

また、Flutterでは画面のことを「route(ルート)」と呼ぶらしいので、説明上「ルート」といったら画面のことと解釈してください。

 なお、先にできることの結論から言ってしまうと、以下のとおりです。

  • アプリケーションバーの右方にボタンを設置。押すと新ルートに遷移できる
  • 新ルートではお気に入り登録した名前(ハートマークON)の一覧が表示される

 

(1) 以下のように、lib/main.dartを修正します。(コードの説明はコメントで書いています。文頭の番号は実装順と同じです)

 

flutterアプリを作ってみたい6-1

 

(2)Hot Reloadして以下のような表示になります。

 

f:id:kentei0715:20180325122920p:plain

アプリケーションバーの右のほうにあるアイコンを押すと、画面が遷移してお気に入り一覧が表示されます。
上記画像のとおり「HeadBird、SharpEast、WebSpread」がお気に入り登録されているので、遷移後もそれらが表示されています。

なお余談ですが、新ルートに表示されている戻るボタン(←ボタン)は特に実装しなくても、Navigatorがよしなにやってくれるものです。

 

3. Step7:テーマを利用しUIを変更

 

一応、前のステップまででアプリの動作は出来あがっています。

最後はUIの見た目を変えてみましょうという話です。おまけ的な話ではあるので、軽く読んでいただければと思います。(修正も微量です)

 

(1) 以下のように、lib/main.dartを修正します。

 

flutterアプリを作ってみたい7-1

 

(2)Hot Reloadすると以下のような表示になります。

 

f:id:kentei0715:20180325123730p:plain

 

前ステップまでの画像と比較してみてください。アプリケーションバーの部分の背景色が青色から白色に変わっているはずです。

 

 

 

4. 終わりに

ということで、前回記事も含めてStep1~Step7まで見てきました。
ここまでで以下のことが体験できました。

  • Flutterアプリの地盤からの開発
  • Dartコードで記述
  • 外部のサードパーティ製のライブラリを利用
  • より速い開発サイクルのためのHotReloadを利用
  • Stateful Widgetの実装、およびアプリへの対話性の追加
  • 遅延ロードの実装、および無限のスクロールの実現
  • ルートの作成と遷移ロジックの実装
  • テーマ利用によるアプリのUI表示の変更

なかなか盛沢山でしたね(>_<) 

 

と、ここまでが今日の説明。次回は体験の最終回です。

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

(日本語訳もかなり怪しくなってきました…w)

 

以上です。

2018/3/25 賢帝俊来

 

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

 

・Step5: 対話性を追加

本ステップでは、各行にタップ可能なハートアイコンを追加する。ユーザーが一覧の項目をタップすると、その「お気に入り」状況を切り替え、保持したお気に入りのセットから追加されたり削除されたりする。


1. RandomWordsStateクラスに_savedという名のSetを追加しなさい。このSetにはユーザーのお気に入りであるペア文字を格納する。適切に実装されたSetは重複を許さないためListより優先される。

(省略)

2. _buildRow関数で、ペア文字がお気に入りに追加されていないことを確認するためのalreadySavedチェックを追加しなさい。

(省略)

3. さらに_buildRow()で、お気に入りを有効にするためにListTilesにハート型のアイコンを追加しなさい。この後で、ハートアイコンと対話するための機能を追加していく。

以下のハイライトされた行を追加しなさい。

(省略)

4. アプリを再起動しなさい。それぞれの行に空のハートアイコンが見れるはずだが、それらはまだ応答しない。

5. _buildRow関数でハートをタップ可能にしなさい。もし文字項目がすでにお気に入りに追加されているなら、再度ハートをタップすることでお気に入りから解除する。ハートがタップされたとき、_buildRow関数はsetState()を呼び出し、状態が変化したことをフレームワークに伝える。

ハイライトされた行を追加しなさい。

(省略)


ヒント:Flutterのリアクションスタイルフレームワークでは、setState()を呼び出すことはStateオブジェクトのbuild()メソッドの呼び出しの引き金になり、結果としてUIを更新することになる。


アプリをHotRelodする。どの行でもお気に入りの切り替えのためのタップが可能になっているだろう。行をタップするとハートアイコンから発生するインクスプラッシュアニメーションが生成されることを確認しなさい。


問題
もしアプリがうまく動かない場合、以下のリンクのコードを使用することで正常に戻すこと。
・lib / main.dart


・Step6: 新しい画面への遷移

このステップでは、お気に入りにしたものを表示する新しい画面(Flutterではルートと呼ぶ)を追加する。ホームルートと新ルート間の遷移について学ぶ。

Flutterでは、ナビゲータはアプリのルートを含んだスタックを管理する。ルートをナビゲータのスタックにプッシュすると、そのルートに表示を更新する。ナビゲータのスタックからルートをポップすると、前のルートに表示を戻す。

1. RandomWordsStateクラスのbuildメソッドで、アプリケーションバーに一覧アイコンを追加しなさい。ユーザーがそのアイコンをクリックすると、お気に入りの項目を含む新ルートがナビゲータにプッシュされ、アイコンを表示する。

ヒント:ウィジェットのプロパティは単一のウィジェット(子)で扱い、actionのようなほかのプロパティは角括弧([])で示したようにウィジェットの配列(子達)で扱う。

(省略)

2. _pushSaved()関数をRandomWordsStateクラスに追加しなさい。

(省略)

アプリをHotReloadしなさい。アプリケーションバーに一覧アイコンが現れる。_pushSaved関数がまだ空なので、それをタッピングしてもまだ何も存在しない。

3.ユーザーがアプリケーションバーの一覧アイコンをタップすると、ルートが構築され、ナビゲータスタックにプッシュする。このアクションは画面を新しいルートへ変化する。

新しいページのコンテンツは無名関数のMaterialPageRouteのビルダープロパティで構築される。

以下のハイライトされたコードで示したようにNavigator.pushへの呼び出しを追加しなさい。これにより、ナビゲータスタックにルートをプッシュする。

(省略)

4. MaterialPageRouteとそのbuilderを追加しなさい。ここでは、ListTile行を生成するコードを追加しなさい。ListTileのdivideTiles()メソッドは各ListTileの間に水平方向の間隔を追加する。divided変数は便利関数であるtoList()関数によって一覧に変換されたsその行を不変な状態で保持する。

(省略)

5. builderプロパティは「Saved Suggestions」という名の新ルートをアプリケーションバーに含んだScaffoldクラスを返す。新ルートのbodyはListTiles行を含むListViewでできている。各行は仕切り線で分割されている。

以下のハイライトされたコードを追加しなさい。

(省略)

6. アプリをHotReloadしなさい。いくつかの項目をお気に入りにし、アプリケーションバーの一覧アイコンをタップしなさい。新ルートをお気に入り群を含んで表示する。ナビゲーターがアプリケーションバーに「Back」ボタンを追加することに注意しなさい。Navigator.popは明示的に実装する必要はありません。ホールルートに戻るためにbackボタンをタップしなさい。


問題
もしアプリがうまく動かない場合、以下のリンクのコードを使用することで正常に戻すこと。
・lib / main.dart


・Step7: テーマを利用しUIを変更

この最後のステップでは、アプリのテーマを扱う。テーマはアプリの見た目や印象をコントロールする。実機やエミュレーターに依存するデフォルトテーマを使うことも、自分のブランドを反映するようにテーマをカスタマイズすることもできる。

1. ThemaDataクラスを設定することによって、アプリのテーマを簡単に変更できる。アプリは現在デフォルトのテーマを利用しているが、原色を白に変更する。


以下のハイライトされたコードをMyAppクラスに追加し、アプリのテーマを白色に変更しなさい。

(省略)

2. アプリをHotReloadしなさい。アプリバーも含めて背景全体が白色に変わったことに気づくでしょう。

3. 読者の練習として、ThemaDataを利用して、UIの他の様子を変更しなさい。MaterialライブラリのColorsクラスは多くの利用可能な色定数を提供するし、HotReloadによってUIをすぐに簡単に試すことができる。

問題
うまく動かないようなら、以下のリンクのコードを利用して、最終的なアプリのコードを確認しなさい。
・lib / main.dart


・上手にできました。

AndroidiOSの両方で動く対話性を含んだFlutterアプリを作成した。このコードラボでは、

・何もないところからFlutterアプリを作成した
Dartコードで書いた
・外部のサードパーティ製のライブラリを利用した
・より速い開発サイクルのためにHotReloadを利用した
・Stateful Widgetを実装し、アプリに対話性を加えた
・遅延ロードを作って、無限のスクロールをListViewとListTileで表示した
・ルートを作成し、ホームルートと新ルートの遷移ロジックを追加した
・テーマを使うことでアプリのUIの見た目を変えることについて学んだ


次のステップ

もっと学ぼう