Flutter Product Detail Page UI | Product Flutter Design 2023

am alikum and welcome back to coding with t today we are going to learn or design products detail screen which is very important and very crucial part of any ecomerce application so first of all let's quickly have a look what we're going to create we are inside our application we have completed the design of this home screen with a scrolling banners with the scrolling categories custom Apper background products with the grid style you can watch the previous videos link is in the description we have also designed the store wish list profile edit profile but in today's tutorial when we are going to click on this product over here it is going to pop up or show the product details you can see at the top we have four images of the product then we have one large image with uh add to wish list button at the top we have a back arrow we can change the image of the product we can view the product in detail you can select any image view it in detail at the bottom you can see we have ratings with a share button then we have price range there are two type of products that we are targeting the first one is a single product which don't have any variations and the second one is with variations so the current product you are seeing is a product with variations we have a range of products minimum price to maximum price then we have percentage of discount product title stock status brand of the product then we have the variations so user can select the variation at the top you can see images also change color and the size with a new values of variation is appeared price $232 stock is in stock then let's choose the black one at the top you can see product image is also being updated price and stock status is also being changed we can also do this for other variations and in here when we choose this size you can see we also have a description with a sale price on specific variation this variation is out of stock so we can easily manage all these things then we will Target the back end but first we have to design this and also we have a checkout button description will go over here then we will see how to add reviews and at the bottom we can add each variation in the card so let's say we can add two green size 34 of this product and at the top we can go to the cart and in here you can see we have green 34 with the two properties added let's set back open the same product and let's try to add red with 32 size this time three entries add to bag and over here also you can see the total count is being updated so we have total five entries of the specific product so let's go to cart and in here you can see we have red 32 over here with the different image green 34 with also a different image then also at the top we have a single product okay so let's get started with today's tutorial for Ecommerce application and we have covered section one for the basic setup for the section two we'll learn how to design the login part and now we are about to complete the e-commerce we have crossed the halfway and this is the very important tutorial today to design the product details so let's get started you can download the fter code from the link in the description or from the right top Corner we are inside our e-commerce application and in here you can see in the shop of the features when you go to shop we have already designed Home Store wish list and in the personalizations we have designed two screens profile and settings and again today we're going to design another screen in the shop in the screens go to to product details and create an empty product details or dot with a stess widget stess widget has just scaffold single child scroll view to make our design scrollable vertical scrollable and child of the single child scroll view is simply column to retain all the elements in vertical direction we have to create bottom navigation which we will cover in the next tutorial we have bottom navigation bar which is going to add properties in the at the bottom we can add items we can remove items we can using that specific button we will push those items to the cart so rest for the body first we are going to design the product image slider and also the product details so as a children first thing we need to create product image slider and the second thing is product details so first of all product image slider has some Key properties that we need to focus on if you see the design you first have to see that we have a border with the curved edges so we already designed the curve edges but no worries we are going to cover this in today's Tut as well so your design should be curved from the bottom this means the body will be in a curve shape after that we are going to place image at the bottom then we have two icons app back arrow and also appar wish list or favorites button on top of that image this means that we are going to use the stack property over here and at the bottom of that uh that large image we going to add slider or the images slider which will slide in horizontal Direction so first of all we need to add a curve shape so we are going to use our curved edges widget which requires a single child so single child will be container to add background color okay inside this container first remove the constant from the top and first let's see what is this curved edges widget it's a simple widget which requires a clip path clip path requires a child which will be any widget and Clipper to show some specific Custom Design so we have already designed this in the previous tutorial you can copy the code you can get the code from the link in the description okay so head back over here as a child property we use the container to use light and dark modes first we need to use the helper functions import this Library helper functions is also the custom class which help us to provide some of the specific functions we created over here and in here we the function we are using is is dark mode it is going to check that if current brightness of this context is dark it will return Boolean as true if we have this dark variable as true we know that the current design is dark so let's add a color property of this container so if it is dark we are going to use the darker gray otherwise we'll use the light then as a child of this container we are going to use the stack widget because using the stack we will place elements on top of each other stack has a property of list of Childrens so the first children which will be at behind or any wiet that we want to display at the back we will use first and we will keep stacking elements on top of each other so as a image property we are going to use the image currently we are using asset image but we will use the network image later on when we will fetch the images from fir storage So currently we have images over here defined in the T images class and these are the products we have already added so let's use the first one let's run the application okay so our application is running let's go to sign in click on the sign in button and we are inside our home screen so let's first go to home screen inside down below you have to find the product grid and go to product card vertical design so whenever this product is going to be selected we want to redirect to product detail screen add constant so using that.2 property we going to redite to product detail screen okay so let's click on this and you can see we have the large image displaying at the top okay head back over here and in here because different images have different sizes so that's why we need to wrap this image add constant wrap this image with the size box property as a height we are going to use the maximum height of 400 and also we can place the image because images can have different sizes in the center widget and one more thing to add some space around this image we have to use the fading so we can use the sides with the product image radius which is 16 using T sizes let's save it and now you can see we have some space around it Control Alt l once the large image is added okay let's test few other products let's change it to image 5 to test the vertical orientation let's save it and you can see we have to give some extra space so let's multiply it with the two image radius let's save it and now you can see the perfect size of our products next we need to create image slider so we are going to use the list view to make images slide in horizontal directions so first of all let's design the one single image so we are going to use T rounded image we already designed let me show you this is the image designed we have container just detector can be clicked so we'll use this property later on then we have a box decoration border color and some other radius which is clip AR wct and also we can use this on the network or the asset image few of the properties are already defined over here we can easily customize this widget so head back over here as a image URL let's say this time we're going to pass some other images let's save it and you can see we have that specific image on top of this and it has a large size so that's why let's define few other properties let's define the width as 80 maximum 80 width we also Define the fit property so let's over it let's see fit is already in the contain so we don't have to provide it which would be box fit. contain let's save it and at the left top corner you can see your image is placed we will see we have a background color so we'll use the dark property over here let's cleared at the Top If it's a dark mode we'll use the background as a dark and if it's not we will use the white color remove the constant from this TCH let's save it add constant over here next we are going to display the Border currently border all we are going to use the primary but later on when we are going to use the back end we will add a check over here that if this current image is selected display the Border as primary otherwise display the transparent color and we also want to use the feding to give some space from all the sides so I'm going to use the pedding do small which is 8.0 in the T sizes class let's save it and you can see at the top we have a nice white background container so let me first wrap this with a list view we can use the list view. Builder but over here to add a separator inside each wiget or you can say a space so we can use dot separated this is also going to work like a builder but I have an extra feature so now we have to provide item Builder separator Builder it is also a wiget you can see over here then we have the item count let's say we have four items in the item count separator Builder will be sized box so we don't need anything it actually requires a context and an integer which is the count so we don't need count so if you don't need anything you can pass first thing as underscore then next thing with the two underscores and the next thing with the 3core so this means that we don't require these values then as a sized box we going to pass the the space between items and make sure it's a width property because all the elements will be in horizontal Direction then as item Builder we are going to use this rounded image let's add item builder at the end again we don't need the context but we will need index later on Control Alt L paste the image over here let's save it and you can see we can not see anything because we have an error which is vertical view Port was given unbounded height so there one more thing that you can see we didn't add anything sorry not over there but over here not add anything like the height property for this F and we have the error related to height so we can simply wrap this list view with a size box again and we can provide the height property over here with the 80 now we will have 80 cross 80 image size let's save it Cur it's not properly visible at the top you can see it's also scrollable so let's add string crap to True only utilize the available space Also we want to make this list view to horizontal Direction so scroll direction will be exis do horizontal when you save it you can see we have four properties and we also want to make them scrollable so use the physics all scrollable scroll physics okay next to position them on top of this image box because we are using this tag property so we can easily wrap it with a position widget and as a properties of the position widget we are going to use right from the right side zero this means that it's going to be pushed towards the right side bottom will add 30 space from the bottom then from the left side we're going to use the default space which is the space of our screen so let's save it and you can see we have four image they cannot be scrolled because currently we have four let's change the count to six let's save it and now you can see we can easily scroll any image so this blue Bolder will be only on the image which will be selected later on when we going to do the back end then the last thing after after creating this image slider right inside this tag we have to create an appar icons or you can say a simple app we going to use p app bar show back arrow will be true to display the back arrow then as an actions we're going to add three circular icon so T circular icon means that we have first icon as a heart which the icons X property and color will be red T circular icon is also created in the previous tutorials so we have width height then have a box decoration and then as a child we have an icon button which can be on press all the properties can easily be provided from here add a constant control orl let's save the code and at the top you can see we have icon button then we also have a back press Arrow so when it will clicked we will be redirected to the previous screen so this is the dark version still we can scroll we can see the background as a black then at the bottom we have the bottom card in which we're going to add the details and to change the color in the the dark mode of the ab bar icon you just have to add dark mode over here in the ab bar and using the same dark color on the icon property we can check if it's dark show the white color otherwise display the dark color so so now we have everything created for the images we can easily turn this product image slider into a separate Fidget D product image slider refactor extracted let's go to widgets in the product details and click on this product detail image slider again an empty class paste the code over here add all the required Imports that's it go back to product details import the image slider we are not going to use the dark mode Let's simply copy remove this file from here add dark mode over here import helper functions and that's it okay next let's use the feding property to give feding from all the sides not all the sides but we don't want to add extra padding on the top side because already we have some padding at the top using the the custom header we used over here in the product image slider so we'll use the only property and we're not going to pass the top property we have right left and bottom with the same default space which is 24.0 after that add column to place elements in a vertical Direction and in the product details you can see I listed ratings and share price title stock and brand then we have attribute checkout button description and reviews so let's add ratings and share so to do that we want to use the row property because using the row we can align elements in a horizontal Direction so we will use rating as first and share button at the second so to create a rating again we need another row because this row is going to add space between rating and share button so using another row we can create first icon then we will use the text pan or text. Rich property to create ratings and count of the ratings so first of all let's add icon icon is again icons X star five to show the star rating sign then we have the color as Amber at small space space between items divide by two which is 16 so divide by two will be eight size then to add a text we use text. rich and inside we can use text pan property because text pan have childrens so we can easily add two childrens over here both should be text pans so as a text of the text pan we'll use 5.0 rating and then as a theme we going to use the body large for the specific text pan let's remove the constant as a second text pan we are going to use the number of ratings which is 199 let's save it and you can see we have the property being displayed okay next to do that we need to create icon button so icon button on presses null as an icon we will use icons. share size is medium so medium size is 24.0 of the icon so let's save it and you can see we have have one icon over here with the rating now in the first row not in this one in the first row to place elements apart from each other we have to use main access alignment which will be space between so it is going to add space between all the attributes so its first widget is row second widget is icon button so when we're going to save this it will push the both elements apart from each other so rating and share button section is also completed this means that we can also extract this right click on this row refactor extract widget name it t rating and share refactor extract it from here go to ratings share widget do dot which is again an empty widget created in the product details widget folder paste the code in it head back over here import this Library add a constant and that's it next we want to create price title stock and brand I'm going to call this as as product metadata you can see I again created an empty class with the name product metadata so inside this class I've added a simple dark mode at the top if required can be used then a column with a cross AIS alignment. start to keep all the text from the left side so first thing let's start with a price and a sale price tag to do that we are going to use the row property because we are going to display price tag or the discount tag first then price or maybe the discounted price so row has children's so we first have a sale tag then we have a price so to use the sale tag let's go to home do go to product card vertical design we created in the common widgets and over here it can be reused so we need this sale tag we created already using a rounded container let me copy this Al so as a sale tag of this row let's add the rounded container it's a simple rounded container with some width height padding margin and over here we are going to add the radius as small add a background color import this colors class remove the constant from the top ping is same as symetric horizontal and vertical then we have a child as a text property 25% it label is label large and we keep the text color as black because the background color over here is this cry color first we have to call the meta data tag over here import the library let's save it and you can see the price tag is visible let's head back after the sh tag add a size box to add some space so space between items using the width property so as a price let's say we going to use the TX property so first price is as we going to assume because want to design everything so we going to assume that we have 25% X so we have to display actual price which is do250 so to add a dollar you have to add back slash then a dollar sign so it can be printed out then as a style I will use the title small Tex theme which is already already created now to apply a line through property use apply then to add the line through use the decoration property and we'll use the text decoration. line through to add a line in the text let's save it and you can see we have 250 WR over here with a line which means that this is not the actual price control D to duplicate we also have to add some space over here let's say now we have price as 175 for the actual price we're going to use the product price the product price text it is a simple text by default currency is this one so it's a text with the price that Max lines will be one overflow is ellipses style has two things we can use either a large size which is headline medium and also if it's large we will use the title large and also an optional Boolean variable which is line through so we don't need to add any sign of the currency so we can simply pass 175 over here line through by default false so we don't need line through over here and also the design is provided let's save it and you can see we have to make it bit larger make the is large property to True save it and you can see we have our currency ready after this R let's add a title first add a comma add some space over here which is space between item divide by 1.5 to add little space then for the title we're going to use the product title text over here product title text is this one with a style as if it requires a small size label large otherwise for the large size we'll use the title small then again ellipses MAX Line and text alignment so as a title we'll use a product title attribute and provid the title over here let's add more space over here let's save the code and our title is now appeared so we'll use these two same values for the stock status provide a status as a title and then a text property for the result of the status so the text is in stock style is title Medium as a theme let's save it and stock status added in vertical direction we want to in a single row so wrap it with a row property extract the second text paste it over here save the code now we also need to add some space so let's copy the width using the size box let's save it and we have a status in stock ready to be appeared and the last thing is brand if you remember that we created brand title with the verified icon it requires a title it also has a brand text size so let's give it a text size. medium these are the enums let me show you as well when you go over here to the brand text size it is small so brand title text requires three Styles so it can be text size small apply the label medium for the medium size it will be body large for the large size it will be title large and for nothing it will be body medium so you can again watch the previous videos each and every widget has been developed and created so you can see the brand appeared but we also want to display an image over here so simply wrap it with a row want to display the image in a circular so we will use the circular image so actually this is what I was talking about in my previous videos in my early videos that this is the power of reusable widgets so if you see the design over here you will notice that we are almost using everything reusable so we definitely take time to design things that can be reused so once designed now we can easily design each and everything by using that those same wigets so we'll use T circular image and width and height and an overlay color width and height will be 32 overlay color is the color for that specific image we can pass the or we can assign color to this image so it's dark mode keep the image color as white as otherwise make it black add a constant let's refresh and you can see a very small logo over there because currently we don't have ions related to the brands we will add them in upcoming tutorials let's say use the shoe icon and you can see a small brand with a 32 cross 32 size displayed now in the next upcoming tutorial that's it for the metadata open the product details and you can see we have completed the image slider product details Basics with our rating and share price title stock and brand next tutorial will be again very very useful because if you don't know how to add or how to use or how to design the attributes which are going to handle the variations of the product we can dynamically add all type of variations if it's color if it's material if it's size if it it could be anything so we can easily incorporate those things inside our application okay so that's it for to tutorial I hope you learned something new if you learned something new please like the video and if you're new to the channel don't forget to like subscribe and hit the Bell icon to get notified you can Again download the complete code of this e-commerce application link is in the description once again thank you for watching take care Allah

Channel: Coding With T

Views: 6,273

Keywords: flutter product detail page, product detail page, product detail page flutter, details page in flutter, detail page in flutter, flutter details screen, flutter details page, flutter detail page ui, flutter product detail page ui, flutter product detail, flutter design, flutter design tutorial, flutter design ui, flutter design app, flutter app design tutorial, flutter tutorial, flutter, flutter product image, flutter image slider, coding with tea, flutter design tutorial 2023

Id: 4B7Zn_c42QM

Length: 25min 10sec (1510 seconds)

Published: Wed Nov 01 2023