Flutter eCommerce App with Firebase in 2024 | eCommerce app Flutter

assalam alaikum and welcome back to coding with te today we are going to start a new course of flutter e-commerce application in this course we are going to create and design a modern application with a professional back end this course is going to be very detailed covering each and every step so you will be able to create your own applications once you complete this course this course is designed in a way that it can be beneficial for beginners mid level coders or a senior professional coders so definitely because we are going to cover each and every step there are lot of things that you will learn in this course so first of all let's quickly have a look what we are going to create let's run the application so you can see the splash screen our design will be in both light and dark modes so first of all let's talk about the onboarding screen you can see the animations so we have three screens with a scrolling navigational dots at the bottom and then we have the next button and at the top you can see a skip button skip button is currently taking to the last screen so when user is click on this button he will be redirected to the login in the login we have email and password remember me and forget password button so you can see a forget password screen and on the submit email will be sent to the user to reset his password using Firebase then in the create account user can create his account using email password with all the details required and then he have to agree to privacy policy in terms of use once he click on the continue we will verify his email and once the email is verified a successful screen will be appeared after successful login using email and password user can be able to log to the application and down below you can see we will also cover Google and Facebook authentications to let the user login or create account let's go to the login and this is the home screen the main screen in which first of all you can see at the bottom we have a navigation menu we have four menus and then the home screen is divided into M two major parts the one is in the blue and the other was in the white so first of all we have abar with a a c icons then we have a search then we have scrolling categories we have multiple categories that can be scrolled then we going to design the banners products and again we're going to learn how to create a grid product can be liked added to wish list or remove from the wish list you can see the price tag title brand of the product products are going to be have two types the first one is a simple product let's say we going to open a simple product which don't have any variation s it has a simple one single price $400 discounted price tag rating title subtitle description and at the bottom you can see we have reviews you can add this product in the wish list remove this select any image view an image in the Lo screen and also you can add items to the card add to the bag and you can see in here two items are added you can also add items to the card directly from here by adding a plus sign this directly add to card feature is only for the simple product not for the variation product because as you can see this product has a variation price range can be seen over here let's open this product and in here we cannot directly add from there because we have to select variation first so let's select this variation we have different colors of the product and again we have different sizes So based on each variation we have different images at the top you can see we can again view this image in large mode we can add the product into favorites price variation variation stock status and also definitely variation details can be seen over here then in the description then also we have a reviews of the product so each product have its own reviews then also we can add that simple variation let's say red 34 add it into into the card and you can see total we have two items and let's go to the card at the top you can see we have same product the first one with a green 34 and at the bottom we have red 34 so the same product is added but we have two different variations and also you can add items in the card checkout price is also being updated then let's go to the checkout we have list of products add a promo code over here total shipping fee tax fee and Order details you can change the payment method also you can select any other address you can also add a new address from here so let's go back so once the process is completed us will click on the checkout to complete this payment we will show PayPal and some other payment methods so once the payment API return success state so once the payment is completed this screen will be appeared and user can be able to continueous shopping next we are going to create a search Mark with a bunch of other options we have filter as well after that we can see we have categories each category have list of subcategories and each subcategory has a list of products so we're going to design two type of product designs the one is this style and the one you can see over here also in the subcategories you can view all the subcategory products you can sort them you can add items to the card you can view variations right from here add let's go back okay next we have a store screen inside you can see again we have a reusable widget app bar reusable Search widget then we have a new featured brands in which we can view all the brands we can open some brand list of products of each brand is available then we have tab bar for each category sports Furniture Electronics cloth and at the top you can see we have lots of list so let's come to the sports and in here you can see we are displaying two feature Brands and each brand has top products in it so you can also open the same brand as well down below you can see we have feature products of each category after that we have wish list we can add items in the wish list remove items from the wish list go to the product add product to the card go to the profile and in the profile you can see first of all we can edit the profile change name and other data we have list of addresses same way we can add address to the database then we have a card we have already seen we can add items we can remove items then in the orders you can see the state of the orders shipping processing delivered and we have a bunch of other options so this is what we are going to learn in this course this course is going to be very useful for everyone so stay tuned you can download the code of this course from the description below or you can directly go to the coding with te to download it code okay the core concept that we are going to learn in this playlist We Will design a folder structure which will be expandable you can create any type of large application you can extend this application up to any level using the same folder structure so it will be a professional as as well as expandable then we are going to learn how to create light and dark themes reusable light and dark themes means we are going to create a folder you can copy and paste that folder into any other application which requires light and dark modes so it will definitely work after that we are going to create definitely a modern and a minimal design then we will learn how to use Firebase authentication Firebase fire store Firebase Storage gex storage for the local storage and gex trade management and Shar preferences or gex storage for the local storage now at the end let's talk about the playlist the whole course is divided into five major sections the first section is the app configuration then we are going to talk about the login design this course is designed in a way that it is not directly linked with the e-commerce application as you can see app configuration videos is applicable for any type of floter application login design is applicable again for any application which requires login and login back end is also for any type of application then in the e-commerce design and e-commerce back end is only related to the e-commerce so let's talk about each in detail so first of all let's talk about the app configuration the first is definitely we're going to create a project and we are going to design expandable folder structure including pubs speec images icons then the second video is about the themes in flutter light and dark modes we are going to create a custom themes reusable themes and then we are going to learn how to create constants of colors images text create helper functions and some other utilities that we are going to record in our application so this these three things can be used in any type of application okay now let's talk about the second section which is the login design inside we're going to talk about splash screen onboarding three screens login sign up and forget password with the reset password options okay now let's talk about the main section which is the third section e-commerce app design you can see we are going to cover a lot of videos in it but as we will start creating the videos we will also start creating custom widgets and and we only have to reuse those custom widgets and play with those widgets to create our designs in the next videos okay at the first you can see we're going to create a bottom navigation which include four menus then a curve design which is again going to be a challenge then we going to create a custom app bar which is going to be used in throughout the application then we have to design the categories search bar banners with the sliding dots and definitely a product with a grid after that for the store section or the store Page we're going to create tab first and then with the future brands or a button in which user will be able to view all the brands after that we have category content with the brand section after that we have wish list setting page and profile page so once completed this next part the product details is going to be very useful and definitely it have some tricky parts so I suggest you to watch these videos in detail I divided this product details into two parts the first part is about how we can add images make the images selectable view the image in the large mode and show the selected image after that we have text price show sale price and also show the percentage how much discount we have on that product show the stock status of that product and after that we going to talk about in the part two variations of product details how to select the product variation based on each attribute and also we're going to show the product details of each variation then we have cart in which we're going to add the products addresses checkout and orders page and at the end we're going to design category details view all products page and Brands page then as a back end we going to cover this back end in detail because those who watch the previous login tutorial it was only for the beginners so in this we are going to cover each and every step to make it professional application so first of all we are going to definitely set up the Firebase then we are going to use the local storage to store the onboarding state you can store it in the fire store then we have a registration screen we use use email and password authentication Google signin Facebook signin and also forget password to send emails then in the last section for the e-commerce background we are going to first fetch the categories and Brands then we are going to fetch the products we are going to display all the products to overcome the issue of reads and wrs in the fire store you will learn that how we can avoid maximum reads and wrs and only fetch the product once so definitely there are going to be multiple things that you will be able to learn at the end so don't miss this last section then we're going to learn how to add items to the card from outside the product inside the product details either it's a single product or it's a product variation show the total count of the of all the products add items to the favorites show the addresses check out and definitely orders when the orders are being placed so this is what we are going to create in this playlist so once again if you are interested in the complete code you can get that code from the coding with te or you can get the link from the description below if you have any questions don't forget to ask me down below in the comments stay tuned don't forget to subscribe to get notified about each upcoming video thank you for watching take care Allah

Channel: Coding With T

Views: 49,447

Keywords: flutter ecommerce app, flutter ecommerce, flutter ecommerce app development, flutter ecommerce app ui, flutter ecommerce app with firebase, flutter ecommerce app 2024, flutter ecommerce app ui design, flutter ecommerce app with firebase getx, ecommerce app in flutter 2024, ecommerce app flutter, ecommerce flutter app, ecommerce flutter app ui, flutter ecommerce app with backend, ecommerce flutter ui, ecommerce flutter with firebase, flutter shopping app with firebase, flutter

Id: DR4Vuu_VSZA

Length: 12min 12sec (732 seconds)

Published: Thu Sep 21 2023