How to make Pixel Perfect UIs in Flutter

well hello there and welcome to another video today we will be making a functional UI of a food delivery app this video is gonna be divided in two parts and the first one will make the UI for both the screens and will implement some functionality using the block architectural pattern and in the second part I will implement the drag-and-drop functionality since that video can also act as a standalone video on that specific topic so let me show you the app that you're gonna have by the end of the video so here we have a simple UI at the top we have a menu icon and a little container that holds the amount of items present inside of the car and then we have the title then below it we have a search bar and then we have these categories which can be scrolled horizontally after that we have all the items that we can deliver so when you click on any one of those a little snack bar indicates that the respective item has been added to the cart and then the value inside of the container updates itself similarly I can add even more products so now I'm gonna click on that which takes us to another screen and here at the top we have a back arrow and a delete button and then again just below it we have a title and the whole product list begins and notice how all the products that we tabbed on multiple times aren't and listed again and again instead we simply increase their quantity and then we have the grand total over here and now let me show you the coolest feature that I implemented in this UI which is drag to believe so if I hold an item for long enough it becomes draggable and I can drag this little ghost of our item now as I drag it to the Delete icon the item becomes red and then as I leave it it is deleted alright first of all I will create a model for all our data so I'll create a folder named the model and inside of it I'm going to create a file called food item dot now what does it means to be a food item so I'll create a class food item and our food item will have an ID a title hotel which is preparing it a price and an image URL and the quantity which means the amount of quantity that the user requires for a specific food item so inside of the class food item I will write end ID string title string but double price string imageurl and int quantity then I will create a constructor and I will initialize all of them like this but I'm going to leave this last entry which is quantity and I will initialize it myself so I will write this dot quantity equals one so what we are doing here is essentially we are initializing it by ourselves means that quantity for every single food item will be one initially then we are also going to give our user the liberty to increase the quantity and decrease the quantity so I'll write void increment quantity and inside of it I am going to write this dot quantity equals this dot quantity plus 1 and then similarly just below it alright void decrement quantity this dot quantity equals this dot quantity then I'll write ally again create a class called food item list and it's going to have one single member variable it's going to be list food item food items then I will initialize it like this then I will simply import some data just like that so here you can see that we simply have a variable called food item list which is of type food item list and it's initialized over here and it takes a list of food items forgotten food items and then we have simply passed various different entries for all our food items ok that's it for our model class now before jumping into making the UI I will first create a block and a provider and remember to implement the block pattern will be using dependencies like block pattern and rx dot now it all may seem a little overwhelming but don't worry it's gonna be really easy so first I will come inside of the box but ya know file and I will write block pattern and rx start and I will sync it right now it's time to create a block now creating a block is a bit different then it used to be when we did not used any dependency so let's see how to create a block first I will go to pub toward Earth and in here I'll search for block pattern now we get these two libraries clutter block and block pattern both help us in implementing block architectural pattern in an easier manner I haven't used for a block therefore I could not give an app in on that at least not yet but this block pen library is really great so I'll clip on it and I'll scroll down to this heading called using streams and reactive programming and these just copy some more code but before that let me explain the implementation so in a block pattern we have a block class and a main class which contains the UI so the block is responsible for implementing and manipulating the business logic and the output of that business logic is added to the streams using the same component to know more about streams and sync I would suggest to click on that card so the way you create a block using this dependency is by extending a class called block base and then we create a controller and then we use that controller to get our stream and our sink then we simply make changes to our stream by targeting the sink and adding some values to it now while implementing this of the jig called block provider would become our route widget and it takes a list of blocks and this is where we specify the block classes that we previously defined also you can access the block anywhere in your code just by writing the single line of code and then to fetch everything from the stream we use a widget called stream builder all right so let's start creating a block first I'll create a folder named block and inside of it I will create a file named car text block dot dot so instead of this file we'll create a stream which manages with list of food items so we'll come over to the docs and I will just copy this block class that you see over here and I will paste it over here now I will rename the class name to cart list block and I will also rename the empty constructor now I will rename the counter controller to list controller and the seeded method is nothing but a bait for providing a default starting value for our stream so that our stream is not now in the very beginning so in this case it is set to zero since this tree which is maintained is of type integer but we need to make a stream that manages a list of food items therefore I will replace this end with a list of food item and I will import the necessary file now we have an error in the Seaton method since zero is not a list type value so inside of this unit method I will pass an empty list just like that moving on we have an out controller stream sorry rename it to list stream and I will replace the counter controller and I will change the name of the sink - Lissa sink and I will replace the Miss controller here as well and I will also replace the counter controller here inside of the dispose method as well as I will replace the counter controller with this controller now here's where we define our methods or action or business logic so by default they have this increment method but we're going to remove this and we're gonna create two methods one for adding a food item to the list and another for removing a food item from the midst of food items so right add to list and it will receive a food item and then I will write less sink dot add food item but we have an error that's because we need a list of food items to be fed into the sink since we are managing a list of food items so what I'm gonna do is we will add this food item to our list of food items and then we will get the updated list back to this function so that it can be added to our strengths and to do that I'm going to create a provider class so instead of the same folder I will create a file name and name it provided or dot now inside of this file I will create a class named card provider and I will create a list of food item named food items and initialize it to this which means an empty list and I will also import the necessary libraries next I will create a function of type list food item and I will name it add to list this function also receives a food item and then we will add the food item that we receive to the list that we made and then we will return the newly updated list great now I will do the same thing for removing an item from the list so you create a function of type list food item and I will name it to remove from list and it will also receive a food item and then here I will write food items dot remove food item then I simply return the food items list now I will come back to the block class and over here I will initialize the cart provider class so I would write car provider provider equal start provider then instead of the add to list function every right list sync dot add provider dot add to list and then we will pass this food item as an argument great now I will create another function called remove from list and it also takes a food item and then I will write list think dot add provider dot remove from list food item great so we have our block provider and our model it's time to start working on the UI so instead of the main door tart I will make the block provider budget as the root widget so and remove the material app from here and I will write block provider then it takes a list of block sorry right block I returns heartless block and then I will import the necessary class after that I will paste the material app as a child for our block provider and we'll take a title a home and I will pass the home widget and I will also set the be book show check mode banner two faults before moving any further let me explain why we are not using the bills in a regular manner or why aren't we implementing the block pattern might be implemented earlier in the previous two videos well if you look at the UI the stream builder which listens to the stream is present inside of a ListView and the way in list view works is it destroys all the widgets that are not in the view array at any given moment so for example right now the widgets that you see are built and the widgets below it aren't even rendered yet but as you scroll they slowly come into existence but by this point the ones that are not in the view anymore are destroyed now let me show you what would have happened if you would have used the block pattern in a regular manner okay so here I have an app that uses stream controller to get the stream and I have implemented the block pattern in the way that I showed you in earlier videos now I will scroll down and everything seems fine but when I will scroll up we have a big error and if you check the law it says that bad state the stream is already being listened to which means that whenever this visit is rebuilt after getting destroyed the stream is listened to once more which creates a problem now I'll also try to use stream controller not broadcast which prevented this bad state error in the past and then I will ha to restart the app now I will add one or two items in the car and then I will scroll to the very bottom once again the ListView does its thing and when you scroll up the stream loses its current value and it is set to the default value of zero although this problem could have been solved if we would have just prevented this top title from scrolling but what if you wanted it to scroll in fact I wanted it to scroll and thus we are working with this library now I will create a stateless widget named home and instead of the build method I'll return scaffold which takes body instead of body I'll write safe area child container and then the container would take a ListView as a child then if you look at the completed version of the UI you can see that we have this first half I'm just calling this this portion first half and then the portion below which is is the portion which is very cute in a for loop then I'll create a stateless digit name the first half and inside the build method I am going to write padding and give it up adding and then I write as insert start from ltr' b35 comma 25 and from right and from the bottom I'm just going to keep the padding 0 then this padding will take the column as a child then I'll write children and the first thing that I'm going to write over here is a custom AMPA so I'll just write customer bar and now I will move on to this custom app bar so customer bar is nothing but a stateless widget and then I will return container set its margin to 15 from the bottom then I write child row main axis alignment main axis alignment dot space between then I write children icon I fons menu although this menu is not going to walk then I will write container margin Adam sets dot only right 30 child text and instead of a child and still going to write zero for now then I'll write padding Adam sets dot all 15 and then in the decoration I'm going to write box decoration color colors yellow 800 and I'm going to give I'm going to set the border radius to border radius dot circular 50 now I'm going to execute the flutter run command to see how everything looks so far okay so at the top you can see that we have a custom app bar and at the top right corner we have that card icon that I talked about now the thing about this card item is that it's clickable so what I'm going to do with this is I will just wrap this container with a within you widget and I will write just a detector on tap and I'm just going to leave the on tap and D for now alright so now we have made it a pible as well now coming back to the first object I'm going to write a size box of height 30 you could also use the space at which it to give or uneven distances I just decided to go with a size box so I write so the right size box height 30 and then I'm going to create a member function called title then I'll create a size box a height 30 after that as well so let's see what happens of what goes inside of the title so this title is nothing but a project so I'll write widget title and it will have to return a widget as well so I'll write return row then I will set its main axis alignment to minutes the language ought start and then I'll write children until the children the first children is going to be a size box of width 45 then I'll write column cross axis alignment cross axis alignment dot start then I will pass in children so the first children is going to be a text food then I'll write style textile and I will set its font weight to W 704 is to 30 similarly just below it I'm going to write text delivery style textile and I'm going to set its font weight to W 200 and set its font size to 30 again okay let's ha to load this and see how it looks all right it looks good so after the second size box I'm going to write search bar so the search bar would contain a text field we user can type something it's just going to be a non functional input field so I write widget search bar this also returns a row and I'll write main axis alignment main axis alignment dot space would be children icon icon start search and I'm going to set its color to color star black 45 then I will create a size box of width 20 then I'll write expanded child text field then I'll write decoration input decoration and I'll give hint text search content padding as in set start symmetric vertical 10 then I write hint style textile color colors dot black 87 to give some color to our hint okay so that's it for our search bar now let's start working on the categories so I'll come back to the first half digit and I'm going to write size box height 45 and just below it I'm going to create a member function called category then I will write widget categories and I will return a container at its height to 185 child to ListView then I'm going to create a widget called ListView and this list view is scrollable in horizontal direction so I'll write scroll direction access dot for example then I will write children now I'm going to create a custom widget for all these items present inside of the category is ListView so I'll write category list item and it's going to have a category icon so I'll write icons dot bug report then it's going to have a category name so for now it would be burgers then I will write availability 12 and then every category item would have two states either it is selected or it is not selected so right selected true so let's see how it looks in fact I'm going to copy this paste it over here and I will write selected Falls for this one so below everything I am going to create a state widget called category list item then I'm going to create four member variables so I'm going to write final icon data category icon final string category name final end availability and final bool selected then I'm going to initialize them inside of the constructor and I'm also going to mark them as required okay so let's see how to make this so instead of the build method I'm going to return a container and I'm going to write margin agents that start only write 20 then I'm going to give a padding from ltr' B and I'm going to write 10 10 10 20 then I'm going to write decoration box decoration border-radius border-radius got circular color now this color for any list item would change based on its state so if it is selected it is yellow if it is not selected then it is white so I'm going to write color selected kashama color 0xff f eb 3 - 4 which is the yellow shade that that we want and then we have : colors dot pi which means that for any list item if the selected is marked as true then the color is yellow and if it is marked as false then the color is white then I write border border dot all then the border is also based on this this state so I'll write color selected question mark colors or transparent else : color short gray 200 great and I will set it straight to 1.5 and I'm also going to give it some light box shadows alright box shadow and this box shadow argument takes a list of box shadows so right box shadow color color short gray 100 and I set its blur radius to 15 and give it an offset offset 15 comma 0 and I will also set it spread radius to 5 then this container would take a column as a child so right child column main axis alignment main axis alignment dot space around then I'll write children container as that its parent to 20 decoration box decoration color colors are white and I'm going to give it about a radius of 50 and I'm going to write border border dot all color selected question mark colors you're transparent else colors dot gray then I'm going to write width 1.5 so even the border of the inner container is dependent on the selected state then I'm going to write child icon category icon color colors dot black and I'm going to set its size to 30 then I right size Fox height 10 text category name style textile font weight on BW 700 and I'm going to set its color to color store black and set its font size to 15 okay so now that we have this circle done we have the text done now we need that little line over here so I'll write container margin has inset start from left to right back 0 comma 6 comma 0 comma 10 this is going to be the specific margin it's going to be exact and then I'll give it a bit of 1.5 and a height of 15 and I'm going to set its color to color on black 26 then I will write text availability dot 2 strings since availability is an integer then I'll write style textile font weight font weight W 600 and color to color is black alright so now let's see it so I'm going to hot reload it once again and there we go the first one is yellowish while the other one is not yellowish so what I'll do now is I'll just paste in some data for all these false category list items so you can see that everything same still the entries do which are different for example the first one is category name Berger second one is Pizza third one's role fourth one is something else and fifth one is something else alright so that completes our first half now I'm going to return back to the home widget and below first job I'm going to write size box of height 45 okay so after the size box I'm going to return an item container because all these items that you see are nothing but an item container widget so I'm going to return that and I'm going to return them by looping through the list that we previously created so I'm going to write four four item in food item list dot food items so this will loop through every food item present inside of the food item list and then I'm going to return an item container and I'm going to pass this food item through the item container okay now just below this I'm gonna create a stateless budget called item container and I'm going to initialize the food item first I'm going to create a variable called final food item food item and then I'm going to initialize it inside of the constructor and mark it as required then instead of a bill done I'm going to write just a detector since we want some action to be carried out whenever an item is start so I'm going to write gesture detector on tap and I'm going to leave the on tap empty then instead of the child I'm going to write items and this item would take a hotel item named item price item URL and left aligned now what is that left-aligned I'm going to explain later so I'm going to first write instead of the items I'm going to write hotel food item dot put I insert the item name I will pass the food item dot title then item price food item dot price image URL food item dot image URL now if you look at the finished version you can see that items are aligned alternatively so I'm going to right left aligned food item dot ID percent to equal equals zero question mark true : false so we have basically made a left align argument and be compared with the food items ID remember every food item has an ID and we divide that by two in order to find even and odd numbers so a food item dot ID percent to equal equal to 0 which means that given food ID if an even ID or is an even value then we set the left align to true otherwise we said the left align to false which means that all the even element would be left aligned and all the odd elements would be right aligned so let's see how to do that alright so I'm going to create a straight line vignette called items I'm going to create a constructor and I'm also going to create several member variables so I'll write final bool left aligned final string image URL final string name final double item price and final string put up then instead of the constructor I would write at required this dot left line this dotted me to RL there's your item name since what kind of price and then shot hotel and I'll mark all the others as required as well then instead of the build method I will first create a variable called double container padding equal 45 then I will create another variable called double container border radius equal 10 then I will return a column children and the first child would be a container then I'll write padding agent says dot only left left aligned question mark zero : container padding and then I write write left aligned question mark container padding : 0 then I'm going to pass column as a child for our container and then children then I'm going to try to container it's gonna have a width double dot infinity height of 200 and then I'm going to give some box decoration so right decoration box decoration border radius what radius not circular 10 then I'll write child flip our right order radius border radius or horizontal left now again we want variable border radius based on the alignment of our items all right left left line question mark radio dot circular 0 else radius of circular container border radius similarly our right right left aligned question mark radius of circular container bottle radius else radius of circular 0 again we are targeting the border radius of horizontal direction and if our element is left aligned which means left aligned is true then from the left the border radius would be 0 and for the right border radius would be equal to container border radius and if left aligned is false which means our item is right aligned so we'll give it some body radius from the left and we have passed 0 as border radius from the right all right now for our trip all right I'm going to pass a child image dot network image URL fit box with dot fill okay that's that now I'm going to come out of this container and I'm going to write the second child of our column so I'll write size box height 20 then out of the size box I'm going to write container adding agent set start only left left align question mark 20 : 0 right left align question mark 0 : 20 so again this is the same thing so first let me run this and show it to you you can see that we have all these items being rendered alternatively so now coming back to our code I'm going to pass in a column as a child for our container and then this column would have a cross-section alignment cross axis alignment dot start then I'm going to write children you know children expanded and instead of the expanded I will write child text item name style textile on weight font weight W 104 size of 80 then I write text and in this string I'm going to write / dollar dollar item price style textile on weight on weight or W 704 size 18 okay so this is done then the second children of this column would again be a size box of height 10 then I'll create an align visit I'll write a line alignment alignment dot center left then I'll pass in a rich text as a child then I'll write text text fan style textile and I'll give it some texture and so I'll write color color straw black 45 and font size 15 then for the children I'll write text fan text by and give an extra space over here then I'll write that span text Hotel style textile font weight font weight W 700 okay and then at the very end after the align visit I will try to size box height container padding so that's it so let's reload this once again and there we go you can see that we now have the complete UI okay so the static UI is complete now we need to make it dynamic so how to do that well the first thing that I'm going to implement is I'm going to pass in some action to carry out whenever the news items are tapped so I'll come insert the item container I'll come to this gesture detector and instead of an on tap I will right Add to Cart and I will add this food item now what is this food item well this food item is the object of the class food item that we are currently receiving from the for loop so I'll right Add to Cart food item and then I'll create a function called add to cart food item food item and now all we have to do is add this food item to our list first we need to get our hands on the block so I'll write final cut list block block it will block provider dot get block and I can also write the type of block that we are receiving so it's cardless block so this this is a handy method of obtaining the block anywhere anytime in your code so insert the add to cart' now I can write block dot add to list food item now if you will tap on any of the food items that food item will be added to our list but we need some UI changes to indicate that we have added it so I'm going to use a snack bar so just below the Add to Cart I would write final snack bar equals snack bar and then in the content I'll write text dollar food item dot title is added to the card then I'll write duration duration milliseconds 550 now how to show a snack bar so I write scaffold dot off context dot show snack bar and I'm going to pass the snack bar variable ok now let's test it out so I'm going to reload the app and I'm going to tap on it and there we go we are now able to add things to our cart but we need to make changes to this card budget so that it updates as we add something to our list now how to do that well as for that I'm going to scroll down to customer bar and I'm going to cut this gesture detector and time and we're gonna have to make use of string builder now I know in my previous videos I said string builder cannot be used in sort of stateless budget turns out I was wrong shrim builder can be used and is going to be used so I'm going to write string builder stream block dot list stream but hey where's the block so at the top of the visit built I'll write final cardless block equal block provider get block catalyst block this is the same line of code that I talked about earlier so now the error goes away and then I'm going to write builder context for my snapshot and then remember every single snapshot in fact every single snapshot or data that we are going to receive is of type list so we're going to create a variable called list food item food items equals snapshot data and as a precautionary measure I'm going to write int length equals two food items not equal to now question mark food items dot length l0 so if the food items variable is not equal to null which means that snapshot is not null then we said the length variable to the length of the food items list otherwise we set it to zero then I'm going to write return by just a detector and I will pass in a length I'll pass in the context and I'll pass in the food items list and just below here I write gesture detector build gesture detector and I will receive all the passed arguments so I'm going to write int length build context context list food item food items and now I'm going to paste our gesture detector over here so I write return and I'll paste at all okay so instead of the text widget I'm going to write length not to string and that's it now if you HOT restart it again and click on one of those you can see that the the card actually increases the number actually increases and even if you scroll down and you tap on something and then you come back the number does increases and everything works just as it's supposed to be now we need the user to be able to actually see that what is present in his card and manipulate the card so the only place which seems suitable is by tapping on that number so insert the gesture detector I am going to write if length is greater than zero navigator dot push context comma material page route builder context card else return so if the length is greater than zero which means that the card does have something then we allow the user to be able to move to the card otherwise there would be no I when the user taps on it okay so now let's work on our cart so just over here I'm going to create a file called card art now inside of the card or dark I'm going to import material toward art and I'm also going to import Cupertino dot dot and then I'll create a stateless budget called cart and instead of its build method I'm going to repeat the same line of code to get the block then I will write list food item food items and the root of her widget tree in this file would be stream builder so I'll write return stream builder stream block dot list stream builder context commerce snapshot if snapshot dot data is not null food items equals snapshot data returned scaffold body safe area and instead of the CP I'll write child card body food items so first I'm going to create a stateless period called card body and it will receive the food items that is passed so I'll write final list food item food items and then this card body will receive the food items list okay now instead of the build method I will write return container padding agent set start from LTR be thirty five forty twenty five zero then I'll write child column children and over here the first child would again be a custom Abba now I will create a stateless video named it custom Appa and I'll write final card list block block just repeat the same line of code to get the block and instead of the build method I will return a row me next is alignment me next is alignment dot space between children and the first children would be padding so write padding padding Const as in sets dot all 5.0 child gesturedetector child icon and then I'm going to write Cupertino icons dot back and I'll write size thirty and on tap navigator dot pop context so this is basically responsible for returning the user to the main screen once it's clicked then just below it I'll write gesture detector padding as in sets dot all 5.0 child icon Cupertino icons totally and I'm going to set its size to 35 and then for our gesture detector I'm simply going to leave this on tap and be okay so that's it for our custom app part now I'm going to write title and it will be a member function so just over here and we visit title return padding and then I'm gonna write padding as in set start symmetric vertical 35 so this will give 35 padding from top and from the bottom then I'm gonna write child a row main axis alignment main axis alignment dot start children column cross text alignment cross succeed I'm in dot star children and then I'm gonna write text my style textile with a pawn weight of W 700 and set its font size to 35 then below it I'll write text order set its font weight to W 300 and found size to 35 so that's it for our title then I'm going to give an expanded projects all right expanded flex one child food items dot length greater than 0 question mark for item list : no item container so if our food items contain something then we show a food item list otherwise we show our no item container so false let's create a new item container now no item container is nothing but a container so I'll write container no item container and it returns a container back so right child Center child it text and the text would simply be no more items left on the card and then I'll write style textile give it a pawn weight of W 600 and set its color to colors dot gray 500 and I write font size 20 great so now let's see what happens inside of the food item list so I write list of you food item list written list view dot builder item count food items dot length so we are basically passing the length of our food items lengths to item count and then instead of the item builder I right context common index return card list item then this card list item would receive a single food item from the list of food items so right food item food items index so let's see what happens inside of the card list item now I'll create a straight list widget called card list item I'll create a single food item by writing final food item food items card list item then I'll initialize it inside of the constructor so I'll write card list item add required this dot food item and instead of the build method I will simply return of container and I will set its margin to 25 from the bottom and I'll write child item content and I will pass in this food item just like this now I'll create a stateless budget called item content ok so inside of the item content I will again create a final food item and I'll write add required this dot food item inside of the constructor now here's where the UI for our list item begins so inside of the build my third I'll try to return container child row I set its cross access alignment to cross axis alignment dot Center and main axis alignment to mean axis alignment space between then I write children clip alright border-radius border radius or circle of five and I will give it a child image or network which takes food item to be need URL fit box the Dartford height and will give it a height of 55 and width of 80 then I will give a rich text widget and I'll write text text fan style textile and I'll set its font size to 16 color to color install black and font-weight to w 700 then I'll pass on the children and I'll write text band text food item quantity dot two string text spam text X and text fan text food item dot title then over here I'll write text dollar food item dot quantity into food item dot price style textile color color story 500 and font weight on V dot W 400 now let's hot restart it once again and but there are several problems with this approach for example go back to main screen and I'm going to tap on the same item again and again and then and let's go back to cart and see what happens there are different amount of same item we don't want that to happen we want to group them together and we simply want to increase the amount of quantity so to do that we need to make changes in our add function which means that we need to make changes in the way we are adding items to our list so for that we'll go back to catalyst blocked or dark and I will come inside the add to list method so over here the only thing that we are doing right now is you saying food items dot add and they are returning the food item but we need to do much more so what we will do is whenever add to list method is pregant so which means that whenever a new item is selected we'll company the ID of that item to all the items that are already present inside of the list if the ID matches then we increase the quantity of the respective food item or else we simply add it to our cart now let's see how to do that so instead of the add to list as simply remove this line of code and I'll create a variable bool is present equal false then we want everything to happen if food items dot length is greater than zero which means there's something present in our lives to be compared with so I'll write if food items short length is greater than zero and inside the else part for the safe and simply write for items dot add food item which means that if the list is already empty therefore there is nothing to compare the current item bit so I'll simply add it to the whole list now instead of the TIF method I'll write a for loop and I'll write int I equals 0 I less than food item short length I plus plus then instead of the for loop write F food items i dot ID equal equal food item dot ID then instead of the food item ID I'll write increase item quantity food item for example if beach barbecue burger is already present inside of the list then we don't want to add it again we rather want to increase its quantity so that's why I would increase qty food item and then Alma the its present equal to true and then I'll write break then instead of the else part I will simply write is is present equals false now after the fall loop I'll check the value of is present so I write if not its present which means that if the current food item is not present in the list so we add that to our list so I'll say food items not add food item and the else part of our if is already covered we only need to make the increase item quantity so in the very bottom of this file I'll write void increase item quantity it receive the food item and then it returns food item dot increment quantity remember this increment quantity is a method that we created the very starting of the video while making the model and I'm also going to create a decrease item quantity which we are going to need eventually so I'll write war in a decrease atom quantity food item food item and it returns food item dot decrement quantity now we are not going to be adding the functionality of deletion in this video it's all going to be done in the second video so that's it the addition should work now now I'll hot restart the app again and I'll check on this item again and again now go back to cart and there we go instead of being listed individually they are all grouped together now you can see that even the prices that you see at the very right it's calculated correctly okay now let's work on the bottom navigation bar so I'll come at the very top of this card or tart and the inside of the scaffold I'll write bottom navigation bar bottom bar and this also takes the list of food items so I'll create a straight less rigid bottom bar and I'll write final list food items and I will initialize it over here notice that we haven't used any curly braces that's because I am passing the food items value directly rather than passing it in the form of a named argument so instead of the building method I'll write return container margin agent said start only and I'm going to give a margin from left of 35 and from bottom of 25 then I write child column main exercise main exercise dot min and then I read children total amount food atoms then I'll create a member function total amount and it takes the food items so so I'll write budget total amount and it takes the list of food item food items then it returns a container margin agent sets dot only write tan padding as insets dot all 25 children row main axis alignment MINIX assignment of space between children text total style I will give it a style and I'll write textiles font size 25 and unset its font weight to W 300 then I'll write text dollar dollar return total amount food items now what is this return total amount it's simply going to be a function so we're here I'll write spring return total amount it this also takes a list of food items then I'll write double total amount equal equals zero point zero then I'll loop through the food items list that we are receiving so I'll write for and I equals zero and then send food items dot length I plus plus and then total amount equal to total amount plus food items I dot price x four items i dot quantity so over here we are simply looking into our card list and we are multiplying the price the dick quantity of the food items for example if there are four puppy two burgers so we are multiplying four with the price of peach barbecue bought burgers then I'll simply return total amount dot tostring aspects to since it's a double value therefore we wish to limit the value up to two decimal places when I write style textile on weight on V dot W 704 size to 28 okay so the total amount is done now I'll hot restart the app and we go now I want to have like a little divider here so I'll write divider height one color color short gray then I'll write persons and this will also be a member function so this below it I'll write container person's return container margin as in sets dot only write ten adding I just said start symmetric vertical thirty when I write child draw my next assignment minutes is a language space between children and the first children would be a text so I write text person's style textile and circuits font size to 14 and fawn weight to double 700 then I'll write custom awesome visit now this is a custom widget which we will make in order to replicate this little portion that you see in the final version of the UI so just over here I'll create a stateful widget for it custom parts and project and in here I'll create a variable called n number of persons equal 1 and double button width equal to 30 honestly I saw this on the design and that's why I want to replicate it but I don't really found much use of it on the total amount therefore it's not going to be manipulating the total amount it's just going to be there for the sake of replicating the UI so instead the build method I'll write return container margin as it sets dot only write 25 decoration I write Box decoration border border dot all color give it a color and then width 2 then I'll write border radius border radius not circular 10 then I'll write padding as in sets not symmetric vertical size then I write it then I set its width to 120 child row main axis alignment main axis alignment dot space even the children now over here I'll create a size box of brit underscore part in length height underscore button width and right slide button and interred with child I write text - style textile font weight font weight W 600 font size 20 then inside of the on price method I will write set state if number of person is greater than 1 number of persons - - so this button is basically responsible for decreasing the number of persons now we want to show the current value of number of parcels I'll create a text widget which takes in a number of person dot - string and then I'll give it some style so I set it font weight to W 604 is 220 now copy this size box and I'll paste it over here and I'll simply change the set straight from number of course and two plus plus and saying is this - two plus alright now I'll come back to the build a method of boredom bar widget and I'll create another variable called next button bar that you see here in the final bit so I'll create a function called container next button bar and it returns a container and I'll set its margin to 25 from the right and I'll give it a padding of 25 then I'll write decoration color box decoration color color 0x FF s eb 3 - 4 and i right border-radius bottle radius got circular 15 then I'll write the child row main axis alignment main axis alignment dot space between children and it takes two children first one is a text 50 - 25 men style textile on weight W 800 point size 14 then I write text next style textile font weight font weight dot W 900 now I'm going to hot restart the app and there you go we have completed the UI portion and we have even completed the functionality portion the only thing that is left is drag and drop which I'm going to show you in the next video so that's it for this video I hope you liked it and make sure to click on the next video in order to implement that cool functionality and complete your UI by actually implementing the delete functionality the code for the UI is present in the description below and make sure to hit like button if you liked the video and comment and of course shape the people you know share to the people who you think would be interested in this content also if you're new and don't forget to hit that subscribe button alright then see you next time

Channel: The CS Guy

Views: 98,125

Keywords: flutter, flutter tutorial, food delivery app, food delivery app ui, bloc pattern in flutter, rxdart, flutter tutorial for beginners, ui design, add to cart in flutter

Id: wWH66F9y63U

Length: 51min 4sec (3064 seconds)

Published: Fri Jun 21 2019