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

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: kzbin.info...
👉 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 :-)
KZbin | kzbin.info...
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

[@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]

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!!

[@davidtzirima9301]

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

[@tihitnatsegaye1671]

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🙏🙏👍👍👍👍👍

[@gumdum6764]

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.

[@startswithzed]

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.

[@sankalpasenevirathna]

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

[@tripsam4655]

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

[@sokhibabdurasulov3323]

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

[@Kim-by5uy]

Great tutorial, simple and straight to the point

[@nicholasovunda7663]

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

[@iGhostr]

Been waiting for this. Much much thanks to you!

[@TheSuperRaspberry]

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

[@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ıç! 😊

[@user-xx9rp4gp9g]

Thank you for making videos so often.

[@reaganza23]

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.

[@ralphbu222]

Thank you for a fast, great tutorial!

[@sungjunko]

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

[@progtom7585]

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

[@HeyFlutter]

You’re most welcome, progTom! 🙂

[@kucingmalaya1177]

Thank you. Proper tutorial 👍

[@TheWhoIsTom]

Incredible good explained like always :)

[@mario_gabriel]

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]

@@HeyFlutter No, thank YOU

[@bunhengborath7698]

Best tutorial ever keep up the good work ❤️

[@janammaharjan2699]

This is great. Thank you Milke.

[@jamesalcaraz8729]

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.

[@Hello-eq5rm]

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

[@eNONO-ot4zh]

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

[@tiagon14]

Thanks for this amazing video

[@dantedt3931]

Awesome content,thanks!

[@barry.anderberg]

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

[@uibychris11]

Thank You So Much!

[@AzoeJame]

Thank you . Your video taught me very well.

[@ahmednabil4456]

Thanks bro, very useful video

[@nikhilkukreja8498]

Thank you Johannes ❤️

[@programmerjowo]

thanks for this very detail tutorial

[@mareknowak9137]

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

[@ahmadwahyuawaludin6976]

Thanks for this tutorial, i subcribe

[@gudrat]

I cannot believe how awesome this video is

[@HeyFlutter]

Thank you, Gudrat Guluyev! 🙂

[@Amine0027]

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

[@Ksl.23]

Thank you so much Johannes!

[@HeyFlutter]

Thank you, Kushal Gurung! 🙂

[@sparsetech1671]

Thanks a lot sir.

[@jafarrezazadeh846]

nice explaining and the IndexedStack helped me a lot, thanks

[@HeyFlutter]

Glad to hear that, Thank you jafar rezazadeh! 😊

[@bone140692]

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

[@CodeEnthusiast78912]

thank you, answered all my questions.

[@HeyFlutter]

Glad to hear that, You are most welcome @CodeEnthusiast78912

[@phonghuynh3551]

Amazing tut! 1M likes for you 🙏🙏🙏

[@saadansari1643]

Simple, logical and beautiful explanation. Thank you sir.

[@HeyFlutter]

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

[@wubetayalew7728]

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

[@HeyFlutter]

You are welcome, Wubet Ayalew 😊

[@prakashanuvadia8870]

superb explanation .....👌👍

[@quokka0077]

this video is so good. thank u

[@HeyFlutter]

You are welcome, arris!

[@akhtarabbas5760]

just amazing bro .

[@ritiksaxenaofficial]

Awesome ❤️

[@MedCissetech]

Thank for this video

[@phildinho1837]

The Best Bro

[@1RRaider]

Omg you're amazing man. Keep trying

[@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 😀

[@khaledawad3642]

thank you soooo much ♥ ♥ ♥

[@ramprasadbhagat8072]

Thank you so much😊

[@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! 😊

[@sethm3194]

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.

[@lahirumadhumadha]

informative. Thanks!!

[@HeyFlutter]

You are welcome, lahiru madhumadha!

[@ekanemekemini7433]

Great video as always👌🏻

[@HeyFlutter]

Thank you, Ekanem Ekemini! 🙂

[@mustafashaikh7829]

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

[@anghamjbeli3037]

great thank you

[@user-ms3lp1yb9n]

you are the best really i love 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 😀

[@isurujn]

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?

[@kibromhs7566]

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

[@sheikjaved0677]

Explanations placed Beautifully.....

[@HeyFlutter]

Thanks, Sheik Javed! 🙂

[@juthajk6229]

thank you

[@ShuaibShahzan]

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.

[@JunianIrman]

pretty cool bro

[@manga6666666]

ohhhh thanks that is cooooooooooooooooooool

[@yedielseyoumabebe808]

Jesus bless you man of God. You are a blessed person.

[@jessenjie6202]

Thankyou so much

[@HeyFlutter]

You’re most welcome, Jessen Jie! 🙂

[@anuragnair5]

THANKSSS MAN!! :))

[@HeyFlutter]

You are welcome, Anurag Nair!

[@SaGar-tp2wi]

nice tutorial

[@HeyFlutter]

Thanks, Sa Gar! 🙂

[@faheem9377]

Thanks.

[@afnan011]

Thank you

[@HeyFlutter]

You are welcome, @afnan011 😊

[@hyji.n2]

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

[@m.galihpratama3838]

Thanks sir

[@HeyFlutter]

You are welcome, M. GALIH PRATAMA 😊

[@AbdulWahab-bm4gt]

love u ho gaya bawa g

[@HeyFlutter]

Thank you, Abdul Wahab! 🙂

[@mhramezanian3550]

perfect

[@soumyajitmukherjee6535]

thank you

[@HeyFlutter]

You are welcome, @soumyajitmukherjee6535 😊

[@androider5830]

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

[@abdelghanialmasri6695]

Best Regards, best of the best

[@HeyFlutter]

Thanks, @abdelghanialmasri6695! 🙂

[@fenerbahceliyk]

Really nice for noobs like me 😅🙃thank you nice video

[@krishnarajasagar7752]

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?

[@thedev2183]

This is fkin awsome ... That's what I need dude. Thx. I subscribed channel also.

[@HeyFlutter]

Thanks, for your support, Goktug ULAS! 🙂

[@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

[@kehinsoftcompanyltd8397]

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

[@mojtabasaebi6096]

Nice Vedio

[@AIteek]

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.

[@battleGroundAce832]

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

[@BlacKnight9]

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.

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?

[@Patrickus23]

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

[@andresalba34]

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

[@user-nu4sn1ev6l]

Спасибо тебе

[@HeyFlutter]

Thanks, @user-nu4sn1ev6l! 🙂

[@vidyasagargaikwad1268]

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