All language subtitles for 19. Connecting Functions & Buttons

So whilst we can certainly improve the styling, I first of all want to improve the behavior of the buttons.

Right now, they're not doing anything when we press them and

that happens because we haven't wired them up to anything.

Now onPressed here takes a function, that's important,

the value of onPressed is a function that returns void,

this is what this here means. Now

previously, for example on title here,

we saw that title wanted a widget.

If we hover over onPressed, we see this strange thing

and that simply means a function that takes no arguments

and doesn't return anything but a function,

this here is basically the type definition for a function, arguments and return value.

So onPressed takes a function,

now we got a couple of different options here.

We can add a new function outside of the class,

that's a bad idea.

Your object, so your classes, should always work standalone, so everything that belongs to a widget should

go into the same class, all the data a widget uses and so on should belong into the same class so that

the widget is a standalone unit. So we can add a function here into our class,

you can do that because you can add functions to classes, they are then called methods but it's a normal

function.

So here we want a function that takes no arguments and does not return anything,

so here in MyApp, we can add void and then any name you want, like answerQuestion,

typically your function names are descriptions of what happened or what happens.

So here, we got our answerQuestion function,

it doesn't take any arguments, it returns nothing and in there,

let's simply print answer chosen.

Now that's the function defined here,

how do we now

wire this up to onPressed?

Well it's simple right,

we call answerQuestion here, like this,

add parentheses and we're good.

Well we already see that we get an error here,

the expression here has a type of void and therefore cannot be used.

Does that make sense?

Shouldn't it return void, isn't that what I just said?

The problem here is and that is now something which I know that it can be confusing but it's super important

to understand,

so I'll explain this in very clear and slow steps.

The problem is that here, I'm executing answerQuestion, sounds all right, right?

I want to execute it when onPressed is clicked. However, you have to remember that Dart parses your file

from top to bottom, left and right when it in the end starts your application. Now there, it then runs

the app, builds the MyApp widget and that means the build method gets called and in the build method, Dart

now goes through the entire method to find out what to build and it sees

okay I build a MaterialApp and there I have a scaffold, appBar,

text column and so on, Dart goes through all of that with the help of Flutter,

it's able to bring that onto the screen but then it encounters the RaisedButton. The RaisedButton is configured

to have a child, which is this text and then for onPressed, what you're saying to Dart with this syntax

is onPressed, the value for onPressed, should be what answerQuestion returns.

Let's have a look at DartPad again.

There earlier, what I did is I added addNumbers and then down here, I store the result of addNumbers in

first result, right,

what addNumbers returns and I do this by executing addNumbers,

this then executes this code and returns that value and therefore I can store that returned value here

in first result and here it's the same. By adding parentheses, this gets executed as soon as Dart

encounters this, not when the user presses the button but when Dart goes over that code to set up the

RaisedButton. So it executes answerQuestion and now it expects to get back the value which should be passed

to the RaisedButton as a value for onPressed but onPressed wants a function, answerQuestion on the

other hand doesn't return anything because this is a function that doesn't return anything

and since we now pass the returned value to onPressed, we return nothing to onPressed but onPressed wants a

function. So we're not passing this function here to onPressed but the return value of this function

because by adding parentheses, this gets executed when Dart tries to build that button.

Of course, this is not what we want.

We want to execute

answerQuestion when the user presses the button,

that's why we want to pass a pointer at answerQuestion to onPressed.

Now consider this real life example -

if you have a TV and you can turn a TV on with your remote by pressing a button on your remote, then

you could say turning the TV on, that that's what happens in a function, that function could be named

turnOn and you execute that function by pressing the button on your remote.

Now if I give you the remote for the TV, you can press that button whenever you want and that turns on

the TV.

It would be bad if I pass you the remote and simultaneously, I pressed the button for you because then,

I would take the option of turning the TV on away from you and

that's what we're doing here.

We're essentially executing the function at the point of time we want to give it to Flutter.

So the solution for all that is that we remove the parentheses here,

by doing that, we're passing a pointer at that function, to Flutter, to onPressed. We're

telling onPressed hey this is the name of the function which you should execute when the user presses

the button,

so we're passing the name of the function to onPressed into the RaisedButton and not the result of the

function, name

instead of result,

super important. So here, we have to use answer passed question without parentheses and you always need

to use it without parentheses when you just want to give the name of the function to some argument or

whatever it is in your code and

we'll see this occur over and over throughout the course.

So here we can do the same for answerQuestion down there, on the second RaisedButton and of course also

on the third RaisedButton, always without parentheses to just point at the function instead of executing

it. With that if we go back, now the button is enabled,

it's not dark greyish anymore and we can press it and I pressed each button now and therefore here

in our debug console, we now see answer chosen, answer chosen, answer chosen and that's coming from that

print statement here which simply is a system output which we don't see in the app but we can use

it during development to see some log here in our debug console. Of course this is not a feature you would

use in a real app because the user doesn't see it

but for developing an app, it's super useful.

So our buttons work and we execute this function when we press it.