書きかけです(>_<) 勉強会用に公開、随時、書き上げていきます。
そしてどこに行くのか
最終話は新しいサンプルアプリではなく､前回紹介したDailyをもう少し詳しくみていく。
第３回の"Riverpodとか使わないの？"でも触れたが、
The History of Everythingは、「Flutter初」のアプリである。
当然そこに、「Flutterもっと使いよくするために作りました！」というPackageはない。
いわば「素」のFlutterでできている、といっていい。
私は今回、The History of Everythingをまずreduction（減築）し、
その過程でFlutter3に適合させた。
これはかなり大きな変化だったと思う。
だけれど、続くapplication（応用）は、「家具の配置を変えた」ぐらいの変更に過ぎない。
改築はしていない。
ここから、Flutterの進化に見合う改造を加えていくのは、
正直、私の手には余る。
だからこれはあくまで、だれかの参考にればいいなと思うSampleアプリ集、であって、
一つのPackageとして責任を持って世の中に送り出す、というレベルの話ではない。
とまれ、最終話としてここで、codeを今一度読み直し、
わかったこと（少ない）、わからなかったこと（すごくたくさん）
やりたかったができなかったこと（たくさん）などを再確認したい。
画面にコードを貼ると長くなりすぎるので、GitHubを参照していただきたい。
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
menu_data.dart
130行ほどの、MenuPageに係わるDataを集積している。
まず、assetsのmenu.jsonを読み込む。
ここに、主画面のどの部分をどれぐらいの縮尺で描画するかが指定されている。
MenuPageにもイラストのanimationがふんだんにあり、
複雑な動きをしていたcodeがまだ消しきれずに残っている気がする。
menu.dart (StatefulWiget)
こちらも130行ほど。
BlocProviderを介して
distanceが集積した、主画面で何を描画するか、というDataを受け取り、
navigateToDistanceとしてdistance_widgetに渡す設定をしている。
menu_data.dartから、MenuPage自体で何をどう表示するかも受け取っている。
このfileが直接担っているUIはappBarと検索窓とボタン。
主画面への遷移情報は、tail[]としてmenu_section.dartに渡される。
menu_section.dart (StatelessEidget)
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大学はFlutterエンジニアに特化した学習コミュニティです！ 初心者から中上級者まで幅広く在籍し、切磋琢磨しています！ 入会をご希望の方はこちらから→ flutteruniv.com
Discussion