Bottom Navigation Bar in Flutter | Material 3 | Flutter eCommerce App 2023
Вставка
- Опубліковано 15 жов 2024
- 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.co...
❤️ 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 | www.youtube.co...
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
Very informative, professional and full of knowledge videos. I am following this series. Thank you very much for this series.
Thank you so much @Noumankariam92
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
Glad I could help!
Genial,
Estas clases de programación de Apps es la mejor playlist que he encontrado y completa, el mejor profesional explicando y organizando un proyecto tan grande como lo es eCommerce.
Mil gracias.
Thank you so much for your kind words! 😊 I'm glad you're finding the playlist helpful. Your support means a lot! 🙌 Keep learning and building amazing apps!
@coding with T, please in my code, obs,Rx, Get controller,Obx and Get were underlined in red saying they are undefined. How do I fix this? Did you define them in a previous file?
I'm back, my final exams are over and we're moving on :) and I'm so grateful for this awesome tutorial again 🌸
Welcome back! 🎉 Congratulations on finishing your final exams! 📚🌟 I'm glad you find the tutorial helpful. Let's keep moving forward with your learning journey!
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.
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. 🎉❤️
@@CodingwithTWill the admin panel be a web application or a mobile app?
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.
navbar changes using obs is wild~
Thank you for this whole playlist it's very helpful
You're welcome! 😊 I'm glad the playlist has been helpful for you.
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.
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.
use the package name bottom nav bar which will be used in all app
Salem alykom, This is the best Flutter course. Thanks brother 🥳🤩🇹🇳
Walaikun salam, Thank you 🙏
Assalamu Alaikum brother, how to change the color of the label on material 3 nav bar? like when selected and unselected? want to make my nav bar like todoist.
Never tried one before but I think you can try Obx or setState to update colors
In the first few episodes you showed us that we could set a number of parameters in custom themes. can we do the same here with the NavigationBarThemeData?
Yes, you can customize the NavigationBarThemeData to style the Bottom Navigation Bar in Flutter. You can set various parameters, similar to custom themes, to control the appearance of the navigation bar.
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??
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.
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?
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
Thanks a lot for your time 😊
You welcome
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
Just use automatically apply leading
Thank you so much for the helpful video
Glad it was helpful!
Thank you very much for the training video
You're very welcome! Thank you for your support.
I’m wondering how you got that background colour behind the selected bar item
you can use indicatorColor: property to change the selected background color
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.
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.
@@CodingwithT thank you so much, you are a life saver. please is the code availabe on github?
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?
Anyone that suits you. Its a one time payment
Thank you verry much brother for this tuto many thanks
Glad it helped 😀
How could you add navigation animation to this?
Hello, thanks alot for this good video :)
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!
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 ?
Add theme for bottom navigation bar
thanks for this video. what is the font in your project?
Welcome 😁. It's Poppins
you making so good vides, thanks for add the community this contents
Thank you buddy 🙏
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
I guess You have some space or you wrapped your design with SafeArea Widget.
on the part where you typed Get.put for some reason its saying there's an error . The name 'Get' is defined in the libraries 'package:controller/src/meta.dart (via package:controller/controller.dart)' and 'package:get/get_core/src/get_main.dart'.
Try using 'as prefix' for one of the import directives, or hiding the name from all but one of the imports.
that's what its saying an I can't move forward with the series cause of it, please help
Hi! Please make sure to add the get package in your pubspec.yaml file by go to the terminal and run the command "flutter pub add git"
After adding it, run flutter pub get and let me know if that resolves the issue! 😊
I'm in love with your content. ❤
Thank you 😊
This series is really awesome bhai, Love u ♥, May God bless u
Thank you so much 😊💖
does it state are persist if we back again to each screen?
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.
is this suport for java?
If you're asking whether Flutter's Bottom Navigation Bar can be used in a native Android app coded in Java, the answer is no. Flutter widgets, including the Bottom Navigation Bar, are part of the Flutter framework and can't be directly used in native Android development. However, you can embed a Flutter module into your existing Android app if you want to use Flutter components like the Bottom Navigation Bar.
thank you
You're welcome!
great video i learn alot thank you so much
keep it up ♥♥♥
Glad to hear that
waalaikumsalam, thanks dude
🎉🤗
I am getting _debugLocked kind of error while navigating to any page from the setting page
Hi! That error usually happens when there's an issue with multiple navigations happening at the same time. Try using Get.off() before navigating. Let me know if that helps! 🔧😊
How to change the color of the labels?
To change the color of the labels in Flutter, you can use the TextStyle property of the Text widget.
One request, please update the Free Starter UI kit, it's showing null safety errors
Noted
nice job keep it up
♥
Thank you 😊
Quality content ❤
Thank you 😊
Bro where did you learn flutter??
Docs, tutorials, and above all patience and practice 😊.
Sounds yummy😊
How to change the font style of each item?
You can use default fonts or if you want to upload the font then you have to watch the Themes video of this playlist. ua-cam.com/video/Ct9CrMegezQ/v-deo.html
❤❤❤
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?
What's the error?
I bought your incredible project, would it be possible for you to make the figma file available?
Thank you 😊. I will try to share that.
Hello. where is the starter files?
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.
you saved my internship !
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'.?
I solved this by upgrading my flutter
Thank you for your support
please can we get just the assets used to code along?
Yes you can download the Starter kit for free with all the assets 🙂. Link is in the description
☕👌🏻
Thank you 😊
Walaikum as salam Wa Rahmatullah brother 🤍
JazakAllah.
Sir iska first part ni mil rha
Here is the complete playlist of my flutter ecommerce app. ua-cam.com/play/PL5jb9EteFAOAusKTSuJ5eRl1BapQmMDT6.html&si=52c7rfr2gPVSL9Ap
Alaykumsalam
Wa alaikum Assalam, how can i help you
@coding with T, please in my code, obs,Rx, Get controller,Obx and Get were underlined in red saying they are undefined. How do I fix this? Did you define them in a previous file?
Please use the package get in your pubspec file