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