Bigger on the Inside — Flutter scrolling explained

How does scrolling work in Flutter?
Is there more than one coordinate system?
The Great Scrollables Refactor: legend or reality?
Can you alter the laws of physics?
What the hell is a “sliver”?
Bigger inside what?

Join us to get a viewport to another dimension, where we’ll scroll past the answers to the above enigmas (and more)!

---

Presented with Eugenio Marletti at MCE in Warsaw on the 5th of June 2018.

---

Keynote source and PDF: https://www.dropbox.com/sh/1u1wam0dgoc0n1t/AACX9RxrQ7rTnzijL_yECqkla?dl=0

Transcript

1. ON THE INSIDE BIGGER FLUTTER SCROLLING EXPLAINED Sebastiano Poggi Eugenio Marletti
2. A little disclaimer
4. ScrollController ScrollPosition ScrollContext ScrollDirection ScrollBehavior ScrollConfiguration ScrollNotification ScrollStartNotification ScrollUpdateNotification OverscrollNotification UserScrollNotification ScrollEndNotification Scrollbar RefreshIndicator GlowingOverscrollIndicator SliverAppBar RenderBox Viewport ShrinkWrappingViewport RenderAbstractViewport RenderViewportBase RenderViewport RenderShrinkWrappingViewport ScrollActivity IdleScrollActivity HoldScrollActivity DragScrollActivity BallisticScrollActivity DrivenScrollActivity ScrollHoldController ScrollDragController NestedScrollView SingleChildScrollView PageView ScrollView BoxScrollView ListView GridView CustomScrollView SliverPadding SliverFillRemaining SliverPersistentHeader SliverToBoxAdapter SliverMultiBoxAdaptorWidget SliverList SliverFixedExtentList SliverGrid SliverFillViewport SliverPrototypeExtentList RenderSliver RenderSliverPadding RenderSliverSingleBoxAdapter RenderSliverToBoxAdapter RenderSliverFillRemaining RenderSliverMultiBoxAdaptor RenderSliverList RenderSliverGrid RenderSliverFixedExtentBoxAdaptor RenderSliverFixedExtentList RenderSliverFillViewport _RenderSliverPrototypeExtentList RenderSliverPersistentHeader RenderSliverScrollingPersistentHeader RenderSliverPinnedPersistentHeader RenderSliverFloatingPersistentHeader RenderSliverFloatingPinnedPersistentHeader Scrollable RenderObject BoxConstraints Size SliverConstraints SliverGeometry ViewportOffset ScrollMetrics ScrollPhysics BouncingScrollPhysics ClampingScrollPhysics AlwaysScrollableScrollPhysics NeverScrollableScrollPhysics Simulation BouncingScrollSimulation ClampingScrollSimulation AlwaysScrollableScrollPhysics NeverScrollableScrollPhysics
5. THE END
6. 37 MINUTES EARLIER...
7. SCROLLING
8. SCROLLING KEY FACTS: it’s everywhere it’s hard it’s very hard why?
9. SCROLLING Physical metaphor Effects Interaction patterns Multimodal navigation Accessibility expectations bounce, glow, … scrollbars, pull-to-refresh, … touch, D-pad, keyboard & mouse, …
10. SCROLLING PERFORMANCE IS HARD
11. SCROLLING PERFORMANCE IS HARD ABSTRACTIONS ARE HARD
12. SCROLLING PERFORMANCE IS HARD GOOD ABSTRACTIONS ARE HARD
13. SCROLLING PERFORMANCE IS HARD GOOD ABSTRACTIONS ARE HARD ListView RecyclerView
14. SCROLLING PERFORMANCE IS HARD GOOD ABSTRACTIONS ARE HARD ListView RecyclerView easy to use, classic use-cases, not customisable low-level, many things are customisable, harder to use
15. WHAT ABOUT FLUTTER?
16. DETOUR
17. HOW UI WORKS IN FLUTTER RENDER OBJECT time SCREEN PIXELS ELEMENT WIDGET WIDGET WIDGET Widgets map to Elements Elements update RenderObjects You deal with Widgets RenderObjects draw on screen build() build() build()
18. END OF DETOUR
19. SCROLLING IN FLUTTER Used to be different The Great Scrolling Refactor (2016)
20. SCROLLING IN FLUTTER Scrolling is just a “normal” layout Solid abstractions Self-contained No special machinery
21. SCROLLING IN FLUTTER Scrolling is still very complicated BUT you don’t need to see it Unless you’re a crazy elf
22. SCROLLING WIDGETS ListView RefreshIndicator PageView CustomScrollView
23. ListView
24. RefreshIndicator
25. PageView
26. CustomScrollView
27. ANATOMY OF A SCROLL
28. SCROLLABLE COMPONENT ANATOMY OF A SCROLL
29. SCROLLABLE COMPONENT INTERACTION CONTAINER CONTENTS ANATOMY OF A SCROLL
30. CONTENTS SLIVERS ANATOMY OF A SCROLL SCROLLABLE COMPONENT CONTAINER VIEWPORT SCROLLING INTERACTION
31. CONTAINER the easy bit™
32. CONTAINER Introducing Viewport It’s bigger on the inside
34. Display children at a specific offset Children are Slivers Viewport
35. Picks centre Sliver Centre Sliver is the anchor Viewport center
36. Viewport Picks centre Sliver Centre Sliver is the anchor center
37. center Viewport Picks centre Sliver Centre Sliver is the anchor
38. Viewport defines a scrolling axis Centre Sliver has absolute position Between [0, 1] Viewport center 0 1
39. Default configuration center center = children.first axisDirection = AxisDirection.down anchor = 0.0 Viewport 0
40. Viewports Viewport ShrinkWrappingViewport
41. INTERACTION the user-facing bit™
42. INTERACTION Widget: Scrollable It scrolls. Duh. ¯\_(ϑ)_/¯
43. INTERACTION Widget: Scrollable It scrolls. Duh. Handles gestures
44. INTERACTION ViewportBuilder Physics Controller SCROLLABLE
45. ScrollView SingleChildScrollView PageView INTERACTION SCROLLABLE
46. CONTENTS the esoteric bit™
47. DETOUR
48. RENDERBOX RenderObject for 2D Carthesian coordinates Basically a box with a size Internal coordinate system
49. max max
50. max max
51. max max
52. max max min min
53. min min max max
54. max min min max
56. 0,0 x,y
57. 0,0 x,y
58. END OF DETOUR
59. CONTENTS Viewports display slivers Slivers are “slices” of content RenderSliver is the main class Sliver widgets wrap RenderSlivers
60. H G F E D C B A S T U V W X Y Z axisDirection down
61. growth direction forward H G F E D C B A S T U V W X Y Z axisDirection down growth direction reverse
62. growth direction forward user scroll direction H G F E D C B A S T U V W X Y Z axisDirection down user scroll direction growth direction reverse
63. growth direction forward user scroll direction idle H G F E D C B A S T U V W X Y Z axisDirection down user scroll direction idle growth direction reverse
64. growth direction forward user scroll direction forward H G F E D C B A S T U V W X Y Z axisDirection down user scroll direction reverse growth direction reverse
65. growth direction forward user scroll direction forward J I H G F E D C B Q R S T U V W X Y axisDirection down user scroll direction reverse growth direction reverse
66. growth direction forward user scroll direction reverse J I H G F E D C B Q R S T U V W X Y axisDirection down user scroll direction forward growth direction reverse
67. growth direction forward user scroll direction reverse H G F E D C B A S T U V W X Y Z axisDirection down user scroll direction forward growth direction reverse
68. growth direction forward user scroll direction idle H G F E D C B A S T U V W X Y Z axisDirection down user scroll direction idle growth direction reverse
69. G F E D C B A
70. E D C B A crossAxisExtent
71. E D C B A viewportMainAxisExtent crossAxisExtent
72. E D C B A remainingPaintExtent
73. E D C B A remainingPaintExtent
74. E D C B A remainingPaintExtent
75. E D C B A remainingPaintExtent
76. E D C B A remainingPaintExtent
77. E D C B A
78. E D C B A overlap
79. I H G F E D C B A scrollOffset 150.0 50.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
80. SLIVER GEOMETRY Scroll extent Paint extent (and origin) Layout extent
81. TYING IT ALL TOGETHER
82. ScrollController ScrollPosition ScrollContext ScrollDirection ScrollBehavior ScrollConfiguration ScrollNotification ScrollStartNotification ScrollUpdateNotification OverscrollNotification UserScrollNotification ScrollEndNotification Scrollbar RefreshIndicator GlowingOverscrollIndicator SliverAppBar RenderBox Viewport ShrinkWrappingViewport RenderAbstractViewport RenderViewportBase RenderViewport RenderShrinkWrappingViewport ScrollActivity IdleScrollActivity HoldScrollActivity DragScrollActivity BallisticScrollActivity DrivenScrollActivity ScrollHoldController ScrollDragController NestedScrollView SingleChildScrollView PageView ScrollView BoxScrollView ListView GridView CustomScrollView SliverPadding SliverFillRemaining SliverPersistentHeader SliverToBoxAdapter SliverMultiBoxAdaptorWidget SliverList SliverFixedExtentList SliverGrid SliverFillViewport SliverPrototypeExtentList RenderSliver RenderSliverPadding RenderSliverSingleBoxAdapter RenderSliverToBoxAdapter RenderSliverFillRemaining RenderSliverMultiBoxAdaptor RenderSliverList RenderSliverGrid RenderSliverFixedExtentBoxAdaptor RenderSliverFixedExtentList RenderSliverFillViewport _RenderSliverPrototypeExtentList RenderSliverPersistentHeader RenderSliverScrollingPersistentHeader RenderSliverPinnedPersistentHeader RenderSliverFloatingPersistentHeader RenderSliverFloatingPinnedPersistentHeader Scrollable RenderObject BoxConstraints Size SliverConstraints SliverGeometry ViewportOffset ScrollMetrics ScrollPhysics BouncingScrollPhysics ClampingScrollPhysics AlwaysScrollableScrollPhysics NeverScrollableScrollPhysics Simulation BouncingScrollSimulation ClampingScrollSimulation AlwaysScrollableScrollPhysics NeverScrollableScrollPhysics
83. THE END
84. ON THE INSIDE BIGGER FLUTTER SCROLLING EXPLAINED bit.ly/flutter-scrolling Sebastiano Poggi Eugenio Marletti Novoda Clue @seebrock3r @workingkills