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
   

   View Slide

2. A little
   disclaimer
   

   View Slide

3. View Slide

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
   

   View Slide

5. THE END
   

   View Slide

6. 37 MINUTES
   EARLIER...
   

   View Slide

7. SCROLLING
   

   View Slide

8. SCROLLING
   KEY FACTS:
   it’s everywhere
   it’s hard
   it’s very hard why?
   

   View Slide

9. SCROLLING
   Physical metaphor
   Effects
   Interaction patterns
   Multimodal navigation
   Accessibility
   expectations
   bounce, glow, …
   scrollbars, pull-to-refresh, …
   touch, D-pad, keyboard & mouse, …
   

   View Slide

10. SCROLLING
    PERFORMANCE
    IS
    HARD
    

    View Slide

11. SCROLLING
    PERFORMANCE IS HARD
    ABSTRACTIONS ARE HARD
    

    View Slide

12. SCROLLING
    PERFORMANCE IS HARD
    GOOD ABSTRACTIONS ARE HARD
    

    View Slide

13. SCROLLING
    PERFORMANCE IS HARD
    GOOD ABSTRACTIONS ARE HARD
    ListView
    RecyclerView
    

    View Slide

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
    

    View Slide

15. WHAT ABOUT
    FLUTTER?
    

    View Slide

16. DETOUR
    

    View Slide

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()
    

    View Slide

18. END OF
    DETOUR
    

    View Slide

19. SCROLLING IN FLUTTER
    Used to be different
    The Great Scrolling Refactor (2016)
    

    View Slide

20. SCROLLING IN FLUTTER
    Scrolling is just a “normal” layout
    Solid abstractions
    Self-contained
    No special machinery
    

    View Slide

21. SCROLLING IN FLUTTER
    Scrolling is still very complicated
    BUT you don’t need to see it
    Unless you’re a crazy elf
    

    View Slide

22. SCROLLING WIDGETS
    ListView
    RefreshIndicator
    PageView
    CustomScrollView
    

    View Slide

23. ListView
    

    View Slide

24. RefreshIndicator
    

    View Slide

25. PageView
    

    View Slide

26. CustomScrollView
    

    View Slide

27. ANATOMY
    OF A SCROLL
    

    View Slide

28. SCROLLABLE
    COMPONENT
    ANATOMY OF A SCROLL
    

    View Slide

29. SCROLLABLE COMPONENT
    INTERACTION
    CONTAINER
    CONTENTS
    ANATOMY OF A SCROLL
    

    View Slide

30. CONTENTS
    SLIVERS
    ANATOMY OF A SCROLL
    SCROLLABLE COMPONENT
    CONTAINER
    VIEWPORT
    SCROLLING
    INTERACTION
    

    View Slide

31. CONTAINER
    the easy bit™
    

    View Slide

32. CONTAINER
    Introducing Viewport
    It’s bigger on the inside
    

    View Slide

33. View Slide

34. Display children at a specific offset
    Children are Slivers
    Viewport
    

    View Slide

35. Picks centre Sliver
    Centre Sliver is the anchor
    Viewport
    center
    

    View Slide

36. Viewport
    Picks centre Sliver
    Centre Sliver is the anchor
    center
    

    View Slide

37. center
    Viewport
    Picks centre Sliver
    Centre Sliver is the anchor
    

    View Slide

38. Viewport defines a scrolling axis
    Centre Sliver has absolute position
    Between [0, 1]
    Viewport
    center
    0
    1
    

    View Slide

39. Default configuration
    center
    center = children.first
    axisDirection = AxisDirection.down
    anchor = 0.0
    Viewport
    0
    

    View Slide

40. Viewports
    Viewport ShrinkWrappingViewport
    

    View Slide

41. INTERACTION
    the user-facing bit™
    

    View Slide

42. INTERACTION
    Widget: Scrollable
    It scrolls. Duh.
    ¯\_(ϑ)_/¯
    

    View Slide

43. INTERACTION
    Widget: Scrollable
    It scrolls. Duh.
    Handles gestures
    

    View Slide

44. INTERACTION
    ViewportBuilder Physics Controller
    SCROLLABLE
    

    View Slide

45. ScrollView
    SingleChildScrollView
    PageView
    INTERACTION
    SCROLLABLE
    

    View Slide

46. CONTENTS
    the esoteric bit™
    

    View Slide

47. DETOUR
    

    View Slide

48. RENDERBOX
    RenderObject for 2D Carthesian coordinates
    Basically a box with a size
    Internal coordinate system
    

    View Slide

49. max
    max
    

    View Slide

50. max
    max
    

    View Slide

51. max
    max
    

    View Slide

52. max
    max
    min
    min
    

    View Slide

53. min
    min
    max
    max
    

    View Slide

54. max
    min
    min
    max
    

    View Slide

55. View Slide

56. 0,0
    x,y
    

    View Slide

57. 0,0
    x,y
    

    View Slide

58. END OF
    DETOUR
    

    View Slide

59. CONTENTS
    Viewports display slivers
    Slivers are “slices” of content
    RenderSliver is the main class
    Sliver widgets wrap RenderSlivers
    

    View Slide

60. H
    G
    F
    E
    D
    C
    B
    A
    S
    T
    U
    V
    W
    X
    Y
    Z
    axisDirection
    down
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

69. G
    F
    E
    D
    C
    B
    A
    

    View Slide

70. E
    D
    C
    B
    A
    crossAxisExtent
    

    View Slide

71. E
    D
    C
    B
    A
    viewportMainAxisExtent
    crossAxisExtent
    

    View Slide

72. E
    D
    C
    B
    A
    remainingPaintExtent
    

    View Slide

73. E
    D
    C
    B
    A
    remainingPaintExtent
    

    View Slide

74. E
    D
    C
    B
    A
    remainingPaintExtent
    

    View Slide

75. E
    D
    C
    B
    A
    remainingPaintExtent
    

    View Slide

76. E
    D
    C
    B
    A
    remainingPaintExtent
    

    View Slide

77. E
    D
    C
    B
    A
    

    View Slide

78. E
    D
    C
    B
    A
    overlap
    

    View Slide

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
    

    View Slide

80. SLIVER GEOMETRY
    Scroll extent
    Paint extent (and origin)
    Layout extent
    

    View Slide

81. TYING IT ALL
    TOGETHER
    

    View Slide

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
    

    View Slide

83. THE END
    

    View Slide

84. ON THE
    INSIDE
    BIGGER
    FLUTTER SCROLLING EXPLAINED
    bit.ly/flutter-scrolling
    Sebastiano
    Poggi
    Eugenio
    Marletti
    Novoda Clue
    @seebrock3r @workingkills
    

    View Slide