Flutter Tutorial for Beginners #9 - Buttons & Icons

Key Takeaways

or rather than gang so in this video I'd like to show you how to use icons and buttons and then a mixture of the two as well so I'm right here in the center widget now and I've stripped out the images from the last video and we have this child property we need to specify a widget for the child and what we're going to do is look at icons first and to do that we'll use the icon widget that's simple so let's open this up and the first item inside this icon widget is going to be what icon we actually want to use now we can use any icons from the material design library and to access those and to see them we say icons and then dots and then we can see all of the different icons available to us right here the name of them and a sync preview of how they look as well the one I'm going to use is called airport underscore shuttle which is like a little boss so that's all I need to do that's the first parameter and if I save this now then you should see that little icon right there in the center now we can customize this a little bit if we want to so I could give this a color by saying color and then that's going to be equal to colors dots light blue for example if I save it again then now this is going to be a light blue now that's tiny in a minute so if I wanted to increase the size I could give it a size property and so 250 for example and save that and now it's a bit bigger okay so that's it that's an icon that's how simple it is we just use the icon widget the first argument is going to be the actual icon we want to use then we have these other different properties as well and again if you select one of these widgets and press ctrl Q while it's selected you can see all of the different properties we can use inside the icon widget okay so we've seen an icon now let's have a look at buttons so there's a couple of different type of buttons first of all I'll show you the raised button and by raised I mean that it sits away from the page so we should have some kind of shadow and inside this button first of all we're going to do an on pressed property because if we don't have that then flutter is going to shout us because buttons are there to be pressed and this is a acquired property so impressed is gonna equal two and then all of us function for now meaning that it doesn't have a name and we might come to that in a minute and I'll show you what can happen when we press a button but for now let's just leave it blank now what else do we want inside this button well we can specify text inside a child property so remember when we're nesting a widget inside a widget we use this child property a lot of the time now we want text inside this raised button widget so we're going to use the child property and then nest a text widget inside it alright so whatever we type in this text widget is going to appear on the button so I'll just say click me like so and I'm going to save that now and we should see a button now that says click me awesome now if we wanted to we could open this up and we could you know do a textile as well to style a text inside the button I'm not going to do that I'm going to leave it as this for now keep it nice and simple but what it will do is add on any color property to this button and I'm gonna say colors and then let's just use light blue again you can choose whatever color you want save that and it says click me and if you look really closely by the way you can see that this is a raised button because it has a little shadow it's raising it away from the page giving it that kind of 3d effect so that's a raised button just as easily we can do a flat's button so I can say flat button and then save this and then now it's going to take away that shadow so that's the major difference there one of them has a shadow that's the raised button one of them doesn't ok so I said I'd come back to this on pressed property right here so this on pressed property takes a function as a value and inside the function this is code that we can execute when someone presses this button so for example I could do something like print a statement to the console and I'll just say you flicked me okay so now if anyone ever clicks this button then is going to fire this function and print this to the console now I'm gonna save it and I'm also going to open up this run tab down here and I'm gonna go to click me and you can see now this is printed to the console so whenever anyone clicks on this button now this function is going to fire I can do it again and it happens again awesome so that's buttons in a nutshell and again if you click on this press ctrl Q you can see all of the different properties that we can give to a button as well so now I'd like to show you how to add an icon inside a button with some text as well so let me now get rid of the flat button and what I'm gonna do instead is say okay we'll have a raised button and then I'm going to also say after this button dot icon and that means basically we want an icon inside this button as well so inside this and first of all we're going to say unpressed I'm going to leave this as a blank function we don't need to do anything inside it and then under that I'm going to do an icon property and this needs to use the icon widgets and then the icon I want to use is going to be just the mail icon like that now I'm not going to edit with the color of the icon or anything like that I'm just going to leave it as is the next property I'd like to do is going to be a label praten and a label property is going to be the text which sits next to the icon so I'll just use a text widget for this and the text can be male me something like that and then finally let's give this a color and we'll do colors dots amber something like that okay cool so if we save this now it looks something like this and again if we wanted to customize the icon with the color and the size we can do same goes for the text we could make this white and bit bigger something like that it's up to you all the customization options are there and available to use but anyway that's how we add icons inside buttons like this now I want to show you one more thing and that is something called an icon button which is basically just a small icon which can be pressed basically so let's get rid of this again and finally I'm going to say this time we want an icon button and then inside this we need the on pressed property first of all which is going to be a we're not going to put anything inside that function for now we know how it works now and then underneath that I'm gonna say the icon is going to be an icon widget and we want the icons and then dots let's just use alternate email which is the @ symbol and then after that we'll specify a color and we'll make this Amber so we'll say colors dots amber like so okay so have we done this correct I think so let me save it now and now we can see this little @ symbol doesn't look much different from where we just had an icon the only difference is now it's pressable on this function will fire when we press it so let's just say prints and then you clicked me like so save it and now when we click this icon we can see you click me so that's the major difference between just using an icon and an icon button so hopefully now you've got the general idea of how to use icons and buttons we are going to be using them a lot in our project as we go forward so don't worry you will get more practice and I will show you different properties we can use inside them this is your introduction to them