PS5 Products App | Flutter UI

hello everyone welcome back to my channel so today we are going to see this UI okay not the fully way I will be showing you only part one which will contain this screen okay I will be showing you navigation between these items and it's very easy to design so just stick around for the whole video you will understand so many things you will understand how to create this type of card and how you can use new morphic design or you can use these type of forms and how you can give this background right so it will be a very knowledgeable video for you and I would like to see more views till the end of the video because you know it will very helpful if you watch out full video that's it that's my only request to you otherwise you will miss out on something and then you might be in trouble in future ok so just starting and I will not use any state main state management logic here in other than logic for this but if you want that I use block for this select this and change these items like this change these items so I can do it for you but in the next video not in this video so let me know in the comment section if you want that okay so let's head on to our first page of this UI you so this is a design and they're going to do this page first so let's head on to our project let me give you a small brief so in my past I brought EML I have added a font which is this for this outline I have added the font I could not find the exact font that's why I have compromised with that and I'm using this font for feature text I am not using any fault I think in whole of this app font compromise ation will be there because I was not able to find a specific font okay then in my assets other than fonts I have icons where these three icons are there right now I have added only three icons so let's proceed with this so in my lip in main door dot I am going to add a screen which will be homepage screen okay and in that pages I am going to create a directory which will be home paged it is completely optional and it is up to you how you can structure your budget so right now I'll do it like this home page screen okay then I will create materials page okay so let's see at the design it says that this is AB you not use a bar directly so we will be using scaffold but we won't be having app bar the reason for that is ampere cannot have this background right and being the background on the whole page so inside our body we will have a stack okay then in the stack you know the first thing that comes to mind is how you will create the background so it's very easy so I will tell you that this is your background layer and on top of that you have your visible elements okay so I will create a background widget which is private in this case and I'm not moving it out of this file itself this is again your all how you can if your app has many that has this type of background then you can put it outside in a commons folder for me I will use position widget here okay and it's very easy to do it with position because right is zero there is some width and there is some height talk is also zero so these are our positions but before that we need to know what is the screen dimensions yeah so we are going to fetch final weight we are going to get a mediocre it or obvious we are going to get width of the screen by using media queries and as well as we are going to get height now these width and height have to be passed to by drawn widget so we are going to declare width and height as the parameters of background visit then we are going to create a constructor which is by Const so that it is little beneficial and the compile time at the runtime yeah these width and height will be passed to your background so we are going to do this and these are named parameters okay then in this position as I said my right is 0 what about the weight so whatever width I have passed in is the width into or you can do one more thing you cannot you should not pass with a complete screen with width to background bridges you should pass from here okay so it is 0.4 times means it is 40% of your screen width and 80% of your screen height then top will be 0 your height of this background will be this one and now position also needs our child widget so what will be that child it will be nothing but clip are red so we are going to clip a rectangle okay then we will have a container here now so yes so container will just have a color or you can say do we have a colored box yes so we have a colored box we are going to simply take our color here okay what is that color so I have already copied that color I think this is the one yes so this is my color if you can you can move to any other file Elson right now just for the you I think I am NOT doing it but this is not good practice to put colors here and there because this can be repetitive and it will be actually so eventually we will define it on top layer of this screen okay then this is clip erect which is going to clip this colored box with um you can say a curve a rounded rectangle so you have to give what border from which side you have to clip it so border-radius not only so we are going to clip it only from left bottom left and why so because if we consider this colored box your phone is already curved this side is not curved this is not good only this is curved so it is bottom left part of your colored box so that's why you have to define what radius you have to give here so you can give 20 and if we see the output let me just import this yes so you can see the output yeah it is very fine it's very matching with the you can say your background you can add some okay I can say you can add some opacity because it looks like it's not the exact thing that's why so that's all up to you for me this is perfect now other than background we have to switch to our top layer which will have these elements right so when we have elements in vertical direction we will have a column and then we will add all the elements in the account right so in this column my first child will be of course a barber this I will also create as a local thing because in these two screens the a bar is not common right of course start if they're carted here this is there this is there but again I will have to handle navigations which I am NOT handling here and I have to handle here so that will be overkill okay then ever you don't have to pass anything here you can do one thing you can add a size box on top of that which should have some height so that there is gap for this cutout I know you can use this a safe bar also but as if earlier but I don't feel that beneficial for me then uhm let's create a bar okay so ever as you can see only two icons there is little gap and space in between so these are our first look things so we will have a fading budget to add the padding it will be symmetric 16 then we will have a rope we have children and me Nexus alignment will be space between so these two children now comes the purest part how you are going to leave this type of icon right so it's nothing but a new more fit design so we have a library called clay containers which I have already explained in my previous videos or but in this video also I am going to show you how you can create K containers okay so you will have to have a container first of all okay then in that clay container you can mention lot of things you can give height so in my case it is high it is 50 width is 50 spread you can give 20 or we will see how that goes depth to anything you can give and we will see the output right then border radius so motor radius I will give I all right so I will give 25 so that it becomes a circle when width and height are 50 border it is 25 it becomes a circle then curve type I will say I will use 4 gear here and then pair in color I do need for this thing yes now I need a child now let's clear let's look it bit more down it has a border right so we need to not only add the icon but wrap that with a container okay and that to container having some width right so continue having some border with some big container will again have a decoration which is box decoration and it will have bottle what orders all and the color of that will be populated just let me paste it it should be this thing it's bit transparent from this color that's I have taken this okay then width will be 2 for this border the border radius of course again you have to mention width and height let us see if we don't do it what it becomes okay border radius all and it should be doing different now you might be wondering why I have taken 25 directly here and I am taking border radius toward all radius circles 25 the reason is this library this widget automatically takes double value and it wraps it it wraps in your border okay so it does the work for you see this border radius rod circular and the border radius whatever you have provided yeah so basically we can also interesting idea from this and we can remove at least one widget right yeah so this is working same way yeah right now in this container we have a child which will be icon I can start menu and what is the the icon so basically this is the color but without transparency okay right and then a size of this will be 25 or 30 whatever you feel better we will see it now then yes let's run it let's see okay it looks great it looks nice yes now play with the depth so spread I will just remove it for now okay spread is removed depth we will make is tenth okay great so 20 is good here yes and it's spread I think it's not needed in this case it's matching and yes it looks nice now similar thing you have to just copy this and you can add another one okay and there will be spacing between these two icons this time I can will be your card item okay and everything remains same but there will be issue I will show you yes so what is this so basically click container takes them you may you know I think a screen background as is surface might drop okay so we need to sorry parent color so parent color we need to change okay parent color will be nothing but the color of your spread mostly okay let's see 0 X s and what is the blue color so we will go to our background that's why I was saying that we need to create constant colors for us okay so we will do that after working right so it looks great now and it is as per the design right of course you might feel that this is little more whiter so you can do it by making this border as more transparent yeah it looks good yeah and it's on your decision that you make it as convex or concave it's all up to you right now I feel it's little like concave or let us see okay concave is much better okay now we are done with this at bar we are done with the background but as I said we need to define the constant color so why not define constant colors here itself so you can say I'm just taking a random name okay and that will be your background color right and then you are going to replace this blue color as well as in your AB bar also you're going to replace it with similarly I think you can take this color and then provide opacity here using that so but B in that case we will not be able to use Const so let's take this out okay so I will say folder icon background color okay which will be color and this will be final this thing the reason for this probably let's try out with Const I will show you why I'm not sure enough why it's it will not work so you know I want to apply some opacity here so it will be I can background color dot with opacity 0.2 so does it work yeah it works great that's that's good news for us and here we are directly going to use I can background color similarly here also we are going to use bit opacity point zero three and correct color okay it should be FF yeah so now let us learn it and everything looks very nice and perfect now let's work on the bottom part so we will have a size box which has height of 30 maybe and then we will have all rich text so that we can have these two items so why don't we create another class which will be you can say title yeah and that title will have the text final text it will be string okay now this rich text will go it will come in your title and you will have okay just a moment so I'm making local witches because they are used only here that's why we can see they are not used anywhere else so in the title now you will have to pass in the text which will be nothing but a featured products right and here it will be a do it duty to you don't separate out featured and product so that we can move them in we can use them in rich text one below another okay so it will be nothing but X dot split and it will be split by our empty space now you will have text here which will take Texas span yeah and it will have children okay so first time will be Texas span right and another this will contain words words 0 so it will contain featured and then the second item will be your line one line difference and third will be your products ok so this time we will work on feature which should have which will have four spy as Texas style so phones wait will be complete dot nine hundred font size for me it was thirty six and then you can copy this oh yes of course color also we have could give so it will be colors don't black that is a straightforward then in this texas-pan also so we see the output it is like this now why it is like this because you know this column does not have cross access alignment so now it has come here now it is about duty to wrap this rich text in a padding widget which has symmetric horizontal same 16 or for me it looks like 20 is good okay so this is good but we need to set font style for products so that will be our font family and we will go to the pub spec 30ml and we will see the phone family name here which is this thing we will copy it put it here and let's see the output so it looks like this right now you need to increase it so letter spacing will come into picture which will be 10 here and it should be 8 rate and some letter spacing can be added to this also which should be too great and it looks good as fonts are not there so it is not exactly matching the design but you know you can just bear with me for settle if this video otherwise so that my phones are perfectly matching in the design and it looks exactly replicas of the design but sometimes it doesn't happen that way and some points are actually not free freely available okay so I hope we are um something that yes I wanted to test whether can be moved these texts and this text furthermore closer so can we do that do we have height no do we have nothing so do we have height here yes what is that what does that do okay it is too much yeah you go from plate let's leave it this a little just give it a giving you Trisha yeah that's great so this is how you play with it I even do this a lot of time I play with the parameter so whatever william suits me it looks great right now you can see that these two are very close to each other right and of course we can add a little bit more spacing in here so it is nothing yeah that's great okay so now we will move to our this portion okay so now we are going to add settings and these three options so I have created a option class where I have created a class with IB and in each path and I have created these options or three options so this can actually if you are working on real time application this can come from any of your back-end or file with anything it can come from I have just hard coded it so that we can at least create the UI now so after this title we will have the size box again with height of 30 okay and then I am creating settings and options okay so this widget which I will create will contain settings and options now why I have named this F like this I will explain you in just a moment okay fine so right okay so when you are designing for flutter see this is a Settings icon and this fall all together if collection of options given to you so you have to group your UI elements so that you can apply some animations you can apply some you can at least separate out these visits so that we can be more modular when you're using them so for that you have to do in that way now we are working on a column design so this whole is one item of the column that I have to take this out in one thing otherwise what I would have done is I would have taken row then add it to children but that thing I will be doing here okay so my first children of this child of this row will be nothing but a icon okay and that will be short text whatever it means this again is the wrong icon but this is what I have right now so it will have icon background color you can give size to it which will be 30 let's see what how does it look like okay it looks like this again we will be wrapping this in a padding widget which will be this time or it will be lot more it will be 32 okay so this is from here now it is a time to add options okay now this options why I am taking this out as I explained this is a group of options so I will take this take this out now to make this one of them as selectable it will be easier to wrap these options with block builder or if you are not using block builder it will be again easy if your is excited state so that's a go with that okay and then again a stateless widget which we have which will have options right now this options is nothing but just again a row but this time it will take the remaining space okay so we will have expanded widget then we will have okay and also there should be some gap between settings and so we'll add our size folks this end bit and it should be 20s at some sufficient amount of this place should be there now this time I am going to use for me I will not add three options one by one I will just use my options dot length so basically I have done some mistake okay right so you have to write children then you have to use for loop let me just move it up and I push to 0 I lesson options dot understand let's take it indexed because it turns out very naive to use ie we used to use that in colleges ok right let's format the file now after this you have to add one options at a time so that will be my widget and it will have option cost adds option still X ok so we will create another widget but since options is very much repetitive word so we are going to refactor this as options frigid and then whatever we create new widget it will be option digit ok so this option widget is nothing but each of these options one two three so there are three options one beam option digit okay now you would have to create a field here which will be type of option now this is a model okay don't get confused I have separated out model and widget by naming convention now this is required field okay after this what is this now we are designing this thing right so it's all just material it's not at all a new morphic design it is it will not work that way the reason being same you don't know which clay container will have blue background which will have white background so you won't be able to decide what will be your as I said what will be your I think it was apparent color right in this case we mentioned blue as parent color because we knew it was blue in this case since it's a four loop you will not be able to decide it and take this case it's half white half blue you cannot work on that so basically it will be just a material then for us and it will have elevation eight and then it should yes it should have border-radius so it will border radius circular and we will take eight as the value right now you will have a container which will also have a border radius and it will be same border radius so you can actually take this out in a variable on top so I will do same this time because it will be easier to change from one end okay so it will be border radius okay it should be optional for the radius should be this right now option border radius will mention here L Phyllis do you mention why this is needed I will show you now color of this we will change just hold on for some time it will be changed because based on whether it is selected or not or colors will change right now what is the size of this so it should be 50/50 and then China this will be your image daughter is it okay what will be the image path it will come from option dot image path right fine okay what will be the width of this so I don't want to set weight I will wrap this thing up I will rather mention padding because image dot asset will be taking containers width and height okay so I will have to add some very yes for that this becomes a little bit smaller than the whole container so we are done with option widget till now or we have not mentioned anything which is related to selected okay so let's see the and you can see these three items which is fine enough but again this option widget should have some margin from left and right right so what should be done here basically I would say can you add a size box no probably there is only one thing that you can add so what you will do here is yes size box you can add here with Britta's it and then similarly this way let's see it okay it's not working that way because okay right I was wrong here let's try with this can you do this type of work here will it work okay it doesn't work that way fine so what we will do nothing to worry about option widget will just wrap this in a material or you can say padding and then you can take horizontal right and it will have eight from left it from right that's it fine enough we can increase it to 60 so that it moves little bit more right hand side and it becomes more visible to us right yeah this is this looks good similarly we can actually change settings icon size also to 50 so that it is also much visible yeah this is this looks nice okay now we have to work on which thing is selected so where it will be changed so basically it should be changed from probably here you have to mention which option is selected so you will mention selected option index or no ID because that will be more relevant that's why I have given ID here okay so this is one two three so right now I want selected option index option ideas one okay I will have to use this hint selected okay now right now I am hard coding no doubt in that but this can be changed when you wrap this with blockbuilder when you wrap with this provider anything you have with that take the value and put here okay right now it's a static but you can update it accordingly yeah if you want or let me know in the comment section if you want this whole functionality to work other than UI is one just let me know I will definitely going to create a second video for that it's just for misting that we will create in this video so let me know in the comment section I will take it in other parts also okay so this is selection option ID same thing oh now we have to tell option widget whether this is selected or not cylinder okay so we will past is selected okay how you will calculate that this is is selected what is the value of that so you will take our field is selected equals to option not like that probably that will be wrong to do that here so what we will do is we will just past selected option ID directly here and we'll go right um will it be good enough I think should be not this way turn here it should directly tell this whether the selector or not okay so again I'm just changing it again we will send it selected because I want option widget to be independent of options model right so what we will do here is we will take option index right then we will check whether it's ID is equals to selected option ID or not and this will give us true or false which we will use right so this is how you have to do in future because you know um it will be more and more winners for you just it will be it will create a modular project it will be less dependent on other classes other widgets right and by default definitely I am going to be false okay so this is how you do it you have your if selected based on any option and then you use that here okay so first of all color is selected if it is true then you have to use if it is selected it should be icon background color otherwise it should be white right and similarly with the icon color as well if it is selected it will be color stored white all right 30 and if not it will be icon background color right so we are toggling between this color and white color for Wednesday's lecture or not and we are toggling between background color white or I can background color whenever it is selected or not right so let's run it okay great but this is somehow not working so what should we do can we try I think the icon is bit of a problem see icon is white okay it's not of same color right now I can show you by selecting this item okay let me show you that see I can invite but it's okay you got it what it but it probably is white 30 that's why oh yeah nice okay I did per stick so it is fine yes so this is it we will keep this one selected and as I said you can use block builder you can even wrap this option widget in I can press so that you can handle the pressing of that and then you can add the event and change the layout below so we are going to add this now yeah so let me just show you how so we are going to add these two items and it will be configurable so basically I have one more model class which is a controller this time I have created an abstract class items because sometimes we could have controller other times you will have game pads any other time you will have Mouse's so - so you will have multiple things which come under one umbrella which is called item right and two controllers one type of items I have just done it just for you so that it will be not a problem for you to add exception to this okay and then I have added two controllers or I couldn't find blue controller so I have added psi black controller to both of these items and just I have change the title it's blue ocean and official place - no it's the description okay so this is about the model now coming to the home page let us add one item or sorry not yes I have just kept it for backup because some things I have missed now I might miss okay so we will add item I can switch it so we will create another class what it needs so basically it needs what type of item it will have so it will have item controllers for now right this you can change again as I said you can change it using a block provider so whenever there is change in block provider or provider you can use any of them for State measurement and let me know in the comment section if you need that I will just provide it in the next parts okay right now I am only concentrating on ey CI part so we are passing item okay final item which now this makes sense to create a list of items okay because now items can be of any type that's why I have added abstraction there okay so we have done this now we also need two things which will be our screen height and screen width width because item has to have some screen some height the respect to the screen width and height okay that's why we need them now container let me tell you we are going to use page view and this type of UI I have already created a nine months back so this is the card you can see this image okay let me just open it for you after that and what I will do is I will go to that dribble story-driven shorts so that I will be you can see here I've created this card the image will come on top okay but this tiny ways will come in the center so we will do that but what I want to say is I already have created character card background clipper okay you can find it in this file which is in Despicable Me characters app okay so this is the character card background clipper which is being used here and it's already defined completely for you you can just copy it as I have also done the same thing okay so this is the UI okay this I have already done you can go to that video after watching this one so you can just search for despicable characters I have created two parts there is a second part as well for the description screen okay so much about this coming back to our original work that we are doing today okay so this container basically we are going to use so whatever I said I copied that file exactly here and it's looking like this oh I am NOT going to use exactly this clipper I'm going to use this clip only and I have created another item card shape okay you can create shapes using clip method so I have used get outer path and return that clip method here itself okay it works the same way as it works for the custom creeper for container okay but what is the difference materials have elevation right and in our design this has elevation but in Despicable Me characters it didn't have elevation so oh nothing much to do you have treated your path you can reuse it you can delete this file and you can reuse it directly here okay so yes now coming back to here it will be face builder a page view dot builder okay because we want to scroll and be bound that snapping effect so what item winners will have item builder will have two items right now basically two controllers okay so I'm just writing the returned and then I will be returning items widget okay based on control based on the controller what it will have so it will have item this will have items probably yes or we do one thing we don't create another widget we will do everything here itself it will not be much thing to do okay so it is a stack to make a stack basically now before using stack page view builder if you have not seen it I have created that video you can go through it I have explained there as well but you can have a view of both fraction which will be very beneficial for you so basically it will be a controller and then we will create a pH controller and that will have viewport fraction as 0.75 let me just check it's seven okay so it will be seven right then in the stack so a stack will have two children first will be material as I said okay so this material will have a shape which will be nothing but item shape okay that I have created now what will be the width and height of it so now we need to know according to screen width and height this card's shape will be defined okay so we are going to use just let me copy that yeah I am copying the spin and height width and height okay and this is screen width and it screen height it is 65 percent of your screen width so it is really it is actually relative to your viewport fraction it will be somewhat lesser than your viewport fraction viewport fraction is nothing but the space given to each card okay of this page view okay each element of this page right after this we will have image or else it right and that will be coming from you know it will come from controller sorry items dot items index dot in his pocket and since it's so it doesn't have that so we cast it to controller and then it will have that probably yeah it has that so what you can do is now now this raises questions right so what do we do is you can have this field here right here itself which will be final in each path okay and it will be string titled now this image path you need not could define anymore probably this will work so I don't know let me just figure it out abstract class final variable must be initialized let's in each like that so yes now what we need to do is we can Paul super an image part will go in there if that's what that has worked so now you can see oh we need not to cast right that's what perfection is about right okay so this is a means dot image dot I said an image path I have passed in now let's see the output okay everything is failing that's perfectly fine because I will tell you why this view is by default the axis of that is horizontal okay now you are giving a scrollable horizontal element in a corner you need to specify height of it that's why we will wrap this in a sized box I will not use container because it will be overkill we will use just size four because we just want to have a height that's it and what is the height of that and we'll just take it from here okay yep and okay no problems no problems the screen what is that you know such method struggles okay okay okay or we have probably not passed a bit tonight yes oops oh where is that oh yeah I have added it a wrong place it will be somewhere else right after some gap okay so basically we are in a column right right I added in a wrong place by mistake okay so now we have passed in height and width we have these controllers right right right that is perfectly fine with us okay we will come back to items widget we can see that material is there but no elevations will add elevation and now you can see the elevation right of that now what we will do is okay this thing is coming from image okay it's not my fault it's coming from image okay we need to give some size to it right so it is taking complete size so why not reduce its size by using padding widget okay it should be 16 so that it's it's having padding from everywhere it should be 32 perfect now what we will do is we will align it so image dot asset we will use a line so why we need alignment because you go here inspector if you select this image it is this thing right it is taking this now so we need to see this padding widget this is the thing right we need to align it in the stack okay so we are going to use alignment dot okay this time it will be dynamic alignment so I will use zero zero point one and it has come here we will use minus zero point one because then it will be good to add two things here okay then I think it's almost you know you can scroll just one error so this error is because page view has its own item count default value so you have to give items dot length here so that it only builds two items out of the box right great so this is proper gap also okay we can actually increase the gap by reducing screen width okay so you reduce this you will get the gap okay and similarly you can also reduce this you know you cannot do that if you do that the there will be too much you can say closeness okay so but what we what if we use container and try to add our margin let's learn that also symmetric Oregon to ten okay great it is heading bad but but this has issues you see this is cut down because each item is now having issues so what we will do is we will not use a container or padding a margin here we will add somewhere in this stack so we will wrap this in a container and probably try with having margins here yeah that has worked so you can do this too much gaps will be there okay that is this much is fine and we can scroll through yes that is fine you can use many more things here you can basically use snapping and all in your page view so if you do page snapping true then you see it's light it's like this if you is called half it will not be scalded it's like this so if snapping is this thing right now we are done with this now we need to add one more copy of this but this time it will not be image it will be called up right and we'll have to text here you can also use as I said you can use rich text here but I will just use two texts to just quickly finish this off okay and this text will be controller dot sorry not a controller it is item dot title okay so now you have this thing so probably controller will have these things also right and if anything is specific related to controller has to be added you can add it here right now it is the case that we need both these items here okay it's just a you know it is not that hard to understand this thing if you have worked a lot in projects you can understand that abstraction is very key or process so this is just a section probably yeah that is it if you have something extra and controller you can define it here item is just a common functionality that it has common features that that it has so items index dot sorry title and then will have second thing as description okay it's time for weight again as I said I have not using correct fonts this time okay font size will be 20 yes one thing since I have copied everything means I have copied that the shape so you can go through that video I have explained which point is taken wire so you can go there and learn about it it's not a point to repeat these type of things because I don't like something to be repeated in my channel that's I teach only those things that are new and that's it so we can reduce the size to 16 probably we can make it 500 so it is yeah this is great column we can add cross access alignment okay now we just need to align it again so I will just align it accordingly it will be zero but it will be zero point nine let's try with that okay it is not coming so okay let's see what is the height of exhaust of all so what it was overall his height of it mmm right daddy so why that it's not coming should I try it son left what does so image has gone but not okay now so let's remove this alignment if it is not working at all and then let's move this also because I have another idea we can use position we are in a stack widget right so position is far more better than this scenario we can have bottom 0 or 10 and then we can have left so it will be 32 it will actually help us in giving a position in padding also right so I will use 40 that's it the right so if you scroll it you can do it like this now one thing left at least yeah this bottom part is left but before that let us search for ps5 icon I will just do it in front of you PS sorry PS logo so it will be something like this I will just copy it this is how I do I know it's illegal but clear what to do man save images it's registered so I'm not going to use it what I will do is I will go to tools select transparent I will use type as sorry uses right it's not filtered by license that will be great okay and it should be okay let's see this one it's again withstood so can we use that I don't know okay let's let's use that man okay save images it will be going into our ps3 logo file log I have written by mistake okay so we'll go here let's rename it okay fine now where are we going to use so you have to go to this design and you can see that psi ton is there it is here okay so we will do that and where and how so it will be again a position widget but this time it will be having image so I'll mostly that much email dot a set it will be s X image icons PS logo dot PNG okay so this is how it is its opacity color black with focus it is 0.5 0.4 I will just check how it looks okay and then we will change opacity size of it so basically width will be 50 it will be 50 and right now we just see where it goes in the screen it is here so we are going to move it extreme right by using position widget and right will be zero top will be 50 perfect right can be 20 what elected little perfect and now we will have the capacity with 0.53 oh god 1 great that's it so now we are going to do this thing so this is going to be a live coding section where I will show you how to create this ey ok so I'm heading to home page again and after items widget we will need a space special and at the bottom I will need a size box where will be height it as 20 now why I am doing so so there is this gap and there is this space which is unlimited we doing about it and bottom bar should come at the bottom so now in between there will be a bottom bar and we will have selected index which will be zero right now okay so this will be the value of which item in the bottom where I selected this one this one or any other item then let's create a straight rest widget right now okay we will need to have this feed now in this container we need to be able to specific hi to it which can be 80 like I don't know what will be the final height we will see how it looks then actually this should be a clear container wrapped with clay container because it's a new morphic design at least we can make a new movie design here it looks like that so we can do that then in the clay container I will set height as 80 I don't know whether we should give height to this or not let's see that also then color of course it will be white right and then curve type it's not needed yeah spread can be doing 10 it can be 20 let's see how it looks and in this container um probably we don't need container now we will need to throw here so that we can air add multiple items so each item will be called as a bottom item or bar item so we will name it as bar item de as of now and this per item will have icon and factor or text anything you can take okay so icon will be icon data okay this will be sorry not this way it should be I can store and title will be oh right okay now let's create another state rest widget which is power item okay and now meanwhile let me start the emulator again so that we can directly run the application okay so this bar item is nothing but a row again it will give error right now I think yes it will get so why don't we add I can data icon and stream title right okay so while we um yes it will be item item color will give based on whether it is selected or not just hold on calls at this time okay then title also we will give only when something there is there or not so right now we will consider that something is there so text will be our title okay let's see what is the output of this if we add four items right so second one is profile and the person third one is settings and this is bookmark okay settings you can say wishlist so um right yeah we have added four bar items now let's see the output outlooks probably we also need to give some padding to this we need to give some padding to our bottom bar so that it takes some margin from left and right as you can see in the design some left hand left hand right margin is there right and yes before what to give border-radius which is ten probably okay so adding 16 symmetric result right let's see about its output of it and we will play with this thing and why don't we have is selected field here which and let's see what happens okay so okay it's it looks like this what is this space okay let's run it again yeah so padding is working and this row should have main axis alignment as a space between so that they have some space in the okay okay we have we have this radius okay so what we need to do is oh we can decrease the height of our clay container and we can give it more depth yeah so now we can see properly and from bottom we can give 30 so that we have something more visible and from left and right side we can have more padding which looks correct now and also these items size box I would say there should be some gap between these items as well right anyways it will be added so why don't we give a space evenly so that there will be gap between this edges as well as each item so all of thing all of the things are now in center right so things are easier now but before that we need to add a vertical line divider also so we have this vertical divider and color of that will be item background color what I feel like that so it will be weight it should be so it up it was I can background let's see how it looks yeah so this is a big I would say divider we don't need that much so anyways or one more thing we have forgotten is this itself is a click on dinner as well and it has some different height so what didn't you need to do is it should have beam wrapped in a padding so that the items are you know have padding and they are in center something like that yeah so they are now in centers probably we have too much height of this this looks great okay but there is not much space anyway the space will come in between these items when one of the item is selected so space will come automatically but still I think we need size box also here the reason being it is very easier that I I need this space I cannot deny this space okay so I need this dead space so size forks the width then else well is at the end I need this yeah this is needed of course you will get this so what you can do is now I would suggest you use a fitted text here a fitted box that would be much appreciated because mmm freakin box is not looking so okay what can we do then we can increase the width of it we can reduce the padding then it will help still okay it looks good actually oh yeah we are taking too many things under consideration right now so let's why not be handle first of all our each selected things because that will reduce the pain that year unnecessary we are dealing with this okay so what I would say is we have to decide whether this is selected or not right so we know what is the selected index right and we know this has index as one so what we will do is is selected feed will go L selected index equals to zero and similarly we will do like this so for this it will be 3 so if selected index is 1 then if selected value will be true for this for others it will be false right so in bar item we have to take a full value which will be is selected and it will be this dot is selected right and based on that we are going to show is selected if it is true then we are going to sorry if you have to use a derp we cannot use ternary operator if it is selected then we will show the divider right and if it is selected then only we are going to show the text right right okay so um perfect other than this the color of the icon also will change right it is icon background color and this is white so what we are going it what we will do is Oh and first of I guess it's we will dab this in a container as well let's do that in a container and then the color of that container will be is selected if it is selected it will be blue color which is we have defined it as blue below yeah otherwise it will be color starts white right and so this continuous color is nothing but this color for right okay then also we need to mark it as expanded widget so that the remaining of the title takes in complete space of this row right and also we need to make sure that it doesn't get completed space so we will give me an accessor lineman dot mean okay all right okay fine I can put so color of this will be if it is selected it will be icon background color otherwise it will be point okay so let's run it okay okay so definitely be imagine it's some height okay so this is hair size yes I knew it will come somewhere we have not given you know size or height of it so it shaves where is there which visit getting--getting probably it is saying about this bar item where I have use expanded so I should use flexible and flex with as as it says or use flex fit as loose okay and near exists what is this it's a fit flex with a loop and mean excess alignment so let's see yes we can see one item at least what is happening with other items okay we have done so wrong if it is selected then colors white otherwise I can background color right so this is how this looks right but of course we need to add now some bedding and all so we will add that but you have got the idea how it is going to work right symmetric horizontal eight just nice and of course the title text is always white because we are all only showing it when it is selected so we will just give it text style font size also we will try to give it yeah boldness we need perfect and you can see there is one line and fill but this will certainly ink I will have to actually now reduce so many things what I have already reduced I will have to increase them like we added these sized boxes unnecessary we took pressure on us okay so this is good right and yes I will have to reduce this bedding a lot so that this becomes bigger so it is perfect here and now I can also increase this to 60 yeah this looks awesome and now our bar item just need to have border-radius right so it will be from decoration I think okay something wrong okay okay yeah so we are using : should be yes this looks nice right now I hope you are my obedient listeners and always you have seen my previous videos and it won't be difficult for you to select this and see the output okay basically you don't have to do anything you just have to make this as a stateful widget and okay let me do it it's just a small thing so this selected index will not be here now okay we'll have it here defined at 0 right and what will happen is you will wrap this everything one second selected index so you will have to have one method here which will be called on tap so this on tap will be called and you will define it here function or just white on tap and you will pass in what is the index being dead so select it or tab index then or you can say tabbed item index right then you will call set state and you will change the selected index to temp index right now what this will do is this will update the selected index and you are calling in steady state so build method will be called again right and you know of your selected index will be one suppose you had selected this thing it will be born so this will be true others will be false and answer you I will update itself right so something I have messed up this what copied I don't know so we'll copy this and call this method in all of the items because it's needed you are handing type event ID and how you will handle that I am just going to show you after adding all these elements so this is the method that will be called so go to your bar item creator method which will be on tab right and this will be the method that will be called find and then you just have to wrap your container into English and on tap of that you will be calling on tap that's it and this yes um this should work no we are not passing time to item index so what we need to do is we need to pass in tab item index or yeah you will have to pass one here but this is not the way that we do it I just am figuring out whether this this is giving error or not zero probability absolutely this way yes this is right way to do it because on tap requires a method so it should call our method right from here you will pass three two one and what happens is this method is called with these indexes okay and just probably on tap is called and on tap is nothing but on item tab and it will update itself so since we have created a stateful so we have just restarted the application if I click on this this is just normal thing that we have done here so yes so that is the end of this video I will be coming for the remaining screen in next video and as well as if you want I can add block blocks to this just let me know in the comment section and thank you for watching the video if you're not a subscriber already please subscribe to my channel and share it to your friends and it will take two seconds to like the video so thank you for watching again and see you next time you

Channel: Techie Blossom

Views: 18,987

Keywords: Flutter UI, Flutter SDK, PageView

Id: ePx9vv-4rNU

Length: 76min 45sec (4605 seconds)

Published: Sat May 02 2020