[PEPPY MUSIC] MARY XIA: Good morning! Hey. My name is Mary. I'm a software engineer
who works with Flutter. WILL LARCHE: And And I'm Will. I'm a software engineer
at Material Design. MARY XIA: Today
we'll show you how building an app with Flutter
and Material is expressive, enhanced, and a delightful
developer experience. WILL LARCHE: And we'll do
it for both Android and iOS, but build it once using Flutter. MARY XIA: Flutter is a way
to build native mobile apps. You can build apps that are
expressive and flexible, create high-quality experiences,
and iterate quickly. You can use Flutter today. It's already being used by
developers and organizations around the world. Flutter comes pre-built with
a large library of widgets, such as containers, list views
that are efficient, scrolling, gestures, and more. WILL LARCHE: Now, Material
Design is an adaptable design system, backed by open source
code, that helps designers and developers make beautiful,
usable products faster. It's a visual design system used
in millions of apps and sites all around the world. What's new this year
is Material theming. Material theming helps you
systematically apply brand throughout your designs. As you can see, Material
is more flexible than ever. The shape, color, typography,
the animation curves, are all customizable
to match your brand. You could even choose color
palettes from our online color generator that are generated
for you, and typography themes. You can even change
the shapes in your app to have a theme of their own. MARY XIA: Will, I love
how this is taking shape. WILL LARCHE: Right, yeah. And I'm excited
to announce today that Flutter is a first-class
platform in Material Design. [APPLAUSE] From today forward, you'll find
documentation for Android, iOS, web, and Flutter, throughout
Material Components, the Material Tools Suite,
and the Material Guidelines. MARY XIA: So it sounds like
Material and Flutter have really embraced each other. What's it like building
an app with them? WILL LARCHE: I'm
glad you asked, Mary. Let's see how they
work together. And a reminder, you
can do everything that we're about to
do at home, today. Behold Shrine, our retail app. I love the clothes, I
love the home goods, but unfortunately, the UI
is disturbingly last season. MARY XIA: Who else has
seen an app like this? WILL LARCHE: Yes, I
think we all have, Mary. WILL LARCHE: Yep, Google Docs. They look very similar. When Material first
came out, many apps faithfully followed the
Material guidelines. And so they ended
up with apps that looked identical to each other. Or worse, they looked
like Google's brand, rather than their own. We want your apps to
look like your brand. WILL LARCHE: Material
theming helps with that. It applies consistent brand
elements throughout your UI. MARY XIA: So let's
apply Material theming to Shrine and show how Material
on Flutter is expressive, with its customizable
widgets, layouts, and themes. WILL LARCHE: Enhanced, with
new components and styles like our text
fields and backdrop. MARY XIA: And delightful,
offering developer tools and easy extensibility
of components. WILL LARCHE: Now,
what is a widget? In Flutter, a widget is
pretty much everything. There are your buttons, your
cards, your text fields, all your views are widgets. You can also compose your own
widgets from existing ones. And we'll show you how to
do some of that today, too. Material Components is
a library of widgets that are expressive, enhanced,
and delightful to work with. MARY XIA: So we'll start
by building this app. We've already built it. We're going to enhance it now. It is built with
the default theming and doesn't have any of
the latest of material. WILL LARCHE: So let's
look at the guidance our designer gave us. It's a font, logo,
shape, layout and color. MARY XIA: OK, great, let's
start with the color theme. WILL LARCHE: Mary,
will you code? MARY XIA: Yes. WILL LARCHE: Thank you. I will stand here and talk,
because I crave attention. So we've already used a
lot of Material Components to build the unthemed app. So we've imported the
Material Flutter package in all of our apps files. We have the unthemed app
running in the Emulator. Here's Shrine's login page. And here's its homepage. Both of those pages are
routed to the screen by the Shrine app widget. This is what gets passed
into the main function, which is run when we start our app. It's the highest level
widget in our project. It returns a Material app
widget in its build function. Let's take a look at
that Material app widget. Its home property is set
to a homepage widget, which we've built just for Shrine. There's also a theme property. And you can pass in a themed
data in the app's constructor. All the descendants--
widgets- of the app will have this theme
applied to them. Let's look at the color
theme our designer gave us. The color theme has most of
the colors you need in an app, like primary and secondary
colors, background, and a surface color
for things like modals. It also has the colors you
need for text and icons that are drawn on the primary,
secondary, background, and surface colors. There is even a primary
variant for any time the primary color is
against another color and that combination
is inaccessible. We've already copied
the Shrine color values into a color constants
file for convenience. You can see little
swatches of the colors on the left side next
to the line number. By the way, Material icons
will also appear in this way. The Material package already
has predefined colors, like colors.red. But Shrines designer is
using custom branded colors, like millennial pink and brown. Mary started a theme already. She's going to add
those colors to it. These are the colors our app
will use on a global level. She started with a light
theme and now she's changing some of the values. She's adding a primary
text theme from a function that she built herself. It's going to use as a base the
existing primary text theme. And then it's going to change
one of the values to be brown. Now she's adding an icon theme. She's going to again
start with the base theme, and then change the values
that she wants to be different. Copy with, by the way,
is a very common method that you'll see on a
lot of Flutter widgets. It allows you to
copy an instance, but change whatever
parameters you put inside. Now she's going
to set the button color throughout the app, for
raised or contained buttons. Reload. MARY XIA: What do you think? WILL LARCHE: It's
better, no more blue. Thank you, Mary. So let's work on the font
on those titles, please. She's going to set a
custom font for large type, like titles and headlines. I always thought the font
family sounded so wholesome. It's a slight change, but at
least it matches our logo now. It's not default
Roboto for larger type. Now to the login screen. So the login screen
itself is a widget. And every widget
has a build method. In it, you construct your UI. Our build function
has a safe area widget, which can account
for the notched top on a lot of newer phones. Inside we have
the logo, the text fields, and buttons
in a list view. We could have used
a column widget, but the list view
automatically handles scrolling on smaller screens
and when the keyboard appears. These are all widgets
provided by Flutter. Note that the build text field
function Mary and I wrote returns a widget. This is directly called
in our build function. We can even pass in our own
parameters to this function. It's not a static layout. Right now, the text
field is automatically using the global color
theme's primary color as its active color. And you can see
when she's typing, the floating placeholder
and underline decoration are not very accessible. We could change our global
theme's primary color, or we could change just the
primary color of our text field to the primary variant. Each widget can override
their ancestor's theme by being wrapped in a new theme. If we highlight a widget
and press Alt-Enter a shortcut menu appears. And one of the common
shortcuts is wrapping a widget with another widget. We'll wrap the text
fields in that copy of the theme that has
the primary variant as its primary color. Now you can see
what you're doing. Our material theme also
has a shape story that's angled, based on our logo. Mary's setting the
shape of the Next button to the beveled
rectangle border widget. This is a component that
Flutter provides out of the box. It takes the size you
want the cuts to be and returns an
octagonal outline. As you can see, the
button is now eight-sided. By the way, if you're
working without a designer, or you're a designer
yourself, we now have a tool that can
help you generate palettes of colors for theming. Imagine we didn't have a
complete brand guideline, but we had a color that we were
already using consistently, or wanted to use
more consistently. You can go to this website
material.io/design, and it can suggest complimentary
palettes and extended tonal palettes to go with that color. So just for fun, let's
see how Shrine would look if it were built from charcoal. We added some colors earlier
in our color constants file. Mary's changing to an
alternate theme function that uses those colors. See, very different
alternative theme very easily. Now, let's go back
to the real theme. So we've seen how color and
shape can express your brand, but what about layout? Well, our designer has read the
new guidelines on image listing cards, and decided to
make an asymmetric layout part of our Material theme. At the moment, our products
are displayed in a simple grid of cards with images. And this is the
default for grid view. Our designer wants it
broken up into threes, with asymmetric alignments,
and aspect ratios inspired by the
angles in our logo. It's a custom design
just for our app. We're going to use a
completely custom widget called asymmetric view widget
for asymmetric layout that we made earlier. It's based on the list view
widget in Material Components. By the way, you can find the
source code for everything we're doing today in the
Material Flutter code labs. Mary removed the
grid view widget we had inserted our
asymmetric view widget. Since the asymmetric
view is built on top of a Flutter
list view widget, the widgets are
recycled as we scroll. Flutter list views let you
specify the scroll direction, and we've set it to horizontal. The asymmetric layout code
is less than 100 lines. It's a very expensive-looking
component that's-- oh-- MARY XIA: What? What's going on? WILL LARCHE: I have that scarf. [APPLAUSE] MARY XIA: Will, you
have every scarf. WILL LARCHE: Yes,
thank you, Mary. Anyway, so Flutter lets you
develop in one code base, but deploy it at
both Android and iOS. The app is looking great. And I want to see how it looks
on iOS, so let's switch places. MARY XIA: Sounds good. WILL LARCHE: We'll be
using the iOS simulator for the rest of our
development to show how easy it is to switch
between the two platforms. You just set the device
selector to iPhone simulator. MARY XIA: OK, great. So Will has just
shown us how you can express your brand in your app. Now I'll talk about how the
enhancements to Material can help make your
apps stand out, and make it easy for you
to use existing components, and use guidance to build
components that, well, you know, also express your brand. The first thing
Will's going to add is an outline input
border to the text field. Right now, our text
fields just have a line on the bottom
saying it's a text field. The outline input border
wraps the whole text field with a border, making it
obvious that it's something that users can fill in. Now, you might be
wondering, how do we have any proof that this
is a better design system, or that Material Design
is a great design system? Well, we did a lot of research. And it turns out that
these types of text fields are much more
performant, and users are more likely to see
them in a busy form. They know that it's
a call to action. So that's why we're
using it here. You can also watch the
talk "Measuring Material" to learn more about
Material research. You know, that looks great,
but it doesn't look as edgy as the Shrine brand really is. You don't cut corners
with Material Design, unless you're using
a cut corners border. This border literally
cuts the corners off of your text field's outline
so that it can match the button and it can match
our Shrine logo. There, it looks octagonal. Looks great. Will, we can see your password. WILL LARCHE: Oh,
you shouldn't be able to know that my
password is yaasresearch. MARY XIA: Yeah,
so the text yields come with a built-in
property obscure text. And now we're passing in our
own Boolean is password so that we can hide our password. As I said, we build our text
fields using our own function, and it returns a widget. And we just pass that right
into our build function. Great. Now that we've spruced
up our login page, let's see what we can
do on our homepage. Our homepage currently is
one page with a menu bar. What we want to do
is add a backdrop. A backdrop allows you to
have two layers in your app. It's an intuitive way to display
both a menu and some content, rather than having a menu
pop in from the side. Will's is going
to remove the app bar from our current version,
because the backdrop comes with an app bar. Will and I built the
backdrop ourselves, but it came entirely from
Guidance by Material Design. They have a lot
of specifications for how you can do layouts
and what sort of navigation can exist. After he's done
that, he's also going to remove the homepage from our
home property in our Material app and replace that
with the backdrop. Now, the backdrop is
essentially just a stack. A stack is a way of
layering various components on top of each other-- for example, a footer. Here, our backdrop has a
front panel and a back panel, and they're stacked
on top of each other. The front panel is our
homepage, and our back panel will be a menu page. So let's see how that looks. It has the Shrine edge. We added that as well. Let's try clicking on the
icon and seeing whether or not it goes up and down. No, because we have not
implemented that yet. OK, so let's do that now. And to do this, we need to
use a transition or animation. We're going to use a
positioned transition. Essentially, this is
just a way for the parent to tell the child, hey,
you're my child widget. You start off at this
size and location, and you'll end up at
this size and location. For this case, we
want to animate from closed, which is
the bottom, to open, which is with the
whole home screen open. So let's start with
a panel animation. Now this animation is
of a type relative rect. So this is the way you
tell your animation that it wants to start off with
a certain location and size, and where it should end. It takes in a begin and
an end and a controller. So Will's typing that out now. We've already predefined what
the panel height and the height of the app bar should be. And also, we need to
pass in a controller. The controller is
responsible for orchestrating the actual animation. Every frame that is drawn
is determined by it. We now pass the panel animation
into position transition widget. Flutter comes with a lot
of different transitions-- for example, fading, rotation,
scaling, and much more. They come out of the box, so
all you have to do is use them. It takes in a rectangle
property, which is our animation, and
it takes in the child, which is the child we want
to animate up and down. So let's try animating. There we go. [APPLAUSE] Now, back to the
animation controller. As I said earlier, it's
responsible for drawing the new frames. Well, let's take a look at it. This comes out of
the box with Flutter. And this is the
code that is used. It's open source. You can see that it animates
from the value 0 and 1. You know how I said that Flutter
comes with a lot of animations already? Well, you can also
build your own if there is something
really custom you want. And then you map your widgets
to these values 0 and 1 while they animate. OK, so the material
guidelines also suggest that for a
backdrop, that users would like to tap on the top. You've switched to
the Android phone. WILL LARCHE: I know, I hit
the wrong button, I'm sorry. It's live. It's loading the new-- it's
loading the iPhone simulator. MARY XIA: Just tab
out to the uh, oh, OK. There we go, back to
the backdrop version. Anyway, so that
Material guidelines say that you want to tap
on the top of your backdrop in order to animate up and down,
as well as tapping on the app bar itself. Currently, tapping on the
top doesn't do anything. We now add a gesture detector. Flutter also comes with a lot of
gesture detectors, like on tap, on drag, on long
press, a lot more. They're meant to be extensible. They take in a function. Functions are first
class objects in Dart. And this means that we
can pass in any function and have your tap and gesture
do anything you want-- show hide, change a variable,
other things like that. So Will is now setting that
up and putting a parens after the 2. There we go. Now when you tap on the
backdrop, it should animate. WILL LARCHE: Oh
Mary, I did it wrong. Classic Will. MARY XIA: That's OK. WILL LARCHE: Help me debug. MARY XIA: Oh, that's OK. Well-- WILL LARCHE: Oh. There we go. MARY XIA: All right,
cool, we're all set. [APPLAUSE] Great, well, now you've seen
how all the enhanced new things for Material have helped
us build an app that is much more enhanced, and
well, kind of cool and much more unique. Now we're going to talk about
how delightful the developer experience is. Sometimes someone
gives you code, and you want to make
changes to that code. For example, right now
our image and our text are very close together. We want to put some
space between the two. So you can look at the
image and admire the goods, and then look down
and see the price tag. How do we do that? Well, we can use the
Flutter inspector. The inspector maps between the
UI and the exact line of code where that widget
was being created. Now Will's going to
demo the inspector. You just tap on
the inspect button. And if you tap on anywhere on
your app, it will pop up a box. And this box will then take
you to the exact widget for that app. Currently we are tapping on
that, and it shows that-- Will, I think your
inspector's running for-- WILL LARCHE: Doesn't
want to show the widgets, but we've got the render tree. MARY XIA: OK, the render tree
is a much more detailed version of your widget tree. It shows literally
every single thing that is being drawn, whereas
your widget tree only shows the widgets that
you've drawn, and not only your widgets,
but also widgets that are being drawn
by part of the system. Your widgets are
drawn in bold color. And if you right-click,
you can jump to this exact line of code. Well, here, we'll know
that this actually points to the
product card, which is responsible for drawing
the actual card with the image and text. So let's check out our
product card widget. Remember, this was given to
us and we didn't build it. Although technically,
we did build it. All right. Inside the product card,
there are two functions-- build image and build text. They are arranged in a column. We want to put space
between the two. We look at our column and
note that it says cross axle alignment at center. There's no main axis alignment. Through reading the Dart
docs, or through reading, trying stuff out,
usually even checking in the inspector, which
shows all the properties that are being defined, you'll
find that our main access alignment is set to start, even
though we never actually set it. What does main access
alignment mean? WILL LARCHE: Main
axis alignment is the direction you want things to
begin in the scroll direction. So it starts at the top. MARY XIA: So it seems like
our image and text are all going to start at the top. Let's try changing
that to center, so that inside the space
allotted to our product card, maybe our text
will center itself, rather than align
itself to the beginning. There, there's a little bit of
space, but that's not enough. Let's change that to end. We want more space. There, that looks much better. WILL LARCHE: That looks good. MARY XIA: Now you can
see your image and text with some space in between. Well, while we're
here, let's also change our image aspect ratio. Currently the images have
an image aspect ratio, I want it to be one. I want my images to be square. OK, that looks great. But who here has had a cat
walk across their keyboard? There's more than
that, I'm sure. All right, well, cats
are the number one cause of typos in code. It's a proven fact. WILL LARCHE: It's true. I've actually never
made a mistake in code. Even today, it was a cat. MARY XIA: OK, so
let's say a cat-- Nate, what's your cat's name? WILL LARCHE: Nate. MARY XIA: Oh, whoops. All right. Wait, wait, why Nate? WILL LARCHE: He's
my concat Nate. MARY XIA: OK. All right, that's
a classic, right? WILL LARCHE: You loved it. MARY XIA: OK, well, let's say,
Nate the cat negated the aspect ratio. And so now it's negative 1. What happens? You know your app's
going to crash, right, because negative
1-- and it's still-- the compiler accepts it
because it's still a float. But no, only the part that-- the widget that like
has a negative 1, the aspect ratio widget crashes. Everything else still works. Your app still scrolls. You can still go to the menu. So now let's just change
that back and reload, and let's see what happens. There, all right, all fixed. So this is one of the
cool things about Flutter. We've been making
changes, and they've been loading really quickly. Only the widgets that are being
changed are being redrawn. We've been restarting
the app in this demo. But earlier you saw the colors
would show up immediately. Asymmetric layout
showed up immediately. We did not have to
restart the app. So you could easily backtrack
and rebuild UI and try things out. And if it doesn't
work out, that's OK. You don't waste that much time. Also navigational state is being
preserved during hot reload. A couple of other
cool things-- we've been autoformatting our
code as we've been building. And also, you can add
closing labels to your code. These closing labels tell you
what widget has just finished. Let's see what it looks like. There, see? Now you know you have a text. You have widgets and columns. This way you can tell
where those braces mean. Great. Well, Will, I think
that looks pretty good. What do you think? I think it looks lovely. WILL LARCHE: Yeah,
I don't think it looks anything like
the generic blue app we had when we started. MARY XIA: All right, well,
let's come back here. All right. So let's recap. We just revamped an outdated
app with Material Design and Flutter. WILL LARCHE: Material theming
and the asymmetric layout showed how expressive
our app can be. MARY XIA: The new text
fields and backdrop showed the enhancements
to Material Components that you can use
today in Flutter. WILL LARCHE: And all
the Flutter tooling made a delightful experience
for us developers. MARY XIA: You're used to
seeing people give you custom complicated designs. And you want to work on
them, but they're just going to take too much time. But with Material Components,
your designs and code live in the same world. MARY XIA: With Flutter's
support for Material theming, it's no big deal if
your designers suddenly says, "Let's change
everything that's light blue to dark blue." You might not have to say
no to your designer anymore. We want you to spend less time
on boilerplate and more time building the things that
make your app special. MARY XIA: So you should import
the Flutter Material package today. Also, be sure to
check out our code labs where you can
code everything we talked about in this talk. They're available online
and in the code lab at IO. WILL LARCHE: Also check out
the Total Mobile Dev Made Fun with Firebase
and Flutter at 2:30, and Build Reactive
Mobile Apps with Flutter. MARY XIA: We're going
to be here after for questions, and in the
Sandbox from 2:30 to 6:00 today. [APPLAUSE] WILL LARCHE: Everything
else you need is on flutter.io
and material.io. MARY XIA: Now, go code beautiful
UI with Flutter and Material. MARY XIA: Thank you! [APPLAUSE] [PEPPY MUSIC]
