Flutter Order Management | Flutter eCommerce App Order Page

Salam alikum welcome back to coding with t today we're going to learn how to handle checkout and also how to fetch all the orders of the e-commerce application first of all let's quickly have a look what we are going to achieve okay our application is running data has been loaded this is everything that we have already learned how to fetch all the details all the record and display them if you're new you can watch the playlist link link is in the description also you can download the complete application from the link below okay if I am heading towards the cart currently the cart is empty so let's first just fill it out let's add two items click on variation product and select one variation let's add two items of this product into the cart it's added head back over here so we have four items in the cart which we learned in the previous tutorial this cart handling and when I'm going to click on this checkout button you can see we have all the products all the three products right over here at the top we have a subtotal price then we have a shipping fee taxt fee you can see a taex has been calculated and also then we have the order total combination of all these values after that by default we have a payment method selected when I'm going to click on this you can select any of the payment method let's go for the Master Card and from here we are able to fetch all the addresses you can toggle any address and that selected address will be displayed over here also when you click on this you can add add new address button and by this way you can add a new address over here as well so we have already learned that how to add addresses fetch all the addresses Etc so let's close it now when I'm going to click on this checkout button after processing you can see the order has been completed payment successful your item will be shipped soon click on continue and you are redirected back to the home screen so when again go to the profile go to my orders and in here you can see we have the latest order at the top they all are currently in processing state but you can definitely or the admin can definitely change the status of each order so this this is what we are going to learn today's tutorial let's get started we are creating flutter e-commerce application and we are about to create the last video of this playlist after this playlist We are going to move towards the payment gateways and also after that we are going to start our admin panel in the previous section one we have already covered the basics of creating flutter project after that we learn how to design our login part then in section three we design the complete ecomerce application and in section four we started the back end with the fire Bas authenication and in the last section the one we are completing this is the last video of this playlist and in this section we have completed all the back end of our e-commerce application you can get the complete playlist link from the description and also you can download the complete code link is in the description so let's get started with today's tutorial open your project and we are inside our flutter project and you can see I have opened the check out do which we have already designed inside this checkout if you follow the previous tutorial in which we created the T card items widget and inside these widgets we created the card controller instance and using this card controller we try to fetch all the cart items inside the list view we have t card item over here and we also have the show add remove buttons option over here if you see the design let's try to add something in the card because when the order completed card will be empty so this is the additional button this is the minus plus sign with the quantity and also the price is in another row which you can see over here so this is the additional row that we are creating after the cart item so when I'm going to head towards the checkout you can see we have the cart item over here but we don't have any minus plus signs with the price value of that product so in the previous tutorial we were displaying all these things with the show add remove button by default value as true but in the checkout we call the same tcart items widget and we just pass the show ad remove Button as false and this is going to again call the same widget using card controller it is going to fetch all the products and will be displayed right over here in the checkout you can see we have one item after displaying the cart items you can see we have a coupon code we are not going to deal with the coupon code because we have not created any designs for this yet but you can simply add the coupon code over here and once the user added the coupon code get that coupon code from this field and based on this coupon code you can deal with the billing amount section so the next thing or the main thing is the billing section if I open this again you can see this is the next thing after the coupon which is the billing section we have a subtotal then we have a shipping fee and taex fee and after that we're going to display the order total price so let's go to the billing amount section and inside currently we we have Dy value so if I open this building amount section if you remember that we have total price calculated inside the card controller so let's create the controller card controller. instance because we already know that we have created the card controller instance now we just have to find the created instance using card controller. instance once created we have total card price over here so we just have to access this subtotal card controller.com total price do value is going to get us the subtotal price of the cart now we have to remove this the first dollar is the dollar sign that we going to print and then the next dollar is going to get print this subtotal value now to calculate the shipping fee the tax fee and also the order total I'm going to use a function okay I have called a class with the function calculate shipping cost this is the function that we we have already created and inside this function I pass the subtotal and the currency which is us so if I'm going to open this so this is the T pricing calculator class and we have a method calculate total price calculate shipping cost calculate Tex calculate tax rate for location get shipping cost so we going to use these functions they all are static this means that we can directly call T pricing calculator do name of these functions and pass all the values which are required so the first thing is to calculate the shipping fee so I have called a function which is calculate shipping cost it reques two things the first one is subtotal and the second one is the location because currently we don't have any locations so to get the shipping cost there's another function get shipping cost you just have to pass the location to this and let's assume that we have all the list of statements so inside this shipping cost we are going to receive receive the location and let's say I'm going to add if the location is equal to us then I'm going to get or calculate the US text rate and return the double value which is 5% in this case so once we have that 5% over here I'm going to ship it as dot two swing as fixed value with the two dot decimal values next to the actual price this means that 5. will be printed over here in the design so same way I'm going to copy this and call the function for the text fee which is calculate text if you open this it is again going to get the subtotal and location for which we're going to calculate the text so call the get text trate for location this is going to work as same with the shipping cost receive the location and calculate the text for that specific location in this case I'm just returning 0.10% means the 10% of total amount so when we receive the tax rate over here I'm going to multiply that with the subtotal we will have tax amount again I'm going to use two decimals and return that XX amount from here with this way we will be able to print our X Fe over here and now to calculate the order total paste the function calculate total price this is going to get the subtotal get the location to calculate the total price we need both functions to be triggered so first we are going to call the get text rate for location then we going to get the shipping cost so once we have the tax we'll multiply with the sub total to get the tax amount and the shipping cost will be calculated based on the location so once we have these two things I have a subtotal plus tax amount plus shipping cost we have a total price and definitely it is going to return a double value and based on that we are going to display the order total so that's it for the billing section let me run this application after that we have the billing payment section so if I'm going to open this payment section inside you can see we have a static title payment method then we have a button title change whenever this button will be triggered we want to open a popup so that any other payment method can be selected and then simply we have a design that is going to display the current selected payment method image will be displayed over here and text will be displayed over here now we going to create a function for this that is going to display a popup inside the checkout controller for this Library I've created a checker controller inside the Shop product and over here we have a checker controller an empty class extending with the kex now to get the selected payment method I have created RX type of payment method model which is going to be a selected payment by default it is empty so if I am going to open this this is a simple model with a name and image and it also has an empty method over here which I've created inside the model inside the payment method model so once created we just have to assign with the empty model over here here whenever there is change inside the selected payment method we will be able to redraw the design using this OBS and also if you want to assign any default payment method inside the on innit method so just overwrite this method and using the selected payment method. value you can assign the payment method model assign a name which is Paypal image image of the PayPal after this we are going to create a function that is going to display a bottom sheet to select other payment methods select payment method it will receive context now let's create the bottom sheet show model bottom sheet and we're going to pass the context next we have to create a builder inside the Builder we're going to return scrollable single child scroll view with the container and then in the child we're going to create a column this column is going to contain all the list of children's or all the pivot methods make this column to start from the left side and I'm going to create the t-section heading by creating a title show action button as false which will be select payment method add some space and then we going to use the payment tile which receives the payment method model and inside the payment method model we're going to pass name and image first name will be PayPal and image will be inside the T images we have all the other images so let's remove this constant so inside this payment tile if you open this I have created a simple payment tile which is going to receive the payment method that we are going to assign over here that we're going to pass it and we'll receive inside this payment tile once we receive that payment tile over here using the checkout controller the one we are just creating again inside the own tap method of the list tile make the entx to zero to remove all the pedding and whenever this list tile will be tapped we're going to call this controller do selected payment method because now we have created this so selected method do value is equal to current payment method that has been passed to this stle and inside this rounded container we have an image then we have a title over here with the trailing icon so inside whenever the PayPal will be selected or PayPal will be tapped this on Tab method will be triggered and the current payment method which is PayPal will be assigned to this selected payment method and also using this get. back you will be redirected back to the previous screen next add some space between items and I'm going to duplicate it for all the rest of the values so I've created PayPal Google pay Apple Visa Mastercard you can also by this way create cash on delivery method as well so in the next videos after this playlist which is the payment videos whenever let's say the user is going to tap on this PayPal we will get the details of this PayPal and whenever user is going to click on the checkout button instead of Simply processing the order we will open the PayPal first and when we receive the success scenario or the success method that the payment has been completed only after that we are going to process that order and that will be applicable to all of these values now let's close this open again the billing payment section and inside the payment method whenever the change button will be triggered so this is the change method whenever this is going to be tapped we want to open the bottom sheet that we just created and we first have an image then we have a title which is the list tile so whenever I'm going to click on any of the tile so that tile will be selected and displayed right over here in the screen so let me create a function over here using the controller I'm going to call the select payment method which is going to open the show model bottom sheet and then we're going to remove the static data with the controller. selected payment method with the image whatever payment method is selected that image will be displayed over here remove this constant and also we're going to remove this static name of the selected payment method because this selected method is the OBS value so whenever the new method will be selected from this popup we want to update the image and name over here so for that we have to wrap this row with the OBX widget this OBX widget is going to redraw the complete row so we done with the billing payment method so let's open the application okay our application is running let's go to the checkout and you can see we have a lot of elements inside the card now its price is1 1964 when I'm going to click on this check button you can see all the elements listed over here without the price and also you can see the shipping price or the sub total let me open it a bit so sub tootal is this shipping fee is 5% then the tax fee has been added 196.50 and the order total has been updated now when we head towards the bottom you can see we have an error which is check out controller not found you need to call get output this means inside this check out controller because we don't do not have any instance already created of this checkle controller so that's why we are going to create the new instance using that dooot method by this way it will create a new instance first and later on that same instance will be used let's rerun it again it's running let's go to part click on checkout scroll bottom and you can see the PayPal has been selected by default because we declared that in the on init method so when the new instance created it sign the on init method as the PayPal image and value so let's click on this change button and we have a scrollable list of payment methods let's go for the PTM and you can see PTM is selected so now we have static values of this shipping address and we also want to open the shipping address popup over here to display all the addresses from the fire store so for that let's close this go to check out and open the billing address section inside this first of all to replace all these values we have to call our address controller also if we going to use the address controller do instance which is this one which is going to find the already created instance of the address controller this might not be successful because if we head towards the bindings in the general bindings we have not declared address controller or other controllers so we can declare them right over here if you do not want to create another instance again so use address controller and same way you can create checkout controller so once declared now we can only use the dot instance to create all the new instances so if I'm going to open the address controller down below you can see we have add new address method select address method and get all user addresses so the popup in which we're going to receive or display a new address popup so for that inside this address controller I'm going to create a new function over here I have called the select new address pop pop up inside I created the show model bottom sheet again with the context and Builder methods so we have two methods over here so we have to pass the context and then inside the Builder I'm going to return a simple container with a pedding in it and after that we have a column with a section title and also make sure action button to false because by default it is true so this way we have the heading as select address and after that using a future Builder I'm going to call the method that we have already declared created at the top we're going to use the address depository to fetch all the addresses from this function once we have all the addresses inside the list address from this function we will have the snapshot data and using the cloud functions. check multirecord which is going to check that if curent connection state is waiting it will display a loader then it is going to check the empty data also the error and if nothing found everything is fine it going to return null and when we receive null we will be proceeding towards the next viit and we'll return the list view. Builder this Builder is going to display all the single addresses data will be received from the snapshot. dat. length and snapshot. dat current index of this list view we will have the current address so this is what we have already completed and learned inside the address section and down below we have another button which is going to redirect simply to add new address screen so once we have everything created inside this model bottom sheet we're going to head towards the billing address section and whenever the change method will be triggered we are going to call address controller do select new address popup and we will pass the current context so that we can display that popup inside this screen which is the billing address section now next if you see that we have the title then we have the phone number and the complete address over here so there are two scenarios either we have the selected address address or we do not have the selected address so I'm going to wrap this text with the column and also all these values selected from here paste it inside this column now to print the column either we have to display the data which we going to display in this column or we do not have any selected address so use address controller do call the selected address. value and if the ID of that selected address is not empty this means that we have something inside the structure address then we're going to return the column and in the else case we're going to Simply return a text message to select address and that's it now let's save the code again but we have to rerun it because we declared instance of this controller inside the general bindings okay our application is running let's click on this card go to check out and down below over here we do not have anything so we have a select address click on change button and you can see after a loader we have two addresses if we head back over here go to profile inside my addresses you can see we have two addresses that we created in the previous tutorial so by this way let's go to again check out and down below we can click on this change you can select another method you can see a nice loader and after that we have a method over here to display all the text and also because we have we have moved all this text to this column so now to shift the text to the left side use cross AIS alignment do start and we have the text on the left side and also when I'm going to click on this change button add new address we'll open the new address screen clicking on the back screen will redirect to this screen and let's close it once we selected the payment we have everything total calculated our shipping address is also selected now when I'm going to click on this check out button currently we have the error because we did not performed the operation yet so let's minimize it let's go to checkout and this is the function that we want to display so inside this checkout button in the previous tutor we move towards simply the next screen which is Success screen we are not going to move towards there first let's remove this with the function which is going to calculate the complete total and also to get the subtotal at the top we are going to create C controller instance and using the card controller instance we're going to get the total card price name it subtotal and we are going to pass that subtotal to this function so this is going to display the subtotal on the checkout button so whenever this checkout going to be placed we don't want to display the success screen so let's remove this get do2 and also this function because first we going to check that if we have something in the subtotal if the subtotal is greater than zero this means that we have something in the card that can be sold out if this is the case we're going to call a function order controller do process order and we have to pass the total amount again so because we need total amount two times so instead of copy pasting this again and again let's go to the top and create a variable first is going to create a new instance of the order controller and the second one is the total amount using the same function to calculate the price and we're going to Simply call total amount in the checkout button and using the order controller we're going to create a function process order and we pass the total amount so that order can be processed a function will be called that is going to execute T loader. warning snackbar empty card add items in the card in order to proceed now whenever this button will be tapped inside the order controller we are going to manage the orders or the process the orders so we are almost done with the checkout screen so we are heading towards the order controller head TOS feature shop screens open the order to do and inside you can see we have a widget which is handing all the list of orders so open this and currently we're displaying a list view to display all the orders so we're going to make a dynamic using a future Builder so first let's go to the controllers and the product I have created order controller which is currently an empty class again extending with a gex controller so it has a variables and also it has its own order repository so first of all we are going to fetch users order history or all the orders of the user so we going to create a function same way we created all the other functions in the previous tutorials which is going to return us a list of order models which will be a future type and Asing type because we using the cloud queries so we have to use the await sign using this repository do fetch user method we going to fetch all the user orders and if we receive any error we going to catch and display that error message over here now inside this order repository using the same Firebase fir store instance we're going to call our database which is the Firebase fir store database and inside we going to call the fetch user orders method first we're going to get the user ID from the authentication repository this is the class using Au user method which is Firebase au. instance do current user is going to return us the current login user instance do uid because based on this user uid we're going to get or set all the orders because we want to fetch orders of this current user so you can see I'm going to call the database which is Firebase fir store. instance then collection of users the list of users then we have a document of user ID because we have all the record of that user inside the user ID then again I have another collection or the subcollection of orders doget is going to display all the orders of this specific user this is actually same as we created all the addresses so let me open the Firebase okay open your Firebase fire store inside the users collection you can see I have opened a collection which has a subcollection of orders when I'm going to open this it has a single document or you can say a single order with an address a complete address copy then we have a delivery date ID of that order then we have all the items inside the array order date payment method is Paypal status order status. pending then we have total amount and user ID this is not actually required but you can also add it in order to fetch all the orders separately so if I open the items you can see we have two items over here so if you open them inside because items is an array of items so we have zero and one so this this is what we are going to do inside the users so same inside the cury if we all the fir database collection of users pass the document ID then again collection of orders and based on this orders we're going to get all the orders of this current user and we're going to map those orders on this order model using from snapshot. tool list going to return all the orders if we talk about the order model first of all we have ID user ID status total amount order date payment method or the selected address then we have a delivery date and then over here we have all the items that we added in the cart which is list of cart item models if you remember that we have added all those items in the cart then we have its Constructor after that we have a formated order date just a helper function to format the order date then we have formatted delivery date and also the order status text if the status that we received over here is delivered we're going to display a text like this L if status is shipped we going to displayed like shipment on the way else we going to display the processing then we have the two Jon this is going to help us when we going to save the order into the database Json will be called it is going to convert the complete model data and map it into a Json format now to map all the items one by one we have to call the items do map property we're going to extract the single item at a time and call the do2 Json function because if we open this model because if you see we have a c item model over here so if we open the card item model and it also has the 2 Json method which going to convert each card item into a Json format as we calling over here if you H this item it is a card item model to Json is going to convert that and that Json list will be assigned to this list of items and again it will be converted to Json again and that list will be stored into fire store and if we going to receive the data from the fire store you know that we receive the Json inside the document snapshot. dat we are going to receive the Json and we're going to map all the Json in this manner you can get the status from order status. values. first whereare get the data of the status this is going to return processing delivered or in progress status of the order then we have the amount order dat payment method then address will be used as address model from map because address has the complete details and from map is going to again get the Json map all the models into the address model and that model will be assigned back over here then again the delivery date going to check that if we have a delivery date not now using Tim stamp. date we're going to assign the delivery date over here then comes the list of items to get the actual list of items that we have over here inside the data of items if you remember we have an array of items inside the database to receive that list is an array so that list will be received as list of dynamic once we have that list over here we're going to run that map property because we want to again convert this Chason each item or you can say each index which is 012 will be passed over here inside the item data and we going to convert that Json using start item model do from Jon method which is going to receive this Jon and based on these IDs it is going to convert that data and pass this cart item model back to this map property you can see we have to pass the item data as map of string dynamic because it is adjacent so we have to pass it like this once all the items has been looped through using tool list we are going to assign all the items to the list of card item models by this way we're going to extract all the orders and now inside this order repository we will be able to return all the list of orders back to the function where we called so so let's head back to the function which is calling the fetch user orders we're going to get the orders and return back those orders now in order to process the order we're going to create another function which is going to save the order details so I have created a function which is process order this is the function actually we going to call from the checkout method order controller do process order and we're going to pass the complete amve to this function so first of all we're going to display a loader start loading using T full screen loader. open loading dialog this is a custom class that we created with the custom values so once it start loading the first thing because we have to store this order inside the current logged in user ID so we first have to get the user ID from the authentication repository all the authentication repository using Au user we going to get the current user and U ID will be returned over here if our user ID is empty this means that we do not have any user logged in and simply we going to return and we are not going to process anything because we have to store the orders inside the current login user collection then we have to map all the details into the order model so first one is the ID currently I'm using unique key to generate unique IDs for each order you can use your own methods to generate your order IDs then we have the user ID over here when the order status by default will be pending you can change order status because we using enums over here so we have have pending processing Shi delivered and cancelled so the first one will be pending status then we're going to pass the total amount order date will be order de. now payment method we're going to call this payment method using checkout controller the instance that we created at the top do selected payment method. value. name is going to get us the payment method name then same way we're going to call the address controller to get the selected address and we have a delivery date so you can calculate this delivery date fast null value or pass the current date as we I'm going to pass date time. now so it's up to you you can change this as well and then comes the items so all the cart controller at the top so we know that we have all the items inside the cart items. to list is going to convert the RX list of cart items into a simple list of cart items once everything is mapped to the order model we have the order over here we're going to call the order repository. saave order we have order then we have a user ID this order is going to be saved where it is going to be saved inside the users collection again inside the users document ID again call the collection of orders and inside I'm going to add the order. tojson which is going to convert order to a Json format and we going to save this order inside our database once the order has been processed then we're going to call the card controller do clear the card this is function we going to clear all the values inside the card because order has been completed now and then when everything is completed get. off method is going to redirect to the success screen and just change it to the navigation menu we have a success screen which can receive the image title and subtitle then also a button which has an on press method so it's on press whenever the button will be pressed we're going to redirect to the navigation menu which is by default going to open us the home screen you can also redirect to the order screen as well now we are triggering this process order but we are not displaying the order details or the complete user orders so to display all the orders go to the order or and inside the order list items I'm going to make it Dynamic so wrap it with the future Builder so I have wrapped the l view inside the future Builder and call our controller using order controller to fetch user records which is a cloud cery future Builder is going to process this order and in the snapshot we will have some data this is a simple empty widget that I've created using animation loader widget it can receive text animation you can pass the show action button action text and also on action Prest method once you pass all this I have created an empty widget and using again Cloud helper function to check either the state is waiting we have some data or we do not have some data either we have an error if we receive the null we going to execute the main widget because inside the future method Builder we have to return some wigit so if the response is not null if we have waiting state or some other State we are going to return this widget else if everything is now fine we going to get the data from the snapshot. data we will have all the list of orders and using the list do Builder just change the item count to orders. length that we received over here and from the orders at current index of this list view we will have an order over here so just change the static values with the order. status order do formated date also the order do order ID if you want to display it and at the bottom we have formated delivery date of that order so we are pretty much done let's rerun this application okay our application is running let's click on checkout now we have list of elements in the cart click on checkout so first we have all the items over here then we calculated the order total with the shipping fee payment method is selected let's select the new address change the payment method to Master Card click on checkout and you can see the processing and after processing we have successful the payment success this means that order payment has been completed let's open the Firebase console go to the users inside go to the current user and previously you can see this user added some addresses as a subcollection which will have two addresses and this time when I'm going to open the subcollection of orders it has a new order so we have all the address the selected address has been copied over here delivery date is the current date and then we have the order random order ID we have order items the first one then we have second third fourth we have in total five orders then again the order date is this payment method is Mastercard status is spending total amount is this one then this is the user that who added this order and also if we click on continue go to profile and go to orders you can see after processing we have all the orders but I think we are missing some space around these Corners so I just added again some space around the T rounded container which was missing so this is the order currently in the processing state by this way you can add all the orders so that's it for today's tutorial and that's it for the playlist that we created I hope you learn something new and if you learn something new please like the video and from now onwards we're going to enhance or keep adding new features to this one and also I'm going to launch the admin panel tutorials with a complete playlist after creating the payment methods we're going to learn PayPal stripe Ina purchase and bunch of other payment options if you want some other payment options that you have in your own country you can also suggest me or reach me at sport coding with.com I'm also planning to launch the subscriptions on the YouTube so make sure to subscribe them as well so that's it for today's tutorial so thank you for watching take care Allah

Channel: Coding With T

Views: 12,664

Keywords: flutter order app, flutter order list, flutter order page, flutter order tracking screen, flutter ecommerce app, flutter ecommerce app full, flutter ecommerce app with firebase, flutter ecommerce app 2024, flutter course 2024, flutter tutorial for beginners 2024, flutter full course, flutter full course 2024, flutter futurebuilder, futurebuilder in flutter, flutter ecommerce, ecommerce app in flutter, ecommerce app in flutter 2024, coding with t, coding with t firebase

Id: M9vn-i_9eJs

Length: 36min 48sec (2208 seconds)

Published: Mon Jan 15 2024