Product Detail Page UI Design | Flutter eCommerce App UI

Alum and welcome back to coding with t today we are going to learn how to design product detail screen first of all let's quickly have a look what we are going to create we are inside our application home screen is completed store wish list profile screens with the in detail profile view is also created if you're new you can get the playlist link from the description so let's click on this product view its detail in the previous tutorial we'll learn how to create this product image slider then how to add image at the top we also see how to create this share icon ratings button product price price range and also the discount percentage then we see the product title product stock status and also the brand of the product whereas in today's tutorial we'll learn how to add the variation detail if we are uh changing the variations you can see the detail of that specific variation is also being changed so this is what we are going to create we'll learn how to dynamically add the color with all the color sizes and the selected chips then we have checkout button description reviews op option then at the bottom you can see we have add to card which is a counter and then we have add to bag options so this is what we are going to achieve today let's get started for Ecommerce application and we have already completed our section one for the prerequisites section two related to login sign up and in section three we are designing flutter e-commerce application design so only few videos left to this design next we will start the back end onward from section four and section 5 so let's get started with the remaining design of product detail screen you can again get the complete playlist link from the description or get the complete code from the link provided in the description or from the right top Corner we are inside our project in the previous tutorial we'll learn how to design the product details which is inside the LI folder features we are designing the shop features and in the screens we are designing the product detail we already created few of the product detail screens which is part one as product image slider then product details rating and share button price title and stock with band details which is a product metadata so these four things are created in the previous tutorial whereas today we going to design the four major and the very important things for e-commerce application the first one is the attributes which itself has their importance because if you want to design an e-commerce application which has multiple variations or it's each product can have multiple variations then this is the crucial part that you need in your application definitely when we are going to do the back end we will add conditions over here that if attributes are not know for some specific product or the product type is not variable product type then we will not display attributes otherwise we will display attributes but first as this is a design tutorial we will first learn how to design the attributes so if you see the design we have a variation uh this specific card of the variation and in that variation we will display only the selected variation with its title price stock status and description which can be up to four lines maximum so first we have to design this because all the elements will go in vertical Direction so I have already created a widget over here which is product attributes do dot which is an empty straight widget e product attributes just import that Library over here and then head back to this class now we will start designing in this class column will lay out all the elements in a vertical Direction first of all we need to design selected attribute pricing so for that I'm going to use the rounded container if you don't have this container you are new you just have to create a simple container and using its box decoration because we have already defined the Box decoration color border border radius color is basically the background color the property already added and to make the Border circular you have to give the Border radius and by default we have border radius of card radius large which is 16.0 so in here we have to give the background color and in the product details let's copy this one the function which is a helper function which checks that currently screen mode is in the dark mode or in the light mode so let's go to this class and you see this function which is theme do of context brightness is equal to dark where it is located it's inside the utils helpers and helper functions as it is static so we can easily access this class T functions do name of the function it's going to return us a Boolean if it is dark we want to use the darker gray color else on the light mode we will use simply gray color again these colors are already defined this is the darker gray and this is dark gray this is a gray inside T Colors class remove the constant from the top as a child of this container we want to create First Column because variation title with price and stock are on the first row then in the second we have the product details so first of all in inside this row to add title we want to use the T heading or the t-section heading widget so it's a t-section heading with a title as variation section heading class is also created it uses row property and text as a simple text with ellipses MAX Line one and additionally we have one option which is show action button if it's true it is going to display the text button otherwise not at a constant by default it's true make sure action button false let's run the application okay so our application is running let's go to login click on signin button and we can see the products let's click on this product detail and down below you can see we have the container created and also we have title variation to add some space around this container we will use the pedding property P inserts. medium medium is 16.0 so you can see pedding has been applied next to add the actual price after this heading because we are inside the row so we are going to make element placed in vertical sorry in a horizontal Direction so that's why we use the size box for the specific size using space between items now for the actual and sale price we can use another row because they both will act like a single widget so we are going to place them inside another row for the actual price let's use the text because this is a design so remove the constant at the top so for the design because we want to display all the maximum possibilities so first one I'm going to treat the that currently the discount is active and we have $25 to add a dollar sign you have to add back slash to make it appear in the design in the string and the style I'm going to use is a title small with the apply decoration which is line through this means that when we are going to save this you see that the dollar price is currently trimmed and on top of this row we're going to use the product title text this is the product title Tex it has two options small size with a label large and otherwise if it's not small it will use the title small as a large size so we are going to use the small size over here which is a Boolean and use price text let's save it so we have a price in the same way we going to add the second actual price or you can say the sale price let's save it we need to add another width space between these two so after the first text let's add width space between items and this time we are not going to apply anything to this line through so this means that we can easily choose instead of this text we have t product price text and as a price we can simply give 20 because already if you see this design we have already a separate string which is basically concatenating but a separate string which is representing the currency we can give any other currency to this but we just have to pass the price in the string Max lines overflow St has two options is large and is small and also over here we have a line through property which is a Boolean so if we require a line through like this one one we can use it otherwise no need let's save it and you can see the actual price is now in a bit bold size we will not create the row over here because the variation will be on the left then these uh two prices and the stock status will be inside the column so let me wrap this title with a column property inside this column the first row will contain the title and two prices we can also add small space next to this one and now as a second row of this column we can create stock so as a first row we have actual price as a second row I created again a row with a product title text like at the top this title is a price this is the stock and as a result it will contain in stock currently it's static but later on we will change it to Dynamic so we can display uh both price and stock let's go to column and change its cross access alignment and make it push it to the start let's save it and and now you can see we can display both price and text we can remove this extra space or you can add the extra space over here to make sure that they both should be aligned perfectly once the price title and stock added let's add the variation description so I've added product title text which is going to be used with a small size and MAX Line will be four Control Alt L add a constant so this is it for the variation description let's save it and you can see we have cenly variation covering cool lines we can also view this in the dark mode so you can see Curr we have the dark mode visible switch it back next to this rounded container let's minimize it inside this column let's first give it some space space between items next we want to create the attributes so first of all we are going to design each attribute in a separate column the reason will be cleared when we going to talk about the back end but we will also try to one why we're going to use the column over here column will have each attribute with its own value the reason to use the column is very obvious that we might have multiple attributes with their own values let's say we have color with the different color values then we have size with the different size values these all values are being feted from the Firebase where admin stored the data for that specific product so we don't know which product has which values and what is the actual name of that specific values let's say we have a property add by the Admin is a color attribute name will be color so first we need to add the heading in each column and then definitely after that specific value we will add rest of the values which is green blue black and things going on same with the sizes let's say we have European size with the 32 34 36 or maybe UK sizes so Target those things we have to repeat or we will try to add a loop on top of this column so that we can easily maintain each and everything but for the design in this column as a children first thing we need to create section heading which will display the title of this attribute let's say it's color add some space also add a constant at the top after this space we're going to create a choice chip which can be selected or unselected we can make selections on that specific chip so let's use Choice chip it requires two main things the first one is the label which is the actual text and then position of that chip which is selected or not selected a Boolean state so let's say because using Color let's say we are going to pass the text as green make the selected as true we have to wrap this string in a widget because it requires widget so let's wrap it let's save the code and down below you can see we have also because it's not toggle label we don't have any method over here which is on selected so let's use this one you have to remove the constant from the top to remove this error okay now let's save it and you can see our design is now clickable and we're going to make this false what will be the state of this chip you can see it's not selected and by default it's background color is also change we are going to go inside this Choice chip Control Alt l we have a label style property and we have to check that if the current Choice chip is selected we will make this to White otherwise we will do nothing let's say it's true let's save this also make this true this means that it's this chip is selected and the design of the text label is changed to White we will create a separate widget and we'll call these values from over here so why not create first extract flutter widget so let's go to common in the widgets I have created a new folder with the name chips and in here we have a simple stateless class which is T Choice ship and we have a choice chip label is a text which we can get it from where we are using this selected is again a Boolean over here which is required and on selected is optional because if on selected is not provided by default this chip will be disabled so if we don't have any attribute or elements of the attribute or the stock is out of the status for that specific attribute which is not null then we will make that disable by not passing anything to this selected feature and as a label style if that selected is true we will display the wi color otherwise we are not going to display anything okay before doing anything else to make that chip circular for some specific events because we are using dynamically this chip so in some states we want that chip to have different shape rather than to be scared so before that if you are using this chip and if you didn't follow the previous tutorial and if you don't have the themes we created so let me walk you through with the go to utils in the theme and down below we have chip theme over here so The Styling is already created and completed so that's why you are seeing background as blue with the radius already added and things like that this means that when we are going to make it disable we are using the gray color with opacity 0.4 for the light theme this is for the Dark theme label Style by default is black and over here it's white selected color is primary for both cases light and dark modes then padding is already given the horizontal padding is 12.0 and vertical is 12 and also check mark color is the color of the icon which will be white when selected and also white because we are only displaying the check mark color when it's selected or the icon check icon will only be displayed when it's selected so at that time we want to make the background color as primary so that's why selected color is primary we need icon color to be white so you have to design this to use this theme if you're new you just have to go to theme do do create this theme for the light mode for the dark mode and in here you have to search for the chip theme assign light light ship and assign dark ship to this one and simply head towards the main main app using material app where you're using this material app if you're not using the get you just have to assign theme which is the light theme then Dark theme will be the Dark theme will be applied okay now we want to make our chip circular for that we are going to use something which is the helper function so to make screen different we have Avatar widget sorry not screen the chip widget in a different shape we're going to use this Avatar widget and let me first show you that how we can change it use T circular container width and height will be 50 and let's add background color as colors. Green Let's assume we currently have green color so let's add a constant let's save this nothing changed we have to head back over here replace this with e Choice chip let's add some text let's make the selected to true let's save it add a constant now you can see we have a green color at the background Avatar is basically the icon so icon is currently having a green color to make it circular we have another property which is shape property so we will use Circle border let's save this and now you can see we have circular shape but instead or inside we have a text let's say we don't have any text let's make it null and now you can see we have that specific icon in the circle to make the circle we have to find a way around let's also search for the background property make this green as well okay next you can see the icon color is in the green to make that icon in the center we'll use the label pedding to zero let's save it and you can see icon is in the center to make that icon appeared completely or on the full skp because currently the icon background color which is what we want to display so we will use the same label pedding control d add this pedding as agent sets. Z let's save it and you can see we have our icon currently which is selected so we can also change the selected color colors. green and you can see we have that specific color we want but how we can get the colors based on the text this is something that you have to focus on C you can see we have only written green over here and we are going to use let's say we going to call the T helper functions over here dot get color we'll pass the text to this one if it is not null we simply want to display sized box else we want to display the text color add a constant now let's go to Colors this the helper functions in the get color we have a simple Fel statement you can use switch over here you can use anything but it's just for the learning purpose that if we have a value which is a string in green then we can pass the green still in the LF I have again added a green over here then we have red blue pink gray purple and so on so forth what you can do is in the admin panel you can let the user give a list of colors in the using the drop down so let's say user is going to select purple from the drop down you just have to save the text as purple in the database and when over here when we are fetching those values saved in the admin panel we can simply pass the text to this function it is going to check that if value is equal to Green it will written a green color otherwise at the end you can see we have if nothing found no match is found we are returning null over here so we can easily check that if helper function is returning null we will display the text as it is if it is not returning null this means that it has some color so we don't want to display the text in this case so let's display the sized box selected then on selected is also over there same let's change this Avatar we will only display this container if we have something in the background color so here we again added helper function which is if it's not null we'll use the container color and as a background color of this container we will get the color from this one at the end you have to add this sign because it's nullable so we cannot assign null color to this background else if there is no Avatar we don't want to pass anything so we'll pass the null so it will pick the default color created in the theme same for the shape let me add all values so in here you can see if label heading will receive some color and it is not null instead of calling again and again this function because it's a static function we can call it but if you don't want to use it over here we can simply create a variable which is a final variable named is color call this function it is going to check if it is a color simply we can replace all these values and also to check over here if this color is not is equal to null we will return as a true else return as a false so we don't need not is equal to null over here we can simply check if it is color use the size box replace all these values now we have a simple escor if it is not null we will display the size box over here it's not null display the the container make the pedding zero and so on now head back to product attributes in here let's try two to three Valu this is a green this is blue this is yellow make one selected two selected to false and same way let me copy this column one more time and this time I'm not going to make a colors but let's make it size and we have three sizes now let's save it and down you can see we have three different chips with three different colors as well these are nullable because to display complete actual colors we have to use the on selected property it will have a value over here and also it cannot be constant if you don't have anything in the on selected value it will display the colors like this which is the disabled mode so let's save it and now you can see the vibrant colors so these are the selected or not selected values if we going to make the second one selected it will work like this and down below again you can see we have the different values currently we cannot see those values the reason is that we have not added text over here in the Tex widget let's remove the constant let's save it and down below you can see again we have same issue they all are disabled let's copy and paste on selected to them remove the constant let's save it and now you can see the active chips now we want to make sure that any length of the chips can easily be incorporated in our design in a horizontal Direction so they they are not scrollable but if they reach at the end of the screen they should move toward the next row so to do that we are going to cut them from here we going to use the r widget it has a list of children let's paste those children let's save it and you can see we have three attributes we can increase these values to six and you can see whenever it's going to reach the limit of the row it is going to push the next wiget to the next line we can also make this dra to use the spacing of eight let's save this and now you can see we have some specific sort of spacing between all the values we can do the same also on this heading show action button will be false add a constant let's save it now we have only colors and sizes we also want to WR W this with a r widget and we also have to add spacing as it for both of them okay now let's duplicate it few more times and you will see that our design is working very fine we can add as much as chips as possible so our design can easily be incorporated to any of the screens so this means that we have the Adaptive design to any screen in the back end we will definitely turn these things into Dynamic so we will not have this much of code over here so that's it for product attribute let's go to the product detail screen in here at the column let's also use the cross access alignment and make it start all the values should start from the left side and also let me do it for the colors now our design for the attributes is almost completed let's head back to product details in here let's create a checkout button simply use the elevated Button as a text make it checkout REM move the constant let's save the code and down below you can see we have elevated button ready wrap this widget with a sized box and make the width property of this sized box as double do Infinity control save and we have the button covering the complete width using double do Infinity Property after this attributes we have to use space between sections add some space which is 32 let's save it and you can see we have some space available next to this let's create description for the description we again want to use heading over here so we'll use the t-section heading as description size box we'll add some space down below we have the description available make sure action button to false again we need some space down below this button so to add the description we're going to use some toggleable properties first go to Pops spect odml file and inh here for the product specific features let's add read me extract the carousel slider over here as well let's click on pbet so this is the library that we are going to use this the package which is read more package and over here you can see we can toggle the text make it expandable make it show less so to use it we have a new widget which is read more text widget H enter as a data property let's add some string then we have another property which is stream lines we can give it two this is going to trim the lines after these number of lines we also Al have one more thing which is a trim mode trim mode can be length doline let's use the trim mode doline then we have trim collapse text and expanded text show more and less next we can Style Both more style and less style so this is the style using a text style give it some font size then we have some weight over here let's save the code so as we added a new product we have to do the hot restart add a constant let's go to login click on it click on this product and down below you can see we have our product being displayed we can add show more and show less is being working very fine then next to this for the reviews we are going to use a divider first just to add a divider add some space below this divider next to add specific things related to review we are going to use the section heading but not as usual it will display the reviews with a number of reviews we will catch later on after this we have show action button by default which is true use the on press event of this and make it nullable and let's save it now after this divider you can see we have reviews with an view all TT if you want to add icon button over here you can simply create a row row will have two things first is the section heading simply title and then we have an icon button and so we also don't want to display this icon button let's save it and now you can see you still have have view all button soor you want to make it false let's save this and we have reviews then at the end we have an icon button now to add the bottom counter we have to scroll top in the scaold so to add a bottom card we have a property which is bottom navigation bar and I have created a class which is T bottom add to card we will later on pass the product to this but for now let's go to this class it is created in the same product details class and and in the widgets at the top you can see a simple bottom add to card widget which is a stateless widget it has an empty container this container have some pedding pedding will be symmetric using horizontal is default space and vertical is default space divide by two half of the default space then to make it circular only two top edges will be circular so we have to use the Box decoration first add some background color to this if the brightness is dark mode we use the darker gray otherwise we will use the light color then for the Border radius use the Border radius dot only and we only have to give two things order top right and top left add a constant so top right will be radius do circular with a card radius large size which is 16 and same for the top right circular with the card radius large this container was the layout so now as a child of this container we want to place elements in a row so we have to use the row with a children's property so inside this row we first have to create plus minus and the counter icon so we again have to use the row for this called the T circular icon widget this is the T circular icon widget that we already created we not going to pass the background color it will use the default dark mode and light mode background colors else we have the Border radius by default to make it circular we can give width height icon color background color and on press so headback let's give it icon as icon minus let's also save this and down below you can see we have a small button over here which is displaying the minus sign give width and height to 40 to reduce its size and as an icon color we're going to make it white let's save it and you can see the minus icon is created next to this we want to create a text with the two spaces so the first space is space between item it is a width again it's a width then in the text we will use the title small style let's save it and you can see we have two return over there we will copy this same icon style paste it one more time we will use the add icon over here let's save it also the background color will be black so we have minus and plus icons created next to this row create an elevated button it's on presses null add a constant add to C let's save it button is created we also want to change some properties of this button to give it a style Control Alt L next to this on press we have a style property and to style the button we will use elevated button do style from inside this we have a pedding which is small pedding which is a medium size then we have a background color as black side will be or the Border Side will again will be black let's save it and you can see the button is created now we want to make these two elements the first one is r second one is button to be have space between so we will use main access alignment as space between let's save it so our button and add to card buttons are added now whenever we are going to scroll up and down our bottom card will remain same for the dark mode you can see it's also looking pretty nice we have a curve radius at the edges and then we have both minus and plus signs with uh back and I wanted one more thing that if you want to make this uh background color of this chip to transparent you have to head towards the product attributes inside the T Choice chip you have to wrap this Choice chip with a widget which is theme use the data of the theme called theme do of context do copy with to copy all the remaining style but we only want to change the canvas color to transparent so use colors. transparent let's save it and you can see the background color is now transparent there is no other way to change the background color of this chip Okay so so that's it for today's tutorial the tutorial was a bit long but I hope you learn something new and you can also get the complete code of this complete e-commerce application link is in the description or you can also get the complete playlist to follow the videos along if you learn something new please like the video and if you're new to this channel don't forget to subscribe and hit the Bell icon to get notified for all the upcoming changes once again thank you for watching take care Allah office

Channel: Coding With T

Views: 3,902

Keywords: product detail page flutter, flutter product page, flutter product detail page, flutter product app, flutter product detail page ui, product page design flutter, product details page design in flutter, product variations flutter, flutter product variations, product attributes in flutter, flutter product attributes, choice chip, choice chip flutter, choice chip flutter example, choicechip flutter, flutter choice chip, flutter choice chip widget, flutter ecommerce app ui

Id: gMpmLiZSe8E

Length: 32min 22sec (1942 seconds)

Published: Thu Nov 02 2023