前回は、Stateful Widgetを使って、無限にスクロールするリストを作りました。こういうやつですね。
codelabsの続きを進めます。
リストにアイコンを付ける
_RandomWordsStateにSet型の変数_savedを一つ追加します。ここに「お気に入り」の単語を保存するためです。Listでもいいのですが、お気に入りはユニークなので、Setのほうがいいということですね。
_suggestionsはListなので[]で初期化していますが、_savedはSetなので()で初期化しています。
次にリストの各行ごとにお気に入りとして保存されているかを保持するようにします。_buildRow関数に変数alreadySavedを追加します。_savedに英単語が含まれているかをチェックしてboolで返す感じですね。
リストの各行にアイコンをしましょう。ListTile Widgetにtralingプロパティを追加します。これは行の最後に表示するためのプロパティです。ここにIcon Widgetを追加します。
Icon Widgetで、
- alreadySavedがtrue、つまり、お気に入りとして保存されているならばお気に入りアイコン（♥）、falseならば白抜きのお気に入りアイコン（♡）を表示
- 色はお気に入りならば赤、そうでなければ指定なし
としています。
ホットリロードします。
お気に入りを表すハートマークのアイコンが各単語の横に表示されましたね！ただし、まだタップしても何も反応しませんので、このあと実装します。
お気に入りをタップできるようにする。
ではお気に入りをタップして保存、アイコンが変化、再度タップで解除、アイコンが変化、というトグル処理を追加します。タップしたタイミングでお気に入りの状態を変化させます。
_buildRow関数にタップしたときのアクションを追加しましょう。onTapプロパティを追加します。
onTapプロパティにはタップされたときのアクションを行うコールバックを指定します。お気に入りの状態を見て、お気に入り状態なら解除、そうでなければお気に入りにする感じですね。_savedの状態を変化させます。
ただし、これだけでは画面は変わりません。画面の書き換えを行うには、Stateクラスのbuildメソッドを実行して再描画を行う必要があります。このような場合、StateクラスではsetState()メソッドを実行して状態を変更するとbuild()メソッドが再実行されて画面の再描画が行われるようです。
先程追加したお気に入りのトグル処理の上に1行追加して、setStateと入力すると雛形が標示されるので挿入します。
この中にさきほどのトグル処理の5行を移動します。
タップ処理なので状態は当然変化することを考えればsetStateを先に入力してからトグル処理を追加すればいいと思いますが、噛み砕いて理解するために逆にしてみました。
ではホットリロードします。お気に入りアイコンをタップしてみましょう。
ちゃんとできていますね！
まとめ
アクションにより状態の保存および画面上での反映ができるようになりました。次回も引き続きcodelabsを勧めて、画面遷移をやります。
