All language subtitles for 4. Adding Gesture Detection with Flutter Button Widges

All right.
1

So now that we've completed the design for our app, we're finally ready to actually give our app some
2

functionality.
3

And the first thing we have to do, is we have to detect when a user actually clicks on one of the images.
4

And the way that we're going to do that is by using a button.
5

If you head over to the widget catalog, and go into the material components, you'll see that there's a
6

whole bunch of buttons that we can choose from. Such as a raised button, which has a little bit of a shadow
7

around it.
8

The floating action button, which we've already seen before, and a flat button which reacts to touches
9

by filling with color.
10

And there's icon button, so a button that just has an icon in it, dropdown, popup menu, a whole bunch
11

of other things that you could use. The one that we're going to pick is a flat button.
12

And I'm going to put that flat button around our first dice image, and change the tree to look like this.
13

The way that we're going to do this is we're going to select the widget that we want to wrap our flat
14

button around, which is going to be our image,
15

the first one here of two. And then I'm going to hold down OPTION or ALT and hit ENTER.
16

And now, I get to wrap it with a new widget. And it's going to be a flat button
17

in this case.
18

Now remember that we always want to get the DART formatter to help us, and we need to add a comma after
19

every widget so that when we hit save, it will reformat it correctly for us.
20

And this way our code looks neat and tidy and we can see easily at a glance, that the image is a child
21

of the flat button.
22

Now the thing that you notice here straight away, is that the left image has suddenly become smaller.
23

Or why is that? Or probably it's gotten a little bit more padding added to it
24

that came along with the flat button.
25

Now how can we find out for sure?
26

Well when your app is running, and you click on the refresh button, then our flat button shows up.
27

And if we click on the flat button, then down here will popup all of the properties that are currently
28

set for that button. And you can see that it's a really long list and include things such as the text
29

color or the color of the button.
30

But at the moment, all of these are null because it's actually just a see through component which you
31

can see here.
32

but the user can't see, because it doesn't have any color. It doesn't have any background. It doesn't have
33

any text. It only has a single child which is our image here.
34

If we click inside anywhere inside this area with the properties and you start typing for padding, and
35

if you hit the down button, you'll go through all the places where there's padding applied to this widget.
36

Then you can see that the button actually by default, comes with 16 pixels of padding. So there's padding
37

that's applied to the left, and the right, which is why the image that's inside our flat button is actually
38

even smaller than the one that isn't inside a flat button. To fix this and get it back to the appearance
39

that we had before,
40

all we need to do, is just remove the padding that we applied and use the one that came from the button.
41

So let's hit save, and you can see all we have now is the padding
42

that's from our button. And if I refresh that, then my padding disappears. All I'm left with is my button.
43

Let's click somewhere around here and start typing padding.
44

And if I go down a bit, you can see all we have now is the padding that came with the button, which is
45

16 from the left and 16 from the right.
46

And if I just enable the debug paint, then you can see that my button is this box right here.
47

And it's got 16 pixels from the left and 16 pixels from the right.
48

And this particular notation has four values going from left, to top, to right, to bottom. Kind of in a circle
49

if you will.
50

And again this is very similar to what happens on the Web. In Chrome,
51

we have something called Chrome developer tools, which allows us to right click on pretty much anything
52

we see on screen, click 'inspect' and we can see all of its properties right here. Such as the color of
53

the element, or the font family, or things like what size it is, how much padding, how much margin, how much
54

border it has.
55

So this is very very similar.
56

So sometimes when you're confused why something looks a certain way, it might help to dig into these
57

properties inside the Flutter inspector. But right now, I'm gonna pop it away and I'm going to go ahead
58

and remove the padding from my second button and also embed this image inside a flat button.
59

Now you can play around with which button you decide to choose.
60

So the other popular one is the raised button. And if you just hit save, you'll notice that it comes with
61

a color.
62

It comes with some shadow, but it's actually not really what we want it to look like.
63

All we want is just the image to appear as the button itself.
64

So in this case, a flat button works perfectly.
65

Now that we've seen how the flat button looks, it's time to actually make it do something.
66

And if you notice right here in the margin on the right, we have these little yellow lines. And Android
67

Studio does this whenever it tries to warn you that something might be wrong with your code.
68

So we'll see this inside Dart analysis as well.
69

And remember that when this icon is yellow, it's a warning which means that the code will actually run
70

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
71

to prevent you from crashing your app, because it's detected something.
72

It will definitely fail.
73

