Bottom Navigation Bar - Flutter Widgets Tutorial

In this video I show you how to implement a Bottom Navigation Bar Widget into your Flutter Project.
❗❗ Updated Video: • Flutter Bottom Navigat... ❗❗
25 days of Flutter series: • 25 Days Of Flutter
Helpful links:
Code for the video: github.com/bjcarlson42/flutte...
Flutter Development Playlist: • Flutter App Development
You might like git and GitHub: • Git And GitHub Complet...
0:00 Introduction
0:13 Project Setup
5:48 Bottom Nav Bar Code!
13:50 Custom Pages
17:32 Recap and Conclusion
My Coding Gear:
⌨️ Keyboard - Apple Magic Keyboard - amzn.to/3g8A8QI
💻 Laptop - Apple MacBook Pro (2018 / 15 inch) - amzn.to/3wddJHL
🖥️ Monitor - Samsung CF390 Series - amzn.to/3pDc9fO
My Camera Gear:
📹 Camera - Canon EOS M50 - amzn.to/3ixAZfq
🔭 Awesome Camera Lens - Sigma (16mm / f1.4) - amzn.to/3pH1K2B
🎤 Microphone - Blue Yeti - amzn.to/2TdXLyq
💡 Lights - Neewer LED Lights - amzn.to/3gbm6ht
My Favorite Software:
📽️ Final Cut Pro - www.apple.com/final-cut-pro/
❗ Student Discount For FCP - www.apple.com/us-hed/shop/pro...
🚀 VSCode - code.visualstudio.com/
View All My Gear - benjamincarlson.io/gear
Support Me:
👨🏼‍💼 Join this channel to get access to perks - / @benjamincarlson
💸 Sponsor me on GitHub - github.com/sponsors/bjcarlson42
Who Am I?
I’m Benjamin Carlson, a developer, student, and KZbin creator living in CT, USA. I make videos on programming, computer science, and productivity. I also started a programming tutorial website called Coffeeclass (coffeeclass.io) that complements this KZbin channel. Finally, I have a newsletter (buttondown.email/benjamincarlson) where I send out updates on my recent videos, writing, and anything I’m currently working on or find interesting. You can expect emails every 2 to 3 weeks.
Connect With Me:
📧 Email - [e-mail]
🚅 Website - benjamincarlson.io
🐦 Twitter - / bjmncrlsn
🚀 Github: github.com/bjcarlson42
💼 LinkedIn - / bjcarlson42
✍️ Medium - / benjamincarlson
📓 Newsletter - buttondown.email/benjamincarlson
If you need to contact me, the best way is email. I try to respond to everyone but it may take some time!
Disclaimer: Some of the above links are affiliate links. This means I may receive a small commission at no expense to you. This allows me to continue to post videos like this one!
#flutter

[@BenjaminCarlson]

Hey guys, as part of my 25 days of Flutter series I released a new video on Flutter's bottom navigation bar widget. It is similar to this video but some nav features in this video are now depreciated such as the title property. You can watch the new video here: kzbin.info/www/bejne/gKTVgaZ8gdJjorM

[@jeff5858]

Do you cover or have free content explaining how I can now fill the nav pages with stuff? One of my items is a maps page and I'd like to have that entire page filled with a Gmaps widget. Thanks!

[@BenjaminCarlson]

@@jeff5858 Check out the end of this video! kzbin.info/www/bejne/jXiXqmdtpqyDjpY I show you how to make each of the 3 pages it's ow widget. You can then add the maps api to one of the pages! Also, check out the updated video of the bottom navigation bar: kzbin.info/www/bejne/gKTVgaZ8gdJjorM

[@jeff5858]

@@BenjaminCarlson thanks. I've been watching the course closely however I'm still getting stuck on my logic. My main points to a splash screen page which you need to tap a button to actually go inside. I'm able to get your model working but I'd like my main to keep pointing to my splash page first and upon tapping my button, have it load your model where I can have a page for each bottom nav button. Hope I made sense :P

