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. 3.
  2. 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
  3. 5.
  4. 9.

    SCROLLING Physical metaphor Effects Interaction patterns Multimodal navigation Accessibility expectations

    bounce, glow, … scrollbars, pull-to-refresh, … touch, D-pad, keyboard & mouse, …
  5. 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
  6. 16.
  7. 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()
  8. 20.

    SCROLLING IN FLUTTER Scrolling is just a “normal” layout Solid

    abstractions Self-contained No special machinery
  9. 21.

    SCROLLING IN FLUTTER Scrolling is still very complicated BUT you

    don’t need to see it Unless you’re a crazy elf
  10. 23.
  11. 25.
  12. 33.
  13. 47.
  14. 49.
  15. 50.
  16. 51.
  17. 55.
  18. 56.
  19. 57.
  20. 59.
  21. 60.

    H G F E D C B A S T

    U V W X Y Z axisDirection down
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 77.
  31. 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
  32. 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
  33. 83.
  34. 84.