Bigger on the Inside — Flutter scrolling explained

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

4580c218737149bf44d012a110612010?s=128

Sebastiano Poggi

June 05, 2018
Tweet

Transcript

  1. ON THE INSIDE BIGGER FLUTTER SCROLLING EXPLAINED Sebastiano Poggi Eugenio

    Marletti
  2. A little disclaimer

  3. None
  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

  33. None
  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

  55. None
  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