All right.
So now that we've completed the design for our app, we're finally ready to actually give our app some
functionality.
And the first thing we have to do, is we have to detect when a user actually clicks on one of the images.
And the way that we're going to do that is by using a button.
If you head over to the widget catalog, and go into the material components, you'll see that there's a
whole bunch of buttons that we can choose from. Such as a raised button, which has a little bit of a shadow
around it.
The floating action button, which we've already seen before, and a flat button which reacts to touches
by filling with color.
And there's icon button, so a button that just has an icon in it, dropdown, popup menu, a whole bunch
of other things that you could use. The one that we're going to pick is a flat button.
And I'm going to put that flat button around our first dice image, and change the tree to look like this.
The way that we're going to do this is we're going to select the widget that we want to wrap our flat
button around, which is going to be our image,
the first one here of two. And then I'm going to hold down OPTION or ALT and hit ENTER.
And now, I get to wrap it with a new widget. And it's going to be a flat button
in this case.
Now remember that we always want to get the DART formatter to help us, and we need to add a comma after
every widget so that when we hit save, it will reformat it correctly for us.
And this way our code looks neat and tidy and we can see easily at a glance, that the image is a child
of the flat button.
Now the thing that you notice here straight away, is that the left image has suddenly become smaller.
Or why is that? Or probably it's gotten a little bit more padding added to it
that came along with the flat button.
Now how can we find out for sure?
Well when your app is running, and you click on the refresh button, then our flat button shows up.
And if we click on the flat button, then down here will popup all of the properties that are currently
set for that button. And you can see that it's a really long list and include things such as the text
color or the color of the button.
But at the moment, all of these are null because it's actually just a see through component which you
can see here.
but the user can't see, because it doesn't have any color. It doesn't have any background. It doesn't have
any text. It only has a single child which is our image here.
If we click inside anywhere inside this area with the properties and you start typing for padding, and
if you hit the down button, you'll go through all the places where there's padding applied to this widget.
Then you can see that the button actually by default, comes with 16 pixels of padding. So there's padding
that's applied to the left, and the right, which is why the image that's inside our flat button is actually
even smaller than the one that isn't inside a flat button. To fix this and get it back to the appearance
that we had before,
all we need to do, is just remove the padding that we applied and use the one that came from the button.
So let's hit save, and you can see all we have now is the padding
that's from our button. And if I refresh that, then my padding disappears. All I'm left with is my button.
Let's click somewhere around here and start typing padding.
And if I go down a bit, you can see all we have now is the padding that came with the button, which is
16 from the left and 16 from the right.
And if I just enable the debug paint, then you can see that my button is this box right here.
And it's got 16 pixels from the left and 16 pixels from the right.
And this particular notation has four values going from left, to top, to right, to bottom. Kind of in a circle
if you will.
And again this is very similar to what happens on the Web. In Chrome,
we have something called Chrome developer tools, which allows us to right click on pretty much anything
we see on screen, click 'inspect' and we can see all of its properties right here. Such as the color of
the element, or the font family, or things like what size it is, how much padding, how much margin, how much
border it has.
So this is very very similar.
So sometimes when you're confused why something looks a certain way, it might help to dig into these
properties inside the Flutter inspector. But right now, I'm gonna pop it away and I'm going to go ahead
and remove the padding from my second button and also embed this image inside a flat button.
Now you can play around with which button you decide to choose.
So the other popular one is the raised button. And if you just hit save, you'll notice that it comes with
a color.
It comes with some shadow, but it's actually not really what we want it to look like.
All we want is just the image to appear as the button itself.
So in this case, a flat button works perfectly.
Now that we've seen how the flat button looks, it's time to actually make it do something.
And if you notice right here in the margin on the right, we have these little yellow lines. And Android
Studio does this whenever it tries to warn you that something might be wrong with your code.
So we'll see this inside Dart analysis as well.
And remember that when this icon is yellow, it's a warning which means that the code will actually run
and it'll try to build it. But when it's red, then it's a lot more angry about what you did and it'll try
to prevent you from crashing your app, because it's detected something.
It will definitely fail.
In this case, what it's telling us is something about a parameter called 'onPressed' is required, both on
line 25 and on line 30.
Now if you have a whole bunch of warnings and errors in here,
double clicking on it to get your cursor to move to it, is a really quick and easy way of figuring out
what problems you have.
So what it's telling us, is that flat button has a property called onPressed, and this hasn't been defined
yet.
Because if you're going to use a button, you probably should tell the button what it's going to do when
it gets pressed, right?
And by us not telling it what it should do,
it's a bit like hiring a new worker and just getting them to sit in the corner and not really know what
work they have to do.
It's very confusing for the button.
So if we have a look at our documentation for flat button, it says here that it has a property called
onPressed and this is a required property.
This is the reason why we're getting those errors in Dart analysis at the moment. Because we haven't specified
something that is required by the button.
So it means that whenever you're going to use a flat bottom widget, you better tell it what it should
do when it gets pressed.
Now if you scroll down the list of properties, you'll find our onPressed property. And it says here in
the documentation, that this expects something called a void callback when the button is tapped or otherwise
activates it.
So basically when you press the button, what it should do. And if we click on this void callback, it tells
you that this is something that have no arguments and return no data.
So the way that we would write this is simply a set of parentheses which are empty, and it's empty because
there are no arguments or no inputs going into this void callback.
And then we have a set of parentheses which is going to contain what should happen when this flat button
is pressed.
So this, together, is a void callback.
And if you come from other programming languages, you might know this as an anonymous function.
Now in the next lesson, we're going to dig into this in a lot more detail.
If you're unfamiliar with functions and arguments and inputs and outputs.
But for now, all you need to understand, is that inside this set of curly braces, is what will happen when
the flap button gets pressed.
So here we can write some code.
So for example let me write a simple print statement.
So this is a function that will print whatever I put inside the parentheses, and inside the parentheses
are the input I'm going to give to this function to tell it what it should print.
So in this case, I'm going to say 'left button got pressed' and then we'll close off the function with
a semicolon.
And now if I hit save, and when I press on this button right here, what we expect to happen is the flat
button that I'm pressing on, will detect a touch event and it will trigger this part onPressed.
And once that happens, it's going to look inside these curly braces to see what it should do.
And in this case we're telling it to print this piece of text into the console.
So let's open up the console and let's see what happens when I click on this button. And you can see
we get a message from Flutter, which is our app over here.
And it says that left button got pressed, exactly what we told it to print.
So print statements are commonly used across different programming languages. And it helps you to diagnose
when something goes wrong.
So for example, if we didn't link this up properly and it wasn't actually triggering our onPressed, well
then our print statement wouldn't be shown down here as we know there's something wrong with our flat
button.
Now it's your turn.
Try and do the same so that when I click on the right button here, that I can get a message printed down
here, saying that the right button got pressed. So pause the video and try and complete that challenge.
OK.
Well this should be pretty simple.
We've got our flat button already added to our image, so there already is a button there.
But it's missing the onPressed parameter.
So let's add that. Let's add our onPressed and let's add our void callback which, if you remember, consists
of an empty set of parentheses and a set of curly braces. And it's inside the curly braces where we specify
what should happen when that button got pressed.
And in this case we simply want to print the words 'right button got pressed' and we're going to end the
function call with a semicolon.
And now if I hit save and hot reload my app, now if I click on the right side, I get 'right button got
pressed' printed.
If I click on the left side I get 'left button got pressed'.
So in this lesson, we've created a flat button widget and we've specified what should happen when it
gets pressed.
And we've seen that we can use print statement to print text that we write into the console, so that
we as the developer, know what's going on. But the user doesn't, right? All the user sees, is what's on screen
here and they're seeing that when I click on it,
there's this sort of animation that makes it look like something's happening, but actually nothing's
happening.
So the app must be broken.
Well we know that it's actually working perfectly fine, but we just need to be able to update the images
when the user clicks on the buttons. So that the appearance of the app updates when the user interacts
with it.
Now we're going to cover that, and more in the coming lessons.
So once you're ready, I'll see you on the next lesson.