Original subtitles

Hello, guys.

I hope that you're doing well as a story or as a structure.

I will explain the bottom bar and it's actually it would be an explanation of the bottom section and

my course, because many of you faced many issues and many of you didn't understand it very well.

So I decided to make this tutorial to make everything clearer and write the code from zero and explain

it in front of you.

So to start with, we need to understand what the spot on our page is.

So as you can see and this bottom part section, we can manage our pages and at.

So to start with, we need to initialize something to get the screens, to display it as is put on our

screen.

So for that I will initialize annualised, let's say, list and they match pages or screens.

And we need to initialize it.

And I forget to say that it's a brand new project, it's not attached to our real project that we implemented

as escorts, so I create a new project.

And if you paid for it.

Such as Icard, Siffredi screen, so all the pages that we are this planet and here.

So at the bottom of the screen and the page section, we need to initialize each of the screen.

So the first screen will be the home screen, the second one will be the feed the screen.

Third one will be the search.

Then the and last one will be the user apple or the user screen.

That's for sure.

We need to import them.

So just like this.

Now we need to add an to manage our pages, so we need to know which page are we displaying right now

so far that we can simply initialize an index and later on, once the user press on any of these Wattenberg's

sections.

So if the user press on the section, for example, we need to change this index to zero.

So in here, let's say, and I when I met selected and X and initialize it to zero.

And as I said.

Once the user pressed on top of this button were the selected index must be changed.

So anyway, let's add a method.

Let's say selected Paige.

And give it an index, let's say, in here index, and we need to set this untax equal to the selected

index.

So in here, we say selected and equal to index just like that.

Now, as I said, as a body, we need to use this page and the selected index to know what page or what

screen we need to show on the screen.

So let's say in here, buddy, and we need to call this list pasted in here and we need to call the

selected ADEX for it just like this.

Now, if I say it.

The home page must be displayed, and if I change this ADEX, for example, let's say to the search

screen, will be displayed, as you can see in here.

So now we need to out the bottom of the screen.

So for that, we need to add another attribute for the scaffold, which is the bottom navigation bar,

and in here, let's say bottom up bar like this, and we need to give it a few attributes.

Now, this could shape actually called Circular Nöjd Rectangle.

So we need to give it a shape and call this name to it just like this.

Below it, we need to give it a child.

So as a child, we need to initialize those widgets so we can say what?

Navigation bar this time, and when to took it on top, and you might know that on this on top, as

I explained, we need to use this selected index so we can just call it like this.

We can't give it background color, for example, and I will give it the primary color of my team.

And you can choose the unselected color and the selected color and many things you can try right by

your own, but but now I will change the selected item color and in my case, I will use the tax selection

color.

This one and first selected color.

So one.

Let's say colors don't purple.

OK, that's now the most important thing for this bottom navigation bar is to manage this shape.

Of it, so as you can see, it is an icon and beloved service urtext.

So any let's initialised see items for it and now just line below this, which it is this appearance.

So in here, let's say what's on.

Navigation bar.

So bottom navigation bar.

Item.

And as you can see, we can't give it the icon, which is I will give it the icon, hopefully for the

first one.

So I consider Tom, let's say, and below it, we can add, lable, title, tooltip, anything that

you want, for example, if I add it all.

And say home was used to keep pressing on it and would be displayed as a home.

I will show you once I start this application now we need to add a label for it.

So in here, let's say, for example, home.

Just like this.

Now we need to cooperate to manage the other widgets, so the second one would be defeat, the third

one will be the surge.

Fourth one would be second and last one would be the user.

So any, let's say user.

And here, let's say Kurt.

And we need to change the icon of each one, so any his search in here.

Shopping cart.

Let's search for shopping.

I will use the shopping bag, it's fine and in here, let's say person.

And we need to change this to Serge.

And since the surge, actually, we don't need this icon in here, I will not delete it.

I will show you what will be displayed if I keep it.

And in here, we need to access the RSS feeds and let's say fits in here.

Now, I would say that.

Great.

So here it is.

So it is working very, very well and.

The caller is not getting changed.

We will fix that later.

And as you can see, the icon in here is the search icon is being displayed.

And if I keep pressing on any of these widgets, here's Sweetwater.

Great.

So now that the floating action bar, so any let's say lotting.

Action, what actually we need to specify the location for it, so in here, let's say flooding action

on location.

So I would copy says changes like this and now you can choose.

Where you want to place that, I would place that and the center docked just like this.

Now we need to initialize that sort of say in here, plotting action, Watson, and say plotting action

button in here and give it a few attributes.

I would give it the background color and give it the proper color.

Ready for that would take the exact color.

We can add tooltip for it, so I will add tooltip and say search below it, let's say the elevation

for it, which was five.

And for sure, we need to add the child for it so you can add many other attributes, you can play with

them.

But no, I will just ask the child.

So in here as a child, it will be an icon, which is the search icon.

Great ad, we need to give it.

