[MUSIC PLAYING]
KATE LOVETT: Hi, my name is Kate Lovett
and I'm a software engineer on the Flutter team.
I've been working on a new feature in Flutter that
isn't quite ready yet, but I recently
gave a talk with the team on the prototype
and how it's coming together.
In the spirit of how open Flutter is,
I'm here to share that same talk with all of you
in a behind-the-SDK look at development on the Flutter
team.
So what is the new feature?
Given my penchant for scrolling, you
may have already guessed it.
It's two dimensional scrolling in Flutter, which we don't
actually have a widget for yet.
Now, some of you may be thinking, Kate,
I know how to scroll in two dimensions in Flutter.
If I play something that scrolls horizontally inside
of something that scrolls vertically like this--
ta-da-- I can scroll in two dimensions.
We did it.
I guess that's everything.
So thank you for coming, and be safe getting home.
Or did we?
In some cases, this type of composition works really well.
But more often, it requires a lot
of knowledge of the inner workings
of scrolling in Flutter in order for it to work in all cases.
For example, are you listening to scroll notifications?
If so, you need to account for the notification depth
since each scroll view creates its own viewport.
What about lazy loading?
Lazily laying out children in a scroll view
is paramount to a performance scrolling UI.
And in some cases, developers have
found themselves choosing to sacrifice lazy loading when
creating their own two-dimensional scroll views.
There is more, too.
Since widgets like scrollbars and over scroll indicators
use scroll notifications, they too
can experience unexpected behavior
based on where they are in this subtree,
such as the vertical scroll bar hiding
all the way over here at the end of the horizontal scroll view.
You also might need a scroll controller
to keep positions in sync, such as when
stacking list views that are horizontal inside
of a vertical list view.
Lastly, diagonal scrolling.
This won't work here without a lot of intervention.
Like I said, this can work for some cases.
But we want to provide something better that doesn't
have all of these gotchas.
A place where folks have been experiencing
most of these gotchas has been on desktop or web
on desktop when building tables and trees.
Some of you may be thinking, Kate,
we've already solved this too.
There is, of course, the data table widget, as well as
the expansion panel list.
You would be right.
Indeed these are great widgets.
But these widgets don't scroll.
They are designed to fit within the bounds of the screen.
You can apply the nested scrolling
pattern we looked at earlier and it can work for some use cases,
but doing so would be a case of not lazily laying children out.
If the data table or expansion list is very large,
even if we can't see at all when we place it inside
of a scrolling widget, Flutter would
be doing a lot of unnecessary work building
the entire contents.
Again, these are fine widgets for the right use case.
But we want something a little different here.
So what we've been working on is a table view and a tree view
widget.
And not only those, but a whole bunch of other things
in between.
Now, I have to note.
This here is subject to change.
The design has not been finalized yet.
And so this is just what it looks
like right now in this stage.
We have a two-dimensional scrollable, as well as
a two-dimensional viewport base.
These are meant to not only be used by the table and tree
implementations, but also for other developers
to extend or build on top of it, whatever they can imagine.
What we've built on top of them is the tree view
and the table view API and even a tree table view.
They're designed to just work right out of the box
without all of the special handling
that I mentioned earlier.
They'll have unified scrolling notifications,
lazily layout their children, scroll along locked axes,
or optionally they'll be able to scroll
diagonally and everywhere in between,
wherever you would like to scroll.
Sounds great, right?
Let's take a look.
All right, so here we are.
I have a fairly simple Flutter app running here on my desktop.
And I've been actually using the new table and tree view
APIs in order to keep track of this fairly sizable project.
So let's take a look at the table first.
I've actually been using it to keep
track of all of the various issues on GitHub, their feature
requests or bugs from other inefficient scrolling
compositions that folks have been reporting.
And if you'll notice, I can move in any direction
I would like with my trackpad.
And it all moves nice and smoothly
and lays out all of these individual cells on demand.
I have these big chunky scrollbars
that kind of indicate more so what's
happening behind the scenes as far
as unified scroll notifications and smooth performance.
And of course, since I'm on Mac, you'll
see we have that familiar bouncy scroll
physics that everyone expects in their scroll behavior on Mac.
As far as our tree view, I've been
using it to keep track of all of the resources,
the various design documents, the feature lists, and sample
code.
And in this case, I've been borrowing a bit
from material 3, which you may have heard something about.
And as you can see right now, I'm scrolling in one dimension.
But as I open up more and more levels in this directory,
it will expand to accommodate all of my content
in both dimensions.
So these are almost finished, and we're
really excited about them.
But we have a little bit more work to do here.
So what's next?
We've been gathering feedback from developers
on the proposed API first.
We want to know, when working on a big new feature like this,
what makes sense?
What doesn't?
How do folks want to use this?
And what features are really important so we
don't leave anything out?
From there, a fair bit of refinement and polish
and the usual rounds of design review.
For the latest updates, follow the 2D Scrolling Project
on GitHub.
Thanks for checking out this new feature coming soon
in a future release of Flutter.
I hope that you are as excited as I am about it.
For other looks behind the SDK, check out
some of our other talks, like multi window and impeller.
And as always, for all things Flutter, visit Flutter.dev.
[MUSIC PLAYING]