Flutter インタラクティブ機能の追加のチュートリアル
ken1flanこれについてやりながらメモしていきます。
レイアウトのチュートリアルで作ったアプリに続けて作るようです。
どんなことをやるのか
星をポチポチすると、お気に入りできたり、外せたり…というような操作ができるようにします。
それを通して↓のようなことを体感します。
- タップへの応答
- カスタムウィジェットの作り方
- ステートレスとステートフルウィジェットの違い
ken1flanステートレスとステートフルウィジェット
ステートレス
Icon、IconButton、Textなど。概観が変わらないもの。
ステートフル
Checkbox、Radio、Slider、InkWell、Form、TextFieldなど。概観が変わるもの、内部の状態が変わるもの。
InkWellはタッチすると、びにょ〜ん、とするアニメーション？
Formは…htmlのformっぽい…。
どちらもあとで出てくるであろ…。
効果もパーツになっているのはおもしろいなあ。
ken1flanカスタムステートフルウィジェット
StatefullWidgetのサブクラスと、Stateのサブクラスから作られる。
Get StartedのMy first appにあったな、そういえば。
このチュートリアルで、お気に入りウィジェットを作るとのこと。
ken1flanステップ0：準備をする
あ…すげぇ。このチュートリアルからでもすぐに作れるようになってる！
ken1flanステップ1：ウィジェットの状態を管理するオブジェクトを決定する
今回はお気に入りの★と数を表示しているウィジェットに状態管理を任せる模様。
ただし詳細を読めと書いてあった記事では…
アプローチには3つあり…
- ウィジェット自身が管理する
- 親ウィジェットが管理する
- ミックス
ユーザデータのときには親ウィジェット、視覚効果ならウィジェットで…
迷ったら、親ウィジェットに、だと。
見た目が変わるウィジェットでも、親が状態を管理するならステートレス？
今回の場合は…
★アイコンやお気に入り数それぞれではなく、2つを統括した親ウィジェットになるのかな？
ken1flanステップ2：StatefulWidgetのサブクラス
…どこに定義するんだ…？
というか、別ファイルにしたいが、まぁ、そのうちに出てくるだろ。
まだ、未定義のものが多いので、ビルドはまだっぽい。
ken1flanステップ3：サブクラスの状態
まだまだ、未定義のものが多いので、ビルドはまだっぽい。
しかし、メソッドの中身が長くて、狭いディスプレイだとツライ…。
ビューだから仕方ないのだろうけど…。
…縦置きモニタがほしいのは、このあたりの作業をするから…？
ken1flanステップ4：ステートフルウィジェットをウィジェットツリーに接続します
ここまでで作ってきたウィジェットを登録する！
★アイコンとお気に入り数を表示していたところを置き換えるだけ。
できた。
ken1flan問題？
うまくいかなかったときに見れるところが書いてある…！
FavoriteWidgetの置き場、下の方でよかったっぽい。
ken1flanこの先、なんか読んだことあるなと思ったら、前の方にリンクがあって、事前にたどってしまったのだった…。
じゃあ、おしまいにするか。