All language subtitles for 27. Adding AppBar Buttons & Floating Action Buttons

We spent a lot of time on our text inputs, on these transactions and for the moment, I'm quite happy with

the result.

Now as a next step, I want to make sure that this text input area

here however is not always visible but instead as we also planned it at the beginning of the section,

it is shown when we press a button, a button that's added here in our action bar and a button here at

the bottom,

a so-called floating action button.

And for that, we first of all need these buttons,

so let's learn how to add buttons in the app bar or buttons on the overall page

with the help of that floating action button feature. Let's start with the app bar. Here in main.dart,

which is where I do render that app bar, on the app bar,

you can add an actions argument and that takes a list of widgets.

Now theoretically of course, you can add any widget in here, text or whatever you want.

Typically however, you add buttons here though or most typically, you add icon buttons.

We haven't used that before,

we worked with a RaisedButton and we worked with the FlatButton but there also is an IconButton

and the IconButton does what the names suggests, it renders a button that only holds an icon.

For that, we need to set the icon argument here and the icon argument takes,

let's have a look,

it takes a widget but actually it wants an icon widget. Icon is another widget built into Flutter, so icon is

coming from Flutter and it gives us a widget that in the end renders an icon

and it takes one positional argument,

the icon data,

so basically some information on which icon to show

and there we can use icons which is a class provided by Flutter

that gives us access to all the typical material icons.

So here, you can go through that list and conveniently here, you see a preview of the icon

that's getting rendered

and here I'll use the add icon which is simply a plus.

Now on that icon here, you could also configure other things, like the color of the icon or the size

but I'm happy with the default and on the IconButton,

you can also configure other things,

most importantly you need to provide onPressed, just as you do it on other buttons as well.

For the moment I'll set it to an empty anonymous function so that the button isn't disabled but at the

moment of course, it also won't do anything useful. Here

now we see that button and you can of course remove the debug banner here with the help of the Dart

dev tools

as you learned it in the debugging section if it's annoying to you. I hope you can see the button here though,

this is the button which when we press it should bring up a little modal, a bottom sheet here sliding

in from the bottom which holds this text input area. And it's not just this button,

I also want to have that floating action button. We add this also with the help of the scaffold, there

besides app bar and body,

you can also add

the floating action button argument. By the way, you don't have to add that below the body,

it doesn't matter in which order you provide these named arguments. Floating action button wants a widget

as a child

and typically that is a floating action button which is a button optimized to be used as a floating

action button.

You could use any button though

but I will go with the floating action button

and here I will also provide my icon, an icon widget by using icons add.

So the icon widget here is a normal widget and therefore can be used as a child in the floating action

button

and then here, onPressed. For the moment, I'll not do anything.

If we now go back,

we have that floating action button here in the bottom right corner.

You can also change the position of that floating action button here with another argument you pass to

scaffold,

you can add the floating action button location argument and set this to floating action button location.

and then you have a couple of options like center float for example, if you save this, it now floats

in the bottom center which is really nice.

So now we have this button here as well,

we have the button up here,

let's next make sure that when we press these buttons, they bring up that sheet which in the end

can hold that user input area here.