Flutter Addresses Screen | Flutter eCommerce App UI

am alikum and welcome back to coding with t today we are going to learn how to design addresses screen in the flutter addresses are the very crucial part of any e-commerce application because we are going to deliver the products with a specific address provided by the user so user can have multiple locations if some user is going to send some gift to some other person so also we have to let the user add address and also user can change their address it's helpful if we are going to deliver the product as well or in case of digital products so let's quickly have a look what we're going to create we are inside our application these all screens are created Home Store wish list and also the profile so in the profile when user is going to click on this addresses he will be able to select from the list of addresses he already added or let's say user can also by clicking on plus icon add new address once added that specific address will be displayed over here and also this is the dark mode of our application so let's get started waiting for e-commerce application and we already completed our section one for the basic project setup and for the section two we already learned how to design complete login with forget password FL screen onboarding screen and currently we are creating flutter e-commerce application design and in the next section onwards we are going to start our back end so let's get started with addresses tutorial our studio and we are inside or e-commerce project in the previous tutorial we'll learn how to design the product reviews I'll drop the link of the complete playlist in the description below and also today we're going to create the address screen so let's go to lip folder in the features we're going to design the personalization feature which is addresses using MVC pattern go to screens and in the addresses this is the new folder and inside we have an empty addresses class and Another Empty add new address class this will contain a form and we will let the user to create his form then we are going to add all the wigets of specific addresses in here so let's get started with addresses it's it's a simple straight L widget okay so first of all inside the scaffold we are going to use the floating action button this Floating Action button will lead the user to open the form screen to create a new form so create a function use get. two approach if you're not following the get you can use the Navigator do push of context to move to the new screen so using get. to create another function and call add new address screen we have to remove the constant simply add constant over here as a child icon we are going to use icons X Li do add and color will be white using the T Colors Library so white is defined down below at the end over here add a constant and the last thing we need to also create a background color and make the background color as primary after this floating button let's create an appar so we are going to use TF bar over here we will display the back arrow so show back arrow will be true let me show you the TF bar so this is the custom app bar we created I will also drop the link of this tutorial as well if you want to know more in detail so so after this show back arrow we are going to use the title widget to create text name IT addresses and as a theme we're going to use the headline medium Al our application is running let's go to login screen click on sign in and in here we learn how to design everything using a dummy data currently but we will add the real data with the back end so let's click on profile in here whenever user is going to click on this address icon we have to call this address screen so let's go to settings setting do dot so at the top we have my addresses in this we have on Tab feature remove the constant from the top and using the on Tab we going to use get do2 to redirect user to users address screen let's save the code click on my addresses and we are redirected to the addresses screen now in here AB bar is also visible after this let's create the body body will be scrollable as a child we need to add pedding Ed inserts. PA and we're going to use D sizes. default space so default space is 24.0 in the t- sizes class at a constant then as a child of this ping we want to create a column to place elements in vertical Direction control or l in here we are going to currently use the static way so first of all let's design one single box three rounded container use this width to make it Infinity so that it should cover the complete width of the device then we have a property show border make it true and also we need to display the background color because we have two type of boxes later on when we are going to complete this card so first of all let me extract this from here head towards addresses folder and in the widgets I have created an empty class which is again a straight lless widget single address the single address inside remove this column and paste our rounded container import this library and in here we are going to know first create a Boolean over here let's say we we will dynamically fetch the address or address model when we going to f addresses from the Firebase individually for each container but let's say just for the learning purpose we're going to use the Boolean and name it selected address whenever we are going to pass selected address through from here when we going to call this it should uh display the selected address added in the constructors and over here we going to check selected address is equal to if sorry not equal to if selected address is true this is selected address then we want to use the primary color with opacity 0.5 and if it's not selected then we don't want to add any color to this container then for the Border color we will use the same if selected address is true we don't want to display any color so it will be transparent otherwise we will check if it's a dark mode because we also have to make it professional design for both light and dark modes so if it's selected doesn't matter if light and dark we don't want to display anything so it will be transparent otherwise if it's a dark mode so control or l in the dark mode we want to display darker gray border and if it's not the dark mode it's light mode we want to display the gray color after this border we also want to add a margin margin will be the margin from one container to another container so we only need to add margin which is the bottom margin space between items so bottom margin is 16 you can also see the rounded container created over here which has a border which has a border radius and Border radius property by default is using the card radius large 16.0 so head back over here using the margin once the container design is completed we going to use the speack property to place elements on top of each other because using the stack we want to push our selected icon to the right top side of that container stack can have multiple children so first of all we need to create an icon and we only want to display this icon when selector address is true we want to display the icon using icon X Library with a big circle icon otherwise if it is not a selected address we don't want to display any icon if you want to display you just have to pass any other icon over here then for the icon color we want want to use the same approach if it is a selected address we want to check that if it's a dark mode we want to display the light color and if it's a light mode we want to display the dark color for the selected address and else if it is not selected we don't want to display anything because in that case we don't have any icon over here to view this single address we have to go to addresses we have to call T single address and let's say selected address value is two let's save the code and you can see selected address is also visible let's duplicate and make selected address value false let's save it and you can see we have two rounded icons rounded containers one is selected with a background color and an icon color I I want to position this icon so WRA it with a widget position widget and make the right five and also top zero so that we can push it to the right side currently we assign the position but we don't have anything inside the stack so that's why we have an error when we going to open this you can see error size do is finite is not true so let's go right after this position create a column widget and we are going to use the list of Childrens to add all the address so in the first line because we want to display the address so we going to use the text property so for the address I added a text over here which is an address MAX Line will be one overflow is ellipses and style is this one if you want to make it two lines you can change the number and down below I have added a small space so let's save it you can see we have our text visible we also have to add some pedding in the container so use the pedding property assign pedding T sizes. medium which is 16 save it and you can see we have our pedding visible if you want to make the icon background color transparent so you can use dot with opacity and let's give 0.2 let's save it now you can see it's too much transparent let's make it 0.6 so that's your choice next to this text we want to again add another text for the phone number I've added a phone number over here which is W phone number with the ellipses and MAX Line will be one for this and added a small line but over here we want to display the address at the bottom and at the top we only want to display the name so we have a name over here with the max line one liip is and stylish title large then for the address we only have to make the soft rep Pro so that we can incorporate the complete text okay let's save it and you can see our design is now visible but we also have to make this design left align in this colum so we'll use the cross access alignment do start let's save it and now our design is almost completed so let's close this one go to addresses and in here let's try to change this to false and bottom one to True let's save it and you can see we have selection change and also we going to design now this form when we going to click on this plus icon for the address for the new address so inside this scold we want to First create an app bar app bar will again T app bar showback Arrow will be true and text is add new address then as a body we're going to use single child scroll view to make our design scrollable as a child first add ping again for the Ping we will use the default size which is 24.0 remove the extra constant then as a child we going to use column property spec lay down elements in vertical direction as children of the column we have to create the form but because we don't have to add anything else so let's wrap this widget or this column with a form first first we will have a form over here we will later on ADD key to get access to all the fields of the form so next inside this form we will add the column so let's use text form field which we already designed in the themes let's go to utils go to theme and in the custom themes we have xfield theme and this theme is for the light mode and then for the dark mode we have theme defined over here if you new you can also get the previous videos link is in the description so in the text form field we are going to use the the decoration property and use the input decoration first Add a prefix icon icons x. user then as a label text add a name over here because first value is a name and remove the constant add constant we required then we have a space with the height property space between input fields which is again 16.0 we can duplicate it change name to phone number change this icon to mobile icon let's save the code and you can see we have app bar name phone number after this we want to place Street and postal code in a single row so next element will be row and then as a child basically we cannot directly use the text form Fields let me copy this paste it over here two times change the label and an icon so when I'm going to run this this Tex form field will take all the space and we basically have an error over here scroll all the way at the top input decoration is typically created a text field cannot have unbounded with this means that we cannot use two text Fields inside a row or even a single text field in a row we have to wrap this with an expanded widget both with an expanded now let's save it and you can see we have both text Fields appear and this time we want to add space not in a height but in a width Direction save it so we have four Fields created next after this row let's add same height space again and this time row will contain city and state with a building icon and an activity icon let's save it again we need to add space in a height and at the last we're going to use a text form field with the name country icon will be Global let's save it so form is almost completed we again have to add space here this time increase the space using default space or you can use same space between Fields multiply by two and then use the size box with the width as double do Infinity so that we can have a complete full width button and as a child we going to use the elevated button on press is currently null as a child use the text let's name it save let's save it and our button is also created so I think we are done with the design let me test it with the dark mode So currently this design is working fine click on this plus icon and also this form is looking good so that's it for today's tutorial I hope you learn something new and definitely you can get the complete code link is in the description or you can also watch the complete playlist videos link is in the description or from the right top Corner if you learn something new please like the video and if you're new to this channel don't forget to like And subscribe hit the Bell icon to get notified for all the upcoming videos thank you for watching take care Allah

Channel: Coding With T

Views: 3,498

Keywords: flutter card design, flutter card widget, flutter address, flutter address screen, address screen flutter, card widget in flutter, card widget in flutter example, ecommerce app flutter, ecommerce app flutter ui, ecommerce app flutter getx firebase, flutter ecommerce app with firebase, flutter ecommerce app ui, flutter ecommerce app with firebase 2023, flutter ecommerce app with firebase getx, flutter shopping app with firebase, flutter shopping app ui, coding with t

Id: YL3MnKYP0MI

Length: 14min 49sec (889 seconds)

Published: Sat Nov 04 2023