Bottom Navigation Bar in Flutter | Material 3 | Flutter eCommerce App 2023

In this exciting Flutter tutorial, we'll delve into the art of designing a modern and professional Flutter Bottom Navigation Bar with a Material 3 design, setting the stage for a top-notch user experience.
► Flutter eCommerce App Course: • Professional Flutter E...
🎊 E-COMMERCE APP
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🎁 DOWNLOAD SOURCE CODE: codingwitht.com/product/flutt...
❤️ FLUTTER E-COMMERCE APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Complete E-Commerce App : • Professional Flutter E...
► Section - 1 Configuration : • Professional Flutter P...
► Section - 2 Login App : • Professional Flutter P...
► Section - 3 eCommerce UI : • Flutter Complete Ecomm...
► Section - 4 Login Backend: • Flutter Firebase Cours...
► Section - 5 eCommerce Backend: • Flutter E-Commerce App...
❤️ SUBSCRIPTIONS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Join Patreon to Access Premium Content: / membership
COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► FLUTTER CRASH COURSE • Flutter Crash Course f...
► LOGIN APP FIREBASE • Flutter Login App - UI...
🧑‍💻 RELATED VIDEOS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Custom App Bar: • Flutter Custom AppBar ...
► Custom Shape: • Flutter Clip Path Tuto...
► Circular image: • Search Bar and Horizon...
► Grid Layout & Product Design : • Gridview in Flutter wi...
► All Products Page Design • Flutter All Products P...
FOLLOW US ON SOCIAL MEDIA
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 Facebook | / codingwithtea
💻 Instagram | / coding_with_tea
❤️ Subscribe | kzbin.info...
CHAPTERS
00:00 Introduction
DETAILS
Whether your app is in light mode or dark mode, we've got you covered, ensuring your Bottom Navigation Bar looks sleek in any environment.
This tutorial marks the first video of Section 3 in our comprehensive e-commerce app with firebase series for 2023. So, let's get started and craft a stunning Flutter Bottom Navigation Bar Menu that will elevate your app's aesthetics and functionality!
#codingwitht #ecommerceapp #flutter

[@noumankarim92]

Very informative, professional and full of knowledge videos. I am following this series. Thank you very much for this series.

[@CodingwithT]

Thank you so much @Noumankariam92

[@muhendis_]

I'm back, my final exams are over and we're moving on :) and I'm so grateful for this awesome tutorial again 🌸

[@MohamedA.A.-wx8ij]

Thank you for this whole playlist it's very helpful

[@jatinverma6759]

I have been trying out different tutorials for the past 12 hours and none of them were working and suggesting me to re write my code where I load homescreen first and blah blah as they were using setState or Provider. Your tutorial saved me!! Thank you so much. Please keep up the good work

[@CodingwithT]

Glad I could help!

[@septilevg6897]

How could you add navigation animation to this?

[@Engineer-Samibress]

Thanks a lot for your time 😊

[@CodingwithT]

You welcome

[@user-hv6bp7rr3u]

Thank you so much for the helpful video

[@CodingwithT]

Glad it was helpful!

[@kaismsalmi]

Salem alykom, This is the best Flutter course. Thanks brother 🥳🤩🇹🇳

[@CodingwithT]

Walaikun salam, Thank you 🙏

[@BC2715]

navbar changes using obs is wild~

[@TheALFOOS]

great video i learn alot thank you so much keep it up ♥♥♥

[@CodingwithT]

Glad to hear that

[@mariojovanovski6007]

Hello, i would like to ask you is there a specific reason my nav bar doesnt turn dark when i turn dark mode on, do i need to create a new theme file in the custom themes directory ?

[@CodingwithT]

Add theme for bottom navigation bar

[@cryptoairdroppp]

you making so good vides, thanks for add the community this contents

[@CodingwithT]

Thank you buddy 🙏

[@jonasvasallo2841]

hello, how do I implement a navigation system where for example I have a product card on my homescreen, users can click on it to navigate to a new separate screen to see the details of the product. they can also go back to the home screen with a back button on the appbar while integrating it to the navigation that you did in this video

[@CodingwithT]

Just use automatically apply leading

[@brahjan1]

Amazing content! I'm curious: How can I make the bottom nav bar persist across all screens, not just the main ones defined? I'd like the bottom navigation bar to remain present during all navigations.

[@CodingwithT]

To persist the bottom navigation bar across all screens, use an IndexedStack to manage screen visibility and a BottomNavigationBar for navigation controls. Update the selected index based on user interactions.

[@A2Vloogs]

I'm in love with your content. ❤

[@CodingwithT]

Thank you 😊

[@noxtube7937]

Thank you verry much brother for this tuto many thanks

[@CodingwithT]

Glad it helped 😀

[@infinitcomp]

This series is really awesome bhai, Love u ♥, May God bless u

[@CodingwithT]

Thank you so much 😊💖

[@phunguyen.1004]

I have a case that I don't know how to solve. On the iPhone, there is a Home Indicator at the bottom, which makes the bottom navigation menu too tall. This only happens when I debug, but it still occurs after I publish the app to the store. I don't know why

[@CodingwithT]

I guess You have some space or you wrapped your design with SafeArea Widget.

[@kabirchowdhury7062]

hello @Coding with Tea, all of your videos and topics are really helpful to learn and easy to understand. I regularly watch your videos to learn and practice, but I notice that one thing is missing from your tutorials, which is responsive designs, I believe in upcoming videos you will cover this topic.

