[MUSIC PLAYING]
ANDREW BROGDON: All right.
KATE LOVETT: Cool.
ANDREW BROGDON: So we have another interviewee
that we're about to bring on, and it is Will Larche
from the Material team.
Will, come on over.
KATE LOVETT: Welcome.
Good to see you.
ANDREW BROGDON: Hey, always the best-dressed engineer I know.
KATE LOVETT: Mm-hmm.
Are you enjoying an event the event today?
WILL LARCHE: It's wonderful, isn't it?
KATE LOVETT: It is, it is.
WILL LARCHE: Yeah, they've such a great job.
It's so nice to see everybody so inspired and excited.
And we're all here for the thing that we love, so it's--
[LAUGHTER]
It's a great thing to do, yes.
KATE LOVETT: Well we've collected-- just like with some
of our other guests, we've already
gone through the internet and seen
what questions people are asking and what
you might like to answer.
And so we've picked out a few for you.
WILL LARCHE: I'm ready.
I can do this.
KATE LOVETT: OK
ANDREW BROGDON: Go ahead.
KATE LOVETT: All right, here we go.
Can you talk about how Material on Flutter
has changed now that desktop support is being added?
Some of our most familiar widgets
are typically in one certain form factor,
but that changes with desktop.
WILL LARCHE: So true.
We in Material are really interested in our guidance
for desktop and making sure that we
have a good experience for developers and designers
who are using Material and designing for desktop,
because user expectations are different.
We know this.
So we've been working closely with the Flutter
team, specifically, on those new guidelines
that we'll be releasing early in the next year.
And they'll have inside them a couple of new components, one
of which we showed today in the Vision Keynote
that Matthias was talking about.
It's a tree for file system directory--
ANDREW BROGDON: Oh, a data tree.
WILL LARCHE: Yeah, it's a tree, yeah.
ANDREW BROGDON: Yeah, there's an earlier version
of that in a sample that just landed in the Samples
repository for desktop.
WILL LARCHE: That's right, yes.
ANDREW BROGDON: Yeah, so github.com/flutter/samples.
WILL LARCHE: Yeah, so that's one.
And an engineer and my team is working on a navigation rail
right now, which is something that we also showed.
Its bottom nav when you're on mobile,
but then, when you're on desktop,
it takes all those buttons and it puts them on the side,
kind of like you would see in Gmail on the web.
ANDREW BROGDON: OK.
WILL LARCHE: And so we're working
on having automatic experiences to be
able to go between those for people who aren't working
with a designer, so that they can
have a good mobile experience and a good desktop experience.
But then, the biggest thing is that we've
been working with the Flutter team
on what we call density, which is how much room we
give to individual components.
Material Design was created mobile-first,
so it's all about touch.
So even when we're on the web, we're
really concerned about making sure there's
enough room for people's fingers and the 48-pixel touch targets.
We'll be reducing that, making click targets that
are more appropriate for a mouse or some other kind
of mouse-like input.
KATE LOVETT: Right, right.
WILL LARCHE: Yeah, so those are the changes that
will be coming or have already begun
to show up for desktop support in the designs.
KATE LOVETT: That's great.
ANDREW BROGDON: Yeah, the density thing,
especially, is interesting.
Because if you talk about potentially having something
running on like an Android TV, and you have that living room
experience--
WILL LARCHE: You want the opposite.
ANDREW BROGDON: The density for that
is completely different than what you'd have on--
WILL LARCHE: Exactly.
Yeah, at I/O we were talking--
in the Beyond Mobile talk, we were
talking about passive experiences, part
of the ambient computing world.
And a lot of times, when you're dealing
with things that are passive, that people aren't interacting
with, you maybe have one call to action, or two--
a button or two.
And they have to be big, and they
have to be easily seen and from far away.
As people get up to them, maybe they can change.
But yeah, so that's the opposite of the kind of density
that we're looking at on desktop.
Then, the great thing about our density subsystem,
as we're calling it, is that it will
be flex enough to go in both directions-- larger
and smaller.
KATE LOVETT: Good stuff!
ANDREW BROGDON: So I also have a question,
but I have a feeling this is going to take us off
on a bit of a tangent.
So I know you have--
KATE LOVETT: Oh.
ANDREW BROGDON: I know you have one more.
KATE LOVETT: Thank you.
I wanted to ask, what's the process of things
getting added to Material, right?
Who decides, really, which components are added
and what they're like?
WILL LARCHE: That's a good question.
ANDREW BROGDON: Because you're an engineer, right,
more than working on the design spec itself.
WILL LARCHE: Correct, I am an engineer.
Yeah, but the great thing about working in Material,
even if you're an engineer, is that it's a very, very
collaborative environment.
When somebody, a designer or an engineer,
has an idea for a component, it becomes something
that everybody kind of puts their input into.
And small teams may go off and iterate
on what they think the actual spec for something would be,
but they have to listen to the engineers
to make sure that it's a cromulent idea and not
something that just wouldn't make any sense--
which we had seen before in the past.
With the very first version of Material,
they weren't working with engineers,
and some things then had to change later on as we realized
what was possible and what wasn't.
So a lot of times, it's either just somebody has an idea,
or we see something, or people in the real world
are using it so much that we're like, we can't ignore this.
Something that recently happened that's really interesting is
a lot of apps for the past few years
have had Favs embedded into the bottom nav.
Like the center button is actually a Fav.
I think you see that on Instagram, Evernote--
KATE LOVETT: Yeah.
WILL LARCHE: And then that creates--
it's whatever you're in.
And so we had been telling people
caution against using that because we
think that's an anti-pattern.
But we hadn't finished the research
on it, which my team actually recently helped with.
We built out Flutter prototypes for a bottom nav
with a Fav in several different designs
that our designers came up with.
We tested them in Tamil in India.
We tested them in Hindi in India, Portuguese in Brazil,
and English in America, And found out
that people understand it.
They like it.
And now we've removed the caution from the guidelines.
So if you go to the guidelines now,
it actually won't say anymore, caution for that pattern.
KATE LOVETT: Whoa!
WILL LARCHE: And so that's just--
the real world was using it.
We saw it.
We verified, is this a good idea.
It is.
And hopefully, soon, we'll be bringing
that as an actual feature into that component in Flutter
to make it easier.
KATE LOVETT: That's really great-- feedback in action.
WILL LARCHE: Yes.
KATE LOVETT: That's awesome.
ANDREW BROGDON: That's really cool.
I have one last question for you.
This is one we got during the break,
and I was, like that's a Will question right there.
KATE LOVETT: [LAUGHS]
ANDREW BROGDON: This is from Michael T. Soha
WILL LARCHE: Hi, Michael.
ANDREW BROGDON: Hopefully I'm pronouncing your last name
right there, Michael.
And he asked about the new Material Gallery.
He said, "Is the new Gallery going
to be available on the Play Store?"
And I thought maybe we could let that lead us
into the Material Gallery and you could
show to folks a little bit.
WILL LARCHE: Yes, the new Gallery
should be on the Play Store today.
ANDREW BROGDON: Oh, wow.
WILL LARCHE: Do a refresh, Michael.
Maybe you'll see it.
KATE LOVETT: [LAUGHS]
ANDREW BROGDON: Hold Refresh in the Play Store app.
But do you want to, just real quick, take a brief tour of it?
Because we also landed it in our GitHub Samples repo so
folks can check out the code there.
WILL LARCHE: Yeah, this was a real fun collaboration
that we did with the design agency in London
called Toaster.
ANDREW BROGDON: Yeah, let's get into the laptop here and--
so we do have Gallery right here.
And we have the Gallery itself, and then
some tool packages-- some packages
of tools that are used for the translations, I think it is.
WILL LARCHE: We have a lot of internationalization stuff
in this app.
I believe we support over 50 languages.
KATE LOVETT: Oh, wow.
WILL LARCHE: And we wanted this to be
a great example for internationalization best
practices and accessibility best practices.
And so we actually internationalized
our accessibility.
So if you're on a screen reader in China
and you want it played back in Chinese,
it'll still work for you.
KATE LOVETT: Wow.
ANDREW BROGDON: My goodness.
WILL LARCHE: So--
KATE LOVETT: That is really great.
WILL LARCHE: Hey, we're pretty proud of that.
ANDREW BROGDON: And so this is the Gallery itself, right?
WILL LARCHE: Yeah, but turn it on in Dark Mode.
That's where it really shines.
ANDREW BROGDON: OK, so there's--
I know there's menu here.
WILL LARCHE: Theme.
ANDREW BROGDON: Theme?
Got it.
I'm not cool enough to have my Dark Mode globally.
KATE LOVETT: Oh, very cool.
WILL LARCHE: Yeah, we actually designed Dark Theme first
for this because we know that that's what our audience mostly
uses.
ANDREW BROGDON: Yes.
So just like we were mobile-first,
we're dark-first now.
WILL LARCHE: Yeah.
KATE LOVETT: [LAUGHS]
WILL LARCHE: I think everybody likes Dark theme.
Isn't that a world we could live in?
ANDREW BROGDON: Yeah, that's true.
I use it for my editors.
It's true.
KATE LOVETT: I've seen so many mentions online saying, come
over to the dark side.
But I guess now, it's truly, come over to the dark side.
ANDREW BROGDON: [LAUGHS]
WILL LARCHE: I'm there.
I'm ready.
ANDREW BROGDON: All right, so what's--
if I wanted to start with this, what
would I be looking at here?
What would I go and check out?
WILL LARCHE: Well, you'll see the top row
is a carousel that's got some studies in it.
These are official Material design studies
that we've built out to be totally responsive.
So this is Rally.
It's like a finance app.
But yeah, drag that corner until the break point.
Keep going left.
Yeah.
ANDREW BROGDON: Hold on a second.
I'm going to close my email.
It's always a good thing to do when you're on camera.
WILL LARCHE: Oh, yeah, so that people
don't know your conversations?
[LAUGHTER]
OK.
Go to-- there we go.
ANDREW BROGDON: Yes, it is.
Pop, there we go.
WILL LARCHE: There we go.
Then the mobile view happens, yeah.
So we actually worked really closely
with Hans Mueller, who's the TL on the Flutter
site for Material like I'm the TL for--
wait, he's the Flutter.
He's the Material TL in Flutter.
I'm the Flutter TL in Material.
We're very close partners.
And we worked with him on figuring out
what best practices for adaptive layout
we wanted to show people.
So feel free to go into any of those studies
and see how we're doing adaptive layout by looking at the media
query and having some helper functions in there.
You can actually take our adaptive.dart file
if you see it anywhere.
Just bring it with you into your next project,
and know that that's the performant way
that we officially endorse for making different layouts.
ANDREW BROGDON: I know that was a question that you
went into this project with, is how do we make it responsive?
And that's the best practice that emerged, right?
WILL LARCHE: Yes.
ANDREW BROGDON: Use a media query,
and let that define how you choose to build
one layout versus another.
WILL LARCHE: Yes.
We really weren't sure.
And it turns out that using a media query
really is the best way.
ANDREW BROGDON: Oh.
WILL LARCHE: Yeah.
And so this is another study.
This is Crane.
And so if you go back out of this,
you can see that underneath the study
is, we were bringing in the demos from the original Gallery
into the different sections.
We've got--
ANDREW BROGDON: Shrine, yep.
WILL LARCHE: Yeah, we've got Shrine.
Yes, and then underneath them, oh, well, there I am.
ANDREW BROGDON: Yeah, the ginger scarf.
WILL LARCHE: Yeah.
ANDREW BROGDON: We can't afford models.
KATE LOVETT: I didn't know that you were in there.
I had never seen that before.
ANDREW BROGDON: Yeah, we can't afford models.
KATE LOVETT: Oh, I'm going to see it every time now.
WILL LARCHE: You know, Shrine actually has a new--
a variant on a new component.
So this has, when you're on mobile, the expanding app
bar at the bottom.
But we actually worked with the designers
to figure out what that would look like on desktop
for the very first time.
And so they put it over here on the side.
ANDREW BROGDON: Oh, what was the expanding bottom sheet
is now the expanding right--
WILL LARCHE: Side sheet, I guess.
ANDREW BROGDON: Side sheet?
There you go.
WILL LARCHE: We're just calling it an expanding sheet
right now, yeah.
And then, what this animation would look like.
So we-- the Material designers are really considering
what is important for desktop.
And then, here, we have just your regular component demos
for learning things.
What's really great is each of them has--
I'm sorry, not each of them.
Many of them have an Options menu
where you see slightly different versions of the components.
And then, if you click this button, Code Sample,
you'll see the actual code for the sample
that you're looking at.
So this should one-to-one match up
to what's going on over here, which should
be really useful to people.
ANDREW BROGDON: Nice.
WILL LARCHE: Yeah.
ANDREW BROGDON: So yeah, so again,
this is right now in our Samples repo
at github.com/flutter/samples.
And this hosted version that's on the web you can get to right
now at flutter.github.io/samples.
WILL LARCHE: That's right, yeah.
ANDREW BROGDON: Well, cool.
KATE LOVETT: This is really great.
ANDREW BROGDON: That's about all the time
we have so far for you, so I've got to say goodbye.
WILL LARCHE: Oh!
Wish it wasn't so fast.
ANDREW BROGDON: We're going to take some more questions.
KATE LOVETT: Thank you so much, Will.
It's been awesome.
ANDREW BROGDON: Thank you so much for joining us.
WILL LARCHE: My pleasure.
Thank you for having me.
ANDREW BROGDON: Yeah, you can leave your microphone
right there and go back to enjoying the event.
All right, so we have time for one more question.
What do we have?
SPEAKER: So we've got time for-- yeah,
we've got time for one more question,
and then we're going to be cutting to a few more talks.
So the first question here and the last question
is from Patrick in Kenya.
And Patrick is wondering, how do I override the red screen--
like the red error screen-- when you
overflow a widget and the red and white and yellow lines
in the widget?
KATE LOVETT: Oh, right.
ANDREW BROGDON: Yeah, so I used to know how to do this.
KATE LOVETT: Oh, OK.
So for those of you who may not know, sometimes,
when you have something go horribly
wrong in constructing all of your widgets
and putting together the puzzle piece of your app,
you'll get a red screen that gives you feedback and tells
you something did not work, and this is what it was,
and you should go fix it.
And then I'll show you what it looks like.
And I've seen on GitHub recently that people
have been asking for a feature to be able to override that.
But I think that it already is possible to override.
ANDREW BROGDON: Tell you what, let's go to the laptop here
for a second.
And I'm--
KATE LOVETT: It would be the error widget.
ANDREW BROGDON: I literally used to know how to do this.
KATE LOVETT: [LAUGHS]
ANDREW BROGDON: Let me do Flutter, Error Widget.
And we're--
KATE LOVETT: Let's see what we can find, yeah.
ANDREW BROGDON: I'm just going to Google this.
KATE LOVETT: So community provides.
ANDREW BROGDON: Yeah, here we go.
KATE LOVETT: It's amazing, really.
So here you go.
ANDREW BROGDON: Yeah.
KATE LOVETT: You can actually override the red screen
with whatever you like.
ANDREW BROGDON: That's it.
It's this bit-- the errorwidget.builder.
So yeah, there's a widget with a static method--
I think it's a builder--
that you could just override that.
And then, that becomes the builder for your red widget.
You can make it some other color or blank in your production
app, or whatever you like.
So thank you to Ayush, who wrote this article.
There you go.
[MUSIC PLAYING]