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

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

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

50% 1

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 | ru-vid.com...
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

Наука

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

10 окт 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@noumankarim92 9 месяцев назад

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

@CodingwithT 9 месяцев назад

Thank you so much @Noumankariam92

@muhendis_ 15 дней назад

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 18 дней назад

Thank you for this whole playlist it's very helpful

@jatinverma6759 4 месяца назад

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 4 месяца назад

Glad I could help!

@Engineer-Samibress 9 месяцев назад

Thanks a lot for your time 😊

@CodingwithT 9 месяцев назад

You welcome

@user-hv6bp7rr3u 9 месяцев назад

Thank you so much for the helpful video

@CodingwithT 9 месяцев назад

Glad it was helpful!

@MohamedIslamDJOUABLIA 2 дня назад

thank you

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

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

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

Walaikun salam, Thank you 🙏

@TheALFOOS 8 месяцев назад

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

@CodingwithT 8 месяцев назад

Glad to hear that

@BC2715 4 месяца назад

navbar changes using obs is wild~

@A2Vloogs 7 месяцев назад

I'm in love with your content. ❤

@CodingwithT 7 месяцев назад

Thank you 😊

@cryptoairdroppp 9 месяцев назад

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

@CodingwithT 9 месяцев назад

Thank you buddy 🙏

@septilevg6897 7 месяцев назад

How could you add navigation animation to this?

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

Thank you verry much brother for this tuto many thanks

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

Glad it helped 😀

@infinitcomp 9 месяцев назад

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

@CodingwithT 9 месяцев назад

Thank you so much 😊💖

@kabirchowdhury7062 9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

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

@CodingwithT 9 месяцев назад

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.

@AlicePiccoli-pk2hu 2 месяца назад

Hello, thanks alot for this good video :)

@CodingwithT 2 месяца назад

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!

@brahjan1 3 месяца назад

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 3 месяца назад

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.

@imd509 7 месяцев назад

Quality content ❤

@CodingwithT 7 месяцев назад

Thank you 😊

@vuongqtvn 9 месяцев назад

nice job keep it up ♥

@CodingwithT 9 месяцев назад

Thank you 😊

@mdfri-404 7 месяцев назад

waalaikumsalam, thanks dude

@CodingwithT 7 месяцев назад

🎉🤗

@jonasvasallo2841 6 месяцев назад

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 5 месяцев назад

Just use automatically apply leading

@loubnamoussallam981 3 месяца назад

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 3 месяца назад

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.

@aouadicharaf1038 7 месяцев назад

❤❤❤

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

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 5 месяцев назад

Add theme for bottom navigation bar

@frankcompston5065 4 месяца назад

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 4 месяца назад

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

@phunguyen.1004 8 месяцев назад

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 8 месяцев назад

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

@pawanselokar 4 месяца назад

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

@CodingwithT 4 месяца назад

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

@creaturesalike 3 месяца назад

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 3 месяца назад

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 3 месяца назад

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

@dantesimon4220 7 месяцев назад

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

@CodingwithT 7 месяцев назад

Welcome 😁. It's Poppins

@umardev500 4 месяца назад

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

@CodingwithT 4 месяца назад

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.

@IusmanQ 2 месяца назад

How to change the color of the labels?

@CodingwithT 2 месяца назад

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

@v-logs8616 2 месяца назад

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

@emerson-alonzo 9 месяцев назад

☕👌🏻

@CodingwithT 9 месяцев назад

Thank you 😊

@subhamroy5368 Месяц назад

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

@CodingwithT 24 дня назад

Noted

@javanerd05_29 4 месяца назад

How to change the font style of each item?

@CodingwithT 4 месяца назад

You can use default fonts or if you want to upload the font then you have to watch the Themes video of this playlist. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Ct9CrMegezQ.html

@umardev500 4 месяца назад

Alaykumsalam

@CodingwithT 4 месяца назад

Wa alaikum Assalam, how can i help you

@pinoytayo3735 7 месяцев назад

Hello. where is the starter files?

@CodingwithT 7 месяцев назад

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.

@AdefilaAbiodun 6 месяцев назад

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 6 месяцев назад

I solved this by upgrading my flutter

@CodingwithT 6 месяцев назад

Thank you for your support