Flutter Tutorial - Bottom Navigation Bar | The Right Way | Without Routes

Подписаться 200 тыс.

Просмотров 140 тыс.

50% 1

Create a Bottom Navigation Bar in Flutter without Routes that keeps the state with the help of IndexedStack in Flutter.
Click here to Subscribe to Johannes Milke: ru-vid.com...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/bott...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Hide Bottom On Scroll Tutorial: • Flutter Tutorial - How...
Animated Bottom Navigation Bar Tutorial: • Flutter Tutorial - Ani...
AppBar & Transparent AppBar Tutorial: • Flutter Tutorial - App...
Sliver App Bar Tutorial: • Flutter Tutorial - Sli...
Sticky Headers In ListView Tutorial: • Flutter Tutorial - Sti...
Scaffold Widget Tutorial: • Flutter Tutorial - Sca...
Page Transition Animation Tutorial: • Flutter Tutorial - Pag...
Persistent Bottom Sheet Tutorial: • Flutter Tutorial - Per...
Modal Bottom Sheet Tutorial: • Flutter Tutorial - Dra...
Animated List Tutorial: • Flutter Tutorial - Ani...
Settings Page Tutorial: • Flutter Tutorial - App...
Fix Bottom Overflowed By Pixels Tutorial: • Flutter Tutorial - Fix...
Navigation Drawer Tutorial: • Flutter Tutorial - Sid...
User Profile Page UI Tutorial: • Flutter Tutorial - Use...
Quiz App UI Tutorial: • Flutter Tutorial - 1/2...
TIMELINE
0:00 Introduction Bottom Navigation Bar
0:20 Create Animated Bottom Navigation Bar
1:28 Select Navigation Bar Items
2:56 Create Fixed Bottom Navigation Bar
3:31 Change Background Color
3:42 Change Item Color
4:19 Change Icon Size & Font Size
4:51 Icons Only / Bottom Navigation Bar Without Text
5:35 Change Pages
7:20 Change AppBar Title Via Bottom Navigation Bar
7:52 Preserve State Of Widgets When Navigating
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Me :-)
RU-vid | ru-vid.com...
Twitter | intent/follow?ori...
Linkedin | / johannesmilke
Instagram | / johannesmilke
Github | github.com/JohannesMilke
Medium | / johannesmilke
Website | johannesmilke.com
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

Наука

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

2 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 249

@HeyFlutter Год назад

👉Join 12 Week Flutter Training: heyflutter.com 👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f Source Code: github.com/JohannesMilke/bottom_navigation_bar_example

@seiwonpark 3 года назад

oh my god I just got stucked in 'paging' last night and you've uploaded this video today morning(at my time) 😭😭😭 thank you so much!!

@gumdum6764 2 года назад

Wow. I've been using all types of packages and navigation solutions trying to get this to work. And here it was in one of your videos the whole time. Thank you, my bottom navigation system now works properly without a bunch of cludgy routing.

@davidtzirima9301 2 года назад

This guys is the real deal when it comes to flutter tuts , you make learning simple and enjoyable kudos , Thanks man

@startswithzed 2 года назад

Whenever I need a tutorial for flutter I always check if you've made one because then I don't need to look anywhere else. You explain very well. Thank you.

@tihitnatsegaye1671 2 года назад

you have no idea how happy I am after watching this vedio , i have been trying to make my screen not rebuild when navigating through the screens for hours because i was loosing the data everytime...............your a saviour man..........thank you so much bro🙏🙏👍👍👍👍👍

@tripsam4655 2 года назад

You are very underrated. The videos are short, easy to understand and to the point. Thank you, well done and keep going!

@sankalpasenevirathna 2 года назад

You're a life saver!!! 🙏🤯 Thanks for this tutorial man! And please, keep making tutorials like these.

@sokhibabdurasulov3323 2 года назад

wow, as you explain I get questions and second later you answer the question. how is that possible. I guess you really understand brain flow of a beginner. Definitely will watch the every single video you made. Thanks

@nicholasovunda7663 2 года назад

