Quo vadimus?〜CustomRenderObjectの話 最終話

2023/08/16に公開

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

書きかけです(>_<) 勉強会用に公開、随時、書き上げていきます。

そしてどこに行くのか

最終話は新しいサンプルアプリではなく、前回紹介したDailyをもう少し詳しくみていく。

第3回の"Riverpodとか使わないの?"でも触れたが、
The History of Everythingは、「Flutter初」のアプリである。
当然そこに、「Flutterもっと使いよくするために作りました!」というPackageはない。
いわば「素」のFlutterでできている、といっていい。
私は今回、The History of Everythingをまずreduction(減築)し、
その過程でFlutter3に適合させた。
これはかなり大きな変化だったと思う。
だけれど、続くapplication(応用)は、「家具の配置を変えた」ぐらいの変更に過ぎない。
改築はしていない。

ここから、Flutterの進化に見合う改造を加えていくのは、
正直、私の手には余る。
だからこれはあくまで、だれかの参考にればいいなと思うSampleアプリ集、であって、
一つのPackageとして責任を持って世の中に送り出す、というレベルの話ではない。

とまれ、最終話としてここで、codeを今一度読み直し、
わかったこと(少ない)、わからなかったこと(すごくたくさん)
やりたかったができなかったこと(たくさん)などを再確認したい。
画面にコードを貼ると長くなりすぎるので、GitHubを参照していただきたい。
https://github.com/dongri727/daily-timeline

main.dart (StatelessWidget)

すべの始まりはここ。40行に満たないシンプルなfileだ。
特徴はBlocProviderでwrapされていることだろう。
これはもちろん、RiverpodのProviderでも、ProviderのProviderでもなく、
Blocにかかわる何かのPackageを使っているわけでもない。
ただ、そういう名前のfileに跳んでいるだけ。
命名は私ではない。
ちなみにfile名は、できるだけシンプルにしている。
コピペして使うときに、いちいちプロジェクト名に合わせて差し替える手間を省きたいから。

bloc_provider.dart (InheritedWidget)

50行に満たないこのfileには、ずいぶん手こずった。
main.dartに呼ばれて最初に走るfileでありながら、
さまざまなDataを集積して描画の大元を作るべきdistanceを読み込んでいる。
distanceで扱うデータは多岐にわたっていて、起動の段階ではnullだらけだ。
こんなに早々呼ばれてもまともな返事できませんよ、という感じ。
黄色の警告を量産しているのは、この段階でdistanceが呼ばれることへの対応だ。
だからBlocProviderをmain.dartで呼ばずにすます方法も考えたが、
私の手には負えなかった。

color.dartとttf_fomat.dart

color.dartはあまり意識に上らないまま放置されてきたのだが
要らないか?
要らない気がしてきた。

tff_format.dartは私がふだん使っているTextFormFieldをclass化したものなので、
このコードの中で唯一、「加えたもの」になる。
menu.dartで直書きするか検索そのものを止めるなら、このfileも捨ててよい。

directory: menu

130行ほどの、MenuPageに係わるDataを集積している。
まず、assetsのmenu.jsonを読み込む。
ここに、主画面のどの部分をどれぐらいの縮尺で描画するかが指定されている。

MenuPageにもイラストのanimationがふんだんにあり、
複雑な動きをしていたcodeがまだ消しきれずに残っている気がする。

こちらも130行ほど。
BlocProviderを介して
distanceが集積した、主画面で何を描画するか、というDataを受け取り、
navigateToDistanceとしてdistance_widgetに渡す設定をしている。

menu_data.dartから、MenuPage自体で何をどう表示するかも受け取っている。

このfileが直接担っているUIはappBarと検索窓とボタン。
主画面への遷移情報は、tail[]としてmenu_section.dartに渡される。

60行あまりの小さなfile。
menu.dartから受け取ったnavigateToDistanceが埋め込まれたListTileを生成。

directory: distance

utile.dart

60行ほど、基本的に色指定に関するclass。
jsonのDataを読みながら複雑にグラデーションがかかっていた名残でがある。
消せるものがあるかもしれないが、あまり手が回っていない。
なぜだかTapTargetというclassが混ざっている。
吹き出しやイラストにタップするとフォーカスされる機能の何か(よくわからない)

ticks.dart

180行あまりの、目盛り表示領域に関するclass。
領域の位置指定、背景色とそのグラデーション、
背景色に対応した文字色、
目盛りのサイズ(長いもの短いもの、その間隔)
ピンチイン・アウトで目盛りの間隔が広がったとき、
どのように表示の数字を変更していくか、
などを規定している。

そもそも、ここだけで使えるかなぁ、と思っていた、数ヶ月前の私は甘かった。

entry.dart

130行

(前後の事象までの距離を算出・表示の指定)

distance.dart

980行

(entryとdistanceの関係がイマイチわからない)

widget.dart (StatefulWidget)

280行

render_widget.dart (LeafRenderObjectWidget)

とうとうやってきました、CustomRenderObjectの本丸。
550行

旅のおわり世界のはじまり

Flutter大学

Discussion