Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sebastiano Poggi

June 05, 2018
Tweet

More Decks by Sebastiano Poggi

Other Decks in Technology

Transcript

  1. 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
  2. SCROLLING Physical metaphor Effects Interaction patterns Multimodal navigation Accessibility expectations

    bounce, glow, … scrollbars, pull-to-refresh, … touch, D-pad, keyboard & mouse, …
  3. 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
  4. 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()
  5. SCROLLING IN FLUTTER Scrolling is just a “normal” layout Solid

    abstractions Self-contained No special machinery
  6. SCROLLING IN FLUTTER Scrolling is still very complicated BUT you

    don’t need to see it Unless you’re a crazy elf
  7. H G F E D C B A S T

    U V W X Y Z axisDirection down
  8. growth direction forward H G F E D C B

    A S T U V W X Y Z axisDirection down growth direction reverse
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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