On oppressed and in here, we need to call substate and set the selected ADEX to to.

Just like this, now let's start our application.

So here it is now you can understand why I didn't want to initialize this icon in here, so let's say

just now in here, let's save it.

And I got an error.

So we need to add another argument, which is the active icon and say in here and say it again.

So they are still saying, let's add icon in here and say, no, not.

So here it is now, you could do something else.

We can't just keep it.

I will try it.

For example, let's say icon icons, dot surge and give it color or transparent color.

Let's see what will happen.

It is the same, actually.

So I will comment.

This I would comment it later, let's say, no, I can not keep it like this, I would call it that

for you and Bastet in here at.

Well, we need to comment this just like this, so now everything's working fine.

We need to fix the color of each item.

OK, so we still once we press on this, nothing is getting changed in here.

That's because I forgot to add something very important in here.

So to know which which is the selected item and which is the other item, we need to add the index for

it.

So in here, let's say current index, it would be equal for sure to our selected index just like this.

Now let's give it a try.

So I guess it is working as we expected.

Now, I will do something interesting.

Now, you could initialize this at the state and you could convert this to EMAP.

And that's what will I do know.

So actually, I will just common sense and let's initialize in here a map, so let's say at least map.

Of strength and object for sure and close it in here and let's initialize it or name it underscore page.

Now, you could initialize it just like this in here, but I will initialize it now.

And the state.

So any let's at the end state and let's say this page equal to something.

So in here, let's initialize it like this, let's say you page equal to.

For example, the first one will be the homescreen.

Let's copy this place that four more times.

Others simply call for each one.

Like this now changes to user screen, changes to screen, changes to social screen

and just want to fit screen.

Now, in here, we got an order for sure, and we just need to access the page key word in here.

So nothing changed.

So you may be wondering why I did it like that, for example, imagine that we need to add dynamic.

Think, for example, for each page, for example, let's say the upper.

Now, you could at the upper end, each screen, for example, and the screen at a different upper and

hear are different about what not.

I would do it now in here.

So let's initialize Anapa and I would give it a title.

True, and let's say title in here, and we need to give it something, let's say in here below, let's

initialize something else.

Let's say Titan, let's say title, and let's initialize in here, let's say homescreen.

If a screen, let's say something else, so can say something else, same for the others.

So in here, let's say.

Feeds screen in here, let's say

search screen,

same for the card.

And same for the user screen.

OK, so now for the title, let's initialize it Etext.

That's codpieces.

Paste it in here and in here, we need to access the total.

I will start it now.

And see the difference, so here it is, here's the other end in here.

There is the homescreen that with just initialise it in here.

If I press on the feeds, screen the screen as being displayed, if I press on the search, the search

upper end here is being displayed.

So each one is being displayed according to the items that we initialize that assessment.

So I always encourage you to use this method and initialize it like this now and later as the scores

are actually initialized, each of those all of these eyeballs and each screen.

So feel free to use any method that you want.

OK, so now let's do something interesting.

For example, if you want to add another line, for example, at the site, for example, you could

change this elevation.

Also in here, let's say five.

As you can see, it is a little bit different.

I'll keep it like this so you can't change it as you want.

And.

To do the top border for it.

Let's wrap this by in your container and some of you got an error, actually an overflowing error.

Because and the tutorial, I give it a height and for example, let's say out of ten.

Now, I didn't get an overflow error, but it has rarely appeared in here.

But if you got an error, you can just delete the site in here and you could access the bottom navigation

bar by typing, okay, bottom navigation bar.

I just want.

If you want to change it, you can multiply it by.

The percentage of that.

So here it is now.

Some of you, that's why they got such an error, so you can't just comment it just like this.

Now let's go for it.

Let's say the declaration and gift box declaration, let's say for in here and initialize the border,

then say.

Top and say border site and specify the attributes for it.

Choose the word for it.

I would show the three to show you, so I hate it now.

I would change it to the 2.5.

It looks good and you could have changed the color as what you want.

For example.

You can change change as you want.

You can choose any color, but as you can see, it is very unlikely that zip line across across this

floating action button.

So we need to change this and we need to fix it for that.

We could add a few attributes for this bottom modification, but we could add the notch module in here.

And actually for this floating button, we could wrap it by somebody.

Let's keep it like this, and we could add a notch in here, let's change to two.

OK, I will delete the elevation and we still need to add something, so we need to add the clip behavior.

So any little clip that Auntie Oreo's.

So here it is now you can see the nöjd.

And here so and it's very well, you could change the notch, Marjan, for example, to 18 and it is

now become way more bigger, you could get the padding for this.

But I would just tell you that I wanted to show you that you could demonstrate any.

Did.

Now, let's say this three.

And you can change it as what you want and you can try on other things, for example, hard edge and

-- and choose what suits you better.

So that's as far as material, I hope that I explain it very well.

I want you to really get the most benefit of this course.

And if you have any suggestion and if you have any questions, feel free to ask me.

And I would expect entertains and I will do the best for you.