Flutter Crash Course #15 - Buttons & Press Events

all righty my friends so in the last lesson we added these two text widgets with a plus icon right here and we said that eventually there are going to be buttons that when we click on them increase the strength and the sugars so at the minute we're using a text widget but we can use built-in button widgets as well and there's a few different ones we can choose from so over on the flutter docks we're going to see we have this one right here an elevated button a filled button then we have a filled tonal

button an outline button or a text button and we get examples of those down here so this is elevated a bit of a drop shadow like that filled filled tonal so just a different variation of the color basically outlined with a board all around it and then just a text button which is just text but when you hover over that you can see a bit of a background as well so these are the different variations we can use and they all have their own widgets so this elevated one is an elevated button then we have

a filled button widget filled button. tonal so this is another named Constructor still making a filled button widget but it's making it in a different way using a different color basically then we have an outlined button widget and then a text button widget now they all have an onpressed field right here an onpressed argument and that needs to be a function so when we press this it runs a specific function and we can do something as well as on pressed we have a child field as well which is generally just a text widget to display

text inside the button all right then so let's try adding a couple of different variations of these buttons so right here when we have this text widget inside the first row so this is for the strength I'm going to instead use a filled button so I will say filled button like so and then inside here remember we need two things we need an onpressed which is going to be a function and for now I'm just going to do an inline function like so we'll come back to that and we also need a child field which

is going to be a text widget and the text in this case is just going to be a plus sign so plus if I can find it there we go all right so this can be a const so let's place const in front of that and now down here for the sugar we'll do a different kind of button just so we can see two of them so let's get rid of the text and instead we'll use a text button so this is a button without a background remember and then inside there we also need the

onclick or rather onpressed we'll just grab these things right here and paste them in here because they're exactly the same on press which is a function and then a child which is some text so if I click on this right now we're going to see two different buttons we see this one which is a filled button and this which is a text button but notice when I click on this you get that little background popping all right so we can override the colors of these which we will do shortly but before we do that I'd

like to make a couple of functions for these two things right here because at the minute they're just empty inline functions now in the future when we click on this button it's going to increase the the strength value by one when we click on this one it's going to increase the sugars number by one so let's come to the top up here and let's just Define a couple of functions inside this widget class and we can do that any kind of logic that we need to create can go inside this class so I'm going to

create a new function which doesn't return anything so void and then increase strength and this function he's just going to print out a statement for now we'll add the logic later so print and then we'll say ink strength by one all right so now I'm going to do one for the sugars so I'll say void increase sugars and then inside here again we're going to print something out and we'll say ink sugars by one all right so then we have those two functions we can hook them up down here so for this one it's increase

strength and then down here it's increase sugars now notice we don't invoke these functions because if we did that it's going to invoke them straight away when it runs this code we're just referencing the function here so that when we do press this button it knows this is the function it needs to invoke at that point all right so let's open up now the terminal so we can see any print statements it's going to be on the right over here that we um that we see it so let's click on this button first of all

and you can see ink strength by one awesome let's click on this one and it says ink sugars by one awesome so they're both working now like I said we can change the Styles because they don't match our style at the moment we want them to be brown or something so let's try doing that so to do that we come inside the filled button and we add on a style property now if we hover over this we should see that the value type needs to be of button style type now the easiest way to create

a button style is to use a convenience method on this thing right here filled button so if we paste that in and use a method called style from on it if we hover over this you'll see that it returns a button style and inside style from we can just pass in a bunch of these different arguments named arguments to style the button so don't forget your comment at the end first of all and then inside this function we're going to pass through a background color so background color and this is going to be colors do

brown and then also we could have a foreground color and this is going to be colors. white so I'm just going to leave it at that but you could add any of these other properties down here to style the button as well all right so the same is true for other buttons if we come down here we see we have the text button so I could have a style property right here and the style is again going to be this time a text button and then a convenience method called style from like so add your

comma at the end and then inside here I'm just going to add the foreground color so foreground color and it's going to be colors dot Brown all right so if I save that hopefully we can see two newly styled buttons this one's got a background color of brown and a color of white this one has a foreground color of brown all right cool so there's two different buttons that we can use now just so it looks a bit better I think what I'm going to do is actually grab this filled button thing right here in

fact I'll just grab the style and I'll change this to filled button just so they're the same and everything's consistent and I'm going to paste in the style from The Fill button save it and now we see these two buttons right here cool