[@CodingwithT]

Thank you so much 😊. In flutter we have to focus on 2 things, first one is Adaptive and 2nd one is Responsive design. Summary, responsive design in Flutter involves creating a flexible UI that adjusts automatically to different screen sizes, while adaptive design involves creating multiple layouts optimized for specific screen sizes or device types. Therefore for the e-commerce app I'm targeting Adaptiveness and when we will create E-commerce Admin Panel, then we will take care of Responsiveness. 🎉❤️

[@mr.saurabhpatil]

​@@CodingwithTWill the admin panel be a web application or a mobile app?

[@CodingwithT]

We will create that in the Flutter and focus on the web app but due to Flutter Adoptability, It can easily be used in the apps too.

[@loubnamoussallam981]

Hello, thanks a lot for the video, could you please provide a solution for routing to another page (other than the four main pages) but keeping the navigation bar at the bottom??

[@CodingwithT]

To redirect to another page while keeping the bottom navigation bar visible, you need to assign the bottom navigation bar to the page you want to redirect to. Then, you can use Get.to() to navigate to that page.

[@AlicePiccoli-pk2hu]

Hello, thanks alot for this good video :)

[@CodingwithT]

I'm glad you found the video helpful! If you have any questions or need further assistance, feel free to ask. Keep learning and exploring!

[@creaturesalike]

Hello, Please what website did you use in getting the gif assets you use. sometimes you used them in the loading or to display and empty list or something.

[@CodingwithT]

You can find the gif assets I use on icons8.com. They have a wide variety of animated GIFs that you can use for loading indicators, empty states, or other purposes in your Flutter applications.

[@creaturesalike]

@@CodingwithT thank you so much, you are a life saver. please is the code availabe on github?

[@pawanselokar]

I’m wondering how you got that background colour behind the selected bar item

[@CodingwithT]

you can use indicatorColor: property to change the selected background color

[@frankcompston5065]

Is there a reason you opted to wrap both the navigation bar and body separately with an Obx, instead of just wrapping the entire scaffold?

[@CodingwithT]

It will redraw the widgets only when required. If we use the single Obx then when ever there is change in any thing it will redraw everything even if not required

[@vuongqtvn]

nice job keep it up ♥

[@CodingwithT]

Thank you 😊

[@umardev500]

does it state are persist if we back again to each screen?

[@CodingwithT]

Yes, by default, the state of each screen in the bottom navigation bar should persist when you navigate back to them. This means that any changes or interactions you made on a screen will be retained when you navigate away and then return to that screen.

[@aseloleCihuyy]

waalaikumsalam, thanks dude

[@CodingwithT]

🎉🤗

[@imd509]

Quality content ❤

[@CodingwithT]

Thank you 😊

[@dantesimon4220]

thanks for this video. what is the font in your project?

[@CodingwithT]

Welcome 😁. It's Poppins

[@aouadicharaf1038]

❤❤❤

[@v-logs8616]

This is a great series i wanted all source code. I checked your page from where i can download the code there are 3-4 ways. Just wanted to which is the best way or site to pay and get source code for India. Also this is onetime payment right or it is subscription for code?

[@CodingwithT]

Anyone that suits you. Its a one time payment

[@IusmanQ]

How to change the color of the labels?

[@CodingwithT]

To change the color of the labels in Flutter, you can use the TextStyle property of the Text widget.

[@javanerd05_29]

How to change the font style of each item?

[@CodingwithT]

You can use default fonts or if you want to upload the font then you have to watch the Themes video of this playlist. kzbin.info/www/bejne/eaWcdKWDmsyYsLM

[@zakariaelaaliji7747]

you saved my internship !

[@pinoytayo3735]

Hello. where is the starter files?

[@CodingwithT]

Click on the Download Code button and you'll be redirected to a page where you can choose a starter kit and download the kit.

[@emerson-alonzo]

☕👌🏻

[@CodingwithT]

Thank you 😊

[@harisnadeem4046]

Bhai selected Index ap ny initialize kiya h m ny class mein aur jb usy oper call krty hein variable selectedindex ko tou wo error de raha h aisy kyu?

[@CodingwithT]

What's the error?

[@richardappow6770]

please can we get just the assets used to code along?

[@CodingwithT]

Yes you can download the Starter kit for free with all the assets 🙂. Link is in the description

[@subhamroy5368]

One request, please update the Free Starter UI kit, it's showing null safety errors

[@CodingwithT]

Noted

[@thiago_uxui_dev]

I bought your incredible project, would it be possible for you to make the figma file available?

[@CodingwithT]

Thank you 😊. I will try to share that.

[@AdefilaAbiodun]

Is anyone else also getting this error, The named parameter 'indicatorColor' isn't defined. Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'indicatorColor'.?

[@AdefilaAbiodun]

I solved this by upgrading my flutter

[@CodingwithT]

Thank you for your support

[@IamHariJags]

Bro where did you learn flutter??

[@CodingwithT]

Docs, tutorials, and above all patience and practice 😊.

[@IamHariJags]

Sounds yummy😊

[@umardev500]

Alaykumsalam

[@CodingwithT]

Wa alaikum Assalam, how can i help you

[@waqaryounus4479]

Sir iska first part ni mil rha

[@CodingwithT]

Here is the complete playlist of my flutter ecommerce app. kzbin.info/aero/PL5jb9EteFAOAusKTSuJ5eRl1BapQmMDT6&si=52c7rfr2gPVSL9Ap