[@jeff5858]

In other words my main needs to point to my splash screen, when the button is clicked I need it to now load Home with its respective navigation bar and parallel items. I can't get it to work right now because your main points to Nav, mine doesn't

[@patrickbeaino7579]

Finally someone knows how to explain the Bottom Navigation Bar. Thank you brother ! Good work 👏

[@furkanyakkan1529]

So basic, so easy to understand. The best one so far.

[@appmaker617]

Hello Guys, encourage you to watch this video, play code along with him, replay it over again, this single video covers everything you need to know, this is a best video so far on flutter, i mean this. GoodLuck

[@zetalukiest8100]

I'm very thankful for this video. it helped me enoughly to rich my day's goal

[@jadeboone718]

This was by far the best explanation of this I have ever heard. You are a LIFE SAVER!!

[@annatannat1525]

"Just like that" :) - Thank you so much! Great tutorial!

[@mukeshbharadwaj9233]

Man, you explained really well, please come up with more. i am looking forward to your tutorials. Excellent!!!

[@BenjaminCarlson]

Definitely more flutter tutorials coming soon! Got a special hour plus long flutter video where I build and entire app coming in the next few weeks so be sure to subscribe so you don't miss it!

[@mukeshbharadwaj9233]

@@BenjaminCarlson Please make a video on navigation to different pages using routes, already subbed :)

[@BenjaminCarlson]

@@mukeshbharadwaj9233 I'll add it to my list of videos!

[@BenjaminCarlson]

@@mukeshbharadwaj9233 idk if you've noticed but I am in the middle of my 25 days of flutter series. One of the videos will be about navigating to pages using routes! Feel free to check out this playlist here: kzbin.info/aero/PLL1pJgYmqo2sHUeyJebrzmNzsVQh23AqB

[@appmaker617]

He explain quit well, and he took it from zero to hero, thank Benjamin Carlson, thank you so much, am joining your monthly membership soon.

[@BenjaminCarlson]

Welcome aboard!

[@appmaker617]

@@BenjaminCarlson thanks man, am gonna need you with the project am working on right now, it a global project and i may not do it alone

[@appmaker617]

you have really help me a lot on flutter, just one video watched and settle all

[@ariq2901]

fantastic! thanks for your explanation about this bottnavbar bro 🔥

[@sandroes1018]

justo lo que buscaba, una explicación sencilla. Saludos desde Colombia

[@harrisonnjenga777]

Wow you've done a good job with the explanations and the coding your code is very clean and modular as it should be today you have earned yourself a subscriber

[@sneezygibz6403]

I learned so much from this video. Thank you so much!!!

[@BenjaminCarlson]

You're welcome, good luck on your app!

[@bestellannahme1789]

Everything that I searched for, thx a lot )

[@pranesh3050]

Amazing content, thank you for a top quality tutorial. Cheers.

[@BenjaminCarlson]

Thank you for the comment and for the support!

[@christianloizou4463]

Brilliant tutorial, thank you

[@oscarlemus3327]

GREAAAAAAAAAAAT TUTORIAL, THANKS A LOT!

[@Mwitah]

Very nice way of explaining man.

[@Anjos71]

Congratulations! Your video was a great help to me

[@jasonanderson7175]

Great video !

[@candelastudio6676]

Bro you are the hero we need🙌

[@BenjaminCarlson]

Appreciate it!

[@trevorayala7368]

You rock bro! Thanks!

[@claudiazorrillarojas5624]

Muy buen video, me fue de gran ayuda ¡Muchas gracias!

[@HusniSarif]

Thank you so much helps A Lot !!!

[@akifshah1576]

Thank you so much!!!! This video was a life saver.

[@BenjaminCarlson]

Glad it helped!

[@batool3dnan]

Thank you! this was very helpful :)

[@derciopale]

Thank you for sharing

[@holaahora7527]

