Hello, in this video, I am going to show you how to implement a bottom navigation bar. So we've got this scaffold scaffold, right to the end saying that word wrong scaffold right here, you know, like this little bar here, added some buttons got this little floating icon, well, we can add a bottom navigation bar. It's kind of simple. It's a navigation bar that's at the bottom. So to add it, you can really anywhere ever, but like to keep it in logical order the app bar come first on the body, then the navigation bar. So you know, if you're just keeping the logical order, the code is easy to use, debug and traverse, but there's no reason why you can't add it before the body template.

Okay, so you just got caught in that bottom navigation bar and bottom. And as you see there are different ones the bottom up bar, and there's a whole heap of different stuff, but we're going to be dealing with the bottom navigation was probably the one that you will want most of the time and Here, we can do a few things, but let's just say yes, you know what actually happened. So we error because it requires some, you know, parameters. So there are some default parameters that he actually needs. So it requires a list of more items without the list of items, he will run. So let's add some items so long.

And then we put angle brackets bottom navigation item, so this tells it that he has to be a list of items that are bottom navigation bar items. And their built in so that's really cool. Now here is a bottom navigation bar. Item. Use the constructor inside here. We need a few properties that we can add like active icon, background, color, and title as an extra task only to look up online.

Them but I'm mainly going to deal with the icon and title. So icon icon, they should be icon again, we'll use the icon constructor in here with a few icons dot Now we can add all our, you know, the icons on the home for this title. This is the text widget. And I'm gonna save some time on the copy and paste this basically a plane. But with a few changes I'll just put free from now you can add as many as you want. It's always good practice to not have too many.

You don't add color to the screen in general. And that's just a general you know recommendation for user interfaces. Now for the text output you know business keep the text simple School commodity you can use any of the icons that are built to say yeah, let's see what we can get. So now we've got, you know, these little icons that you know, really don't cool with you know, minimal effort we've created essentially a, you know, a navigation system. And what we can do the ad server code, so we could say, current index. What we can do, we can create a selected index.

So let's go up here underscore select equal one. And now what we are going to do is the current index because On the selected index, but Beside that, Aleksey one is the middle one. So zero would be first one, two would be the third one is normal stuff with computers. Okay, so at the moment, we can't really switch between them, let's, you know, implement that. And we can do on top. On top, we're going to say, we're going to call this alternate tact.

And at the moment, we don't actually have this implemented. So let's implement. So we want to implement two wrongs here. So we're gonna say void term. And this is an NP, I was gonna say, sets dates, and this is, you know, built in methods so that we will not do anything crazy anything specific to this Ico So whenever it gets passed in from here, so the Empress on tap knows to pass in, you know, the actual index that is pressing. So if we reload, go to it, as you can see, we can change the button.

And you may also notice that it's widely enlarges when you click on it. And this is really cool. We like minimize that we've, you know, programmatically implemented an application. I remember doing this on iOS and even Android, you know, using native code and you know, turning sync between the two is just so much easier nowadays. Don't get me wrong. So I remember doing it when we first came out the SDK and na up till now.

I've seen the changes that have come along, but this is just so much easier. I think what we will have done with flutter is amazing, they've done an amazing job, and I'm positive doctorates in The future of mobile development for Android and iOS. Again, there are other colors that mean other stuff that you might say could change the text color and could be like color. Red or red is the other color, let's do something well before that, and as the by default they are now when we click on, so we could, you know, choose a slightly garish color like Amber. To say that, I think that's all up to Yes, but there you go. That's how you implement a bottom navigation.

But you can add in many of these items as you so desire. And you might thinking, Okay, well how do we you know, actually, maybe you're changing pages or changing the content on the page. How do we implement that? So this on top method, it gets passed through the index. So here, you can do some sort of if statement, you still need this, but you need some sort of a statement to determine or switch statement to determine what index is no click on another result, hide or show items. That's it.

That's all you have to do. There's nothing more fancy than that. If you have any questions, feel free to pop me a message and I look forward to seeing you in the next video.