Thank you so much for this tutorial... manually coded everything the last time... this is a life saver

@barry.anderberg 2 года назад

A nice touch is to wrap IndexStacked in a PageTransitionSwitcher so you can have fade animations, for example, between each of your screens.

@reaganza23 3 года назад

Hi Johannes. You can't understand tons of headaches you spared me by just applying concepts of your videos. Can you do Bottom Navigation Bar with routes because we find ourselves with too many screens. Thank you and keep up the good work.

@gokberkkeskinklc2022 Год назад

I loved how briefly you explained the implementation cumulatively and solve possible issues that we might face. Thanks a lot, greetings!

@HeyFlutter Год назад

Glad to hear that, You are welocome Gökberk Keskinkılıç! 😊

@mario_gabriel 2 года назад

You helped me so much! I had a lot of trouble making this work and some other tutorials made me do such a mess when it was this simple.

@mario_gabriel 2 года назад

@@HeyFlutter No, thank YOU

@Kim-by5uy 2 года назад

Great tutorial, simple and straight to the point

@sethm3194 3 года назад

Love your videos watch them all the time. I'm and audiophile and video editor. Can I recommend that you lower the 20 - 60 Hz range on your mic, so it does not pop so much. Thanks again.

@progtom7585 Год назад

Brilliant, simple. succinct. Bottom nav done in no time! Thanks heaps

@HeyFlutter Год назад

You’re most welcome, progTom! 🙂

@Hello-eq5rm 2 года назад

You have the solution of every problem about flutter, which I have in my mind. ❤ from Bangladesh

@sungjunko 2 года назад

Thank you for this wonderful tutorial video. This helped me a lot.

@iGhostr 3 года назад

Been waiting for this. Much much thanks to you!

@eNONO-ot4zh 3 года назад

Thank you my Johannes.👍👍 I waiting BottomNavigation with navigation handler 👌

@kucingmalaya1177 3 года назад

Thank you. Proper tutorial 👍

@TheSuperRaspberry 2 года назад

This was so well explained - thank you! Keep it up :)

@jamesalcaraz8729 2 года назад

Any guidance on how to combine this with routes? There will be cases where you'll still use routing like subpages inside the top level ones.

@isurujn 2 года назад

Thanks for the clear and concise tutorial, Johannes. One question. Let's say I want one tab's page to preserve the state but for another tab's page, I need it to be rebuilt every time I switch to it. Is it possible to achieve this?

@techlabbyhamza Год назад

Thanks You've solved my problem in just few minutes. by a simple adding a widget IndexedStack. I was stuck on routing the pages.

@HeyFlutter Год назад

Glad it was helpful, @MuhammadHamza-ft4ef 😀

@ralphbu222 2 года назад

Thank you for a fast, great tutorial!

@user-xx9rp4gp9g 2 года назад

Thank you for making videos so often.

@kibromhs7566 2 года назад

I love the way you teach. Can you do a video on sliverappbar and customscrollview?

@AzoeJame 2 года назад

Thank you . Your video taught me very well.

@mustafashaikh7829 2 года назад

Great video @Johannes Milke. I've one issue could you please suggest me what should I do I follow all the step using indexed stack on home page I've called api on init state when I switch to next screen and come back to home screen the api call again

@mareknowak9137 3 года назад

Dobra robota Johan. Bardzo sobie cenię Twój kanał. Pozdrawiam z Polski.

@bunhengborath7698 2 года назад

Best tutorial ever keep up the good work ❤️

@janammaharjan2699 2 года назад

This is great. Thank you Milke.

@Amine0027 2 года назад

Thans man after 3 day finally i solve one of my tiered problems 😂😂 Thanks for you firstly and stackitem secondly You got one subscriber 😎

@TheWhoIsTom 2 года назад

Incredible good explained like always :)

@programmerjowo 3 года назад

thanks for this very detail tutorial

@ShuaibShahzan 2 года назад

Thanks for the wonderful tutorial @JohannesMilke, but when I navigate to any other screen, then the BottomNavigationBar disappears. How do I keep the BottomNavigationBar persistent irrespective of the screen I'm on.