In this case, what it's telling us is something about a parameter called 'onPressed' is required, both on
74

line 25 and on line 30.
75

Now if you have a whole bunch of warnings and errors in here,
76

double clicking on it to get your cursor to move to it, is a really quick and easy way of figuring out
77

what problems you have.
78

So what it's telling us, is that flat button has a property called onPressed, and this hasn't been defined
79

yet.
80

Because if you're going to use a button, you probably should tell the button what it's going to do when
81

it gets pressed, right?
82

And by us not telling it what it should do,
83

it's a bit like hiring a new worker and just getting them to sit in the corner and not really know what
84

work they have to do.
85

It's very confusing for the button.
86

So if we have a look at our documentation for flat button, it says here that it has a property called
87

onPressed and this is a required property.
88

This is the reason why we're getting those errors in Dart analysis at the moment. Because we haven't specified
89

something that is required by the button.
90

So it means that whenever you're going to use a flat bottom widget, you better tell it what it should
91

do when it gets pressed.
92

Now if you scroll down the list of properties, you'll find our onPressed property. And it says here in
93

the documentation, that this expects something called a void callback when the button is tapped or otherwise
94

activates it.
95

So basically when you press the button, what it should do. And if we click on this void callback, it tells
96

you that this is something that have no arguments and return no data.
97

So the way that we would write this is simply a set of parentheses which are empty, and it's empty because
98

there are no arguments or no inputs going into this void callback.
99

And then we have a set of parentheses which is going to contain what should happen when this flat button
100

is pressed.
101

So this, together, is a void callback.
102

And if you come from other programming languages, you might know this as an anonymous function.
103

Now in the next lesson, we're going to dig into this in a lot more detail.
104

If you're unfamiliar with functions and arguments and inputs and outputs.
105

But for now, all you need to understand, is that inside this set of curly braces, is what will happen when
106

the flap button gets pressed.
107

So here we can write some code.
108

So for example let me write a simple print statement.
109

So this is a function that will print whatever I put inside the parentheses, and inside the parentheses
110

are the input I'm going to give to this function to tell it what it should print.
111

So in this case, I'm going to say 'left button got pressed' and then we'll close off the function with
112

a semicolon.
113

And now if I hit save, and when I press on this button right here, what we expect to happen is the flat
114

button that I'm pressing on, will detect a touch event and it will trigger this part onPressed.
115

And once that happens, it's going to look inside these curly braces to see what it should do.
116

And in this case we're telling it to print this piece of text into the console.
117

So let's open up the console and let's see what happens when I click on this button. And you can see
118

we get a message from Flutter, which is our app over here.
119

And it says that left button got pressed, exactly what we told it to print.
120

So print statements are commonly used across different programming languages. And it helps you to diagnose
121

when something goes wrong.
122

So for example, if we didn't link this up properly and it wasn't actually triggering our onPressed, well
123

then our print statement wouldn't be shown down here as we know there's something wrong with our flat
124

button.
125

Now it's your turn.
126

Try and do the same so that when I click on the right button here, that I can get a message printed down
127

here, saying that the right button got pressed. So pause the video and try and complete that challenge.
128

OK.
129

Well this should be pretty simple.
130

We've got our flat button already added to our image, so there already is a button there.
131

But it's missing the onPressed parameter.
132

So let's add that. Let's add our onPressed and let's add our void callback which, if you remember, consists
133

of an empty set of parentheses and a set of curly braces. And it's inside the curly braces where we specify
134

what should happen when that button got pressed.
135

And in this case we simply want to print the words 'right button got pressed' and we're going to end the
136

function call with a semicolon.
137

And now if I hit save and hot reload my app, now if I click on the right side, I get 'right button got
138

pressed' printed.
139

If I click on the left side I get 'left button got pressed'.
140

So in this lesson, we've created a flat button widget and we've specified what should happen when it
141

gets pressed.
142

And we've seen that we can use print statement to print text that we write into the console, so that
143

we as the developer, know what's going on. But the user doesn't, right? All the user sees, is what's on screen
144

here and they're seeing that when I click on it,
145

there's this sort of animation that makes it look like something's happening, but actually nothing's
146

happening.
147

So the app must be broken.
148

Well we know that it's actually working perfectly fine, but we just need to be able to update the images
149

when the user clicks on the buttons. So that the appearance of the app updates when the user interacts
150

with it.
151

Now we're going to cover that, and more in the coming lessons.
152

So once you're ready, I'll see you on the next lesson.