Will is a software engineer on the Material Design team working on Material Components for Flutter and iOS. He earned his bachelor of fine arts from the Boston Conservatory ('08) and was previously the chief product officer of a startup in fashion and e-commerce. His husband is also a mobile engineer.View the profile
Mary is a software engineer on Fuchsia, focusing on modules and UI. She graduated from the University of Pennsylvania with degrees in Computer Science and Biology.View the profile
About the talk
To stand out, apps need to have smooth, motion-rich, customized designs. Watch beautiful UIs come to life in record time with Flutter and the latest evolution of Material Design. Learn how Flutter’s layout and stateful hot reload can make UI development intuitive and fast, how to go beyond stock widgets to deliver customized interfaces, and how to add motion and animation for delightful user experiences. Best part: do this all with a single codebase that produces native apps on iOS and Android.
01:06 Material Design
04:15 Design guidance
07:30 Titles and headlines
11:54 App test on iOS
16:05 Panel animation
19:50 Developer experience
24:00 Aspect ratio
Good morning. My name is Mary. I'm a software engineer who works with flutter is expressive and hand and a delightful developer experience. I will do it for both Android and iOS, but build at once using flutter. Butter 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. Butter comes pre-built with a large library of
widgets such as containers list fuse that are efficient scrolling gestures and more. The 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 design system used in millions of apps and sites all around the world. What's new this year is material theming Material female helps you systematically apply brand throughout your design 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 can even choose color palettes from Art 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. And I'm excited to announce today. That flutter is a first-class platform in material design. From today forward you'll find documentation for Android iOS web and flutter throughout material components the material tool suite and the material
guidelines. So it sounds like materion a flutter have really embraced each other. What's it like building an app with them? I'm glad you asked Mary. Let's see how they work together at 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 HomeGoods, but unfortunately the UI is disturbingly last season. Yes, I think we all have Mary. Yep, Google Docs. They look very similar. What material first came out many apps Faithfully follow the material
guideline and so we ended up with identical to each other. They look like Google's brand rather than their own. We want your apps to look like your brand material theming helps with that. It applies a consistent brand elements throughout your UI. The weather climate serial theme into Shrine and show how material on flutter expressive with its customizable widgets layout some themes enhanced with new components and style plycar text field in backdrop and delightful offering developer tools and easy accessibility off components. Now
what is a widget in flutter a widget is pretty much everything. There are your buttons your cards or text Fields. All your views are widgets. You can also compose your own which it's from existing ones and we'll show you how to do some of that today to material components is a library of widgets that are expressive enhanced and delightful to work with So we'll start by building this app. We've already built it we're going to enhance it. Now. It's is built with the default seeming and doesn't have any of the latest of material. So let's look at the guidance or designer. It's a v
logo shaped layout in color. Okay, great. Let's start with the color seem very well. You could yes, 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 unclaimed. So we've been ported the material flutter package in all of our apps files. We have the Untamed app running an emulator shrines 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 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. It's home property is set to a homepage widget which we built just for trying there's also a seam property and you can pass in a data a theme data in the apps Constructor. All the descendants widgets of the app will have this team apply to them. Let's look at the color theme or designer gave us. The color theme is most of the colors you need an app like primary and secondary colors background and a
surface color for things like modal's. It also has the colors you need for texting icon that are drawn on the primary secondary background in surface colors. If there's even the primary variant for Anytime 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 three different 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 are Apple use on the global level. She started with a light theme and now she's changing some of the values. She's having a primary texting from a function that she built herself. It's going to use as a base the existing primary texting and then it's going to change one of the values to be Brown. Now she's out of the icon theme.
She's going to again start with the basics theme and then change the values that she wants to be different copy with by the way is a very common. That's it that you'll see on a lot of flutter widgets. It allows you to copy an instant but change whatever parameters you put inside. Now she's going to set the button color throughout the app for raised or contains buttons. reload What do you think? 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 that 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. For the login screen itself is a widget and every widget has a build method in if you construct your UI are built function has a safe area widget which can account for the nuts pop on a lot of newer phones inside. We have the logo the text fields and buttons in a listview we could have used to call him widget, but the
list view automatically handles scrolling on smaller-screen. I'm in the keyboard appears that these are all which is provided by flutter. Note that the bill text field function Mary and I wrote return the widgets. This is directly called in our build function. We can even pass in our own parameters to this function. It's not a static right now. The text field is automatically using the global color themes primary color as it's active color and you can see when she's typing the floating placeholder and underline decoration are not very accessible. We could change or Global
themes primary color or we can change just the primary color of our text field to the primary vary in their ancestors Theme by being wrapped in a new theme. If we highlighted widget in press Alt Enter a shortcut menu appears and one of the comment shortcut does wrapping a widget with another widget will wrap the text field in a 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 store in the Tangled based on our logo Mary's wedding the shape of the next button to the beveled rectangle border
widget. This is a component that flutter provide 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 your designer yourself, we now have a tool that can help you generate pallets of colors for theming and that we didn't have a complete brand guidelines, but we had to tell her 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 complementary
pallets and extended tonal pallets 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 constant file marries changing to an alternate theme function that uses those colors. Thief very different alternative name very easily Let's go back to the real team. Shape can express your brand. But what about layout 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 grade 2 heart designer wants a broken up into threes with asymmetric alignment and aspect ratios inspired by the angles in our logo. It's a custom designed just for our app. We're going to use a completely custom widget called asymmetric view widget for asymmetrically out that we made earlier. It's based on the list view widget in material components. By the way, you can find a source code for everything we're doing today in the material flutter code labs. Mary remove
the grid view widget we had inserted are asymmetric do with it since the asymmetric view is built on top of a flutter listview, Widget. The widgets are recycled as we scroll flutter list views let you specify the scroll Direction and we've said it's a horizontal lines. It's a very expensive looking component. That's what's going on. I have that scarf. Well, you have every scarf anyway, the app is looking great. And I want to see how it looks on iOS. So
let's switch places sounds good. 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 set the device selector to iPhone simulator. Okay, great. So we'll have just shown us how you can express your friend in your app. Now, I'll talk about how the enhancements to material can help make your app stand out and make it easy for you to use existing components and used to build the components that Person looking to add is an outline
improv order to the text field right now or text Fields just have a line on the bottom saying it's a text field the outlet in order wraps the whole text field with a border making it obvious that it's something that users can fill in. How do we have any proof that this is a better design system or a material design is a great design system a lot of research and it turns out that these types of tests text field are much more performance and users are more likely to see them in a busy form. They know that it's a call to action. Stop. 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 outline so they can match the button and it can match our Shrine logo that looks like tagging all looks great. We can see your password. You shouldn't be able to know that my password is gone
3/3 Boolean is password so that we can hide our password. As I said, we built a text field using our own function and it returns of widgets and we just passed that function. Great now that we spruced up our login page. Let's see what we can do. Our homepage currently 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 remove the app bar from our current version because the
backdrop comes within that far the backdrop ourselves by material design layouts and sort of navigation can exist. After he's done that he's also going to remove the home page from our home property in our material app and replace that with the backdrop is essentially just a stack a stack on top of each other. Here are backdrop had the front panel and a back panel and they're stacked on top of each other. Their front panel is our home page and our back panel will be a menu page. So, let's see how that looks. It has a strain 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. Okay. So let's do that now and to do this, we need to use a transition or animation. We're going to use a position transition. Essentially. This is just a way for the parent to tell the child. Hey, you're my child wouldn't 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 what the whole home screen open. So let's
start with a panel animation. Now that's animation is of a type relative wrecked. So this is the way you tell your animations that it wants to start off with a certain location size and where it should end. It takes in a beginning and an end and a controller. The world typing that out now, we've already predefined what the panel height and the height of the app bar should get 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. When I pass the tunnel animation into a position transition widget or comes with a lot of different transition, for example, fading rotation scaling and much more they come out of the box. So all you have to do is use them. Text in a rectangle property, which is that renovation and it takes in the child, which is the child. We want to animate up and down. Let's try animated. There you go. Stop back to the Other Nation controller. As I said earlier. It's responsible for drawing when you frame. Well, let's take a look at it. This is us comes out of the
box of flutter. And this is a code that is used. It's open source, you can see that it makes from the value of 0 + 1. You know how I said that flutter comes with a lot of animations already. There's something really custom you want and then you met your widgets to these values 011 while the anime. Okay. So the material guidelines also suggest that for a backdrop that users would like to tap on the top. You switch to be Android phone. I don't have the wrong button. I'm sorry. It's live. It's learning the new it's only the iPhone simulator about to
the okay, doc drop version anyway, so thick 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 topping on the top doesn't do anything. We know at adjuster detector. What are also comes with a lot of Jethro detectors like on tap on drag along press a lot more. They're meant to be extensible. They taken a function functions are first class objects and art in
this means that we can pass in any function and have your tap and gesture do anything. You want show hide change variable other things like that. So well is Now setting that up and Putting a parens after the two there we go half on the backdrop. It should animate on marriage it wrong classic will. That's okay. Help me debug. That's okay. Well. Or we go. All right, cool. We're all set. Now. You see all the enhanced new things for material have helped us build up that is much more enhanced and kind of cool and much more unique. Now we're going to talk about how
delightful the developer experiences. Sometimes that someone gives you code and you want to make changes to that code for example of right now our image and our texts are very close together. We want to put some space between the two so, you know, you can look at the image and admire the goods and then look down and see the price tag. How do we do that? We can use the flutter inspector the inspector Maps between the UI and the exact line of code. Where is that which it was being created? Now we'll get a 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. Well, I think your inspectors running for. Doesn't want to show the widgets for we've got the render tree is a much more detailed version of your widget tree. It shows literally every single thing that is being drawn. Where's your widget tree only shows the widget 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 will know that this actually points to the product card the witch is the responsible for drawing the actual card with the image and text. So let's check out our product card widget. Remember, this is given to us and we didn't build it. Although technically, we did build it inside the product are there 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 call him and note that it says cross axle alignment center. There's no main axis alignment there meaning the dark docs or through Reading trying stuff out. Usually even checking in the inspector which shows all the properties are being defined. You'll find that our main axis alignment is set to start even though we never actually said it. What does Main axis alignment mean? Main access alignment is the direction you want things to begin in the scroll Direction so starts the top
trending back to Spencer. So that inside the space allotted to our product card. Maybe our texts will Center itself rather than you know line itself to the beginning. There there's a little bit of space, but that's not enough. Let's change it to end if you want more space. There that looks much better. Now. You can see your image and text with some space in between but while we're here, let's all the change your image aspect ratio images have a show. I want to be images to be square.
Okay. Looks great. But who here has had a cat walk across their keyboard? There's more of them sure the number one cause of typos and code. It's a proven fact. It's true. I've actually never made a mistake and code even today. It was a cat. Okay, so let's say a cat mate. What's your cat's name? All right, that's a classic the cat negated the aspect ratio what happens? You know you're asking to crash right because it's so accept it because it's still afloat. But no only the part that the widget that
likes has a negative 1 ratio widget crashes. Everything else still works wraps those Scrolls. You can still go to the menu. Cenotes change that back and reload and let's see what happens. They're all right. I'll fix. This is one of the cool things about flutter. We've been making changes and they've been loaded really quickly only the widgets that are being changed are being redrawn. We've been restarting the app in the play. Are you saw the colors would show up immediately asymmetrically out
showed up immediately. We did not have to restart the app. So you can easily backtrack and rebuild you I and try things out and if it doesn't work out, okay, 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 Auto formatting our code AS we've been building and also you can add clothing labels to your code these clothing labels tell you what which it has just finished. Let's see what it looks like. They're seeing how you know, you have a text you have widgets
this way. You can tell where the what those braces mean. Great. What will I think that looks pretty good? What do you think? I think it looks lovely. I don't think it looks anything like the generic we had when we started. So let's recap. We just revamped and outdated app with material design and flutter. Material theming an asymmetric layout showed how expressive are at Canby backdrop shows the enhancements to Michelle components that you can use today and flutter
and all the flutter tooling made it a delightful experience for us developers. Custom complicated designs. Do you want to work on them? But there's going to take too much time, but what's material components your designs and code live in the same world. With flutter support for material theming it's no big deal. If your designer 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 you can code everything we talked about in this talk. They're available online and in the code Lab at Ajo and field reactive mobile apps with flutter. We're going to be here after 4 questions and in the sandbox from 2:30 to 6 today. everything else you need is on flutter. IO and material. IO material
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.