Timeline-Firebase〜CustomRenderObjectの話 3

2023/08/14に公開

https://zenn.dev/flutteruniv_dev/articles/92ad1ec5c7f463

歩きはじめる

Sampleアプリの第二弾はTimeline-Firebaseという。
年表(時間的距離)を表すアプリに戻っている。
リリースも公開もしていないが、codeは全部見ていただける。
firebase関連のkeyなどがGitHubにさらされてしまっているという
いかにもいかにもアマチュアな失態もあるが、
firebase側を無効にしたので、放置している。
だから私と同程度にアマチュアにとっては逆に
ああ、ここにinfo.plistを置くんだな、みたいな見本にはなるかもしれない。
https://github.com/dongri727/timeline-firebase

視点1、何を放棄し、何を残したか

基点を前回のDistanceに置くと、
ファイル構成はほとんど変わっていない。
減ったのは、assetsのjson-fileが1枚。
増えたのは、MenuPageで使うためのTextFormFieldを設定したfile。
MenuPageに直書きしても構わない。

構成は変わっていないが、行数は相当減っている。
今回はようやく、render-objectに切り込んでいる。
といったって、やはり私は「codeを書いた」ではなく「codeを消した」にすぎない。

主画面の背景色とグラデーション、
これに連動して変わる目盛りとheaderの背景色、グラデーション、
前後のItemにWarpするボタン、を放棄した。
残ったのは、伸縮目盛りとBubble(label)、つまり最低限だ。

いや、残念ながらMenuPage周りが残っている。
ただ今回は、menuをなぜ消せないのか、少しわかってきた。
主画面は138億年前から現代までの長い長い年表である。
そのどこの部分をどれぐらいの縮尺で描画するか、
その指定がメニューページで行われる。
指定の選択肢はmenu.jsonに記述されている。
だから、MenuPageは捨てることができない。

だがその線が見えたおかげで、捨てはしないが変えることはできることもわかった。

視点2、何を変えたか(1)


ということで、変えたことの第一はMenuPageのデザインと機能だ。
DistanceのMenuPageは、The History of Everythingをほぼ踏襲している。
Timeline-Firebaseでは、カードの展開というムダな挙動を捨てて、
描画をどの時代にフォーカスするか、単純なTileで示した。
このTileはmenu.jsonでの指定に応じて枚数を増減できる。
この変更に伴って、menu_section.dartがstatefullからstatelessに変わっている。

riverpodとか使わないの?

statefullWidgetというワードが出たついでに、注記しておく。
今回のシリーズでriverpodなど、話題の状態管理法は出てこない。
理由は簡単で、The History of Everythingが、そもそもriverpod以前の
Flutter最初期のアプリだということ。
Flutter3に適合させるためだけにも相当神経を使ったのに、
この上、何かそれらしい状態管理法に適合させる、という力は
残念ながら今の私にはない。
この伸縮時間軸を使ってみよう、と思った皆さんが、
それぞれの状況に応じて適用していただければいいと思う。

視点2、何を変えたか(2)

もっと大きな変更はfirebaseとの接続と検索機能だ。
jsonファイルではなく、firebaseのデータを読み込んで表示している。
入力機能を加えれば、ユーザーが自由に表示内容を追加できるようになる。

年表は過去を表示するもの、と思われるかもしれないが、
この伸縮時間軸なら、千年後でも計画できます。

視点3、動作は安定しているか

少なくともsimulatorではスムーズに動く。
null safty関連の黄色い警告は相変わらずあちこちに出るが、放置している。
menu.jsonでの描画領域指定が難しい。今もまだ良く理解できない。

視点4、コピペ「だけ」で使えるか

使えない。
firebaseとの接続が必要だから。
main.dart、info.plist、pubspec.yamlなどは通常通りの設定になる。
firebase側には、表示場所になるintのDataと、
表示内容になるStringのDataが必要だ。

下の画像中央で、yearというfirebaseのDataをtimelineEntry.startに渡している。
なぜstartかといったら、ピンポイントだけでなく、継続期間の始点と共有のcodeだからだ。
この少し下で、nameをtimelineEntry.nameに渡している。
timelineEntryとは、表示に係わる情報を一括して扱うListになっている。

ここで指定しておけば、Blocを通じてrender_widgetに渡されるので
あとはお任せ、ということになる。

次は何を目指すか

The History of Everythingは、限定的な年表だ。
だから、同じ年に何件も事象が並ぶということはない。
なので最小目盛りは1年だ。
けれど、歴史時代の事象なら、年月日での表示が必要になるだろう。
次はそこを工夫したい。

https://zenn.dev/flutteruniv_dev/articles/86fac3ffb8229f

Flutter大学

Discussion