All language subtitles for 013 Displaying Icons_en

In the last section, we got our little plus button to show up right here with that plus's very small

and definitely pretty hard to see.

So to fix this issue, we're going to find our child named parameter on our floating button right here.

And rather than showing a text widget, we're going to replace it with a widget that shows an actual

plus icon.

Let's take a look at the documentation around icons and get a better idea of how we work with them.

All right, so inside my browser, I'm going to search for the icon class we want specifically icon

singular.

So we'll look at the documentation for this, I'm going to scroll on down to our constructor function.

Here it is right here.

You'll notice that this constructor function has a kind of interesting signature to it.

So on a lot of the other widgets we've looked at so far, they all took named parameters.

And I remember a name parameter is indicated by the presence of those curly braces.

So here's the opening curly brace and here's the closing one right here.

But in this case, the icon class takes a positional argument as well, so the icon class always expects

that you call it with a first argument, the icon that you want to actually show.

And then in addition to that first argument, you can optionally provide some number of named parameters.

Now, that might sound a little bit confusing, but we'll see a better example of this later on with

another widget that we're going to use inside this course.

In this particular case, we don't really care about any of these name parameters.

We only care about the first argument.

So this is not the best place to go into this in more detail.

But again, we'll talk about it a little bit later.

So in order to show an icon or first going to place an icon widget and then as the first argument,

we're going to specify which actual icon we want to show, that might sound confusing.

So let's try writing out the code for it and you'll get a better idea of what's going on.

I'm going to go back over to my code, Ed. I'm going to find that existing text widget and I'm going

to replace it with Ikon instead.

So by just riding out icon that is telling Flutter that we want to show an icon here, but just riding

out icon doesn't actually indicate which icon we want to show.

Flitter has access to a huge collection of different icons.

So we need to be very specific and say, hey, here's the icon that we're trying to show right here.

So as the first argument to specify which icon we want to show, we're going to right out icons noticed

that in this case we have an S right there dot ad.

OK, so I'm not going to say anything about this just yet, let's just save this.

We're going to refresh our simulator and see how we're doing.

So if I do a shifter to do a hot restart, watch little button down here and when the reload kicks in,

you're going to notice that it just got a little bit bigger.

So that's definitely a more appropriate, appropriately sized plus icon for that button.

OK, so let's go back over to our code editor and talk about what this is doing right here.

So, again, we first placed the icon widget, which just tells Flutter, I want to show an icon, but

it doesn't actually specify which one.

To see which icon we want to show we right out icons and then the name of the icon we want to use.

So in this case, to show a plus icon that icons name is ADD, let me show you a list of all the possible

icons we can use.

And I think the syntax right here will make a little bit more sense.

So inside my browser, I'm going to open up a new tab and you can navigate to material slash tool slash

icon.

Let me put that in larger text.

There we go.

So this has a list of all the different icons that we have access to in Flutter.

So here's the icons page, and on this page, you'll see all these different icons and a name for each

one right underneath it.

So we just use the add icon.

If we search for add inside of here and notice, there's a lot of icons with the name add inside of

it.

But if we go long enough, we'll eventually find that plus icon.

So the plus icon is called ADD and that's why he wrote out icons dot at.

If we wanted to instead show some other button like say I don't know, clear right here, this X over

here on the right hand side we could replace.

Back inside of our widget, so instead of seeing icons dot ad, we could instead do what was name clear,

we could do icons dot clear instead.

So if we now do a refresh of our emulator again, the icon showed inside, that button is going to change

on over.

And B, any second now.

OK, come on, it's coming, it's coming.

Well, I'm sure your cells already refreshed and I'm sure you've seen that there is going to be a big

X there instead.

Oh, I won't make you sit around.

OK, there we go.

Well, it didn't actually.

Oh, there we go, finally.

Well, there's definitely a little bit longer than expected.

But yes, you can see it.

There is an X right there.

So in essence, any time that we want to show an icon, we first right out the icon class, which just

says, hey, I want to show an icon.

And then as the first argument to it, we specify which icon we want to show.

And to do so, we write out icons DOT and then the name of the icon and any icon over on this material

dot io tools slash icons page is fair game.

Inside of our application, we can use any of these icons that we wish.

OK, so that's it.

Let's take a quick pause right here and we'll continue in the next section.