Congratulations, very good video!

[@sidahmedtedjinimenasra936]

thank you brother no one explained this as accurate as u thats thumb up and subscribe form me keep up with these videos

[@ayazveliyev5840]

Thank you very much!

[@vasantht3379]

Nice video man , You deserve more subscribers .

[@BenjaminCarlson]

I appreciate that!

[@surendravishwakarma5244]

Good tutorial keep it brother.

[@ZeddyAndijani]

Thank you so much for this informative tutorial! You just helped me start my first flutter project :)

[@BenjaminCarlson]

Thats great to hear! I have plenty of Flutter videos on this channel that aim to take you from a beginner Flutter dev to intermediate Flutter dev.

[@ZeddyAndijani]

@@BenjaminCarlson glad to hear that! Got any video about listview Builder?

[@BenjaminCarlson]

Yes! Check out my 25 days of flutter playlist. There is a video on the map function which covers listview. Also in a couple other videos in that series it is touched upon and in all my complete app builds (Word of the day app).

[@ZeddyAndijani]

@@BenjaminCarlson awesome!

[@hanirahani1863]

It's helpful

[@wakgate577]

THANKSS !

[@mathrisk]

Hey, thanks for the nice video. btw, could you please suggest how to retain the bottom-nav-bar in the new page, when we do Navigation.push.

[@DpinkTD]

Thank brother

[@BenjaminCarlson]

No problem

[@u.hemanthkumargowd826]

bro in bottom bar it allows only three icons only,what is the process for four icons

[@theflutterguy6301]

Great

[@furkanyakkan1529]

Can we also add some slide animation during to process?

[@SkjoyBd]

Dude, You have explained well enough, definitely good tutorial. Some data on home navigation comes from the API. When I go to another navigation and back to home navigation, that data is reloaded from the API. How can I solve this problem by saving the previous state. Your suggestions will be appreciated. Already subscribed.

[@BenjaminCarlson]

I was working on an app with the exact same issue. You're gonna want to wrap the body in an IndexedStack widget. Here is an example: github.com/bjcarlson42/wotd/blob/05_favorite_words/lib/components/nav.dart#L85. Line 85 is where the widget is placeed.

[@BenjaminCarlson]

Also, I will mention this in my new Flutter series that I am working on called 25 Days Of Flutter. This will be launched on December 1st!

[@SkjoyBd]

@@BenjaminCarlson Thanks for prompt reply. For now I solved it with sqflite db.I Will check the above link. Waiting for 1st December. :)

[@SkjoyBd]

@@BenjaminCarlson I just used IndexedStack as per your suggestion and it is working great. Problem solved. Thanks a lot.

[@cleawrence]

Mm so far it's okay. but how do u handle back button and not closing the app

[@someguy007]

hi thanks for the great tut. What if "body" inside '_NavState extends State....' already has some column children... for example image.assets, some ScrollViewTexts , floating Actionbar and the BottomNavigationBarItems are at the bottom of body. Somehow Im getting a rejection when I enter "_widgetOptions.elementAt(_selectedIndex) I think maybe it wants the method with the List to be the only widgets inside a Centered child? Like u have it?? How would you recommend working around this, without having to move the other widgets that are already inside the Container in body? Thanks, hope this makes sense.

[@BenjaminCarlson]

If I am understanding correctly, I think you need to take everything you have and put it into a new file as a stateless widget. Then add that in the widget_options list.

[@someguy007]

@@BenjaminCarlson hey Wow I appreciate your super quick response and sorry for the terrible grammar. Iv tried the solution u provided, still didnt work as expected. Iv also edited the 1st comment so it makes sense. but to better clarify. This is what I have: body: Container(an Image, a few Texts, a floatingActionBar, and 4 BottomNavigationBarItems). They all work/look fine. But when I try to add the child: _widgetOptions.elementAt(_selectedIndex) so I can go to different screens when tapping, I get red underlining with error message "Too many positional arguments, 0 expected but found 1". Not sure why since I already have a couple other things inside Container. I notice yours is not inside Container but I need it for all the other widgets that are inside. If u have any other ideas, id really appreciate your solution. and Either way, Awesome work on your channel, I'm subbing right away. Thanks.