@tiagon14 2 года назад

Thanks for this amazing video

@nikhilkukreja8498 3 года назад

Thank you Johannes ❤️

@uibychris11 2 года назад

Thank You So Much!

@dantedt3931 3 года назад

Awesome content,thanks!

@bone140692 2 года назад

thank you so much, really understandable for an amateur like me :D

@saadansari1643 Год назад

Simple, logical and beautiful explanation. Thank you sir.

@HeyFlutter Год назад

Glad to hear that, You are welcome Saad Ansari! 😊

@ahmednabil4456 2 года назад

Thanks bro, very useful video

@MedCissetech 3 года назад

Thank for this video

@krishnarajasagar7752 3 года назад

Since we deleted the appbar from main.dart, do we have to add drawer individually to all the 4 screens for it to be seen?

@ahmadwahyuawaludin6976 2 года назад

Thanks for this tutorial, i subcribe

@sparsetech1671 2 года назад

Thanks a lot sir.

@jafarrezazadeh846 Год назад

nice explaining and the IndexedStack helped me a lot, thanks

@HeyFlutter Год назад

Glad to hear that, Thank you jafar rezazadeh! 😊

@prakashanuvadia8870 2 года назад

superb explanation .....👌👍

@Ksl.23 2 года назад

Thank you so much Johannes!

@HeyFlutter 2 года назад

Thank you, Kushal Gurung! 🙂

@wubetayalew7728 Год назад

The most satisfying video of bottom navigation bar .. tnx alot

@HeyFlutter Год назад

You are welcome, Wubet Ayalew 😊

@ramprasadbhagat8072 2 года назад

Thank you so much😊

@androider5830 3 года назад

Hey nice tutorial Can you tell me the chenge bottom navigation item by click on any button thanks

@ritiksaxenaofficial 3 года назад

Awesome ❤️

@CodeEnthusiast78912 5 месяцев назад

thank you, answered all my questions.

@HeyFlutter 5 месяцев назад

Glad to hear that, You are most welcome @CodeEnthusiast78912

@khaledawad3642 2 года назад

thank you soooo much ♥ ♥ ♥

@gudrat 2 года назад

I cannot believe how awesome this video is

@HeyFlutter 2 года назад

Thank you, Gudrat Guluyev! 🙂

@anghamjbeli3037 2 года назад

great thank you

@phildinho1837 2 года назад

The Best Bro

@quokka0077 Год назад

this video is so good. thank u

@HeyFlutter Год назад

You are welcome, arris!

@akhtarabbas5760 2 года назад

just amazing bro .

@lahirumadhumadha Год назад

informative. Thanks!!

@HeyFlutter Год назад

You are welcome, lahiru madhumadha!

@kehinsoftcompanyltd8397 2 года назад

Thank you so much for such a wonderful tutorial, but when I put my code in main.dart file like you did, it doesn't work., but when I put it in HomePage it works. Secondly, I used my widget in main.dart to design the splash screen and call materialApp then HomePage(); and theres no way to have a scaffold . When I try to create another widget for the bottom navbar it doesn't work. please what is the solution to the issue because putting the code on the Home may also create issue with the page content? Thank you

@cyemezocode Год назад

Happy for guy This is very interesting and jeep this job done. Now you got my subscribe 👍

@HeyFlutter Год назад

Glad you liked it, CyemezoCode 😀

@phonghuynh3551 2 года назад

Amazing tut! 1M likes for you 🙏🙏🙏

@sivasankarpnair Год назад

Thanks a lot dude , you're a godsend

@HeyFlutter Год назад

Thanks, S P N! 🙂

@user-xu8fh1ef6p Год назад

amazing goodjob! You are a life saver. :)

@HeyFlutter Год назад

Glad to hear that, Thank you Zedd Elijah! 😊

@battleGroundAce832 2 года назад

Hi Johannes, can we jump back to Home page with clicking on button which is present inside on Profile bottom bar?.

@sheikjaved0677 2 года назад

Explanations placed Beautifully.....

