All language subtitles for 008 Displaying Buttons with RaisedButton_en

In the last section, we added in our password field method, so that is also displaying a text form

field, we're now going to move on to our submit button method, which is supposed to show a form at

the bottom of the screen.

So as a quick reminder, to show a button, we're going to use a built in flutter widget called the

Raised Button Widget.

Let's very quickly check out the documentation for this raised button and get a better idea of how it

works.

So back over on my FLEDER documentation page, I'll do a quick search for crazed button.

And on the documentation, I bet you can guess what we're going to look up.

Yup, that's right.

We're going to look up the constructor.

All right.

So here's our constructor right here.

So when we create a raised button, there's a tremendous number of properties that we can pass in to

customize how the button behaves.

Or maybe a better term here would be to say we're customizing how the button looks.

So if you take a close look at all these different parameters, the raised button constructor is really

all about customizing the styling on the button that gets displayed.

And there's very little that customizes the text that shows inside the button or what happens when we

press the button.

Those do exist in here, but all the vast, vast, vast majority of options that we can customize are

all about the display properties of the button itself.

So you'll see things like customizing the padding or the elevation which affects the shadowing behind

the button, the color, whether or not it's disabled, all that other kind of good stuff.

So to actually get some text to show up inside this button, you'll notice that there's not a distinct

like text property.

Instead, to show some text inside of various button we have to pass in a text widget to the child property.

So this is another widget that accepts a child widget and displays that child inside itself.

So I'm going to flip back over to my editor, I'm going to find my submit button method right here and

inside of it, I'm going to return.

A raised.

Button.

And inside of it, I'll specify a child that has the text submit like so.

Now, when I say the file, you'll notice that raised button has a little green warning underneath it.

If I hover over that, it tells me very simply the parameter on Prust is required.

So the erase button accepts a unpressed arguments to it or unpressed parameter that is supposed to be

a callback function.

And you'll notice here in the documentation, it is marked as a required parameter.

So any time we create a reset button, we have to pass in a callback function to this unpressed parameter

right here, or we're going to get an error message when we try to run this thing.

So back inside my code editor, I'm going to add on and on Prust parameter, and I'm going to assign

to it an empty function like so.

So at this point, we're not really doing anything with the button.

I just want to get it to show up on the screen.

So I'm going to save this.

And then we'll flip back over to our terminal, yeah, we'll do our quick refresher, quick test.

So I'm going to save.

And then inside my emulator.

I should see a button, OK, we forgot one step, or at least I did, we just added in some configuration

for Simit button, but we never actually uncommented it's called up here inside of our build method.

So up at the build method, I'm going to make sure I uncommented submit button and then we'll do our

refresh.

All right, so there's the restart and there's the button.

OK, well, hey, it's a button.

You can tell it's got a little bit of shadowing underneath it and that's where the term raised button

comes from.

The word raised means to indicate that this is kind of a button that pops out of the screen a little

bit.

Thanks to the shadowing styling.

However, the pun itself is really smashed up against the password field.

So I think we probably need to add in some margin or some padding to this thing on the top to get it

to stand off of the password element.

Let's take a quick pause right here.

We'll come back to the next section and add that little bit of spacing in.

So I'll see you in just a minute.