[MUSIC PLAYING]
MICHAEL GODERBAUER: Hello, everyone.
I'm Michael Goderbauer from the Flutter framework team
here to give you a quick preview of our upcoming multi-window
support for desktops.
This video is a recording of a demo I gave recently
at an internal event at Google.
However, since Flutter is an open source project,
I thought it would be nice to share
this demo with all of you.
This video will be a little less polished
than some others on this channel.
Just imagine you are sitting in a conference room with me
and a bunch of other engineers.
Also keep in mind that what you're about to see
is a preview.
The feature has not been fully implemented in Flutter yet,
and some details might change before it becomes available.
With that out of the way, let's jump into the demo.
We'll start the demo with the counter app.
I'm sure if you've been developing with Flutter,
you've seen this app before.
It's the app you get when you type
Flutter create into your terminal,
and it is a really convenient little app
to keep track of counts.
It works great on mobile devices with small screens and energy
efficient CPUs.
While you're out and about, it allows
you to really focus on counting just one thing at a time.
However, when you launch this app on the desktop,
it looks kind of lost.
You have all this extra real estate
on your giant 32 inch monitor that the counter app is not
really utilizing.
Plus, unlike on mobile, all that raw power of that two CPU
surely must allow for counting many things in parallel.
I, for example, would like to count the number of chocolate
bars I've eaten from Google's famous micro kitchen,
while also keeping track of all the bugs I fixed in the Flutter
framework.
Wouldn't it be cool if I could just
bring up a second window to keep track of both in parallel?
Well, with the support from multiple windows
in this prototype, we can do exactly that.
I just have to click this button here in the top right corner
to open up a second counter window
for all my counting needs.
And of course, we don't have to stop at just two windows.
Maybe I need a third window to also keep track of all the code
reviews I've done today.
So let's open up another window for that and start counting.
The counter app really is a universally useful tool
to keep track of all these things across domains.
All the windows you see on screen
here are powered by the same Flutter app instance.
In fact, the widgets shown in all of these windows
are part of the same unified widget tree.
If you need to extend your app to another window,
you just introduce another window widget to your app.
After all, in Flutter, almost everything is just a widget.
The unified widget tree across window boundaries
also has the advantage that a lot of the Flutter concepts
we know and love work seamlessly across windows.
For example, inherited widgets placed
at the root of your widget tree are
accessible from all descended window widgets.
So you don't have to learn anything new
to share data across windows.
You can, for example, just define your color stream
as an inherited widget and when the theme changed,
the content of all windows rerenders automatically
to reflect the new color as you can see here.
Or you can place your data model at the top of the widget tree
to make it accessible across all windows.
I've actually factored out the data
model of this multi counter app into an inherited widget.
This allows me to open up yet another window
with a giant reset button.
When clicked, it updates my app model,
which in turn will automatically trigger
an update in the individual windows
to reset the counters all at once.
Let's take a quick look behind the scenes.
When we dump this app to the terminal,
we can see that it really is just one unified widget
tree with multiple view widgets that
define the content for the individual windows.
Here's one.
And if you scroll up a little further,
there's another one right here.
This widget tree is essentially what app developers build
when they write a Flutter app.
Behind the scenes, the framework will
translate this unified widget tree
into multiple render trees.
There's one render tree per window,
as you can see here in the stump.
There's one rooted right here.
And if you scroll up a little further,
there's another one right here.
Just like in the single window word,
a layer tree is derived from each render tree.
A single engine rasterizes each layer tree
so they can be shown in their associated windows.
Right now, this is just a prototype,
which is not quite ready for production yet.
But I'm excited to see what you all
will build with multi-window support
once this feature lands in the Flutter framework
in the near future.
Thank you.
[MUSIC PLAYING]