Тёмный
No video :(

Bottom Navigation Bar - Flutter Widgets Tutorial 

Benjamin Carlson
Подписаться 9 тыс.
Просмотров 51 тыс.
50% 1

Опубликовано:

 

26 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 104   
@BenjaminCarlson
@BenjaminCarlson 3 года назад
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JsrPsFLm0lQ.html
@jeff5858
@jeff5858 3 года назад
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
@BenjaminCarlson 3 года назад
@@jeff5858 Check out the end of this video! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WG4y47qGPX4.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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JsrPsFLm0lQ.html
@jeff5858
@jeff5858 3 года назад
@@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
@jeff5858 3 года назад
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
@patrickbeaino7579 2 года назад
Finally someone knows how to explain the Bottom Navigation Bar. Thank you brother ! Good work 👏
@furkanyakkan1529
@furkanyakkan1529 2 года назад
So basic, so easy to understand. The best one so far.
@appmaker617
@appmaker617 2 года назад
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
@mukeshbharadwaj9233
@mukeshbharadwaj9233 4 года назад
Man, you explained really well, please come up with more. i am looking forward to your tutorials. Excellent!!!
@BenjaminCarlson
@BenjaminCarlson 4 года назад
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
@mukeshbharadwaj9233 4 года назад
@@BenjaminCarlson Please make a video on navigation to different pages using routes, already subbed :)
@BenjaminCarlson
@BenjaminCarlson 4 года назад
@@mukeshbharadwaj9233 I'll add it to my list of videos!
@BenjaminCarlson
@BenjaminCarlson 3 года назад
@@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: ru-vid.com/group/PLL1pJgYmqo2sHUeyJebrzmNzsVQh23AqB
@appmaker617
@appmaker617 2 года назад
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
@BenjaminCarlson 2 года назад
Welcome aboard!
@appmaker617
@appmaker617 2 года назад
@@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
@appmaker617 2 года назад
you have really help me a lot on flutter, just one video watched and settle all
@jadeboone718
@jadeboone718 Год назад
This was by far the best explanation of this I have ever heard. You are a LIFE SAVER!!
@zetalukiest8100
@zetalukiest8100 2 года назад
I'm very thankful for this video. it helped me enoughly to rich my day's goal
@annatannat1525
@annatannat1525 3 года назад
"Just like that" :) - Thank you so much! Great tutorial!
@sneezygibz6403
@sneezygibz6403 3 года назад
I learned so much from this video. Thank you so much!!!
@BenjaminCarlson
@BenjaminCarlson 3 года назад
You're welcome, good luck on your app!
@christianloizou4463
@christianloizou4463 8 месяцев назад
Brilliant tutorial, thank you
@Mwitah
@Mwitah 3 года назад
Very nice way of explaining man.
@candelastudio6676
@candelastudio6676 3 года назад
Bro you are the hero we need🙌
@BenjaminCarlson
@BenjaminCarlson 3 года назад
Appreciate it!
@harrisonnjenga777
@harrisonnjenga777 2 года назад
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
@u.hemanthkumargowd826
@u.hemanthkumargowd826 3 года назад
bro in bottom bar it allows only three icons only,what is the process for four icons
@Anjos71
@Anjos71 2 года назад
Congratulations! Your video was a great help to me
@ariq2901
@ariq2901 4 года назад
fantastic! thanks for your explanation about this bottnavbar bro 🔥
@sidahmedtedjinimenasra936
@sidahmedtedjinimenasra936 2 года назад
thank you brother no one explained this as accurate as u thats thumb up and subscribe form me keep up with these videos
@oscarlemus3327
@oscarlemus3327 2 года назад
GREAAAAAAAAAAAT TUTORIAL, THANKS A LOT!
@derciopale
@derciopale Месяц назад
Thank you for sharing
@pranesh3050
@pranesh3050 4 года назад
Amazing content, thank you for a top quality tutorial. Cheers.
@BenjaminCarlson
@BenjaminCarlson 4 года назад
Thank you for the comment and for the support!
@trevorayala7368
@trevorayala7368 2 года назад
You rock bro! Thanks!
@akifshah1576
@akifshah1576 3 года назад
Thank you so much!!!! This video was a life saver.
@BenjaminCarlson
@BenjaminCarlson 3 года назад
Glad it helped!
@sandroes1018
@sandroes1018 3 года назад
justo lo que buscaba, una explicación sencilla. Saludos desde Colombia
@ZeddyAndijani
@ZeddyAndijani 3 года назад
Thank you so much for this informative tutorial! You just helped me start my first flutter project :)
@BenjaminCarlson
@BenjaminCarlson 3 года назад
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
@ZeddyAndijani 3 года назад
@@BenjaminCarlson glad to hear that! Got any video about listview Builder?
@BenjaminCarlson
@BenjaminCarlson 3 года назад
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
@ZeddyAndijani 3 года назад
@@BenjaminCarlson awesome!
@vasantht3379
@vasantht3379 4 года назад
Nice video man , You deserve more subscribers .
@BenjaminCarlson
@BenjaminCarlson 4 года назад
I appreciate that!
@bestellannahme1789
@bestellannahme1789 3 года назад
Everything that I searched for, thx a lot )
@jasonanderson7175
@jasonanderson7175 2 года назад
Great video !
@multifunctionalchannel2045
@multifunctionalchannel2045 9 месяцев назад
Спасибо за видео, но у меня почему-то при переходе на страницу сталь появляться отступ сверху, что это может быть?
@batool3dnan
@batool3dnan 2 года назад
Thank you! this was very helpful :)
@SkjoyBd
@SkjoyBd 3 года назад
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
@BenjaminCarlson 3 года назад
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
@BenjaminCarlson 3 года назад
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
@SkjoyBd 3 года назад
@@BenjaminCarlson Thanks for prompt reply. For now I solved it with sqflite db.I Will check the above link. Waiting for 1st December. :)
@SkjoyBd
@SkjoyBd 3 года назад
@@BenjaminCarlson I just used IndexedStack as per your suggestion and it is working great. Problem solved. Thanks a lot.
@claudiazorrillarojas5624
@claudiazorrillarojas5624 3 года назад
Muy buen video, me fue de gran ayuda ¡Muchas gracias!
@hanirahani1863
@hanirahani1863 3 года назад
It's helpful
@HusniSarif
@HusniSarif 3 года назад
Thank you so much helps A Lot !!!
@cleawrence
@cleawrence 3 года назад
Mm so far it's okay. but how do u handle back button and not closing the app
@surendravishwakarma5244
@surendravishwakarma5244 3 года назад
Good tutorial keep it brother.
@holaahora7527
@holaahora7527 3 года назад
Congratulations, very good video!
@mathrisk
@mathrisk 3 года назад
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.
@furkanyakkan1529
@furkanyakkan1529 2 года назад
Can we also add some slide animation during to process?
@DpinkTD
@DpinkTD 3 года назад
Thank brother
@BenjaminCarlson
@BenjaminCarlson 3 года назад
No problem
@shotoiyo
@shotoiyo 8 месяцев назад
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:(
@wakgate577
@wakgate577 3 года назад
THANKSS !
@ayazveliyev5840
@ayazveliyev5840 3 года назад
Thank you very much!
@johnniegilkerson4724
@johnniegilkerson4724 2 года назад
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
@theflutterguy6301
@theflutterguy6301 2 года назад
Great
@someguy007
@someguy007 3 года назад
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
@BenjaminCarlson 3 года назад
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
@someguy007 3 года назад
@@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
@BenjaminCarlson 3 года назад
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.
@nexoknechthd619
@nexoknechthd619 3 года назад
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
@BenjaminCarlson 3 года назад
Check out this video I made on routes and pages! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tSn09-ACZwg.html
@nexoknechthd619
@nexoknechthd619 3 года назад
@@BenjaminCarlson gut there you use stateless Widget. But I Need statefulwidget
@shimonbiton2163
@shimonbiton2163 3 года назад
7:25 what is the keyboard shortcut for this action?
@BenjaminCarlson
@BenjaminCarlson 3 года назад
option + shift + f - This is the format command. Note that you will need to have a formatter installed for the dart language.
@bakarbsa
@bakarbsa 3 года назад
why when I use 4 icons, the navigation bar disappears
@BenjaminCarlson
@BenjaminCarlson 3 года назад
set the type to fixed: type: BottomNavigationBarType.fixed
@bakarbsa
@bakarbsa 3 года назад
@@BenjaminCarlson Thanks bro, its work!!!
@BenjaminCarlson
@BenjaminCarlson 3 года назад
Happy to help!
@abgthscode6326
@abgthscode6326 3 года назад
how do you change the app bar for different page?
@BenjaminCarlson
@BenjaminCarlson 3 года назад
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
@fssene1462 3 года назад
Is it null safety compatible ?
@BenjaminCarlson
@BenjaminCarlson 3 года назад
It should be although some of the features in this video have been depreciated.
@anshulkumar991
@anshulkumar991 4 года назад
Hello sir nice video I need your help so how can I contact you
@BenjaminCarlson
@BenjaminCarlson 4 года назад
My contact email is on the about page!
@anshulkumar991
@anshulkumar991 4 года назад
@@BenjaminCarlson there is no email in about page
@aka.Xavier
@aka.Xavier 3 года назад
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
@BenjaminCarlson 3 года назад
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
@aka.Xavier 3 года назад
@@BenjaminCarlson anyway much appreciated for sharing the knowledge
@Dedecayed
@Dedecayed 3 года назад
All fun and games until you need to route to a new screen and lose the bottom navigation bar
@BenjaminCarlson
@BenjaminCarlson 3 года назад
what do you mean?
@Dedecayed
@Dedecayed 3 года назад
@@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
@BenjaminCarlson 3 года назад
@@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
@arsenemn 3 года назад
hey do you know any solution to this problem?
@Dedecayed
@Dedecayed 3 года назад
@@arsenemn yes I do you have to search on the subject "GlobalKey Map _navigatorKeys = { "Home": GlobalKey(), "Garage": GlobalKey(), "Page3": GlobalKey(), };
@zetalukiest8100
@zetalukiest8100 2 года назад
I'm very thankful for this video. it helped me enoughly to rich my day's goal
Далее
TikTok Sign Up Page - Flutter UI - Speed Code
13:11
Просмотров 1,8 тыс.
skibidi toilet multiverse 041
06:01
Просмотров 5 млн
Cute kitty gadgets 💛
00:24
Просмотров 12 млн
HOW DID SHE DECIDE TO DO THIS?!
00:27
Просмотров 7 млн
Top 35 Flutter Widgets
29:29
Просмотров 323 тыс.
microsoft doubles down on recording your screen
10:00
Bottom Navigation Bar in Flutter - Programming Addict
6:52
Chakra UI Responsive Sidebar
14:33
Просмотров 36 тыс.
I forced EVERYONE to use Linux
22:59
Просмотров 457 тыс.
Modern Bottom Nav Bar📱Flutter Tutorial ♡
8:15
Просмотров 171 тыс.
The Clever Way to Count Tanks - Numberphile
16:45
Просмотров 1 млн
Top 30 Flutter Tips and Tricks
6:50
Просмотров 550 тыс.
Flutter Mobile App Development - Bottom Navigation Bar
13:03
skibidi toilet multiverse 041
06:01
Просмотров 5 млн