SliverAppBarはなぜ変化する？~ Sliverを内側から理解する ~

Flutter Kaigi 2024

Transcript

1. SliverAppBarはなぜ変化する？ ~ Sliverを内側から理解する ~ Aoi Umigishi Flutter Kaigi 2024
2. SliverAppBarの例
3. SliverAppBarがスクロールに応じて 大きさが変化するのはなぜ？ 疑問 仕組みを理解したい！
4. 解決方法 Flutterの仕組みを理解するには？ 内部コードを読む！
5. 本発表で話すこと Sliver 並びにSliver App Bar について、 内部コードから理解した仕組みの解説
6. Sliver とは RenderSliverプロトコルによって 描画されるWidget ※ プロトコル ＝ 画面描画の仕組み
7. 画面描画プロトコルの例 ・RenderSliver プロトコル ・RenderBox プロトコル ※ RenderBox,RenderSliverは 　 RenderObjectのサブクラス
8. RenderObjectとは Widgets Elements Render Objects Flutterの主要な3つのツリー
9. Widgets Elements Render Objects Flutterの主要な3つのツリー 構成要素の設定値を管理するもの RenderObjectとは
10. Widgets Elements Render Objects Flutterの主要な3つのツリー 構成要素の実体を管理するもの RenderObjectとは
11. Widgets Elements Render Objects Flutterの主要な3つのツリー 画面描画を管理するもの RenderObjectとは
12. RenderObjectの主要なメソッド ・performLayout ・paint ・describeSemanticsConfiguration
13. RenderObjectの主要なメソッド ・performLayout ・paint ・describeSemanticsConfiguration サイズと位置を決定する
14. Constraints go down. Sizes go up. Parent sets position. Understanding constraintsより https://docs.flutter.dev/ui/layout/constraints サイズと位置を決定する考え方
15. 画面描画プロトコルの例 ・RenderSliver プロトコル ・RenderBox プロトコル
16. サイズと位置の決定の例 85 60 20 30 子 1 子 2 250 このレイアウトの決定の流れを見ていく
17. 親から幅と高さの制約の指定 250 85 サイズと位置の決定の例
18. 子1に制約を伝える 240 75 上下左右5の Padding サイズと位置の決定の例
19. 子1のサイズの決定 240 75 子 1 20 サイズと位置の決定の例
20. 子2に伝える制約の決定 240 75 子 1 サイズと位置の決定の例 55 20
21. 子2のサイズの決定 90 75 サイズと位置の決定の例 30 子 2 子 1 20
22. 位置の決定 90 75 サイズと位置の決定の例 30 子 2 子 1 20
23. 自身のサイズの決定 60 サイズと位置の決定の例 30 子 2 子 1 20 250
24. 画面描画プロトコルの例 ・RenderSliver プロトコル ・RenderBox プロトコル
25. RenderSliver プロトコル SliverConstraints と SliverGeometry による、 スクロールに対する画面描画プロトコル
26. 画面描画プロトコルの例 ・RenderSliver プロトコル ・RenderBox プロトコル → 中身を全てレイアウトし描画 → 画面に映る部分のみ描画
27. RenderSliver プロトコル 描画範囲 (Viewport) SliverList SliverGrid SliverList サイズ計算されない 描画される
28. SliverConstraints スクロール方向や量 画面描画範囲に対するオフセット量
29. SliverConstraints ・RenderSliver ・RenderBox
30. 描画サイズ 描画位置 SliverGeometry 描画されるか否か
31. SliverGeometry ・RenderBox ・RenderSliver
32. RenderSliver プロトコル Viewport SliverList Child SliverConstraints SliverConstraints
33. RenderSliver プロトコル Viewport SliverList Child SliverGeometry SliverGeometry
34. RenderSliver プロトコルの利用例 - ListView - GridView - CustomScrollView - etc …
35. 例：CustomScrollView
36. 例：ScrollView
37. 例：ScrollView
38. 例：ScrollView Viewportにスクロール位置を伝えている
39. 例：ScrollView スクロール位置
40. 例：ScrollView スクロール位置
41. SliverAppBarはなぜ変化する？
42. SliverAppBarはなぜ変化する？ SliverConstraintsから、大きさを計算 animation value
43. SliverAppBarはなぜ変化する？ SliverGeometoryを更新
44. SliverAppBarはなぜ変化する？ スクロール方向、量によってアニメーションを開始
45. Flutter 3.24で追加されたSliver SliverResizingHeader PinnedHeaderSliver
46. PinnedHeaderSliver PinnedHeaderSliver class API ドキュメントより https://api.flutter.dev/flutter/widgets/SliverResizingHeader- class.html
47. SliverResizingHeader SliverResizingHeader class API ドキュメントより https://api.flutter.dev/flutter/widgets/SliverResizingHeader-class .html
48. まとめ SliverAppBarがスクロールに応じて 大きさが変化するのはなぜ？ スクロールに応じた画面描画の仕組み (RenderSliver プロトコル)があるから !
49. ご清聴ありがとうございました！ Aoi Umigishi フリーランスエンジニア SNS等
50. 参考文献 【Flutter】Sliverの仕組みを理解する https://zenn.dev/3ta/articles/5a439a8f0c4b62 Flutter API reference documentation https://api.flutter.dev/ Understanding constraints https://docs.flutter.dev/ui/layout/constraints