SCROLLING
PERFORMANCE IS HARD
ABSTRACTIONS ARE HARD
Slide 12
Slide 12 text
SCROLLING
PERFORMANCE IS HARD
GOOD ABSTRACTIONS ARE HARD
Slide 13
Slide 13 text
SCROLLING
PERFORMANCE IS HARD
GOOD ABSTRACTIONS ARE HARD
ListView
RecyclerView
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
WHAT ABOUT
FLUTTER?
Slide 16
Slide 16 text
DETOUR
Slide 17
Slide 17 text
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()
Slide 18
Slide 18 text
END OF
DETOUR
Slide 19
Slide 19 text
SCROLLING IN FLUTTER
Used to be different
The Great Scrolling Refactor (2016)
Slide 20
Slide 20 text
SCROLLING IN FLUTTER
Scrolling is just a “normal” layout
Solid abstractions
Self-contained
No special machinery
Slide 21
Slide 21 text
SCROLLING IN FLUTTER
Scrolling is still very complicated
BUT you don’t need to see it
Unless you’re a crazy elf
RENDERBOX
RenderObject for 2D Carthesian coordinates
Basically a box with a size
Internal coordinate system
Slide 49
Slide 49 text
max
max
Slide 50
Slide 50 text
max
max
Slide 51
Slide 51 text
max
max
Slide 52
Slide 52 text
max
max
min
min
Slide 53
Slide 53 text
min
min
max
max
Slide 54
Slide 54 text
max
min
min
max
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
0,0
x,y
Slide 57
Slide 57 text
0,0
x,y
Slide 58
Slide 58 text
END OF
DETOUR
Slide 59
Slide 59 text
CONTENTS
Viewports display slivers
Slivers are “slices” of content
RenderSliver is the main class
Sliver widgets wrap RenderSlivers
Slide 60
Slide 60 text
H
G
F
E
D
C
B
A
S
T
U
V
W
X
Y
Z
axisDirection
down
Slide 61
Slide 61 text
growth
direction
forward
H
G
F
E
D
C
B
A
S
T
U
V
W
X
Y
Z
axisDirection
down
growth
direction
reverse
Slide 62
Slide 62 text
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
Slide 63
Slide 63 text
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
Slide 64
Slide 64 text
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
Slide 65
Slide 65 text
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
Slide 66
Slide 66 text
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
Slide 67
Slide 67 text
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
Slide 68
Slide 68 text
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
Slide 69
Slide 69 text
G
F
E
D
C
B
A
Slide 70
Slide 70 text
E
D
C
B
A
crossAxisExtent
Slide 71
Slide 71 text
E
D
C
B
A
viewportMainAxisExtent
crossAxisExtent
Slide 72
Slide 72 text
E
D
C
B
A
remainingPaintExtent
Slide 73
Slide 73 text
E
D
C
B
A
remainingPaintExtent
Slide 74
Slide 74 text
E
D
C
B
A
remainingPaintExtent
Slide 75
Slide 75 text
E
D
C
B
A
remainingPaintExtent
Slide 76
Slide 76 text
E
D
C
B
A
remainingPaintExtent
Slide 77
Slide 77 text
E
D
C
B
A
Slide 78
Slide 78 text
E
D
C
B
A
overlap
Slide 79
Slide 79 text
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