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: th-cam.com/video/JsrPsFLm0lQ/w-d-xo.html
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!
@@jeff5858 Check out the end of this video! th-cam.com/video/WG4y47qGPX4/w-d-xo.html 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: th-cam.com/video/JsrPsFLm0lQ/w-d-xo.html
@@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
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
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 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: th-cam.com/play/PLL1pJgYmqo2sHUeyJebrzmNzsVQh23AqB.html
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
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
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).
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.
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.
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.
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.
@@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.
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.
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:(
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
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
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.
@@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
@@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 yes I do you have to search on the subject "GlobalKey Map _navigatorKeys = { "Home": GlobalKey(), "Garage": GlobalKey(), "Page3": GlobalKey(), };
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: th-cam.com/video/JsrPsFLm0lQ/w-d-xo.html
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!
@@jeff5858 Check out the end of this video! th-cam.com/video/WG4y47qGPX4/w-d-xo.html 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: th-cam.com/video/JsrPsFLm0lQ/w-d-xo.html
@@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
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
Finally someone knows how to explain the Bottom Navigation Bar. Thank you brother ! Good work 👏
So basic, so easy to understand. The best one so far.
Man, you explained really well, please come up with more. i am looking forward to your tutorials. Excellent!!!
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!
@@BenjaminCarlson Please make a video on navigation to different pages using routes, already subbed :)
@@mukeshbharadwaj9233 I'll add it to my list of videos!
@@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: th-cam.com/play/PLL1pJgYmqo2sHUeyJebrzmNzsVQh23AqB.html
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
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.
Welcome aboard!
@@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
you have really help me a lot on flutter, just one video watched and settle all
This was by far the best explanation of this I have ever heard. You are a LIFE SAVER!!
"Just like that" :) - Thank you so much! Great tutorial!
I'm very thankful for this video. it helped me enoughly to rich my day's goal
I learned so much from this video. Thank you so much!!!
You're welcome, good luck on your app!
Very nice way of explaining man.
Bro you are the hero we need🙌
Appreciate it!
Congratulations! Your video was a great help to me
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
Brilliant tutorial, thank you
Amazing content, thank you for a top quality tutorial. Cheers.
Thank you for the comment and for the support!
fantastic! thanks for your explanation about this bottnavbar bro 🔥
Thank you so much for this informative tutorial! You just helped me start my first flutter project :)
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.
@@BenjaminCarlson glad to hear that! Got any video about listview Builder?
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).
@@BenjaminCarlson awesome!
Thank you so much!!!! This video was a life saver.
Glad it helped!
thank you brother no one explained this as accurate as u thats thumb up and subscribe form me keep up with these videos
Nice video man , You deserve more subscribers .
I appreciate that!
GREAAAAAAAAAAAT TUTORIAL, THANKS A LOT!
Everything that I searched for, thx a lot )
justo lo que buscaba, una explicación sencilla.
Saludos desde Colombia
You rock bro! Thanks!
Great video !
bro in bottom bar it allows only three icons only,what is the process for four icons
Thank you for sharing
Thank you! this was very helpful :)
Good tutorial keep it brother.
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.
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.
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!
@@BenjaminCarlson Thanks for prompt reply. For now I solved it with sqflite db.I Will check the above link. Waiting for 1st December. :)
@@BenjaminCarlson I just used IndexedStack as per your suggestion and it is working great. Problem solved. Thanks a lot.
It's helpful
Congratulations, very good video!
Thank you so much helps A Lot !!!
Muy buen video, me fue de gran ayuda ¡Muchas gracias!
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.
Mm so far it's okay. but how do u handle back button and not closing the app
Спасибо за видео, но у меня почему-то при переходе на страницу сталь появляться отступ сверху, что это может быть?
Thank you very much!
THANKSS !
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.
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.
@@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.
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.
Thank brother
No problem
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:(
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
Great
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
Check out this video I made on routes and pages! th-cam.com/video/tSn09-ACZwg/w-d-xo.html
@@BenjaminCarlson gut there you use stateless Widget. But I Need statefulwidget
Can we also add some slide animation during to process?
7:25 what is the keyboard shortcut for this action?
option + shift + f - This is the format command. Note that you will need to have a formatter installed for the dart language.
why when I use 4 icons, the navigation bar disappears
set the type to fixed: type: BottomNavigationBarType.fixed
@@BenjaminCarlson Thanks bro, its work!!!
Happy to help!
how do you change the app bar for different page?
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.
Is it null safety compatible ?
It should be although some of the features in this video have been depreciated.
Hello sir nice video I need your help so how can I contact you
My contact email is on the about page!
@@BenjaminCarlson there is no email in about page
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
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.
@@BenjaminCarlson anyway much appreciated for sharing the knowledge
All fun and games until you need to route to a new screen and lose the bottom navigation bar
what do you mean?
@@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
@@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!
hey do you know any solution to this problem?
@@arsenemn yes I do you have to search on the subject "GlobalKey
Map _navigatorKeys = {
"Home": GlobalKey(),
"Garage": GlobalKey(),
"Page3": GlobalKey(),
};
I'm very thankful for this video. it helped me enoughly to rich my day's goal