Flutter Profile Screen UI Design | Flutter eCommerce App

Salam alikum and welcome back to coding with t today we're going to learn how to design profile screen in the previous tutorial we learn how to design the settings and now using the setting screen we will redirect the user to the profile screen if he want to see his profile or want to edit his profile so let's quickly have a look what we're going to create application is running we are inside the home screen we have already completed this home screen if you're new you can watch the previous videos link is in the description so let's go to profile and in here we have learned how to create this profile now when user is going to click on this icon over here to edit his profile you'll be able to see his profile picture his name username then some of the personal information and also close account or you can say the delete Account button when you going to click on this username he will be able to change this so let's get started for e-commerce application and we are in the section three so in this e-commerce application in the section one we learn how to design or set up the professional folder structure themes Etc in our FL application and in section two we learn how to design the login part now in section three we are officially creating for e-commerce application design we are almost crossed the midle of this designs few screens left after this we are going to start in section four and section five the back end of our application so if you're new you can get the playlist link from the description or from the right top corner so without wasting time let's get started studio and we are in the project which is e-commerce application we created in the previous tutorial and we in the settings do do this is the screen we learned how to design the previous screen and also over here in the profile card on on press event this was the profile card and on its on press event I have added get do2 to redirect the user to profile screen the profile screen is created right inside features in the lip folder go to personalization screens and we have added profile which is a profile do and empty stess widget and inside you can see we have a skold and in the body we will use scrollable behavior of the body so first of all let's add app bar of this screen we'll use the custom app bar which is T app bar we learn how to create it in the same section as a title text we are going to use profile and also because we can redri to previous screen so press control space to see all the options and right click this Boolean which is show back arrow to true this will simply show the back arrow if your back arrow is true it is automatically going to add a back arrow the custom Arrow we defined and also the back arrow event which will redirect to the previous screen control or L let's run the application okay so our application is running let's go to sign in click on sign in button we are in the home door do let's go to profile screen click on this edit button and you can see we are in the profile with a back arrow of custom appar then now in the body because body is scrollable so we use single child scroll view to add pedding from all the sides as a child office we are going to use pedding property as pings we we going to use the default space in the T sizes class which is the custom class we have created in the utils and down below you can see we have a default space 24 add widgets in vertical direction we have to use the column the first thing we need to create is a profile picture profile picture is a center and also the rounded one it has two options so for that I'm going to use column to place them in a vertical direction for the image I'm going to use a circular image past the image we have already defined over here in the images user go to Assets in the images and we have a user.png we're going to use and as a custom D circular image this is the widget we created so this is what we are going to use it has a simple container from the sides have specific width and height then we have a specific pedding a default pedding which is small size then as a box decoration we're going to add background color and a border radius to make it circular then as an image we have a fit property which by default is using box fit. cover and we are going to check if it's a network image coming from the network we will use this one otherwise this one we will replace this network image with cache image because we don't want the user to reload data again and again from the Firebase storage server so for now let's head back after this we want to add a text button on press is currently null let's add a child as a text let's remove the constant from the scaffold add constants here let's save the code and you can see we have an image with a bottom button which is change profile picture but currently it's not completely in the center of the screen so to r that we have multiple options but the one I'm going to use wrap it with a size box and give the width as double do Infinity it is going to take the complete width of any screen and when we're going to save this you can see we have image and text button in the center next in the details we're going to create or use the divider but first add spaces around the divider space using size box space between item divide by two which is 16 so divide by two will be eight space then we have a divider over here then as a size box we will use the complete space which is 16 so we have divider visible on the screen next we need to create heading we will use the section heading section heading which is or P section heading we have already defined this is the title it also has a show action button by default it's true but we don't want section heading with any button simply make it false so our heading is visible next add some space space between items and now we want to create something very useful which is to show the text for a very specific region of the complete row then show another text on again very specific region apart from the width of the text so we are not going to allow the text to exceed this thing we also don't want to let our application crashed so let's see how we can do that we also want to add an action button so to do that let's say we first have to use the row to place all the elements in horizontal Direction first let me add two text for both heading and the value or key and the value so we have the first text with a name then we have the second text with the name itself so first theme is body small second theme is body medium both have the ellipses on ellipses are basically the dots we use when specific limit reached to avoid showing anything else next we need to also add an icon icon is using the icons X Library then size is 18 now let's save it and you can see we have first name written over here then we have actual name and then we have an icon button or a simple icon so how we can place them as we want so we going to use a simple expanded widget Alt Enter wrap it with the widget name it expanded let's do the same add expanded to these both widgets so now you can see when the widget is added what this expanded is doing it is going to give the equal space to all the three wigets but we don't want to give equal space to all three what we want is we want to push this icon to the right side keep the same consistent spacing for our title and text so how we can do that we will use the same expanded but we are going to this time use the flex property let's add Flex 3 and let's give Flex 5 these are again tested values I've tested them you can play with these values to set up your own design let's save it and now you can see the last icon widget is pushed towards the right side and expanded which is the five is using more space then the title itself which is name so Flex is currently doing the dividing all the space in two portions the first one is the Flex 3 which is heading then Flex 5 which is text itself and then only providing the remaining space to the last expanded which is not using any Flex property so using this we can easily create rest of widget so let me extract it as a separate widget right click refactor extract flutter widget I've copyed that widget in the profile added a new directory or a new folder widgets inside we have created profile menu do and pasted that same widget over here but I added the title at the top then value at the top which will be string and also the icon itself by default icon is provided but we can change it as well and on the top because these are clickable we want to do some action later on so I've added gesture detector with the on tap event on tap is again as an on press P at the top using void call back and then one more thing because all these are going to lay down on top of each other so what I have done is add a vertical space so they should not be connected with each other add a vertical space using space between items divided 1 by five let's head back replace this with eile menu import it use the title as name value as coding with on presses currently null let's save and you can see we still have the same thing now we can easily duplicate and change all the values so I've added few of the elements over here for the personal information same with a one divider then we have user ID email phone number gender you can add anything as you like these all are on press so we can perform anything but specifically because user usually don't change all the data at a time and we also don't want the user to be changed everything so let's say we don't want the username to be changed once it's created we don't want to change the user ID we don't want to change this email and you see I change this icon over here for the user ID which can be copied email cannot be changed maybe we are going to let the user change his email and phone number but we will perform authentication as well then we have gender and date of birth and at the end we can easily add delete account using text button in here I have added small space at the bottom and then using a center wiet to make the text button Center on presses null and as a child use text close account or delete account X stle is simply color red let's save and you can see we have close Account button created which is a text button so that's it for today's tutorial we are going to F this all data from the Firebase in section 4 we will use to fill this data change this profile in the next section which is the backend section we will try to change this profile uploaded to the fir store and the image to the Firebase cloud storage then we have personal information again we will store that update it for our fir store database so that's it for today's tutorial I hope you learn something new you can also get the complete link of this playlist from the description below or from the right top Corner once again thank you for watching take care Allah

Channel: Coding With T

Views: 5,906

Keywords: flutter profile page ui design, flutter profile screen ui, flutter user profile screen, flutter profile screen, profile screen flutter, flutter user profile page, profile page flutter, edit profile ui flutter, flutter profile image, flutter profile ui, flutter profile page ui, flutter user profile ui, user profile screen flutter, user profile page ui flutter, ecommerce app flutter with firebase 2023, coding with t, flutter profile page ui 2023, flutter profile page 2023

Id: Y73J3A5gIYk

Length: 10min 43sec (643 seconds)

Published: Mon Oct 30 2023