Text isn't the only way to communicate with your users. In this video you'll be introduced to material design icon and color scheme resources.
gotten pretty far. But, the next thing that I want to create are these little boxes. These boxes that contain an icon and also a phone number, or an email address, whatever it is that you want to show. Now, you can use an image asset as an icon. our text which is our name, and finally the job title that we have here. So, I'm going to go ahead and add another child, And this is going to be a container. Now, inside this container the only child that it's going to have is a row. And very often when you're creating user interfaces in Flutter, you'll find yourself embedding rows inside columns, or columns inside rows, and this gives you that kind of grid layout pattern that makes your layout really flexible. We're going to have a fourth child which is going to be a row, and this row is going to have a whole bunch of children, including a icon. Now, an icon is a class that is drawn, instead of being shown. So for an image, it's simply displayed as is. But, for an icon it's actually drawing all of the size and the edges onto the screen. What this allows you to do, is you can on the fly for example change the color of the icon, or the size of the icon, and it's so much more flexible than simply just using an image. And by using the material.. package from Flutter, you already have access to a whole bunch of icons that Google made. So, if you take a look at the documentation for the Icons Class, Icons with an S, you can see that you have all of these icons at your fingertips. And they come from the material design icons. So, these are icons that designers at Google actually created, so that you can have a consistent theme across apps that are built with the material design look. The way that I prefer to browse icons, is actually using a tool called materialpalette.com. And not only is this really good for coming up with really intelligent, beautiful color pallettes. So, for example on the main page if you select two colors that you quite like, for example teal and say yellow, then it'll automatically generate you a eight color color pallette, even complete with an accent tone. And you can see it looks really, really nice straight up from the get go. And it also has the colors that we've been using so far, and gives you their names all in one place. If you click on them, it'll show you all the various shades that you can tap into. There's also a third tab which are the icons, and it's a really easily searchable place, where you can say let's look for an ad icon. It shows you, here are all the ones that you could possibly use. When you find one of them, you can see it has a name, right? This one's called ad_shoppingcart. So, I can simply go into my Flutter app, and write Icons, which is the name of the class that supports material design icons, .addshoppingcarts. And now almost immediately, you can see that I can add that icon that I found on here to my app, which is brilliant if you don't want to spend a lot of time finding or creating, or paying for these design resources. Now, I mentioned that icons are better than images, and we're going to give it some dimension in the horizontal axis, right? Because, we're in a row, so it's going to go from left to right. So, we'll give it a width, and let's give it a width of maybe 10 points, and that should be enough to separate those out a little bit, make it look just that bit nicer. So finally, I'm going to give my container a color, just so that'll show up as a separate piece of information from the rest of my widgets. So, let's give this a color of white, and let's hit Save. And now, I have to change my icon back into teal, so that it's visible. And I can make it come away from the edges of the screen a little bit, by adding margin. So, a lot of the widgets inside Flutter, will have margin or padding as properties that you can change. And they all work exactly the same way as we saw earlier with the columns and the rows. We use Edge Insets, and I'm going to add Edge Insets only that are different for the top and bottom, and also left and right. So, I'm going to use symmetric, and I'm going to say that the vertical sides, so the top and bottom, are going to have 10 points of margin, and the horizontal is going to have 25 points of margin. Now, you can see that our container comes away a little bit from the edges, and it looks just a little bit better. And our container also has padding. So, let's add maybe 10 pixels of padding to all four sides. And now we have our little card, right? As a challenge, I want you to create the other container. The one where you have your email address and an email icon. So, I want to challenge you to use the Flutter documentation, and also what you learned in this lesson, to create that second card. Pause the video and give that a go now. Okay, so we know that we need another container, right? It's pretty much the same as this one. So, let's find out where our container ends, it's right about here. And let's go ahead and collapse it. And then, we're going to add another container underneath it, and this one is also going to have the same amount of padding, so that was Edge Insets all with 10 points. And then it's going to have a margin of symmetric margin with 10 on the vertical, and 25 on the horizontal. And finally, it's going to have some content, and the content is going to be under the child property, and it's going to be a row that we want to create. The row is going to have some children, and these children include one a icon, that comes from the Icons Class. You can either scroll through this to find an icon that looks right, but in this case it's going to be email. Or, you can take a look at the websites that we spoke about earlier on. Now that I have my email icon in there, I'm going to change the styling of that icon to make it look a bit more like the other one. So, I have to change its color to teal, and then I get to add my text, which can really say anything you want it to. But, in my case I'm going to add maybe an email, let's say [email protected] And then I'm going to change its style to have a text style, and maybe we'll go for a font size of 20 to match with the other one, a color of Teal 900, and the font family is of course also going to be Source Sans Pro. And let's hit save, and let's see if we get what we wanted. Okay, so we can see that the icon has disappeared, so it's the same color as the background. We've got our text formatted in the same way as the previous one, and all we have to do now is to give our container a white background. And it should show up underneath the other one, and show us what else is missing. So, the only thing that looks odd to me here is just a little bit of space between the icon and the text. So, to do that we have to add our Sized Box, with a width and that was going to be 10. And now if we hit save, then it's starting to look pretty good. In the next lesson, we're going to finalize this app and we're going to make these info sections a little bit nicer looking, using a Flutter widget called Card. So, for all of that and more, I'll see you in my next lesson.
This course was created by London App Brewery. We are pleased to host this content in our library.