[@BenjaminCarlson]

The error is not from the widgets inside the container. Your function is expecting no arguments but you are passing in one. If you have your code on GitHub I would be happy to take a look. Otherwise, check all your functions and make sure you are passing in the correct number of arguments.

[@multifunctionalchannel2045]

Спасибо за видео, но у меня почему-то при переходе на страницу сталь появляться отступ сверху, что это может быть?

[@shotoiyo]

I dont think that makes sense. What if we want separate appbars, and other widgets that come within Scaffold for every page? I don't think title and Scaffold widgets should be same for each screen except bottom navbar:(

[@nexoknechthd619]

Hey I have a little problem with my code... How can I make a button in the home screen, who brings me to another screen(not the screens on the NavBar)? Thanks

[@BenjaminCarlson]

Check out this video I made on routes and pages! kzbin.info/www/bejne/qoTRYWxjdqiNrck

[@nexoknechthd619]

@@BenjaminCarlson gut there you use stateless Widget. But I Need statefulwidget

[@johnniegilkerson4724]

The named parameter 'title' isn't defined. Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'title'.dartundefined_named_parameter

[@shimonbiton2163]

7:25 what is the keyboard shortcut for this action?

[@BenjaminCarlson]

option + shift + f - This is the format command. Note that you will need to have a formatter installed for the dart language.

[@abgthscode6326]

how do you change the app bar for different page?

[@BenjaminCarlson]

That depends on how much you want to change. If you want to change the title only, you can create a method in the nav page that changes the title based on which index you are on. If you want to change other things like the color, you can make properties required by using @required and set them at build. Another option would be to use a scaffold widget for each page and create a different app bar for each one.

[@fssene1462]

Is it null safety compatible ?

[@BenjaminCarlson]

It should be although some of the features in this video have been depreciated.

[@bakarbsa]

why when I use 4 icons, the navigation bar disappears

[@BenjaminCarlson]

set the type to fixed: type: BottomNavigationBarType.fixed

[@bakarbsa]

@@BenjaminCarlson Thanks bro, its work!!!

[@BenjaminCarlson]

Happy to help!

[@anshulkumar991]

Hello sir nice video I need your help so how can I contact you

[@BenjaminCarlson]

My contact email is on the about page!

[@anshulkumar991]

@@BenjaminCarlson there is no email in about page

[@Dedecayed]

All fun and games until you need to route to a new screen and lose the bottom navigation bar

[@BenjaminCarlson]

what do you mean?

[@Dedecayed]

@@BenjaminCarlson I mean if you navigate to a different screen that has another scaffold (a screen not on the bottom navigation bar) it means you will lose the bottom navigation bar. I had found the solution to this matter through routing in a different video but maybe it's an idea at expanding your tutorials

[@BenjaminCarlson]

@@Dedecayed Yep, that's definitely a solution. I did it the way I did because it is more beginner friendly. Will definitely make a video on advanced flutter navigation in the future!

[@arsenemn]

hey do you know any solution to this problem?

[@Dedecayed]

@@arsenemn yes I do you have to search on the subject "GlobalKey Map _navigatorKeys = { "Home": GlobalKey(), "Garage": GlobalKey(), "Page3": GlobalKey(), };

[@aka.Xavier]

first, thank you for the video, but could you please next time don't start the project from scratch, over 5 minutes just to get to the point

[@BenjaminCarlson]

I thought I had time stamps in the vid but I just went ahead and added them so you can skip around to different parts.

[@aka.Xavier]

@@BenjaminCarlson anyway much appreciated for sharing the knowledge

[@zetalukiest8100]

I'm very thankful for this video. it helped me enoughly to rich my day's goal