Code beautiful UI with Flutter and Material Design (Google I/O '18)

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
[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]
Info
Channel: Google Developers
Views: 291,630
Rating: undefined out of 5
Keywords: type: Conference Talk (Full production);, pr_pr: Google I/O, purpose: Educate
Id: hA0hrpR-o8U
Channel Id: undefined
Length: 27min 48sec (1668 seconds)
Published: Wed May 09 2018
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.