Flutter Checkout Page | Flutter eCommerce App UI

welcome back to coding with t today we're going to learn how to design checkout screen in flutter checkout screen is also a crucial part of any e-commerce application so we have to make sure that along with the design or user usability should be perfect so first of all let's quickly have a look what we are going to create our application is running currently we are inside our home screen and our user is already logged in down below let me add few items in the cart also add one variation two items cart is added let's head back and at the top we can click on this button to see the card so we have currently two items in the card we can add more items we can also remove these items or we can add it you can see check out total screen is also updating when we're going to click on this checkout at the top we have two products and the only change between the previous card and the list of product is that we cannot add or update items over here then at the bottom we have a promo code screen which we can do the apply as well then at the bottom we also have sub tootal shipping fee tax fee and order total we can change the payment method from the list of payment methods let's say we going to select the PTM maybe or the Visa so any selected payment is also being updated over here then in the shipping address if you follow the previous addresses screen tutorial you already know that we learn how to create all these type of addresses so once we added those addresses we can also add or directly select those addresses is right over here and at the bottom we can also click on this add new address directly to add address these things come in the user usability which is the ux so at the top let's say we have selected some payment and we going to click on this check out you will do the processing and our payment is now successful this means that our order is now currently placed so this is what we're going to create in today's tutorial so let's get started fter e-commerce application and we have already completed section one for the basics section two related to all the login screens and section three is the last section where we are going to design everything so design is about to be over from now onwards in the next section we will start doing the back end so let's get started with today's check out [Music] tutorial inside Android Studio e-commerce project we are creating so this is the previous screen card or dot if you already followed the previous tutorial you know that we created a simple scold at the with the Apper then with the default space we have items in the cart and at the bottom using bottom navigation bar we created fixed button which is check out button so because we want to reuse these list of cart items on the next screen check out screen so first we have to in the card go to widgets we have an empty stateless widget which is T card items so let's go to T card right click on this list view go to refactor extract flutter widget name it tcard items because we already have a class so we are simply going to cut these list of items from here go to cart items inside this widget instead of this column let's paste our code add required Imports once we have cart items over here we can also import the cart items using simply T cart items add a constant at the top and we are done with the design now let's add to cart items in here we can add one extra check which you can see we have cart item currently displaying with the one single row T card item at the top which is the first row element then we have a space and after small space we have two buttons using this row we have a sized box with a fixed space then we have two buttons and at the end we have the price so in the check out we don't want to display or let the user to change these prices it's all up to you you can do the modifications because it's very simple so at the top let me create a final Boolean type of variable final Boolean show add remove buttons we also have to add this variable in the Constructor remove this required and by default we're going to make this through by default these buttons will remain visible so in here because we also want this extra space so we will write if statement if this show add remove button is true we want to display the size box for that we have to remove this constant and add constant elsewhere also let me copy this if statement and paste it right below this row hit enter add a constant so now we going to check that if show add remove buttons variable is true we will display the space and after that we will display this complete R this if is only going to work on the specific widget right next to this if so once done in here we are calling cart item but instead we have to call the T cart items import this package recently we added T cart item which is a single item but we want to display the T list of card items which is over here write in the widgets so when you go over this you can see we have show add remove button by default is true so it is displaying now head towards our tutorial in the check out open the check out screen so same like the card we are going to use the custom t bar so copy this also remove the constant from the top Control Alt l so this is the current or the custom AB bar we are using using prefer size widget so if you don't know to create custom abas you can watch the previous videos after this title we have to replace this card with Order review next as body of the scaold we are going to use the single childart scroll view to keep our screen scrollable as CH of this scrollable element we are going to use the pedding to add space around all the screen sides which will be T sizes do default space default space is 24 so T sizes class is a constant class created in util in the constants right over here like sizes colors enums next to this as a child of this pedding we have to add a column then and the children of this columns the first thing simply we're going to use T cart items again with a show add remove buttons to false and then at the bottom we have a size box to add space between sections which is 32 space let's add a constant at the top let me run this application at the top we have created the card with the list of items now inside this card when we going to click on this button which is the elevated button right over here we have to redirect screen to check out screen so I am going to use get with the gex library you can use any other method suitable if you're not using the gex call the checkout screen add a constant save the code click on this check out and you can see we have list of items created currently we're displaying all the cart items we have inside this cart so at the top we have 10 items so let me reduce it to two and you can see we have two items currently in the cart after items in the card you want to create a coupon field to let the user enter a coupon can here the first thing I added a small same space t between sections after this text field so first we have to create the rounded container to create a custom container around this text field because the text field is not actual text field covering complete width so we have to make sure that text field should not cover the complete width and also we want to add a button next to it so we have a custom rounded container which has a default container width and height properties pedding margin then a box decoration with a color border radius and also show border property and we can also pass the Border color as well so by default we have show border false radius is radius large which is 16.0 background color is white and Border color is border primary so first we want to make show border variable to true then at the top of this build method let's create a variable which is going to check that if current application is having dark mode or the light mode so we are going to use the is dark mode feature of helper functions which is going to Simply check theme do of context and brightness is equal to dark it will return true over here to show background color of this rounded container we will simply use background color if it is dark then we will display the color background as dark and otherwise we will display the white color add a comma at the end and also remove this constant next we want to add a pedding so I'm going to use a pedding with the only all the spacings will be small spacing for the top bottom and right but for the left we going to use the medium space so medium is 16 small is 8 so I'll show you why we are going to use Medium as a left now the container is created let me save it and you can see currently the borders with the background and definitely ping is not visible so as a child of this container we are going to create a row because we have to create two elements the first one is text field second one is a button so let's use text form field over here and we have to use the decoration property input decoration add a label not label text this time we are going to use hint text which which is have a promo code enter here so hint text will replace whenever we start writing but label text is the hard text which will shift or animate towards the left top side but we want we don't want that so let's save it we cannot see anything let's go to run and in here we definitely have a error an input decorator which is typically creat text field cannot have an unbounded width this means that when we are going to use the text field inside a row we cannot use it so to make it work we have to wrap this text field with a widget which is flexible not a flex a flexible widget let's save it and you can see we have a widget with the bord and we highlight this it is going to use the theme style we created in section one in the themes Tex field theme so this is the style it's currently taking but we don't want this style to be applied in this specific case so currently you can only see the Border this means that we just have to remove the borders so let's first go with the focus border using input border. none we can remove the Border but we also have to remove other borders the first one is the Border itself then we have Focus border enable error and disabled Border in case if anyone might appear in the design so that's why it's good to keep everything impact let's save it and now you cannot see any border it's good to keep commands we want to add button over here so control orl next inside this same container we want a button so let's use elevated button on press is currently not doing anything create a text as a child and name it apply let's save this and you can see a small apply button just because we have flexible over here that's why we are able to add anything else right inside this row otherwise the text field will take all the space increase the width of this button we have to wrap it with the size box as a width I am going to use 0 control L let's save this and now a button is looking pretty nice Control Alt L if you want to design this specific button as in my case I want to change the background and the foreground colors so we have to use the style property because it is elevated button so use elevated button. style from to keep all the Styles but just we going to design few specific things with the foreground color if the dark mode is selected or if the dark mode is on we want to display the white color with opacity 0.5 else we want to display the dark color with the opacity 0.5 same for the background color we want to use gray with opacity 0.5 and for the borders we're going to use the Border Side color gray with opacity 0.1 let's save it and you can see currently it seems as disabled but later on when we start typing anything in this or button style should be changed to the primary style so you'll see that later on when the back end will be created so after this promo code we first have to extract EXT ract this widget so right click on this container refactor extract fter widget T coupon code refactor extract it from here go to Common go to widgets in here search for products because coupon is related to the products we 90 times apply coupons on the products products can be digital variable single type of product so inside the card because it's related to card create a new file coupon widget. hit enter import material Library paste the code add required Imports once done head back to checkup import e coupon remove this dark because we can simply copy this paste it right over here we don't need to pass anything in the constructors import the helper functions and we are done now after this coupon for the bilding section we first have to use the rounded container and make the show border to True use a background color dark mode is at the top given if it's a dark mode use the black color otherwise use the white color and the background next as a child we have to use the column to lay out all the elements vertically okay inside this column we have to create four main things the first one is related to pricing then we have a divider then we have payment methods and the address at the end so let's first start with a pricing inside checkouts I have created two empty wigets the first one is billing address section we will deal addresses over here and then a billing payment section we will add payment inside this widget so next to this pricing let's call T billing payment section also add some space same let me add also divider over here then we will start designing so a simple divider with nothing else then again a space with space between items so now inside this empty billing section we have to create the billing details as a children's of this column first show the subtotal so to display text and its value we have to use the row property as the children of the Row first create a text with a written name subtotal and as a style we going to use the body medium and remove the constant after this text we have to use another text so control D to duplicate this time change it add a dollar sign write some price over here control save and you can see we have a subtotal but we also forget to add spacing around this rounded container so let's add pedding D sizes. medium let's save it and you can see the space is now appeared also we have a divider so first we have the subtotal written because we want to push this text to the right side we have two ways the first one is to use the main AIS alignment and we're going to use the space between let's save this and you can see we have the equal space between these two elements but we can also use expanded widget to wrap this text inside it so let's cut this and save it still you can see this text is taking the maximum space and pushing this second text to the right side so it's good to use less fidgets so that's why we will go with the first option add some space use the T sizes again space between item is 16 so divide by 2 is two again if you want to use directly eight you can use the small size but to keep same things in design because space between item is related to the space between items so that's why we going to divide it with the two next same thing copy this one shipping fee is $6 want to reduce this style or reduce the font size so I'm going to use the label large instead of body medium let's save this and you can see the shipping fee total is a bit smaller control D to duplicate also I want to add space so I added text fee same with the same text over here and also order total with the same text but we will change this label to title medium for the order total let's save it and you can see the order total price is bit old now to calculate these two things shipping fee and tax fee if you go to the utility in the helpers go to pricing calculator and over here you can see I have list of already created functions which are doing all the work for you so calculate total price will take the product price and the location and location will be passed to get tax rate for that location over here you can Implement for different cities different tax ratio for maybe different regions you want to collect different tax ratio so that's for the location wise function to calculate the text return some percentage of the text so get the text multiply with the product price so we will have the tax amount we will simply again get shipping cost based on location if you don't have anything you can simply pass get shipping cost directly over here so once we have shipping cost we have tax amount we can add that in the product price and return the product price total back to where it's been called we can also directly get the calculate taex and also calculate shipping fee so you can apply these functions over here definitely we're going to use those functions when we will start our back end okay once added all the payments divider is also added let's again copy the same space so next we want to call this not the helper function but the billing address section over here this widget which is already created next to this billing payment in the widgets of checkout so let's head over here next to this payment method after adding a space use the billing address add account constant now inside this again we have column because we want to layout two things as a children first thing is the heading so we going to use T section heading it has few properties let's say over here in the row in the text we have a text with the headline small we can also add overflow as ellipses Max lines one we cannot change these values but we can change the text color and also we can add the text button with the on press and button title so same I added a title over here with the payment method button title is change show action button is true by default show action button is true that's mean that we don't have to add it let's save the code and you can see payment method heading is being displayed when we click on this change method currently it's disable so add its on press remove the constant let's save it and now it's been enabled and we going to click on this change we will display a popup so first let's add space right below it next we have to display the selected payment for that we again going to use the row with the children for the payment image this time we're not going to use the rounded image we'll use the rounded container width and height will be 60 and 35 as a background color we will use helper function to check the dark mode so it's good practice to keep things at the top so it's a dark we going to use the light color else we will use the white color so these two are little bit different so light is using F6 and white is directly using all the fs then as a ping we will use the small ping which is 8 8.0 so as a child of this container we're going to use the image so as an image we're going to use the asset image for now because we have all the images in the local assets which is T images. PayPal which is already added in the T images first of all let's head to Assets in the icons we have all the payment method images created and you also have to declare those in the pspec AML file right over here in the payment methods with the forward slash to keep all the images of that specific folder and after that let's add to utils in the constants we have image strings where we have to Define all the images once done make sure when you add everything and your application is running you have to restart because images will not going to load okay as a fit property we'll use the box contain next let's add space and after the space we are going to use the text I've added a PayPal image and text is again written over here the PayPal and theme is body large let's save this and you can see the selected payment method is being displayed okay in here before we going to add the address I have just seen that I have added the address details in this payment method which is in this widget sorry which is the billing address basically the code we are going to use over here is related to the billing payment section in which we added all the payment amount details so that's why we again have to create a new widget billing amount section so this payment section class will simply have to cut it over here and paste it inside the amount section because these all things are related to amount and in the address section we have to same do cut it from here and this is all related to the payment and also we have to change the names this is T billing payment section this is T building amount section just copy and paste and that's it add towards here change this to this is D to amount and currently we don't have address section so this is is related to payments for the address we will create the address section so go to billing address section import material. create straight widget name it t billing address section we going to remove this placeholder with the column and as a children we have to follow the same procedure we did for the payment section to add the title heading so let's copy this paste it over here change the name remove this constant import the section heading let's save the code shipping address is now visible so first we are going to use the title of the address using the text we are going to use the name of that address which is coding with using a body large theme let's save this and also for the column to push elements on the left side we have to use cross access alignment do start so after the first text we are going to use the row because we also want to display the icon over here so icon is icons. phone color is gray and size is 16 import T sizes next as a text we're going to display the phone number over here with the body medium style same after this address we have to add some space first add comma create a space control D to duplicate remove the space from the bottom add text which is the address and change the icon let's save it and now you can see we have phone number and address but at the top we have to add space same space between items divide by two save it so our product or almost the card is ready before going to add popups in the checkout let's go to card screen and in here you can see we have using bottom navigation bar we use the pedding to add spacing around the button and we use the elevated button to create the checkout so using the same procedure let's copy this go to checkout after this body we going to create checkout button it will use again get do2 to redirect to the success screen so for the success screen we have already learned and design in the section two go to common in the widgets we have success screen already created which we can use and pass image title subtitle and on press you can also use the ly images over here for the animations so we will use this same screen as an elevat button we have to call the success screen using get. two feature we'll be reded to this success screen with the image is successful payment icon and this is the payment success title subtitle and as an on press we will redirect to the previous screen get offall to the navigation menu which is basically use our navigation menu which we created in our first tutorial of this section section three and we'll redirect by default to this home screen so let's save this and at the bottom you can see we can scroll our screen but our button is fixed so let's click on this continue and you can see our payment success screen is now visible we can click on this continue button and we'll redirect that to our home screen you can also redri back to order screen here okay so that's it for today's tutorial I hope you learn something new if you learn something new please like the video and if you are new to this channel don't forget to subscribe and hit the Bell icon to get notified for all the upcoming changes you can download the complete code link is in the description and also you can watch the previous videos or the complete playlist link is in the description or from the right top corner so once again thank you for watching take care Allah h

Channel: Coding With T

Views: 4,138

Keywords: flutter checkout page, checkout screen flutter, checkout page flutter, checkout page in flutter, shopping checkout, checkout screen in flutter, flutter checkout screen, flutter ecommerce app UI design, ecommerce app in flutter, ecommerce app in flutter with firebase, ecommerce app flutter getx firebase, flutter ecommerce app with firebase 2023, coding with t, checkout screen, shopping app in flutter firebase, flutter shopping app, flutter shopping app ui, order confirmation

Id: CrHI4kBq7iY

Length: 24min 27sec (1467 seconds)

Published: Tue Nov 07 2023