@HeyFlutter 2 года назад

Thanks, Sheik Javed! 🙂

@AIteek 3 года назад

What if i have 5 complex screens managed by the bottom bar? Isn´t it slow to keep them all on the build tree? I mean, if i change anything on screen 1, all the build methods from my other screens will be called too.

@ekanemekemini7433 2 года назад

Great video as always👌🏻

@HeyFlutter 2 года назад

Thank you, Ekanem Ekemini! 🙂

@user-ms3lp1yb9n 2 года назад

you are the best really i love you

@andresalba34 2 года назад

Will this work for routing to more and more pages and always displaying the bottom NAV bar?

@BlacKnight9 2 года назад

Hi, i having an issue and i hope you help, i am a beginner at programming in general and i am trying to make TabBar and BottomNavigator booth at the same time, and i seems everytime i try to add them booth, they booth stop working, they both has to be in body: property and i'm not sure what went wrong.

@Patrickus23 2 года назад

If I have a more complex app with settings, profile user, notifications and chat page, can I have a statefull widget for every page?

@muhammadafzal237 2 года назад

I need a floatingActionButton above the bottomNavigationbar shape: CircularNotchedRectangle. Please guide how to do it.

@juthajk6229 2 года назад

thank you

@fnorory3227 Год назад

hi amazing video, you always help me with your videos, i have a question, im using the screen method to change the screens and im wonder if there is a way to add like a transition effect to the change of the screen?

@HeyFlutter Год назад

Thank You F Norory! Follow this link: pub.dev/packages/bottom_bar_page_transition I hope you will get your answer 🙂

@fnorory3227 Год назад

@@HeyFlutter thank you so much, this will help me a lot

@1RRaider 3 года назад

Omg you're amazing man. Keep trying

@vincenzoizzo978 2 года назад

Hi, what if I want to make sure that some keys are disabled on occasion? It can be done? Thanks in advance.

@faheem9377 2 года назад

Thanks.

2 года назад

what if you want for example that "plus" button to change the current screen you're in? for example you want the navigation bar to jump to the chat when you press that?

@jessenjie6202 Год назад

Thankyou so much

@HeyFlutter Год назад

You’re most welcome, Jessen Jie! 🙂

@vidyasagargaikwad1268 2 года назад

How to bottomnavigation bar globally, I did same as you with some extra screens using routes but it didn't work as expect. Please help

@afnan011 Год назад

Thank you

@HeyFlutter Год назад

You are welcome, @afnan011 😊

@manga6666666 3 года назад

ohhhh thanks that is cooooooooooooooooooool

@vamshirahul59 2 года назад

I have a case where the local storage is updating, but since index stack keeps the state. The values are not getting updated so how should i do it..!

@mhramezanian3550 2 года назад

perfect

@JunianIrman 3 года назад

pretty cool bro

@ahmedalobed7382 Год назад

thank you

@HeyFlutter Год назад

You are welcome, Ahmed AlObed 😊

@m.galihpratama3838 Год назад

Thanks sir

@HeyFlutter Год назад

You are welcome, M. GALIH PRATAMA 😊

@hyji.n2 2 года назад

Best BottomNavigationBar tutorial so far. Everything worked. Worth 10 minutes, now subscribing :)

@behnamjafari2731 2 года назад

for example, how to navigate between tabs within pages I'd like a button on my Home screen that takes me to the third item in the BottomNavigationBar.

@anuragnair5 Год назад

THANKSSS MAN!! :))

@HeyFlutter Год назад

You are welcome, Anurag Nair!

@SaGar-tp2wi 2 года назад

nice tutorial

@HeyFlutter Год назад

Thanks, Sa Gar! 🙂

@abdelghanialmasri6695 Год назад

Best Regards, best of the best

@HeyFlutter Год назад

Thanks, @abdelghanialmasri6695! 🙂

@crypleman 2 года назад

follow ur nice tutorial...but i add 'some button in chat page, when press it will load new screen (different file) using navigator.push.... my bottom navigation bar covered by new screen, how to solve it? thanks....