Flutter E-commerce App With Backend | Food Delivery App | Part 1

so foreign so do hello everyone assalamualaikum welcome to  a complete flutter app building tutorial   here you will learn how to build  an e-commerce app for food delivery   and this app would be both for ios and android and  this app would also come with a complete back end   and why build this app because you want to master  flutter framework because you want to master dirt   programming language and back-end framework  and you also want to get a job well after doing   this course you will get much better or master  flutter framework and dart programming language   if you're new to flutter or if you're coming  from another background or another programming   language or if you are a fresh college  graduate this is the right place for you   because this would be a complete  app and if you're looking for a job   right after finishing this tutorial you will  have some things heavy to write on your cv   here we'll cover some major features while first  we'll learn how to show products based on category   then you will learn how to build shopping carts  place your order track order after that you'll   also learn how to build user profile and pages  like sign in and sign up pages and we'll also   see how to build user address location from  google map and you can also build zone based   order for users and the whole app would keep track  of user authentication some other major features   will cover firebase notification and we'll see  how to do payment and payment sdk like paypal and   then from the back end you'll also learn how  to upload new products and see order details   and update order and as well as you'll also see  user profile on the back end while in tutorial   part 1 we'll have 12 hours and in 12 hours  we'll cover a lot of useful ideas first we'll   start off by building four complex ui screens  and for building those screens we'll be using   stack and position widget as well as different  slivers we'll cover sliver wrappers and sliver   box to adapter and one of the complex ui would be  animated page view where we'll see how to scale   up scale down and animate the position and right  after that we'll learn about our app architecture   which would be very useful further down the  road when you are going to build a new app   and here we'll cover api client repository and  controllers and we'll also learn what are they and   how to build them and we'll see their connection  with each other and after learning this concept   we'll see how to load them in the dependencies and  we make sure that our dependencies will be loaded   when our app starts and then we'll go ahead  and start working with building models classes   with the json map and the list and i know  that this is a very scary concept for   flutter beginners so here we'll take it slowly  and cover things in detail step by step and once   we are equipped with these ideas then we'll go  ahead and build our first product controller   card controller and we'll learn how to process the  related data and throughout this first part we'll   also cover about responsive layout so that also  means that when we run our app on ios or android   different devices they would look exactly the same  but at the same time they will have proportional   size so right after this tutorial part 1  you'll definitely get better at flutter and   dart programming language while in part 2 we'll  have 12 hours and by 12 hours you will finish   8 complex ui screen and after this you'll really  become a hero in flatter front end development   and over here you'll learn how to build complex  models classes and working with json map and list   another major feature would be working with  google map and how to interact with google map and   save user data and then you'll learn how  to build location user and auth controllers   and how to process the related data so  we'll learn and we'll focus on how to   pick up user location based on user tab and then  you'll learn how to keep track of user orders   and show the user related notification from  firebase and you will also learn how to set   up paypal payment using paypal sdk and all of  them would be also covered in the backend for   user management another major feature would  be zone based user location and service   so by the end of part two you'll really master  dart programming language and in tutorial part   three we'll have three hours and here we'll  take care some of the platform specific issues   like notification for both android and ios and  we'll also see how to turn this mobile app into   web app and this is where the flutter shines  okay because flutter once you write code in one   platform pretty much you can run it everywhere  so you just you just need to know how to build   a responsive app and at the end we'll see how to  publish this app in the app store hello everyone   so let's get started well this is the starter  code that hopefully you have downloaded from   the website and if you download and install it you  will have a basic ui like this and a basic project   with this project structure where you will  have your assets of fonts and lots of images   all right and then you will have your lip folder  and within it i have included the color the colors   that we are going to use for our app okay the  basic colors and then we have this main file   and of course this is once again the most basic  uh main file that shipped out of flutter project   directly okay so we are not going to use that  okay well now first take a look that what we   are going to do uh for the first hour or two  i'll definitely would be building our ui first   okay so while over here i have this ui this ui  is scrollable and of course you can click them   or you can go to a new page and come back and of  course so we have this a bit different ui than   over here this okay all right so and  over here i have this pageview builder   or slider actually if you understand  it the simple way and we'll have our   sign-in page where it asks you to go  ahead and sign in things like that   but we'll talk that talk about the later so first  work on the home page okay so this is the home   page that we want to build and our homepage will  have header section and the main section over here   and the footer section okay so this is the page  that we want to draw first okay well to do that uh   we need to first build some uh dart files okay  all right so over here inside the lib folder   i will create a directory and in this directory  i'll keep all the file for our home page okay   and over here i'll create new dart file okay all  right so let's go ahead and create a new dart file   well this dart file name would be main food page  so let's go ahead and name it main food page the   dart well now this would be a stateful class okay  so let's go ahead and create a stateful class   and i'll call it main food page and then we need  to import some of the dependencies or libraries   now i call it main food page because it will hold  this header and this body section okay all right   so uh that's about main food main food page so  main main food page would contain this header and   this body section okay well first thing we want  to do we want to go ahead and draw this header   okay all right so for this one actually what i'll  do i'll go ahead inside this container and inside   this container will try to directly draw this  header section well for now uh this header section   would be static but in future we'll read this  header section this information from our database   but anyway so i have this container over here well  i have this container over here so within this   container i'll declare over here another child  so let me minimize this okay and over here the   child would be another container now let's take a  basic uh structure of this container what we want   to do definitely this is a row okay so we'll  have row and within row will have two children   this one and this one now this row the first  children or the first child this one would be once   again in column where you will have this letter  the country name and the place but within column   will also have another row because this two items  here the text and the arrow okay so once again   first section would be the row okay so that's what  we'll do so we'll go ahead and over here declare a   child and here we'll call it row and here we'll  have children well now as i said that within this   row we'll have two section this item and this one  right so well this one once again a column so what   we'll do we'll go ahead and declare column over  here so do a column and we do children over here   okay well that's for this one and then we want  to do this one as well but now this is simply   a container okay so we'll go ahead and create  a container for this one let's go ahead and do   it so over here within the row i'll go ahead  and declare a container create a container   and the container will have width and  height okay so for now say width is 45   and height is 45 okay all right and uh i'll start  with this one because this would be more simple   and it would be easy to understand okay all  right now over here i'll because as you see   we have this border so we want to decorate  our container with a background color okay   so now over here that's why i would use decoration  and we would do box decoration okay all right   on the definitely box decoration will have border  radius so that's what we'll go ahead and do   okay and we'll call border radius dot circular  and over here say border radius 15 everywhere   okay all these corners all right and now over  here we'll have also color for our container   so that's what we'll do now over here we do colors  dot um save blue for now okay definitely we have   to change them in future soon okay all right  so that's the basic structure and over here we   want to put just randomly to text okay to do  country and then over here we do another text   say city all right okay so far so good but  of course if we go ahead and run it it won't   run we'll still have this default one we can go  ahead and check that and we know that application   restarted why because we need to come over here  and call this main food page from here okay   so what we'll do we'll go ahead and delete  this section and i'll just simply call here   main food page okay all right and it would  connect and import the dependency immediately   make sure that you have this dependency all  right and to be clear i'll just simply go ahead   and remove this over here and we also don't  need this section anymore okay so now it's   much cleaner all right so now we'll go ahead  and run it and see how it looks like um yes we   have a pretty ugly looking screen but yes some  of the thing that we wanted it is still there   right uh well the first thing i want to remove  this one debug icon because i don't like it   okay so we'll set it debug show checked mode  banner to false and after that hopefully it   should be gone and now it's gone well now we have  this black background or black screen just because   you are or we are using container over here  directly uh inside the build method so what we   could do we could just go ahead and wrap it around  another widget and that would be scaffold okay but   for this one i'll just cut this one and here i  would do scaffold okay and within it will return   body and inside the body we'll put this container  and hopefully we'll see much better screen country   and a name all right well you may wonder  what is this container for well in future   uh well let's take a look at this current  app over here if you scroll this so you   see the head section the color changes  so in future as we scroll we want the   head section the color should change okay and now  for that purpose we want to put something here   a scrolling parameter okay so that's why we  have this one but for now it's not that useful   so that's what we want to do in future so  that's why we have this container over here   all right okay so now let's go back to our app  over here all right so that's okay all right   so now let's go ahead and fix another issue so  what do we want i want this to should be what   this should be at the right and they should be at  the left but right now well this is at the left   and this is not at the left definitely push  this one at the right okay now look at this one   well definitely these two are inside  this row and the row has a property   which we can use which is called main  access so that's what we do main access   alignment and then we'll use a space between so  it will create empty space as much possible inside   the screen and put them one at the left and one  the other one at the right okay so it will create   empty space so let's go ahead and run it save it  and we can see that one now now the problem is   just like this one we want them to be at the top  right so while one is already at the top but this   is not all right so now this column is already  at the top because the columns default property   is at the top okay but now this one is uh this  one inside the row now rows default property is   it it tries to put at this vertically centered  so this is vertically centered so that's why   it's here but if you have a column inside the  row and row doesn't have other property set   so the columns default property which should stay  at the top that's get used okay so here container   is using its default property uh inside the row  so what is i mean it's using rows default property   which should be at the vertical center that's what  where it is right now and the column should be   at the top so that's where it is right now okay uh  but now if you take a look at the design over here   so this is the top bar or header section and then  we'll have a body section so definitely this whole   section and this one should be inside a column  this one and this one should be inside a column   so right now we just have this one but in future  we'll draw this one and why i'm telling you this   one because we want to put it at the top so if i  am able to put this row inside a column then it   would put the put everything the children try to  put from the top okay that's what i said earlier   like this is using the top property but if i can  put the row inside a column then everything would   be at the top at least it would start from the top  and we need that because as i said that in future   we'll have more sections so what i'll do i'll go  ahead and put this two containers inside a column   so hopefully it makes sense so i'll cut  this one and i'll put it inside a column   and over here i'll have children and i'll put it  there now let's save it and now it's at the top so   this is working as we expected and according to  the theory well now let's go ahead and create a   margin for this container because it's too much  at the top so here we can set a margin property   and over here we do edge inserts only  and here we do top say 45 and bottom say   15 now we'll save it and we'll see it came down  now over here they're too much this property is   too much to the left and too much to the right  we can also help with this one now we do this   one inside the container so container itself  from inside inside the container will create   empty space white space okay so here i would use  a padding and once again here inserts edge inserts   only so would do left say 20 and write say 20.  okay so it's already looking much better okay   all right now while this this section  will do a little later over here   we can put an icon over here well to do that  over here we can just simply use a child and   we would use icon widget to do that so icons  dot search well i think before we go ahead   i think we can import it okay this  one and then we'll use color so colors dot now this icon package is uh part  of the flatter so you don't need to import it   okay all right so now we'll go ahead and save it  now we see it's right there okay now to make sure   that it's in the center we can just go ahead and  simply wrap this container around a center widget   so on mac i would do option enter and it will  give me this option so i'll wrap it around center   okay so if it's somehow not centered it'll center  it of course we don't see any difference here yet   well now we can change the color of this  background and this is not the color we   want as we can see from the app we want a  different kind of blue color not this one so   over here we can change the color so  over here i would do app colors dot   main color okay now what is this file app color  once again this is the color file that i have and   the class name is app colors and over here i have  declared this is the main color as a static final   so this is a static member which means that you  can access this member member variable anywhere   in your project just using this class name  okay so that's what the static members they do   if you have a static member anywhere in your  class or anywhere in your project you just use   the class name dot that member name so our member  name is main color okay so that's what we'll use okay now it's looking just like we saw okay so  now we want to go ahead and build this section but   now if you see this app a lot of the  places this font size and this font like   this one this one this one and this one well  they're all same all right so what we could do   we could go ahead and build a default  text widget for us okay i would say   that's actually custom text widget so right now  we'll go ahead and build a custom text widget   so that we can reuse it again and again so  we want to create a reusable text widget okay   all right so over here i'll come over here and  inside the lib folder i'll create another folder   and we'll call it widgets okay all right now  within it i'll create a class and i'll name it uh   big text okay big text dot dart over here i'll  create a stateless class so i would do st and   then i'll have this option and i'll call it big  text okay now over here i will go ahead and import   the necessary libraries and we are good to go  now definitely we don't want to import uh use   container over here we'll just simply return  a text widget okay and we need some default   properties otherwise it will show error but now  look at this text widget because we want it to   be reusable so you see it's reusable here here in  many places including i think inside but now over   here the color is quite different than this one so  definitely we want the color to be dynamic right   so that's why we go ahead and declare final color  color that means that we'll pass a color variable   okay and then we'll have a stream like text so  this one this text is different than this one   so the text would be passed from the caller  function so over here we do string final string   text okay what else we can also mention a size  all right so we'll have a default size set inside   of this set inside of this stateless widget but we  can also if necessary we'll pass a different size   okay all right and as you can see over here we  have this uh long text a long food name over here   or title and here we have this dot dot dot so we  also want to use that one and that's why we need   to set up another property over here declare and  which is called text overflow okay all right and   here we'll declare variable text overflow and then  okay so we need to set up some of the properties   inside the con constructor otherwise we'll  get error so let's go ahead and do it okay   and now color i think the color should be  optional because we may pass the color or we   may not pass the color okay so here the color  is optional okay all right and the text is uh   well send the text so i'll wrap it around required  widget okay and let's see what else and i think   over here now regarding this uh text overflow  so regarding this text overflow we also set   up default one so we do this dot overflow  you call text overflow dot ellipses okay so   if the text size is longer than certain width  then it will show it will show this dots   this dots are called ellipses okay and  this is the default property we are setting   but we can also override because over here it has  other properties that you can fade clip visible   things like that so in future if you  want we can just pass a different value   and that will take effect otherwise we'll just use  overflow ellipses all right okay and for the size   now the size is interesting um out in general  here right now we'll set size default size is   uh 20 okay all right now let's  see so let's remove this one   okay now the error should be gone so now we have  this properties over here and the parameters and   all we need to do we need to go ahead and come to  this text with inside and set it okay so over here   we do text now this text is the text that you  will pass down from the color function and for   overflow so text widget takes overflow  property and we'll use the one that's   set as default or the one will pass okay  so this would be passed down to here   now the default one is this one  and then we'll do color so do color color so this is the color we have let's see oh i'm sorry we can't really put color inside  directly text widget for that one we need to style   over here and inside the style property we can use  a text style and using text style we can use color   okay now whatever the color you pass down that  color we'll use and over here we'll have a font   weight so the default font to it for big text  we'll use 400 and font family we'll use roberto   not sure how they call it and it should be  in your starter code if you come over here   if you say this pop spec yml file and over here  we already have roberto and the font itself is   inside this assets folder so we  should be able to access that   now for size uh font size we'll  use the size that we passed down   okay so this is our reusable text widget  and over here we set color text size and   overflow and things like that okay well for  the color i think we can set up a default   color actually so for this one to be able to use  default color uh we can just go ahead and well i   think we'd removed this one string final property  and over here i'll just use const now a color now   the main color should be coming from here which is  this one or for text we'll have a main black color   so i'll go ahead and copy this and over here  i'll put it right over here okay but you can ask   why i'm not using the default property directly i  mean i can call this one directly from over here   no you can't if you want to set up a default color  property a default color property you must use   like this hexadecimals or any kind of numbers not  any kind of variable like what we have over here   we see you can't use color as a default property  like this you have to use using hexadecimal or any   other numbers or digits it can't be a variable  okay all right so this is the default one   okay so now what we could do we could go  ahead and use it so over here i have this one   so instead of calling country right now i can call  our big text okay so it called big text over here   so as you see you can uh switch between them  so definitely the first one okay and over here   the text you want to say say bangladesh or your  favorite country whatever you want to put i'm from   bangladesh so that's why i'm putting this one so  now what it will do what we'll do we'll go ahead   and run our app in the simulator so let's see what  happens okay so that's what we see beautiful now   over here we can now it is using the default  color which is this one main black color but   we can change the color if you want right we  learned that we can pass the color and we can   also pass the text size so over here first i  would pass the color and i would do app colors   dot main color okay all right now we'll go  to refresh and save it so it's working right   and right now the default size is 20 so  i can say i want to use a size like 30   and we can do that but definitely  that's not what we want okay   so this big text text widget will save us  a lot of time in future okay and that's how   you create a reusable text okay now with this we  are done with reusable text for the big text okay   all right now we want to create a reusable  text or small text like the city over here so   once again if you look carefully the small text  are being used in other places like over here   like over here or like over here okay like over  here so definitely want to create another reusable   text for our app but that would be  small text right so what we'll do um   i'll come over here and i'll right over here i'll  create a new file and i'll call it small text dot   dart okay now hopefully because we already did the  big text so a lot of it we can copy so i'll just   copy this one over here and we'll make some minor  changes definitely this is not big text would want   to call it small text right and the same name  we have to use in the constructor all right   well for this one definitely we want to set  up a default text size and we do it as a 12   okay and for this one we don't really need  any overflow so we'll remove this one remove   overflow from here which we don't need  and as well as from here all right and   still keep the font family roberto and  over here we'll use remove the font weight   now the size is the size that would be  being sent now for color once again we   want to set up a default color but this  default color definitely not this one   or not black not direct black so we'll come  over here and we'll use main black color for   default color okay which would be more like  this but we can change it if we pass it okay   past the color so let's go ahead and check it over  here and i'll remove that and i will put it there   okay all right so this is the default one uh and  over here actually we also want to set up a text   height so that we can change it if we need so over  here i'll declare double height and over here this   dot height equal 1.2 so it's like if you come over  here they will have a default space between each   lines okay and this is what it be doing okay and  over here we want to set it so we'll set it as   height okay well this is the default one but we'll  be able to change it now i think in big text i'm   missing another one because we want to have this  overflow issue so here i need to set a max line   one okay if it's more than one line it will  have this ellipsis which is called taking   care of this overflow now we are done with this  small text so what you could do come over here   and use it okay so over here we'll call small  text and over here we'll just simply pass the uh   required parameter right now we'll  look at our app and see how it works   okay all right uh let's see i think i pasted  i copied the wrong color though it should be   main black color sorry i think it should be  text color this one so i copied the wrong one   so i'll come over here and i'll put it there okay  all right so this is the default one of course the   default one is very light which is like this okay  but as i said that we can change it so to change   that we can simply come over here and we'll pass  the color property and we'll do colors dot black   54 for this one so only for this one we  are changing a different color okay i mean   otherwise we'll end up with default  color like this okay now with this two   reusable widget it will save us a lot of time okay  all right so next we'll see how to go ahead and   draw this one this icon to be able to draw this  icon what we need to do wrap this small text   inside another row widget and then the small  text and this icon would stay together okay   so that's why i'll cut this one over here  now i'll write over here row and within it   we'll have children because we know row takes  children and this would be the first child and   after that we can just simply go ahead and use  an icon widget and over here we do icons dot   arrow drop down button like that okay arrow drop  down rounded this one okay that's all we want to   use now after that we'll go ahead and save it  and let me find my simulator the one we are   working with yes this one so it's exactly look  like same the one we saw earlier in the design   okay this one okay so next we'll go  ahead and build this page view builder   okay and this would be very exciting  one and it would be a bit long as well   to do that first we need to go ahead and  create a new dart file so inside this home   folder will create a new dart file and we'll  call it food page body okay so food page body dot dart okay now this would be a stateful  class so what i would do here stateful and i'll   close it over here and i'll call it here food page  body all right and we already have a container   so we'll just go ahead and import the library that  what we need now let me talk about the structure   of this page that oh this is part of the whole  screen let me talk about this uh part that how we   are going to build this thing well definitely as  you see from scrolling over here that they have to   be able to scroll left and right and then there  are two parts for this main page over here   well here we do have overlooking section right  so they're going to overlap on each other   so inside this container somehow we also need to  be able to use stack widget because we know that   if we use a stack widget then we'd be able to  overlap widgets or content onto each other okay   that's what we need to do and because we are  going to use page builder i mean this left and   right scrolling so we need to use page builder  okay or page controller or page view builder   well they're all connected somehow so over here i  would go ahead and first do child and within child   i'll call the pageview.builder this one well like  any other builder it takes item builder okay so   that's what we have here now item builder it takes  a function actually function with two parameters   first one is a context and the second one is  an index so in our case we'll call it position   you can call it anything you like okay all right  now over here press enter so we'll return like   this so we'll have these two brackets and within  it we have to return something okay so for now   also return container okay empty container and  over here page builder also takes a counter   which is called item count so that's what we do  and for now we'll just set it default to five   now this five and this position they're connected  because position would start from zero and over   here we'll end up having five so it will go up  to from zero to four so the index or position the   first one is zero last one is four and together  we have five items over here so that's what we'll   have now another thing though well definitely  we don't want to return a container directly   we want to be able to return something that  scrolls left and right and they will have this   space as you can see here left and right  we do have a bit of space as you can see   all right so that's why over here instead of  returning container actually i want to return   a function over here and i'll call it build  page item well now build page item would take   two things definitely the first one is the  position so send the index and what else   let's see well for now we are sending index and  would be pretty good with that in future we'll add   more items to it so in this case position is our  index and well of course we need to go ahead and   declare this function so here here we'll go ahead  and return this function and declare its body   and the function will return widget so that's  what we are going to do and over here we do build page item now here int index while this index is this position okay  all right now we need to return something because   we have this return type object so that's what  we're going to return now and now here we'd return well first we'll return a container here now okay  and hopefully after that we won't have any error so first we want to build this container okay  this one or let me find uh yellow one over   here the yellow part and then we'll build this  the other one on the top of it okay yes i said   i know i said that we are going to return a  stack widget over here i mean we need a stack   widget and we will have one but let's work with  the first one first okay all right well to do   that we need to set up certain constraints to it  like padding margin and height things like that   okay so first what we'll do we'll go ahead and  set up a height for it and say set our height 220   and then we want to set a margin to it so  go ahead and do that we do edge inserts only left five right five and over here because we are having  this border so we want to have a   decoration so we do decoration and here we  do box decoration and here border radius so we do border radius dot circular 30 okay that's what we  want to do now here we'll have color and   for now we'll have color say  a steady color ox ff69c5df for now we'll just have one color and i  think uh well that's pretty much it okay so   what we could do we could go ahead  and run it and see how it works okay now let's go ahead and run it but definitely nothing's gonna work because we  built a new page but this is not connected well   anyway so this is the main food page  so from here we should call this one   now do remember that we already made a setup  for this one over here we have a column and   inside the column we have this container and  this container is this one showing this one   so right below it we can call our dart file this  one food page body so the name is food page body   so copy it and put it over here and we'll call  it just like that and all we need to do we need   to import it okay let's go ahead and import it  now let's run it and see what we see all right   now definitely we have some errors here and these  errors are about constrain let's check them out so horizontal viewport was given an unbounded  height so that error means that here there is   a container but the container doesn't have any  size okay so especially the height so you need   to mention the height okay so that's what we  want to do so we'll go ahead and mention height   over here so we do height say 320 and we'll see  if that is gone yes the error is gone okay so   at the same time this also means that our  scrolling page builder scrolling is already   working okay now to make it interesting here i  would do a different kind of color so we have   one color right now over here and we have five  items over here that's why it called gets called   five times now over here i can check the index  okay i'll do index is even if it's even then we   use this color if it's not even we'll use a bit of  different color okay and now here that is ox ff929 4 cc so now let's save it as you see based  on index we have different colors okay   now this would be also helpful in future when we  load the image from network even if the image are   not loaded we will still have this color as a   primary loader okay and once the image has  been loaded they'll be replaced by the image okay so now here's one thing we don't  want to show this color over here actually   what do we want to do we want to show image  the images over here the one we had early   images like this okay so that's what we want  to show over here but of course it looks a   lot bigger soon we'll take care of this and  also also take care of this uh sliding factor   like zoom up zoom in and zoom out like that  anyway so now over here would come over here   and we'll use in the property which is called  image and within it we'll use decoration image and   over here we'll use uh another property which  is called image and here we do asset image okay   and within it we need to mention our  image path now images are in assets folder   inside image folder and within it i can  choose one image which is food zero one   or four one dot png now to find the image you  should come over here and you should see there   is this assets folder and inside this we have  this image so we need to mention the whole path   assets image and i want to use food 0 0 food 1.png  that's what i was going to use and make sure that   in pop spec yml file over here you also have  this one set up so we are trying to set up our   assets path so everything is assets over here the  images and font things like that so that's belong   to this dependency and after that you need to  mention the image path or assets path i would say   all right so that's what we did anyway i'll  close it now over here i'll run it go ahead   okay so our images already showed up as you can  see and of course it's the same image but we   want to load different image and we'll do that  but now images are a bit big and they are not   fitting as a cover so that's what we want  to do so for that one here i'll mention fit   okay and i would do box fit properly box fit dot  cover so after that they will fit as a cover okay   as you can see over here all right yeah i can get  a different image let's say zero this one and now   it looks much better i mean clearer okay and with  this we are already working so good with our app all right now let's take a look at an interesting  thing while over here this container which is   this image size has the height 220 and over here  the parent container which has the size of 320   so now looks like they're taking the  same amount of space do see that over   here this function build item page is being  called from here from the parent container   they do have different sizes of height  but looks like they are taking the same   height over here we can prove that so here we can  do a basic debugging here we just do color and   colors dot red all right as you see  this height 320 is this total height   but the child container which  is this on its height is 220   but it looks like taking all the space yes it  is true so when you put one container inside   another container the child container in general  takes the whole space of the parent container   all right so that's what happens generally even  though there is a height over here it's not taking   effect all right in fact if you remove it it  still takes the whole height well now we can   take care of this problem in many different  ways one of the solution i would use here is   wrapping this container using stack  container okay or stack widget so i'll cut it now here i would put stack now  stack takes the children so the first   child would be our container so the  child container of this parent container   now wrapped around stack container now let's take  a look as you see now it's really taking 220.   so if you put a container inside stack  widget that continue take the size or height   as it's supposed to all right now let's uncomment  it okay so because you didn't mention anything so   it'll take the size of the parent container which  is 320. so if you want a container to take the   specific size inside a parent container then you  should wrap the child container using stack widget   okay so i'll save it like  this and i'll still keep this this red background and for for some time   anyway uh well another thing you you should  see that if i remove the margin from here   the margin is gone the images they are all  attached right so that's why we needed the margin   okay all right well uh now if you see the original  design which we had earlier over here so we have   this part over here the white uh overlapping  container okay so that's what we're going to do   now this is the another benefit of using stack  container because we can put two containers onto   each other where they can overlap okay so simply  what i will do i'll just go ahead and copy them   so i'll put it right there and then i'll  save it now if you come back to over here   we see that there is no change actually there  are two containers here right now they're all   taking the same space and the same amount we  can prove that instead of five the second one   left margin and right margin you can do  ten as you see it's squeezed inside let's   see it again so here as you can see the  difference so there are two containers there   but both of them are taking the same amount  of space now once again that's happening   because you wrap things around stack container  sorry stack widget now the one of the benefit   of container including stack widget is  that the children inside of it you can use   uh or you can wrap them around a line widget  okay and then you can tell the children or child   where to stay because we have this empty space  here so this container we want it to come down   just like this okay so we can do it easily  so what we'll do we'll wrap this container   around a line widget okay so over here i'll  select widget and now here i would select a line   okay not alignment i'm sorry it's align okay now  let's save it but it does look like have a bit of   alignment but uh that's more like centering so in  default this alignment whatever container you put   around that container is placed inside the parent  container and at the middle so right now here   and here it's the middle of the red  container so that's what it doing   now here if we can force it to come down to the  bottom of the parent container so we can use this   property alignment so we do alignment dot bottom  center so it came down as you can see here right   but the second one is too big so here i could  simply put it down like this okay now slowly   it's looking more like this but of course not yet  we're far from there but we can fix that easily all right so uh i think we can increase the  size of this bottom container 240 now it's   looking better now we can also take care of this  left with so left margin and right margin 40 40.   okay so now this time it's more like this one okay  in fact i think we can put it up a little more   okay so here we do 150 so it  goes up it goes up okay or   here and the thing you see it's not that the  height is not that big but here looks like   a little more big so what we could do here we can  attach a bottom margin and we could do say 10. so   now we have this one all right so it's looking  better and we'll do 140. okay so now here i have   this space all right and we need that uh because  we want to have some this shadow shadow would be   inside the container within this red container  okay so that's why we are keeping the shadow   if necessary you can also do 15 all right okay  that's looking much better now of course these   are the two images they are overlapping onto  each other over here we don't want the image   so we'll just remove this one and over here  we'll just use color to do colors dot white all right okay yes it's already looking better  don't worry the red color i'll remove once um   we are done building this part because this  red color is actually helping us understand   the container how much space it takes and how  much space it's supposed to take things like that   well another thing you see that we want to have  this the second slider come out a little bit   or when it's there is left and right those left  and right they both come out we want to achieve   this one and we can do it easily but to do that we  need to declare controller variable which we'll do   it over here do remember over here we are using  this pageview.builder and pageview has a related   controller which is called pagecontroller  we'll use that one and we'll instantiate a   variable from it and we'll call it page controller  and over here all we need to do we need to call   page controller well now it takes a  parameter and you see there is one called   viewport fraction this one okay the default  value is one and we can change it okay   so vapor fraction default value is  1.0 we'll keep this one as is all   all right now we'll see with one what happens  actually right now it's in the default value   but anyway so if we are going to use this one over  here inside uh this one there's a parameter called   controller you can just pass the parameter the  one you created now let's save it and of course   you wouldn't see any change but it is one benefit  now here instead of one try 0.9 all right okay   okay well looks like not a big change now try 8.5  restart it yes i think you have to restart it so   now looks like our left and right they are  showing up okay now do remember that this is   coming from over here early we set up in this  container where we had this margin so you remove   it you say it's gone all right so this margin  creates empty space between the next slider   and earlier slider you have to remember that one  and this page controller this viewport fraction   tells you that whether there should be the next  slide or the next slide and previous slide visible   based on this parameter okay you control that  hopefully it makes sense so now it's already   looking better and this is what actually we wanted  to achieve okay all right so this is working   pretty well well next we'll see how to put our  text over here okay well just like this okay and   before we go ahead i think we have too much space  on the left and right so we can change that and   for now we'll do it manually but in future we'll  use a different file to take care of this problem   okay you can also use a 20 it's up to you how you  go actually i would go ahead with 20 all right or maybe 30 is better let's go ahead and see yes because those  two other part over here you don't want to   see them this way it looks much better okay  and so now we'll go ahead and create this   uh text over here the one we see early okay all  right well now that part uh is pretty easy to do   so because we are already inside the container  so we know that container takes a child so   that's what we need well before we go ahead and  start writing the code for this section let's   understand the logic well definitely if you look  at it carefully while the first widget that we   should wrap things around is called column widget  because they're in column on the top of each other   so within column widget we'll have a text over  here and the next child in the column widget would   be row because we want to put these things and  then we'll have space and then we'll have another   row over here okay and within each row we'll have  also other rows like this is part of the row this   is part of the row and this is part of the row  okay so pretty much like that so once again   we are done with the background of course we  didn't do the shadow yet we'll do that soon   but we are done with the background okay which  we have already done over here okay all right   so now we need to go ahead and start write  the code for this one so this would be inside   this container as a child so what i'll do i'll go  ahead over here and declare a child over here and a child should be a container okay well why i'm using container because if  i use a container as you can see i have this   padding over here top bottom and left i can  use the padding and then i can put everything   in a column okay so that's why i'm going to  use this container because container can use   padding all right okay so that's what we'll do  so we do padding now here for now edge inserts   dot only and we'll lose the top padding   so we'll use the top heading for 10 and left 15  write 15 okay all right now we'll use another   child and the child would be column  and within column we'll have children okay all right now over here there should be a  text and we already have a text widget for this   one remember earlier we built this big text all  we need to do go ahead and call this big test   with certain text okay that's what it will do so  we'll come over here and simply will call big text   okay and it takes a text over here well for now  i'll just say chinese side so that's the chinese   dish name i never had it though i don't know how  does it taste even though i've been in china for   a long time i should try that uh but anyway so  that's it that's the first one and this is the   video of reusable widget so all you need to do you  need to come over here save it while it's there   right uh yeah it's looking a bit weird but we'll  take care of that very soon don't worry okay and   what else let's see we have this row all right  so that's what we need to do but before the row   we have this padding that's what we need to take  care of so what do we do we do sized box over here   so we'll create this distance instead of  direct padding so we do height and over here   we'll just say 10 all right and then we'll have  a row and within row once again we have children   okay all right so here we'll have children now in  the children we have the stars so we need to draw   five stars and these five stars we need to draw  horizontally well in flatter there is a widget   called wrap okay you can use a wrap widget to  draw the same thing again and again horizontally   of course you can do a bit different thing as  well but i like rap widget inside it it takes   a property which is called children now children  takes a list of child right now in this case we'll   use list dot generate to create child dynamically  and over here we'll create five children okay   now as you see it takes an index so you  can pass an index and it returns a function   so this arrow means returns a function so over  here we can return a function but of course we   need to return a widget if you come over here  as you see so this is the function over here   this part okay this is the length so we are  going to return a function or return something   that returns a widget so that's what we want to do  now over here simply we could do icon because icon   is a widget and over here we could do icons dot  star okay this one and the star should have colors   we'll do color and now app colors the main color  so we already have a main color in our app and   we'll have size so you do size 15. all  right so let's save it and see the result   so here we are all right so it's already getting  better and it will get better as we work more okay   all right well now here's the thing so this is  the cross axis and this is the main axis okay   well on the cross axis we want everything  to start from the beginning for this container once again this is the cross axis well  now here is a column layout right so this should   be the cross axis and this should be the main axis  so let's take care of the cross axis first so here   we do cross axis alignment cross access alignment  dot start okay so everything would be at the   beginning all right now i think we can put it down  a little bit okay all right let's look better much   better now okay now over here uh once again we  are using rap widget to put children horizontally   because wrap put things horizontally as  you can see this is the default property   but you can also use vertically if you want  and then we are generating list of children   well wherever you see this this bracket that takes  children just now we had this one okay all right   and not only it takes children it takes a list  of children okay either you can put them inside these two brackets and put your children  one by one or you can use a list dot to   generate to create a list of children  okay and for beginners this part could   be confusing well if you don't understand what  is this well this is called arrow function and   it returns a function okay and in that case you  need to return the function in one line okay   well if you don't want to write like  this you can also write like this   you can use second braces over here okay but in  that case you need to put return statement over   here why we need to put a return statement  once again we learned that list degenerate   takes a function that has to return something  okay that's why so this also works we save it   and it's still same no error it works the same  way of course this is the more traditional way   of writing code but you can do it doesn't really  matter okay so now that's about the stars but   now right after stars we have this one and this  comments okay so we'll simply go ahead and do it   well now definitely we need a space over here so  we can use sized box so we do size box and with 10 and now over here we have this one   well for this one we can simply use a small text  widget okay so that's what it would do so we'd   call here small text and we can just simply  pass the text what is our text 4.5 all right okay now let's go ahead and  save it and see the result   okay so this is exactly what we wanted  and then once again what we'll have   we'll have size box once one more time and then  we'll write this word there's two comments and this number so i'll just go ahead and write one second small  text and over here we do one two eight seven and then once again at the  size box and we do with say 10   and then we do small text again and  over here we'll do comments okay all right let's go ahead and save it yeah  so this is exactly the same as this one   but of course i think uh one thing we need to  take care of the height of this one is i think bit   uh a little more it has a little more height so  we can just simply come over here instead of doing   140 let's see 130 yes or 20. okay i think this is  better all right okay so this is more like this   and what else so over here i  think we have this the space now   if you see over here we have this more space right  so we don't have enough space between the sliders   so we can also take care of that one so for  that one we can just simply change over here okay all right yeah it's more looking better   okay all right and uh let's see so it's even more  higher than our ground so what we'll do over here   instead of bottom 15 over here let's do 20 and see  the result okay yes i think we can push it more   right okay that's looking much better all  right okay all right so now that's okay   now we want to put this one this three well if  we want to put this three simply what we could do   uh well we still have to inside this column  right the big column over here so we still have   to insert the column and the first thing we can  do we can create a distance so we would do size   box sized box with the height so 20 for now okay  now this one definitely a row we know that right   so go ahead and do row and we also need children  now here as you see this section this section   this section this this and this and if you even  go inside we still have the same thing it tells   us one thing so instead of manually writing  them again and again actually for this section   or this section it doesn't matter where you go  from you still have this one a lot of places   this thing so we can create a reusable text  okay or text widget so that's what we'll do so   we'll come over here inside the widget we'll  create and the dart file and we'll call it icon and text edit dot dart well now if  you look at this few uh elements over here   because we want to create a reusable text  widget actually we want to create only this part   and after creating this all we need to do pass the  icon color and the text okay so we need to build a   widget reusable widget where we can pass this and  this it means where we'll pass an icon and color   icon color and text color so that's what  we want to build well the first thing first   over here we'll build a stateless class okay so  do st means stateless and here we do icon and   text eject okay over here we'll return our will  import a library okay okay so that's one thing   but now you see what are the things we want to be  passed here i mean the class will call this class   what that class should send over here definitely  the icon name icon color text and text color   like that okay that's all we want okay so now  here we'll go ahead and declare some variables   so you want to pass icon but you can't really  pass icon but you can pass icon as icon data   okay you can't really directly pass icon you have  to pass icon as icon data and then we'll have   final string and that's the text  and the final color so we do color   and final icon color that's also color icon  color okay all right now it's asking you to   add the required field for  all of this so we'll do that okay so all we need to do we need  to add the keyword which is called   required so i'll just copy  this one and put them over here all right and i think so far so good  okay now take a look at this one so   here we want to return something that  will return this two sections right   they will return this one these two together  so they have to be returned as a row because this is a row two things next to each  other that's the row so the first thing we do   here we need to write children now in the row  what is the first item the first item is a icon   okay so definitely here we want an icon okay now  this icon would be passed down from here so we   can directly use that okay all right and then we  also have color for icon and we'll use icon color   all right so i can color is this one the  color be given from the color function while next um we want to create a  bit of distance so we'll do sized box   okay and we could do say with five all  right now here this is a text well we   already have a text widget for that so  we can simply use that one small text   okay over here would pass the text which is this  one and we can also pass the color so that's the   text color now here's simply this color right all  right we are good and with this we are done with   our reusable row is it okay so this  is a reusable sorry this is a reusable   row widget and we are done with this all we need  to do we need to come over here and call this one   and pass this four parameters and that's what  it will do so over here we'll write icon text and uh what was the name i couldn't text  with it sorry i can end text widget   as you can see it gives you auto fill up all right so the first icon here i want  to pass as a circle so i'll do icons dot   uh let's say circle sharp i would use this  one and then for text here i'll use normal   because this is the first text and the color now here uh i think we can use the default  color so what we could do for color itself   the color could be optional so over here or i think we don't need to pass any color because  the color is always same all right so we already   have a default color set up in our small text over  here okay so we don't need to pass any color sorry   about that okay i think without color it would do  much better this color is already there because if   you look at them they all have the same text  color okay so we don't need to change them   so if you see even here the color is  always same so we don't need to pass color   anyway uh so we remove the color  color for text we don't need that   so over here and definitely we need to pass  icon color well first one is let's see f colors   dot icon color one so this is the first  type in color that's how i named it so   now let's go ahead and check our result  okay so this is for the first one right   so we can copy this one and do the second one so here i'll put it two times because we  have two more items like this well for   this one so we have an icon i think this icon is  location icon so over here i would do location   on this one all right and the text is for now  it's hard-coded 1.7 km now here icon color i think   that should be our main color so main color all  right and now for this one the text is 32 min and   here it should be i think uh something  like timer i think it's called access   this one time rounded and the color i think is  color too because in our app colors this file   if you come over here we have different  colors icon color one i can color two   text color main color anyway so now let's go  ahead and save it okay it's already looking better all right so here we are okay and it's already  looking better but of course if you see   the edge edge is really not looking good over here  and we'll take care of that because we need to do   a refactor of our constants like this one which  we'll do later soon okay all right but with this   it's already working and what i could do for  now i can remove this background color over here   which is red because it doesn't really  look good all right yes not bad i would say   all right okay so it's already working well next  we'll see how to scale it up and down like this   one as you see as i slide this scale up and down  zoom up and down okay so that's what we want to   do next let's understand the basic principle of uh  scaling up and down or zooming in or zooming out   like that well now we can take a look over  here well first thing you have to know that   every slide over here they have index and  page value so if you start from the scratch   over here this index is zero and this index  is one okay but they have a page value of zero   so page value for this index is zero page value  for this index or this slide is zero now take   another look so here page value is 1 for this  index while for this index page value is 1 and   for this index page value is 1 but interestingly  the index value over here is 0 index value over   here is one index value over here is two all right  so here all of them they have the same page value   two index value one index value two index value  three this one over here all right so hopefully   it makes sense so this is the first thing you have  to know or second thing as you go to the left the   index value increases and page value increases  while page really increases slowly every time   but index will increase only almost when you are  done with sliding otherwise it doesn't increase   so once you start sliding the page value  immediately goes up slowly while it increases   by decimal point okay and index value only  increases once you're almost done now the opposite   well the opposite is when you go to the  right the index value immediately decreases   say for example here the index value is currently  the here index value is one right so what i do if   i scroll it to the right the index value  would immediately be zero all right for   this one the currently selected one and page value  decreases also but that decreases by decimal point   not suddenly it decreases linearly  like by decimal point every time okay   all right so that's the basic thing we have to  know well now another thing we have to know that   well for this or the current slide for any kind  of current slide the scaling factor is one okay   for the current slide including this one and for  the earlier one it should be 0.8 and for the next   one it should be 0.8 so in this case this is one  this is 0.8 and this is 0.8 0.8 means 80 percent   1 means 100 percent okay so those are  the basic things that we needed to know   all right well with this thing  we are done with the theory now we'll go ahead and start coding this uh  scaling part well for this one first we need   to declare a variable that's what we'll do so here  we'll declare a variable and the variable name is   curve page value and we'll set it to 0.0 all right  okay so this is the current page value all right   now because we want to zoom in  zoom out or scale up our scale down   while that's why we are using actually uh  page controller okay well one of the thing   that page control already has is that it just  shows over here like the one we already have so 80 percent of the screen in our case we  are using or 85 percent right yeah now page   value has a page controller has another property  which is called page so from page controller we   can access the page property and page property  is actually the page value okay all right so   here uh we'll initialize our page value and as  we scroll left and right move left and right we   want to register the left and right event  and from then we want to from that one we   want to get the page value okay all right so  here to do that first we need to override uh   method so that's init state method okay  that's what we want to override and over here   we'll call at and the method name is init state  and any state is a method inside any stateful   class that you can use it but if you want to  use it you need to override it remember our   class is a stateful class so over here first  we go ahead and call this and override the   super instructure instructor for this initstate  method okay all right now here we can get the   current page value as we go left and right we  can get it but to do that uh we need to attach a listener to this page controller okay  so what do i do call page controller   dot add listener okay all right so while  it takes an anonymous function over here and inside of it we can get the page value current  page value so we do page controller dot page okay   and over here we get the value and save to it  so let's go ahead and save it all right okay   now here i think we need to add a null checker all  right where we tell that it's not going to be null   now of course we need to wrap it around the  set state so that's what we'll do now we are   doing this because we want to use this value as  soon as we get a new value from here and we'll   save it over here and our state management system  would know that there is a new value how would it   know because we put it in the set state okay so as  soon as we get the new value we'll let the ui know   that we have a new value and let's uh update the  screen okay so that's what we want to tell the ui   and the state management system so that's why we  are using set state so what's happening here uh   so the thing what is happening here is that we  have a page controller and from page controller   we get the page value and the page value  is actually the value of these pages now   what we could do we can print this value and take  a look okay all right so it's a current value is   here we can just print them okay the  current page value all right now let's see   i think we need to convert it to string okay  all right so i'll go ahead and run it over here   okay so now let's see so you see as you scroll  left and right so currently this current phase   value is one if we go there currently for this one  page value is zero and as you go to the left you   see the log over here that's printing the value  is increasing right and when you stop over here   it's the complete value of one and all three  they have one value so here on the screen all   of them they have the same value now let's do  it one more time okay so it would stop at two   so page really increases or decreases slowly  as you can see on the log well so it's useful   all right so now while we initialized it inside  this uh in its state and we're also listening to   it okay now we need to do another thing we  need to dispose it okay uh this pose means   when you leave the page we don't want it to be  active otherwise we might have memory link okay   so there is a method inside a stateful class  that's called this pose okay so this is the   method we are going to use just like in each  state any state you initialize the necessary   things that your page should need and when you  leave that page in general you dispose them   let the memory management system know that  i don't need this thing just to remove them   from the memory this way you keep the memory as  small as possible okay you don't want to use so   much memory so we are calling this page controller  dot dispose okay so it's a built-in method inside   so now that's the first part we have done well but  actually now we should go back to scaling up and   down okay all right um i think we should restart  it now the log is gone okay well the actual   scaling would happen inside this method okay well  so we built a method which is called build page   and inside it we want to do the scaling okay so  this is a lot of dart code over here nothing to   do with um flutter though it's a lot of dart code  okay so you'll learn actually at the end of this   course you'll master the art because most part  of this app or this tutorial is about dart code anyway well for scaling we need to use  an api from flatter that's called matrix4   okay so that's what we want to use well  first we'll go ahead and initialize it   we'll call metrics4 and we'll create an  instance from it and here we do matrix for let's see i'm sorry matrix four dot identity  so this is the one we want to initialize an object   from identity matrix four well what it does it  has three coordinates x y and z so that's what   we would be playing around with uh matrix for that  identity returns an instance where it has three   coordinates x y and z but basically because we're  gonna scale up and down on the let's see if you   set our y y y axis so this is the y axis x axis  doesn't change so everything is going to happen   around y axis so scaling up to y axis scaling down  to y axis including the position as you can see   this position all right these are the positions  we would also take care using y axis anyway well so that's the first initialization  now here we need to do a check and we do if   index equal current page value  so we have current page value   current page value not four while we go we get the  round figure around the number okay and if it's uh so now for this one over here the current  index is zero so as you're slowly moving   the page value increases but we just want to  get the complete value either zero or one so   that's the checking we are doing over here  okay all right so it's a forcefully checking   and see if the index value matches with the  current matches with the current page value so   that's what we're doing over here now here we'll  declare a variable we'll call the curve scale   and here we do one minus uh curve scale current page value minus index and  here we'll have 1 minus scale factor all right now scale factor is a variable  that we should define which we didn't do yet   so i'll go up there over here and i'll define  it and i'll do double scale factor equal 0.8 now over here the scale factor is as i  said early so this is the eighty percent   that i just want it to be eighty percent  of its original size things like that okay   so now we have the scale factor  now what does it tell you let's see so we want to get a scale factor  and as we scroll left and right   from this one we want to save the scaling factor  well now let's take a look well this equation   currently returns one for example we know that  here the scale factor the current page value is   zero index is zero so this becomes a zero right  so zero multiplied whatever that's a zero so   we end up having one okay now over  here the equation is same true   here we know that current page value is one and  index is one so one minus one is still zero and   we end up having one okay so that's what we are  having and getting okay i will it makes sense but   this equation is only true for the current index  not for this one not for that one okay all right   now next we'll do another check we'll  say if else else if index equal current page value dot 4 plus 1 now over here  and we'll write a new equation over here   so we do var curve scale and here we  do scale factor plus current page value   sorry about that plus index minus sorry it should  be minus index and i'm going to tell you why   and plus one multiplied by one minus scale factor all right now let me explain to you well  first this section this condition actually   would refer to the next slide so this is the  current slide which belongs to this condition   and because we are doing plus one with the  current page value so it would go over there   actually it will try to locate this one over  here okay so plus one now over here we want 80   percent of this original side so that means 0.8  and this one returns 0.8 so how does it return   well as you see we know that for all the  slides here current page value is zero   right okay or in this case current page value  is one well here current page value is zero   and here current page value is one you have to  remember that but here this is the index one   and index two right okay so if we are  going to refer to this one as i said   this condition now this should be zero  point eight percent right uh sorry 0.8   the scaling factor or 80 percent so here we'll  have 0 um 0.8 and how does it work so now here   this index is two but our current page value  is one okay so one minus two that's minus one   minus one plus one that becomes zero  so here we already get zero zero   multiplied whatever scale factor is 0.8  because this is the default value right yeah   okay so now with this we can already start to  go and see our scaling things well before we go   ahead and see the scaling actual scaling we need  to pass this current value this current scale   value to matrix okay to this one so that's what  we'll do so here we'll write metrics well how do   you pass it well before you pass it you need to  call another function or api so matrix for dot   diagonal three values which takes the value of x  y and z well in your case x value is one y value   is one okay all right now sorry z value is one  and y value this is the actual value that we want   to play around and here we'll pass her scale okay  that's all and we'll just copy this one and we'll   put it here okay the idea is same all right so now  you can go ahead and save it definitely nothing   will happen if you try to scroll it we won't see  this one i mean nothing is changing that's because   here you need to wrap your stack widget around  transform widget okay so what i'll do i'll   collapse it and here i would enter option enter  and widget and over here i'll write transform   okay now transfer has a property which is called  transform and it takes a metric so we'll pass   this matrix the matrix we already have over  here okay and that's it now let's go ahead and   restart it already we have a bit of change over  here as you see okay start from the beginning yes all right it does change but we have some  weird things going on we'll take care of that but   we are already doing this scaling thing right  hopefully it makes sense so why it's happening   like this well this refers to the current one and  this refers to the this one all right okay and we   know that this one is 0.8 because here we get 0.8  okay well another thing at the same time we want   to take care that's called the position because we  want it to be a little down up there okay so i we   know that i think this was 220 so we want to skip  say another 10 over here and keep 10 down there so   we're going to put it down to like at this  position maybe 10 pixels or 20 pixels like that   okay that's what we want to do now we can do it  right here now this one should also be uh well   as it's because you see it changes but goes back  we don't want to like this okay so as we go to the   left or right the position should change at the  same time i mean like this one we are going to the look at this one sorry this one or currently  this one and look at this one if we go to the   left we want it to be go down a little  bit go down a little bit like this   you see it's going down the current one selected  one going down and position changing right   going down and position changing so we wanted  the height should be changed but height is also   y factor so we need to change that well we  don't need to change that we need to code   that so over here we'll call uh we'll  create another variable and we'll call it   cur trans so it's a transformation which  means changing position and here we do uh   so here so what's our current size of this one  the current size of this one is 220 i think   uh if we see the original one over here yeah 220.  okay so current size so well we can declare it in   a variable over here as well so no problem with  that one so here we do double height equal to   zero all right so now we need to take care of this  height issue so to do that we need to use it so we   do height multiplied by 1 minus current  scale and divided by 2. and over here the same goes for let's see this one okay now here what's happening so we uh let's see  so it's currently 220 okay but our current scaling   current scaling is over here is one so one minus  one well over here for this condition for this   condition we get one right so one minus current  scale one so zero so currently for current one   it would be at the top so which is this one  all right but for the next one so this one   we want it to go down and this equation works  how it works you see well currently here the   scaling factor is 0.8 right so 1 minus 0.8 is 0.2  two by two well we went one we end up having one   tenth right like that one tenth multiplied  by height so what is our height over here   our height is two to zero all right so  we end up having twenty so we'll see that   once we save this in a matrix it goes down to  20 pixels okay that's what we'll see well but   before we go ahead and restart it here we need  to call after this value has been set after   this transfer scaling has been done after that  we'll call another function which is called set   transitional row this one okay well this is  one actually moves it up and down okay not   the scaling just moving up and down and over here  for the current one this is one i want to zero so   that's why i write to zero and the z value  i want zero but y value which is the height   we want to change this one and this is the value  we'll send over here from here so we'll copy this   and we'll just put it there okay all right so  what happens here so we are first firstly we   are getting the current scaling and based on  that scaling factor after the scaling happens   then we change it okay we change the position  all right hopefully it makes sense i'm sorry   okay so while right now what i will do we'll just  go ahead and copy this one and put it over here okay now we'll go ahead and save  it and we'll see it came down   automatically okay so it  works now as you see it works so let's start from the scratch so the left  one is working already sorry the right one   as you see i move it to the left and  it's scaling at the same time while   this was here but suddenly scale down to there  now there's another problem okay but currently   the position is working right after transition  or moving is done okay so that that's a problem   uh and we'll take care of it soon i know we have  another problem even though it comes over here   but this doesn't change while this doesn't change  anything because currently in our logic over here   we are not referring to this slide currently  we are referring to this slide which is this   condition and this condition refers to this slide  okay so somehow we need to refer to this one well   we already did half of the work or i would  say most of the work so what i will do   over here i'll go ahead actually copy  this this section copy this one completely   and put it there okay and we need  to make some changes so do minus one   so whatever the value current page value  minus one so it'll refer to this one okay   and we but we need to change this option over  here okay so we'll fall back to this condition so i'll just put it there okay now this  condition this condition doesn't work this   one doesn't work for this one this slide but  the first condition works for this slide and   how it works let me tell you okay so we  know that here in this case say this is   the page value is one so for all of them page  value is one here index value is one index value   is zero right but all of them they have page value  one now here if you say current phase will be 1   but here this index is 0 so 1 minus 0 so that's  become 1. now here we have scaling factor what   is it once you go to 1 minus 0.8 this is 0.2  so 1 multiplied 0.2 we get 0.2 1 minus 0.2 0.8   so we end up having here scaling factor 0.8 or  that means 80 percent now we go ahead and save   it and we'll see the result immediately  okay yes that's working right now okay so right now this is working and  we do have a bit of issues still   okay so when you go to the left from  uh from this position to the right   the scaling works perfectly  right but when you go to the i mean when you when you when you  go to the left you see here this one   the changes suddenly right first has become big  then it becomes slow so that means this equation   is not directly working we need another condition  but here why it's not working let me tell you   okay let me tell you why it's not working so  here this is our current states default status   and we get one scanning factor one and scaling  factor 0.8 right but now as i start to move   this one would go there and this one would fit  in the middle and there is the other one third   one that would show up here okay now for the  third one actually we don't have any condition   that third one belongs to rest of the  condition it's like whatever it is   i will apply another condition to it okay  so over here what i would do are the var curve scale 0.8 i think we already have  current scale uh no let's declare over here   curve scale this is a fixed one so whatever that  is the third one or very far from the screen will   always apply to 0.8 scanning window that means  when i do like this and it shows up as you see   that's going to show up now soon yes but that's  big right but we want whenever as soon as it shows   up immediately 0.8 we don't want to scale from big  to small when it shows up already that should be   0.8 that's what we want okay all right so for this  one uh first i'll copy this condition over here okay and then we need to set up this transitional  thing over here so you do set transitional row   and once again x y and z while x value over  here is zero and z value is zero and y value is   let's see height multiplied one minus scale factor by two okay well actually we are pretty much  applying this one okay so you're just doing   it directly inside it now let's return it  now let's save it okay all right now let's   go ahead and restart from the scratch and  you'll see we have a pretty smooth sliding   perfect it's already working and this is what  we wanted this is exactly same as this one okay yeah all right so that's great now here we  are done with this scaling and this transition   next we'll see how to take care of a shadow  because if you see over here we do have a bit   of shadow so we need to set up the shadow  over here okay so that's what we want next   well we want to apply a shadow around this  container so we need to find this container   well we know that this container is  over here this is the container okay   so this is where we want to apply  the shadow now to apply it let's see well let me close this one first over here  all right so right below it over here child   so over here we'll do decoration see we already have decorations sorry we already  do have decorations so we can just work on it   directly okay all right let me see if we change  the border radius to 20 actually it looks much   better anyway so now here we'll use the property  which is called box shadow now it takes a list   i told you wherever you see in flat you  have flatter you have this two brackets   that means they take a list of children  that's all it means but children of course   it's the based on property so here we need  box shadow right so first we'll do box shadow   so block shadow over here and now here we  need to set the shadow color okay that's   what we want to do so do color and color we'll  have a custom color for this one and we'll do   ff e8 e8 e8 okay all right now let's go ahead and  save it uh while we don't see a lot of changes   it's not good enough uh we need to  set up other properties 0.5 and offset zero five now let's go ahead and save it  and we see we have bit of shading over here   so to see actual uh shadow you need to set up  properties a lot of the properties now blur   property is gone it looks a bit ugly they're just  offset now this offset zero and five that means   on the x-axis we don't have any changes but on  the y-axis we should go down 5 pixels so this is   pretty much 5 pixel okay all right well you can do  the opposite we do 5 you can do in both direction   okay all right so here uh so plus five means  here plus or positive x-axis which is this one   okay and plus this plus 5 means positive y  axis which is this one that's why you see   the values over here and here all right now we  can change them you can change the direction   and save it so over here we see we change the  direction but we can put back our blur radius   now it looks like there is a shadow well why i'm  explaining this one to you let me tell you why because here as you see there's a bit of shadow as  well but we don't want that shadow we just wanted   this shadow the shadow is just like here you see  they just have a shadow up to here and after that   we don't have the shadow all right so we need to  understand this axis thing and the blur radius   well without blur radius it's just a  color over there this is a gray color   blur radius makes it blurry that's all it means  if your blur radius is one it's more close to   the collar if your blur radius is bigger that  means well it's more i mean lesser blurry okay   if blur radius is one that's very very  blur okay hopefully it makes sense   just from the name okay all right well now here  actually we don't have any shadow at the top   and we do have a bit of shadow over here and over  here and over here so we need to apply another   shadow well to do that we will apply another  shadow because box shader takes a list of children   so over here we do box shadow okay and we  here we will have color this time we will do   colors.white we'll use white color to apply the  shadow because we already have a white color as   our foreground color the shadow color is white  but of course the color is at the background   so part of the shade would be chopped off okay  the shadow is applied from the background do you   remember that so you should apply applying another  shadow so that would go to the background and the   but the background shadow would be white shadow  that means which is going to match with this   white color on the foreground okay so the  color look like same then but here this is a   little gray color so that color would be  covered okay let me let me tell you let   me show you actually how it works so over here  we do set minus five and zero you see that it   it looks like increased a little bit okay so it  looks like i mean we increased it so that's why   it looks like the shadow is over here and it's not  going out like here we have a lot of shadows right   yeah so that's how it works so it's more like you  are covering it okay or applying another layer   so we do that let's see hold on we do the  same thing for another shadow on this side and here we just do plus uh let's see plus  five okay so it looks like shadow is up to   here and this is the result we wanted to achieve  okay so with this we are done with the shadow   and next we'll see how to work with this dots  uh this dots over here okay that's what we do   all right to do that uh we need to go  ahead to our pop spec file over here and over here we need to install our slider package which is called dots indicator  okay well now we need to get the version for it   so let's go ahead and check the latest version  that's what we'll use so i'm their official   website over here in pub.dab and looks like their  latest version is this one so let's go ahead and   follow this version with me if you want to follow  along with me uh if you don't follow along with   me you might get a surprise in future or it  could be buggy so let's maintain our version   over here so this is the current version that we  want to use and after that we wanted to get pop   so it will include the package at the same  time let's see how you're going to use it   all it's pretty straightforward so we want to use  this this uh effect so what we'll do we'll just   go ahead and copy this one you can use a lot  of other effects on your preference but i'll   just go ahead with this one looks like it's done  well now i'll close this one we don't need this   and i'll close this one as well over here and  right here okay so well we closed this one   now let's see this is the function that we worked  just now okay and this is the pageview builder   and let's see well now here currently on  this page we have another issue so if you see   main food page over here we have this container  and this container is showing the header right   showing the header and this one is showing  the body shown in the body all right so   this file is calling this one right so over  here we just have only one container but now   we want to put our dots over here dots okay so  that should be in a column right so that's why   i'm going to go ahead and wrap this container  using column widget okay so i'll uh what i'll do   i'll collapse it and over here i would say well  i think i should cut this one first actually   so i'll cut it over here and i'll do column and  then we'll have children and the first child   is this container and let's save it okay  all right we do have a bit of issue here let's see i'll save it one more time okay that may be probably because of  sudden changes in the state anyway   so now we'll go ahead and copy this one from  here okay and we'll put it right below there   okay all right of course we need to import  the package okay and now here that's count   for now we'll use five and position  now this position is has to be dynamic   now this position would be coming from our current  page value do remember that as we scroll left and   right the value changes okay so we can use that  one directly so here we do curve page value   okay and we are good to go all right now let's  go ahead and save it and run it let's see the   result we are already here with this and our  app is already looking great okay now though   over here the colors so you can change the color  as well we don't want this color this is our main   color so that's what we want to use so we'll use  another property which is called active color   and over here we'll have app colors dot main  color okay that's what we want okay perfect okay   so our ui is matching okay all right so that's  already looking great and another thing though   before we go ahead and start drawing the rest  of the page we need to take care of other issues   now this is looking good on this iphone  12 but your device could be smaller   so we do have a lot of hard-coded factors over  here in our app for example if you come over here   there's a header section like top bottom things  like that okay they should not be hard-coded i   think they should be dynamic when you read the app  when you install your app on a different device   we should count this value based on that device  height or width okay we can use any of the factor   but definitely this should not be hard coded so  left to right margins because in a smaller device   left to right 20 margin or padding would really  look big we don't want that at the same time   we have here height pretty much 320 which is  pretty fixed and this is also what we not want   we want to change the height based on  device height and things like that okay   so this is what we'll take here next before we  go ahead otherwise we have to repeat a lot of   things which we don't want okay so hopefully  in next part we'll take care of that issue   okay but i'm sorry before we go ahead i think  something is missing over here as you can see   i totally forgot this thing so this ui we need  to take care now this is coming from here over   here inside this align widget and child widget  over here let's see and child container okay   over here uh i think over here so here we have  this row this row is showing them and we want to   actually set a property over here for main  access okay so many access will use main   access dot well if you do center everything  is center that could work or you could do   space between okay so this works much better  okay now we'll go ahead and take care of this   fixed hard-coded vectors okay so to have this  different kind of value based on screen size   and things like that we want to declare a new file  so we'll come over here inside this utils folder   and over here we'll declare a new dart class  and we'll call it dimensions dot dart okay   all right and over here we'll create a class and  we'll name it dimensions and inside the class we   want to create some static member okay well first  thing what we have to do we have to get the access   to the screen or device within height well in  general you could do it in your any kind of   stateful class where you have the build method  and inside the build method you do like this uh   current height is like this then you do  media query we use the media query to get access to different kind of things  one of them is the context okay all right   so we get the context and then we get the size  object and then we get height and if you could   do that then we turn it to string then we'll  be able to print it let's print it and it will   print the size over here so current uh device  height is 844 which means over here all right   so this length over here well now of course  this media query is always bind with a context   so that means with a stateful class but a lot  of our classes here in this project would be   stateless class but we want to be able to access  it from our app throughout the app from anywhere   well to do that we can use a special  package support which we already have it   in our pub uh spec dot eml file over here get x  package while galaxy package is mainly you use   used for routing and state management but there  are a lot of other properties that you can use   so one get expected helps you with a  lot of things that's the beauty thing   beautiful thing about get x now here we can  access our get x package so to do that we'll   import a class here we do get get the dart so  with this we have access to the get x package   now because we have access to the get x package  we can access some underlying property now here   i'll declare a static variable and we'll call  it double and the variable name is green height   and here we'll first do get dot context and dot  height okay h-e-i-g-h-t and we need to put a null   checker over here saying that this is not going  to be null all right so this is how you access the   height property we can also do our width over  here so instead of height i'll write here   width and now here we do idh with okay now  let's uh so because of this context over here   and but that contexts lie inside  get x package so getting scan   keep the context pretty much everywhere  so all you need to do is get to context   and then you get height and width okay so now  with this we have access to height and width   now we can use this one so here uh would declare  another variable and we'll call it pageview   container okay now this is the container would be  used for this height okay from here from here to   here okay all right now first we need to get the  screen height and we'll divide it by a certain   factor okay over here factor x now what is this  x now x would be like this just now we saw that   here in our case the current device is eight  four four the height right so what we could do   we could divide eight four four by two to  zero because we know that this is two to zero   well whatever the device is we want this height  to be around two to zero either two to zero or   a little more than two to zero a little less  than like two four zero or two one zero or   two zero zero but now that should be based on  a factor now there is no standard for this so i   can make a factor like this okay so eight four  four divided by two two zero that is 3.84 okay   so this is our height factor or sorry factor  in the in our case so i'll divide it by this   now whatever the screen size that would be divided  by this one so based on screen size this value is   either bigger than 2 to 0 or smaller than 2  to 0 or 2 to 0. i think you get the idea so   the longer or the bigger the height this would  be bigger as well okay hopefully it makes sense   but you can use any kind of scaling  factor it doesn't have to be this one   okay now that's for page view container  well this is pretty much for the image   well now we can go ahead and copy it now  we'll have page view text container so one   will have for text okay now previously this text  container is one two zero we remember that right   so eight four four by one two zero  that is 703 so here we do 7.03   all right now we can go ahead and use them  all right because we are done with this   dynamic size so every time you load this app on  a different screen size based on that screen size   it will get this certain width like this over  here okay now let's go ahead and check it out   um so we'll come over here and over here i think  we have hard coded value so i would do ctrl f220   which is this one so here i can change it so i can  access to it what i would do i would do dimensions   dimensions dot screen dimensions  dot that should be page view   uh let me see the variable name is page view uh  sorry it should be this one right yes because it   was previously two to zero so we're just replacing  that one and we need to import the package okay   all right and i think we have another two  to zero so over here we need to do the same   so page view container so because the pageview  container this one and the one we used for scaling   the size is same so you're using the same variable  from here but because they're static so you can   access them just using the class name and over  here we have one to zero so we do dimensions dot   page view text container all right and let's  run it and we'll see some problems okay   now this is happening because we are trying to  use get ex package but get x couldn't get access   to the context now in this kind of situation you  need to wrap your material app using get x package   or on the or the other way it's called  get material app instead of using   get you can use get material app okay  now what did this do get material app   would get the const context when the app  gets initialized for the first time okay   of course we need to go ahead and import  the package so that's what it would do   now the error should be gone now let's go ahead  and run it and we'll see we are back okay so right   now we are using uh dynamically calculated screen  height and width so well to prove that we can go   ahead and create a new new simulator um let's  say iphone 8 which should be a little smaller   okay now over here i'll instead of iphone 12 pro  iphone 12 pro i'll use iphone 8 okay and we'll go   ahead and run inside it and we will see the screen  size whether it is dynamic or not okay all right okay cool well as let it load it would  take well this one looks okay but now   here we have this problem over here right so  we need to take care of this problem as well   now where is this problem coming  from now let's take a look at uh this let's see let's go ahead and run it one more time well now the problem is happening that's because  of the parent container over here okay now this   is three two zero right so this is not being  dynamic so this is the whole container size okay   so we also have to make it dynamic so what  do we go what we'll do we'll come over here   and declare another variable okay now  we'll call it uh over here page view just page view that's all and now here do  remember that we want to divide our screen height   by 320 which is this one to get the factor okay  and if you do that that's 2.64 okay so instead   of writing this one we'll write 2.64 okay now  okay with the factor we are done now all we   need to do come over here and change it so we  do dimensions dot page view all right okay so   let's see yes now let's go ahead and run it  one more time and we'll see okay now most of   the problem has been solved but we still have  this overflow okay well we have this error over   here and it says that we have 12 pixels overflow  well definitely we can see if we compare these two   uh screens over here well now here we have  this white space and this one but here   we have this one but this is what is causing  this overflow issue now definitely we have   this space over here 20 pixels and here i  think we have 10 pixels so we can calculate   them dynamically actually all the space here we  can all calculate them dynamically so it won't   cause any overflow so let's go ahead and find it  first now this is our text widget wrapped around   in a container so let's go ahead and find it  and i think it should be down here somewhere so let's see over here well remember this is the  this section is showing this white area okay now   here we have this time and distance which  is uh this section okay time and distance   and this is the comment section okay here we  have this comment and stars like that okay and   if i collapse it you could see that here  i have this height 10 and here i have this   20. so now definitely this 20  is over here this section and   this 10 is this section all right okay so  let's see if we can optimize them well now   first one this 10 we want to make it dynamic  especially if we have a smaller height screen   like this okay so what we'll do we'll come over  here and over here we'll create a new variable so here we'll create a new variable and we'll  call it static double and height 10. now for this   turn you first we'll get screen height now  remember this time we are dealing with this   size box height 10 so in our app all the  height would be using this value okay now   we need to calculate the first scanning factor  now 844 by 10 so the scanning factor is 84.4   right so that would be our scaling factor so over  here we do 84.4 okay so eight four four or eight   hundred four four divided by eighty four point  four is ten but based on screen height it would   be more than ten less than ten or equal to ten now  we can go ahead and create another one so we'll   copy it and we'll call it height 10. all right in  this case uh i think our scanning factor is 42.2   all right perfect now what we'll do we'll  come over here and over here would call dimensions dot height 10 okay and for  this one we'll use dimensions dot height   20 okay now we'll go ahead and save it and see the  result and we can already see that we have this   5.8 pixels error okay well so some of the errors i  mean overflowed has been reduced but we still have   a bit more now let's take a look where we can  optimize more dynamically well definitely here i   can see a padding that we have padding 15. so this  is the one we can take here now we'll come over   here and i'll create a new height and i'll call  it height 15 and 8 4 4 divided by 15 we get 56.27 right and so over here would write here i say  dimensions dot height 15 let's go ahead and   save it and run it it looks like we still have a  bit of error over here that's around by 2.7 okay   well uh we are having that one now one thing we  could do we would also go ahead and take care of   this font size because it's a smaller device so  we would expect the font size would be a little   smaller okay so this one we can optimize okay  so now for optimizing font size it would come   over here and over here would create a  variable and we'll call it static double   font 20 and the screen size screen height  by now in general we'd want 20 and divide   by 20 is we learned that so that should be  42.2 okay so now that should be the font   okay well now for font size um we need to  come over here to this one so this is the   big text over here would come over here and  we have this default font size over here okay now one thing we could do we could come  over here and actually uh let's see   so here we could do dimensions diamond dimensions dot in that case i think we  need to import the library first   okay and dot phone 20 okay let's go ahead and save  it and see the result and looks like the error has   gone because it reduced so much okay and  the font becomes smaller including this one   so on bigger screen it looks bigger and smaller  screen it looks smaller okay all right so now   of course if we do like this we won't be able to  use this uh given font size so that's true okay   well but we could also take care of this  one so here is the thing we could take here   if font size is given is zero say for example then  we can take a test over here so if size uh sorry   if size equals zero which means we don't want  to give anyone in that case we will use font 20   otherwise we'll use whatever the size was given  because the default one is zero right so if you   don't pass any size over here so size equals  still zero if it's true then we'll use 120 okay   or if you send a new one from outside definitely  the default one is was zero but if you send   something different from outside world so it won't  be 20 so in that case we'll fall back to whatever   you send okay so this way our condition stays true  all right now let's go ahead and run it so this   is in uh iphone 8 and let's see if we have any  problem in iphone 12 or other devices so over here   i'll come over here and i think this is for iphone  12 i'll just do hit refresh and it's loaded and   we are good so eventually we got it done so in  different devices they look uh exactly the same   yet we don't have any overflow but of course if  you want to be more precise you can also take   care of this font over here okay and that needs  more work though well with this it's looking   already pretty good text size is smaller  and we have more proportional distance okay   well we could be more precise but in that case  we need to do more work and before we finish this   section where we dynamically take care of the size  and things like that we want to do another thing   this radius issue okay now this radius over here  and smaller device they all also look the same but   they shouldn't look same okay i mean the angle  is pretty much here whatever radius i have like   30 it is still 30 but it would be proportional  it should be proportional based on my device   height right so for that one we can set up another  dimension for radius okay so here i would do   static double radius well we'll have two on radius  20 and and the radius 30 okay so screen height by   well for factor like 20 we already have one  right so if if we want to get anything like 20   so the factor is 42.2 right we already know it  so now what we'll do would go ahead and copy it   now we'll do another 30. now in  that case we have to find it so   eight four four eight four four divided by  30 that is 28.13 so here the factor is 28.13   okay all right now we'll go ahead and find  our radiuses in different places we have   well the first one over here so here we have  radius 20. so we do dimensions radius 20 and   let's see if what do we have here i think that  should be 30 over here okay now dimensions radius   30 okay now we are on iphone 12 pro which is  this one we'll save it of course there is no   change for this one now we'll go to iphone 8 and  we'll save it now we'll take a look at iphone 8   yes now it looks more profession uh proportional  the both things the both radius uh the radius   for both sections right yeah and that's  how you work actually make things uh   uh dynamically proportional okay well hopefully  you understand the logic so with this actually   uh we came a long way uh another thing  i think we are still missing over here   like left ten right ten to do that we can  just simply go ahead and copy this one   and instead of height would write here with  okay all right let's make some comment over here   uh dynamic height and over here we'll have  dynamic width well now this height is mostly for padding and margin right well this is the  same but that's also padding and margin so right now here instead of  height we want to do with w-i-d-t-h   and we'll just copy and put it there okay now with this we'll have access to the  uh dynamic width for padding and margin okay   now with saying that we come over here we  just need to replace them so here we do   dimensions dot with 10 and over here is the same  dimensions dot with 10 okay and actually a lot   of other places we can go ahead and change over  here uh we over here we do have a 30 but let's see   if we have 30 or not no we don't have uh with the  like 30. so i'll just go ahead and copy over here so we want to get with 30 and  in this case this would be 28.13 like that okay 10 15. um so now we'll come  over here and we'll just uh do dimensions lot   with 30 okay and we can just simply  copy this on the put it here and   the bottom let's say well in this case we  need height 30 right we already have height 30   i think we don't have but in that case  we'll go ahead and create one okay so   i think we need to go ahead and create one so  to create that one i'll just simply copy this   put it here and instead of width we'll call it  height and but the factor doesn't really change   and now the arrow should be gone let's see  what else we have um i think that's pretty   much it here and let's see where else we have  we might have an option over here like okay   this padding this is for the top section in our  case let's see is the app the top section okay so   this is the padding over here we are applying but  currently we see that they are taking exactly the   same pixels of uh this padding but it should be  proportional we learned it so just let me go ahead   and i'm sorry go ahead and change it so  you do dimensions then chance well dot   here i think we're doing with right so we do with  20 and here is the same dimensions dot with 20.   and let's see over here i think we also need  to make it make this one dynamic and over here   this is the border radius and let's see  do we have a radius or we have radius 20   and 30 but we don't have radius 15 so we'll go  ahead and create one over here and let's see so here so comment it here radius okay  now simply we'll just copy this one now here this one we want to make 15.  so 844 by 15 the factor get 56.27 56.27   all right uh you're over here let's go ahead  and restart it make sure everything is okay so   now we have this radius over here which is 15  well this is also 15 but here the pixels number   is much lesser because it's a smaller device okay  great and what else we can take here now here we   do have this bottom section now this is the top  and bottom okay so that's the height so vertical   distance so what do we do to go ahead and come  here dimensions dot height 15 all right and uh   over here 45 so we'll come to this dimensions  file and we'll create a height for 45 okay and 844 by 45 the proportion is 18.76 18.76 okay so simply we could go ahead let me just   close this one and here we could call  dimensions height 45 dimensions height 45 okay now let's open it and put it there  let's see if we haven't changes or not   let's see i have an error over here i'm missing  semicolon now let's go ahead and start it   yes so you see it went up a little bit okay now  we'll do the same restart and test on iphone 12   so i'll come over here and select iphone 12 and  i'll do uh how to restart so which is this one   over here okay so there are no other changes  because it's perfectly fit and just now we saw   we had changes over here because it's a smaller  device okay all right uh so far so good and   now here uh let's take care of another issue  that i think we should because we want to be as   perfect as possible so that should be let's see  okay so this this within height 45 okay now uh over here it's okay this iphone 12 but  on iphone 8 if you see come over here   this and this one exactly looks the same  okay so it should be smaller we already   took care of the border but the size is same  so based on device it should be smaller right   so but we already have the height so what  we could do you could do dimensions dot uh   height 45. now do see this height  should be same the same amount here so we can just copy this one and put it and now i  want to restart as i restart it you'll see we have   changes okay yes it became much smaller okay now  by saying that one that it rose another issue now   the icon the search button is too big so we want  to make it smaller as well so let's see search   icon button should be okay so the search icon i  think should be somewhere over here okay this one   right so this is a search icon well now in flutter  the default icon size is 24 and we can prove that   we just write here 24 okay and if we restart  our phone and save it we'll see nothing changes   but if it's a 20 it changes okay it becomes  smaller and if we go to iphone 12 over here   and let's see so this is our iphone 12 now if  i restart over here it becomes smaller so it is   true that it's 24 okay so now while  definitely we'll use this 24 as our   uh parameter over here for finding uh  factors so here we'd write icon size   okay and for this one would just uh create  a new variable we call static double   icon size of 24 in this case and we'll use  screen height by so 844 divided by 24 so we get   35.17 so here we write 35.7 okay  all right now we'll come to our   uh main foot page over here and because we  wanted dynamic so here we'd write dimensions dimensions dot icon size 24 okay now we are on  iphone 12 over here okay so let's see what else we   have we have an issue okay here we need to mention  the size parameter name let's save it but for it   definitely no change but if you go to iphone 12  iphone 8 over here now let's restart it we'll see   yeah it becomes smaller where they look very  proportional okay and it's beautiful right okay   now saying that one at the same time we can  take care of this this this and this icon now   here it does look pretty okay but here it doesn't  look okay because it almost touching the bottom   right which is what we don't want okay now we  can because now we have this icon size so we   can go ahead and take care of that now these three  icons we know that they're coming from this file   so here i'll just go ahead and apply this  parameters so dimensions dot icon size 24 now   let's see we are on iphone 8 so we are on iphone  8 so what i will do i'll go ahead and save it and   it become automatically smaller and now they look  beautifully similar okay hopefully it makes sense   and i'm on iphone 12 right now but no change  well we have we have come a long way because even though it's been 2.5 hours already but  we learned a lot we learned how to make a   page view builder how to do the scrolling and  zooming in and zooming out and we also learned   how to use the dot indicator we learned  how to use the stack widget on container   widget and also within container widget we  learned how to use two different containers   all right and as well as we learned how to make  our app responsive based on different screen okay   and along the way we built some widgets icon  and text widget small text widget and big text   widget okay so eventually in the long run  for building this app it will save us a lot   of time anyway next we'll see how to build this  section and as well as this list over here okay   well to do that we need to come  over here and let's see we have this   food page body we would come over here and then  let's collapse them organize them a little bit okay and we are here okay all right so basically  what we have here right now for our simulator   over here so this is this slider  section right so slider section and this are the dots all right now over here we'll have uh popular  text popular text uh by this i mean this one   this section okay all right so over here  that's what we want to do well to do that first   definitely we need to create a spacing over here  as you can see so that's what we'll do now here we   do size box and we need to create a height right  okay in the side size box so we'll do dimensions   dot height 30. we already have it okay that's  the beautiful thing about it um the only work   on those well that's the beautiful thing about  working on these small tiny details which helps   you a lot of time down the road anyway so now  here we want to put them in a container first   okay well we are going to do container  because we want to apply a margin over here   and using container we can do that all right so  here we'll have margin okay and margin will have   uh edge inserts while only now we want to apply on  the left margin which in our case dimensions dot   width and 30 okay because margin is applied here  for the left section left side horizontally so we   want to work with the width now within it we'll  have child and we will have a row now we have   a row because we want to put these three things  popular this small dot and foot pairing together   okay all right so that would be in one line  so definitely now for this popular text   all we could do we could do it very quickly  because we already have the reusable text   so you would do big tech sorry we do big  text now here all we need to do pass the text   all right yeah so now if we want to see the result  uh let's see uh over here so i'll just put it here   okay and let's see which one has  been selected this is iphone 12   so now let's go to iphone 8 okay all right  so that's what it looks like over here   okay all right and okay so the next one  is we need to put this dot over here   well for the dot we also need to create a bit of  distance you see over here and over here so on   both sides we have distance so we do size box and  we would do width in this case and dimensions dot   with 10 all right and i'll just  copy this one because we need   two times before the dot and after the  dot well now we're going to go ahead and   draw the dot so for the dot itself we'll use a  container okay all right and why i'm going to   use a container i'll tell you so here we  can apply margin well we'll apply margin   later now let's see first we have a child  over here we'll once again apply big text   now it takes a text parameter and within it we'll  put this dot okay and then we'll have color so we   do color colors dot black let's see 26 i would use  this one okay now let me save this thing and let's   see this thing in our simulator so it's there  it's very tiny all right okay now we will have our another text which is called food  pairing okay so that's what we want to have   so what we're going to do here we want to create  another container and here we'll have a child   and within the child we'll have small text because  this text belongs to small text big text we use   this widget the one we already have big text for  this kind of light gray text we use our small   text widget okay that's what we'll be using so  we'll call small text over here now here we'll   use text as a parameter and we need to pass  foot pairing this word so you do food pairing all right okay and now we'll go  ahead and save it and see the result   okay so this is what we have  and now you see originally   in the original design foot pairing should be  below a little down from the top line but here   they're using the top line so that's one of the  problem that we are encountering over here okay   now one thing we could do though we could put all  of them at the bottom okay because we are inside   a row so that's what we'll do so here we'll use a  property which is called a cross-access alignment   so cross-access alignment end so with this  everything would come down to the bottom line okay   so let's go ahead and check it well let me save  this thing okay now it came down all right now   over here for the dot we want it to be a little  bit up okay if you see here it's a little bit   up not exactly on the bottom line okay these two  texts are on the bottom line but this text this   dot is not so for that one because we use this dot  inside a text over here okay so uh so inside uh   insert big test and container now because since  this big text is inside container we'll be able   to apply margin to it okay so that's what we do  now here pretty much we'll use constant margin   all right and we'll do bottom uh sorry uh bottom  three so we'll push it up a little bit okay   yeah so while actually it came down a little  bit somehow but it uh reached the purpose okay   all right so that's how it works now over  here uh for this foot pairing also we want   to apply another margin over here we want to  go it a little up right so over here maybe   we'll do two all right okay now this is what it  looks like here now let's go ahead and check it   on our another simulator the one we are working  over here so we'll come over here and refresh it   and yes this is what we wanted and this is  exactly the same as the original design okay   all right okay so with this section over here  well we're done with this and now we'll go ahead   and work on this one well okay so this would be  a list so list of images as well as their title   and things like that okay so we're going to  use list view over here to display this list   okay well for that one um let's see  would come over here so this is the   container that showed uh popular text and  things like that now over here would show a list   of food and images like that okay all right  well now first thing because we want to use   list view builder so that's what we need to  go ahead and call so you do listview.builder like as i said earlier every builder in flutter  that takes a function okay in their item builder   and first parameter is the context and second one  is index well the index is number of items you   want in this list view or in this list okay all  right so for now we'll set it to 10 and we can do   it using item count so we do it like 10 okay and  now of course it wants you to return a function   so or return a widget actually or a function that  returns widget it works either way so over here   we'll return a container okay all right now the  error should be gone because we are returning so   we need to use semicolon over here so while this  is a context well this context is not really this   context though it could be a bit different but  anyway you can just pass a name over here and now   this is the index so this index would be connected  to this one so it will start from zero right so   while you we want to build things like this over  here uh definitely first thing we need to do while   we see that we have over here a bit of space so we  can apply uh margin to it right so you do margin and here edge sets and sets insets only okay all right now here  we want margin for the left and right side   and we already worked for those things so  we do left and dimensions uh with 20 and   we want to use the 20 pixels and right is the  same and here dimensions dot with 20 as well okay well after that we want to return something  called a row because we want to put this section   and this section in a row so this is a big row  and first child is this image and second child   would be this information over here but within  the second child we'll have a column layout   and within column will have first child second  child and a third child but third child inside   of it will have a role layout which is pretty  much like this okay all right so anyway now here   we'll go ahead and declare a child and now within  child we'll have row and it we know row takes   children so here we are now and after that we  want to draw this right well definitely that's   drawing an image and image with border so  in that case we have to use a container so i'll go ahead and declare container over  here and within container i will use decoration   and we'll do box decoration and  here we'll have border radius   okay and the border radius dot circular and now we  already have a radius for that responsive radius   so you do radius 20. okay all right and uh well  we can also use a color over here if you want so   colors are white and this is useful  when because in future we'll load them   from network if the image is not loaded  yet so it will show you white or like say white with a color like like this  okay all right so that's better now we want to show the image so here we would  do image and we would do decoration image   and inside of it it takes another image property  and here we do asset image okay all right   and now with an asset image here we'll do  our image path which is in assets folder   and with an image folder and food zero one  point zero point png so that's the image we   want to draw okay now at this moment what i'll do  i'll go ahead and restart it on well say iphone 8   okay i will save it and we'll see what happens  okay now we do have some issues over here   regarding the size like the vertical viewport was  given unbound height well this vertical viewport   uh unbounded height there are a few ways  to solve this but we have to understand   something well in general when you have list  view builder it expects a size from its parent   uh parent container now for this listview  builder the parent controller container is the   column right but column doesn't have any size so  i can cut it over here and i could do a container okay and i can give it a bit of height say  700 and then i can just put it here as a child   list to be a builder okay now let's go ahead  and save it and it looks like part of the   problem has been sold okay and over here now i  have this two containers this one and this one   well the second one over here which i expect to  be the size of my image like as you see over here   so let's go ahead and apply to it and let's  see what happens so we do with 120 and height   120 okay let's go ahead and save it and looks like we still have this error but images  are showing up okay yeah now it is scrollable   okay yeah so part of the problem has been solved  so what we learned over here if you have a list   view builder then you need the parent container  of list to be builder should have a certain height   okay all right you can do as i mean as high as  possible even 900 1000 it doesn't really matter   okay well of course at the end it might come  out as uh empty but anyway so this container is   responsible for showing this image and which  we gave it within height okay well now we still   have this overflow over here that's because  uh it is being scrollable but uh it doesn't   know how long it should be scrollable okay now  here there are a few parameters uh we can set   up over here we can do shrink wrap to true okay  let's see all right and we still have this one   okay and there we'll set up other parameters  like physics okay let's see what happens and uh   always scrollable physics let's go  ahead and set okay looks like our uh   solution is not working but we do need to set up  this too okay and but the main problem is actually   coming from over here where i have this food  page body this is the section which is calling   this whole main page over here apart from this  header okay so to solve this issue over here what   we need to do i'm going to come over here and we  need to wrap it around a single child scrollable   uh widget okay and then the problem would  be solved i'll put it there now because   this scaffold which has a column this column has  a header and this body section right okay now we   want this whole section to be scrollable okay  not just this one all of it okay so that's why   we wrap it around single child scrollable but you  could ask that why you don't uh wrap this section   around single child scrollable well i'll tell you  later why not okay anyway now let's go ahead and   save it and we see the problem has been solved  and it is scrollable now okay all right now here   the whole page is scrollable okay right now and  that's the beautiful thing about it so the whole   page is scrollable you see i can scroll  okay but now there's this problem well   i can i can scroll up but if the header is i mean  the top section is gone i can't really scroll down   so we have this issue now i'll know how to solve  this one now this problem is solved from here   so i don't want it to be scrollable on  its own i want it to be part of the page   let me refresh it i wanted to this to be  part of the page and b scrollable okay   not just this section okay now if we just make  this session scrollable okay let's it it's okay   but this this part is too small okay so we're not  very user friendly that's what you would say right   so you want to make the whole page scrollable  i'm sorry okay you want to make the whole   page scrollable and that's what we're going to  do uh so you want to stop this section to be   scrollable on its own you want it to be scrollable  with the whole page so here never will apply the   property which is called never let's see what  is it never scrollable physics okay this one now let's restart or we didn't yeah we did now  you see the whole page is creatable actually   that's what we want all right and uh if we don't  have this one we still might have error let's   see let's run it from the beginning okay yeah  okay then we don't need this parameter though   uh we needed it earlier i think with  uh always scrollable physics but with   never scrollable physics we don't need this  thing so it's working as we expected okay so   but if we just make this section scrollable so  this is not user friendly page so that's what   we're not that's why we didn't wrap this pageview  builder around this single child scrollable okay   all right uh anyway so now we'll come over here  and let's take care of some tiny issues uh over   here we have radius 20 but it doesn't look like  radius 20 because we are missing out the property   we want to do the fit property over here so we'll  do boxfit dot cover okay all right now it looks   like 20 okay all right and over here um each of  this container they have left and right padding   and we can left and right margin actually we  can also apply another margin over here which is   bottom and we'll do dimensions height 10. let's  see yeah it looks much better now okay yeah great   so well here we are good with this scrollable  section well so this is the first container   so that shows image in the row right  image section all right so now here here we want to show our text section our text  container okay by the way we should go ahead and   check it on our mobile device over here which  is iphone 12 so let's go ahead and restart it   and iphone 12 is over here yeah okay all  right but we already encounter another problem   if you see this image's size and this image they  are same now that's because over here okay we'll   take care of it soon because we need to make this  section dynamic just like we did before over here   set up parameters okay all right anyway so now  first we'll go ahead and draw the text over here   okay well now for that one so for  that one we need another container   and within the container let's see what do we need  well uh definitely here you see we have a bit of   padding over here right yeah and that's one thing  and you see the container itself has curve over   here or radius so that's why we would need box  decoration okay all right so we'll go ahead and   do it very quickly so we do decoration and the box  decoration and border radius we do border radius   dot circular and dimensions that radius 20 okay  and we also need to use a color over here and we   so we can use white color as the background  color so you do color and do colors.white   okay and if you go ahead and save it definitely  you will not see anything uh let's see in our case   iphone 12 we don't have anything that's because  the container doesn't have any wither height so   we'll just use some dummy data so 100 and with say  200 okay now let's see yes looks like it's already   coming out okay now you can see it over here now  there are a few problems with this first thing   uh this radius over here we don't want any border  radius over here right so we need to separate   this thing so we can't really use this property  over here so we do only okay and then i'm sorry for radius only okay so it takes uh here's some  properties so we'd use top right and here we would use radius dot circular and now here we'll have  dimensions and the radius 20 okay top right and   bottom right that's what it will do circular dimensions dot radius 20 okay now you see over here this  uh border radius has been gone we just left with   this section okay all right okay but now there is  another problem though while i don't want to make   this with hard-coded okay so i want to make it  dynamic which means that it should reside itself   based on the container size okay you can't really  hard code this width you can do the height that's   okay because you don't know exactly where you  should stop okay so that's why we want to take   it out but if you take it out uh let's see yeah  it's gone okay so now this is the problem but   now here we can make it natural which means  that i want this container to take all the   available space possible okay all right now that's  why we'll wrap it around expanded widget okay now let's go ahead and save it now it take all  the available space now it didn't take this   space because we have uh over here we have this  left margin as you can see so that's a 20 pixel   and on the right there was 20. so this is the  sorry right marg right margin over here this one   so this is the 20 pixels okay all right so  if you put a container inside expanded widget   so expanded widget will force the  container to take all the available space now if we go ahead and check it on  iphone 8 and we'll see the same thing   let's so here we pretty much see the same  thing okay all right so that's working okay now it's time to take care of this  column over here this column section okay   all right now the column itself should be  within another widget i would say that's   a padding widget because here we want to apply a  bit of padding okay so first here i'll have child see we have to insert the container for that okay  so here we'll have child and i'll use a padding   okay and within it we'll have padding   okay all right so we'll use the edge inserts  only let's see only okay now here we just   want to apply padding to the left okay so we  do dimensions that width 10 okay all right now here we can use child and we'll use a column  and the children okay all right so far so good uh   now definitely we could for this one a nutritious  fruit meal whatever it is uh let me check on it   uh middle in china okay well that's what i'd write  over here so anyway so here i would call reuse our   big text widget which is this one i'll just simply  go ahead and call it big text widget and over here   we need to apply a parameter which is  called text and here i'll write new pre just fruit meal in china okay all  right now i'll go ahead and save it   now i'll open up my simulator this is iphone 8  all right looks like it's taking all the space and   if we go to iphone 12 let's refresh it which is this one okay so here we up  we have this dot dot dot automatically   we have this dot dot that's because i  think previously we have used overflow okay   so if the certain text is  longer than the container   then we use dot dot dot but we can also use fade  in it doesn't really matter let me change it to   fade refresh it yeah so it just faded in okay  but i don't like it so we'll use ellipsis i would   come over here uh would come over here okay well  so now would go ahead and do this next section uh this one all right yeah but now here  you see original design it's cutting off   from here it's not really going too much  to the end uh that's because we can apply   another right padding to it okay and we'll do  dimensions dot with 10 okay now i'll save it and   i'll watch it on iphone 12 now it's  looking better okay all right great next we want to take care of this thing with  chinese characteristics that's what it says   now here i'll do small text for  this one small text and here with chinese yeah and that's it and then what we'll do  we'll go ahead and use this one but i think   previously we have used it somewhere in this  same page so we can just go ahead and copy that   so let me search for it so i think the word is  called normal normal okay so over here so this   section what we can do we could just go ahead  and copy that so we'll copy the whole section and just know where we were okay we are here all right so i copied that  one and i'll just put it right there okay now   i'll save it and run it now i will try  to view it on iphone 12 so let's see   so this is what we have here right and it looks  pretty messed up well but don't worry we'll take   care of this thing well the first thing first  uh here we want to start everything from this uh   left side okay so we can use  this column property over here   so you do cross axis alignment cross axis  alignment and we'll use this property okay   yes it's already looking better now we  want to center everything so we'll use here   main excess alignment which is the vertical  one and vertically we want to center all of   them okay then we do main axis alignment dot  center okay now these are all pretty much   centered but they're still congested okay now  that part should be taken care easily you can   just use size box for that okay now here we would  use width i think height and here dimensions   the height 10 we can use this one so i'll just  copy this one and put it right below it okay   now i'll save it and it's already looking great  isn't it okay and now we'll check the same on   iphone 8 let's see so this is iphone  8 so my iphone 8 simulator is here   let's save it run it yes it's  already looking great all right   now the other problem that we still didn't solve  is the image size issue okay now image size over   here uh two sections we have this image size  and this container size now if you see that   this container looks really good over here but  this container white section doesn't really   look that good it is too much uh space at the top  right but it doesn't have it's perfect anyway so   for for this one this height is 100 right it's  hard coded and over here within height for this   image is also hard to cut it so what we could do  it come over here and we'll declare over here say   place view size okay now here first we'll  declare a variable static double list view img   okay well in our case they're  all going to be square size okay   so i'll just use the square size so i'll use  only one okay so that's why list view img   size i think that makes more sense now here  in this case i'm going to go ahead with screen width okay all right so you can go with screen  height it doesn't really matter okay because   iphone 8 has smaller screen width a smaller screen  height than iphone 12. anyway so here i have this   container image size over here 120 so 390  divided by 120 that's 3.25 so our factory is 3.25   remember on iphone 8 iphone sorry  iphone 12 the image this screen width is   390. okay all right you can go go ahead  with height it doesn't really matter   now over here we'll use static uh double and for  this list view text container okay let's view   text current size okay we do screen  screen with now screen width is three   nine nine three nine zero so we want to divide  it by 100 so that should be 3.9 okay we'll come   over here and we'll just replace them okay so  over here we'll call dimensions dot list view mg size we'll put it here the  same let's be img size and here put it but we need to do a list view   text container size okay now let's go ahead  and save it see the result and it looks exactly   same as this one yet very proportional not too big  now this is our iphone 12 over here okay now i'll   go ahead and run it on iphone 12 make sure that  things as we expected are pretty okay all right   well we are halfway through our projects  ui part okay everything is working okay well one problem that this container earlier  i gave it a height 900 i can remove that   but if i remove that i'll have problem okay  it's gone and here in that case i can just   completely remove this container i don't need  this and this one okay now let's go ahead and   save it and we still have problem because if  you remove the container you need shrink wrap   okay now it's back do you remember that that 900  i put used earlier for debugging okay anyway so   i removed that one and with this we are done  with our home page okay well there's been long   hours with the home page but we learned  a lot of thing but now we'll go ahead and build this page well here we have these pages and  you can click any of them and you go to a new page   as you go to new page you have this related  information as well like this name image and   things like that okay so this is what we're going  to build okay so before we go ahead and build   you see that we'll have a background image  okay and over here we have this white overlay   so the background image white overlay and  this icons over here well due to these issues   we have to use stack widget for this screen the  screen we are going to go ahead and build okay   uh so if we use stack widget we can put one  item onto other items or one image or text onto   other items or images okay so this would be  built using stack widget all right and now   would come to our project folder over here  well now i think it's time to refractor our   project structure a little bit now here in the lib  folder i'll create a new folder and i'll call it   screens okay all right or i think i would go with  the pages that's what i like okay all right now   i'll drag and drop home directory inside page  directory and on android studio it will ask you   if we are going to refactor this  everything with this if i click yes   it will also do the correction for the library  import okay that's all if you're using vs code   it should have things like this as well but if it  doesn't have then you need to work on it all right   so here because we change the path so we need to  reimport it and we need to go at the top over here   let's see okay so the old one i can just go ahead  and remove that okay all right and with this we   are good now if you open up our pages folder now  we have home folder and within it we have this   food page body and main food page okay now  for this one we'll create another folder   and here we'll call it food okay now  within food we'll create a new directory   and we'll call it popular food detail dot dot  okay now this would be a stateless dart class so   we do st and we'll choose  stateless now here we do popular food detail okay all right and i  think we need to import some of the   libraries from here okay uh instead of  returning a container here we'll return scaffold well if we just return a  container in general the screen is black   we can prove it so we'll come over here and  instead of main food page we'll call here popular   foot detail this class and we'll  save it and save it one more time and   now if we come to our iphone 12 over here we  say it's black right anyway so we don't want   to return a black container we want to return a  scaffold scaffold will give us white background   color like this if you save it you'll see now here  we'll return body and within body will have stack   and within stack we'll have children and  children takes position widget we know that   and they are used for positioning items  or widgets on the screen onto each other   okay so over here now if we take a look so we  want to draw this background image first okay   now first thing we have to mention the  container position so that's what it will   do first left zero and right zero so it will  start from here and end up over here now here   we also want to define its width and height  so it is double the max finite so with this   it will take all the available width and then  we'll have height and we'll do 350 for now   and then we'll do decoration to show the image  we'll use box decoration and it has image property   which has decoration image and then  image as well and then asset image   so now with an asset image we need to mention the  image path so our image is food zero one dot png   all right now we'll go ahead and save it and let's  take a look so here we are on iphone 8 which looks so so here we are on iphone iphone 12  now we'll come over here and restart it   now we see this is iphone 8. of course  they look bit weird like here it's not   covered completely but here because the small  device is covered but we can force them to be   covered anywhere on any device so here  we'll use a property which is called fit   which has a property called boxfit.cover this  one okay now as soon as i save it and save it   for iphone 12 you see it's gone uh it stays  the same for iphone uh eight okay now another   problem is that this height issue it should have  smaller height because it's a smaller device so   we need to change over here for this one over here  i need to create a new variable so pop you popular   food over here now here we'll declare a new  variable and we'll call it static double uh   popular food i am the size like that okay and  we do screen screen height and divide it by 350   so we get 2.41 so this is our factor now what  we'll do come over here and we do dimensions dot   over here popular and this one okay  now let's save it and look at it and   let's come to iphone 8 restart it yes now it  looks much smaller and better okay all right   now here's the thing um so we are  done with this first section though   now we'll go ahead and see how to draw these  icons now definitely we'll draw the icons here   once again as a position widget okay so  here we'll have child now if you see from   this design we know that they have to in a  row right so here we'll have a row widget   and then we have to specify left  and right so we do left left 20   and right 20. but we want it to be dynamic so we  do dimensions dot with 20 which we already have   it and here it's the same so with 20 all right  now here within this row it'll take children but one thing this icon should be reusable because  these icons will be using in a lot of other places   so that's why we'll go ahead and create a new  icon a reusable icon class so here we'll call it   um app icon.dart okay now this would be a  stateless class and we'll call it app icon   now let's go ahead and import some  of the dependencies the packages   well now let's think about  it this icon what should be   uh usable reusable and what are  the parameters that we should pass   definitely we'll have this background color  the icon and icon color the background size   and icon size hopefully so over here first  we'll go ahead and start with icon data   and here i will call it icon and then we'll  declare another variable we'll call it color and it would be background color and then we'll have another variable  for color it should be icon color   and once again we'll have another variable  we'll call it double and it'll be size okay   all right now over here we'll come over here  while only required parameter is icon in this case let's remove this one okay now others  are all optional background color   uh this dot icon color and this dot size  now the default size is 40 in our case   okay or actually we can use 45  so in our case that is dimensions so in our case it's 40. now the icon color itself   okay so we need to pass a const color because  it's a default color so here we do ox ff756d54 so that's the icon color and for  background color we do the same const color ox ffc f4 e4 okay so these  are the colors all right okay now   we don't mention this in our app colors because we  learned that we can't really use uh dynamic digit   or numbers here it has to be a constant color  as a default value okay so that's why we can't   import here anything from app colors we learned  it before anyway so now i'll come over here   now first thing first so here we'll have  width so it is size and then we'll have height   that is size two and now over here we'll  have decoration we'll do box decoration   and then border radius border radius dot circular  and it will be size by two so whatever the size we   pass so divided by two then that would make  it a circle right and then we'll have color   and the color should be background color okay now  after this we'll go ahead and try to draw our icon   now icon should be a child  over here inside the container   now we call this icon constructor and all we need  to do pass this icon parameter which we already   have it over here and then we have to pass the  color now that is the icon color and then the size   well for now size is 16. all right so with this we  are done building our reusable app icon so all we   need to do come over here and call it so you do  app icon now here all it needs and just an icon   others are all optional so we do icons dot  arrow back ios this one so we'll save it and   if i go to iphone 8 so which  is this one i see it over here   but now here is this top issue problem so you can  take care of that you do top now we can do top 45   it would come down but i think we also  have a variable which is height 45   so we can use that one so it's done based  on device height right okay now definitely   we can reuse this one one more time now  here this time the icon is different   it should be shopping icon okay all right  let's go ahead and draw it so we saved there   but now these two are together and  we don't want them to be together   so you can separate them so you do main access  alignment main access alignment dot space between   so because this is a row this is the main  axis space between put them too far apart okay   all right now it's already looking better  now it does look like not at the center but   this is the default status of this icon okay it's  pretty centered okay so yeah now if we go ahead   and check our iphone 12 over here so which  is this one and it's already looking great   but now here we do have a bit of problem uh now  the size should be more suitable and for that   one we'll use the same approach that we have  used throughout our app so now here so we'll   define a new icon size so this icon size is 16  so we get a factor of 52.75 so here we do 52.75 all right so this is the icon  size and now we'll come over here   and instead of 16 we would do  dimensions sorry dimensions   dot icon size 16 okay now let's save it we  are here and now let's check it on iphone iphone 8 so here we are iphone 8 okay  now on iphone 8 it's a little smaller   and iphone 12 it's a little bigger okay that's  perfect okay now we're done with that section   now we'll go ahead and draw this one this  white background okay well for drawing this   white background first we need to come over here  and over here we'll have another position widget so let's go ahead and create a position  widget and now here we'll have here child and   child as a container well every time we use container there's one  big reason that we can apply padding and margin okay well now here actually this part is  a little over above this image okay so   that's one thing we need to take here but  apart from that uh it starts from zero and   le right side is also at zero okay so  you do left to zero and right to zero   okay all right and now here for the top part  what we'll do we'll get this dimensions first dot uh let's see popular food size image  and we'll start it from there at first   and then we see what we can do and for over here  child you can apply a bit of padding so that   inside the container we create some empty space  here so you do edge inserts and only now here left   now we are always using dimensions 20. so that's  what it would do with tony and right with the dimensions dot with the tiny and the top  is the same now that's the dimensions dot height 20. okay well now other thing we see that we need this border okay so that's why we'd use  decoration and the box decoration   and here border radius border radius dot circular  and here we would use dimensions dot radius 20   and here we'll have color and  we'll use colors dot white okay well so far so good and now  we'll go ahead and restart our app   so now we are on iphone 8 so we'll go  ahead and see how it looks like on iphone   8. so iphone 8 should be somewhere here yes  well it's there but we still don't see it like   the curved and things like that that's  because it started right at that spot okay and well if you say decrease the height a  little bit the top section you see it goes   up all right yeah otherwise it starts below  now of course we don't have any content   so it's not visible okay but it started right  there yeah so that's one thing because we don't   have content so we don't see anything well first  thing first we can we need to get some content for   this and of course the content is coming according  to this design but for this design actually we   have done this work in our other dart file and  i think that was for our home section over here main food page so here we have this   i think the file name is food page body over  here and now here we have this section i believe that's inside this and over here   this column section okay so this is the section  that we could go ahead and copy and put it there   so i'll copy this one and  then we'll come over here okay and inside this container right  after decoration we'll put it as a child   okay and we'll put it there we'll open it  and we need to import some of the libraries okay and let's see over here as well okay well all the errors are gone now let's  go ahead and save it and see the result and here this is iphone 8 okay now  while we do have this white color   that's because we have white background   uh which is coming over here but now because we  want to achieve this result just like this so   right now we're starting right after this height  but we want to go up a little bit so now we do   say minus 20. now as you go up you see your border  is obvious okay so that's what i was talking about   well of course it's not taking this complete height but we can force it because  we are inside this position widget   so over here we could do bottom and  we could do bottom zero all right yeah now it took the complete height okay so   within it actually we can set a different color  over here instead of white let's see we do red   now you can see that it took  the complete color right okay all right but now over here uh instead of  being circular uh circular in every direction   we need to be just in two directions  we do only now here we do uh top right border radius dot circular  dimensions dot radius 20 let's see okay that is just radius okay and then we'll have top left and radius  dot circular over here dimensions dot radius   20 okay now if we go ahead and change the  color let's see now it's perfect this two sizes   these two edges okay so that means it's working  but anyway we'll fall back to white color okay well now saying this  section um after this actually we could do one thing we can just go ahead  and create this section as reusable okay so   this section we are using over here and  as well as i think we used it over here so   we can make it as a reusable section so here we'll  create a new dart class and we'll name it column app column dot dot okay and here first we'll  create a stateless class and we'll call it   app column okay all right now we need to  import some of the libraries we'll do that   now would come over here and we'll cut this one and then within this app column  file we'll just put it there and of course we need the dependencies here now would come over here  and simply call app column okay now while we save it  and we'll see it's working   now the same would go over here uh our  food page body so here we'll call up column and we have it okay so now this way  it became more simpler and readable now one thing though like this text has  to be dynamic so we need to pass it down   at least the name we can change  dynamically based on whatever you pass   based on that one so that's why here we'll  create a variable and we'll call it final string   text and over here we do required this this.text and instead of doing hardcoded1 here  we do text whatever we pass down   and for now everything else could stay the same   so well if we made changes over here now we need  to come over here and make changes otherwise   otherwise we'll get error so here we'll do  chinese side save it and over here is the same okay okay and we need the property which is called  text let's save it and everything's working refine now there's one issue though if you see over  here this is the title text now this title   text is a little bigger and bigger font  okay but now here if we see our app column   now within f column we have this big text on  the big text is using actually pretty much   fixed size over here because if we don't  pass anything then we use font size 20 right but actually for this one we want to pass a text  but we also want to pass a text that is dynamic   okay so that one we want to pass so for  this reason we'll come over here and we'll find our dimensions file and over here  we'll create a new text font size okay which is   this one font size so here i'll go ahead and just  simply copy that and i'll create font size 26. for font size 26 we are using  screen height so the factor is 32.4 okay now over here let's come to this widget now for the big text   from here actually we can pass a font size or size  down okay so what do we do dimensions dot font 26 okay now look at our phone uh which is iphone  8 now it looks a little bigger and we'll run it   on iphone 12 right now from 12 i didn't  refresh anything so this is iphone 12.   let's refresh it and we see it's a little bigger  over here so hopefully it looks much better okay   so do remember that size is an optional  parameter which we have seen early   like over here so whatever you pass if  you pass that one that would be used okay   otherwise we use the default one which is 20.  anyway so this section has been done pretty well   now we need to go ahead and work on this  one and this one well of course working on   this one would be a breeze pretty easy so  what we'll do uh will come over here and over here now the problem is so inside this  container we have this child but it's taking   this app column now a column is wrapped inside a  column so we can't really put introduce directly   over here what we need to do we need to cut  this one and create another column over here and put here it as a child okay and then  we want to put this introduce okay   now for this one what i'll do i'll just  call big text okay and over here i'll write   introduce okay and i'll go ahead and save it  so now let's go ahead and check on our device   so yes it's okay but now here we  can change some of the properties   so here we'll do we'll use cross access alignment  property and cross access alignment dot start   so it started from the beginning now over here  between these two we want to create a certain   distance and we use we'll use size box and here  we'll use height and dimensions the height 20. oh now we'll go ahead and draw this bottom bar  or this bottom section well to do that actually   we can use our stack widget which we already have  one over here uh i'm sorry not stack scaffold so   we should use our scaffold yet now we  know that scaffold has a property body   and bottom navigation bar so that's what we're  going to use bottom navigation bar and we'll   wrap everything inside a container that's  because we are going to apply this top margin   bottom margin and left and right padding or margin  like that okay and first thing that it will have   a height so that's what we'll define so you do  120 and after that we want to apply padding to   our container okay and padding should be just  because to put everything in the middle okay   yeah so here we do edge insets dot only  okay and now here top the top we'll use   uh dimensions.height let's see what do we have so  we have 30 and for bottom we'll use the same one   dimensions dot height 30. and  for left we'll use 20 so we do   dimensions that width 20 and for right  we'll use the same dimensions dot with 20. all right okay and uh now we can also use a color but to be  able to use a color we need to use decoration   because you see we have border okay so now we'll  go ahead and use decoration you do box decoration   and here we'll use border radius  now border radius dot only   because not every sections just top  sections will apply border so here we do top left radius dot circular now here dimensions dot radius 20 but i actually want  to use 40 so we multiply it by 2 and the top right here is the same  thing radius okay here i have an error circular and dimensions dot  radius multiplied by two   now we can use the color so we'll use a color  over here inside this decoration and we do   colors app colors dot button background color  well this is a color that we have in our   app colors file now we'll save it we'll come over  here and we'll look at our iphone 12 pro which is   over here and we see that this is our border and  it's already showing up pretty much over there   okay all right and but we do see a bit of issue  that we have this edges over here and the color is   a bit different now that's because our background  might have a different color for scaffold scaffold   might have a different background color but  we can override it so we can set it to white now you see it's more clear okay  all right so that problem has gone okay well now if we see over here this  two should be in a row okay so inside   this container we want to have a child so that's  what we'll do and then we'll have a row section   all right and now within row this is our first  child and this is our second child but of course   first child also is a container as you can  see it has this border so we have to apply   a container okay so we do children and  within it would call container widget okay all right now continue widget  over here we could apply color to it   uh well in that case we need to use  decoration and box decoration first and border radius border radius  dot circular now here we would use   dimensions dot radius 20 that's what we want to  use and then we'll use a color for it and we do   colors dot white okay all right now here we want  to use uh another row because we have this minus   plus and minus sorry minus zero and plus okay so  now here in the child section we'll use as a row   and here it would be children  okay now here we'll use icon so items dot first one is remove okay all  right now we can use a color for this we use uh   colors dot sign colors okay so we  have this color in our app file   app colors file and then we'll use  uh over here this is as a big text okay text for now it's a zero then we'll use another icon and icons dot add that's what we'll use and the  color is the same and app colors the design color okay now we'll go ahead and save  it and see the result so we should be on iphone 12   so let's check it out so here we are well it's  not what we expected but we can do it much better   now here we can see this container so for  this container actually we can apply padding   okay so that's what we'll do so  do padding add in sets only and let's see well definitely we could do top and  now dimensions height say 20 okay and the bottom   same would do dimensions dot height 20 and left   dimensions dot with 20 the  right is the same dimensions dot with 20. okay now let's go ahead and save  it and see yes now it looks much better   well of course over here we  can create a bit of distance   so here we do size box and here we  do with and we do have dimensions dot with 10 do we have with the 10   well we have with the 10 but we don't want  to apply 10 we want to apply five okay so   multiplied by divided by two and let's come  over here we'll do size box the same thing   so with dimensions that width by two   all right and now let's save it and it's looking  much better okay hopefully it makes sense   that how it works okay so that's the first  container and which is showing this one and which   is exactly same as this one okay let's go ahead  and compare yes they're exactly the same right   now over here we'll go ahead and draw  the other section which is this one so for that one once again we would use container container widget and here well we'll have color definitely   but to be able to apply color we need to use  decoration we do box decoration and border radius radius 20 and then color we do app  colors dot main color okay all right   and we also want to use a child over here  and for now the child is a big text and here say ten dollars and would say that to cart  like that and we have we need this text   property otherwise we'll get error let's  go ahead and save it and see the result   and here of course this is not what we want  first thing we can change the color so we'd use   colors.white because we know that  in big text we can send the color   all right now here same as  this one we need to apply this padding so we can just go ahead and  copy this one and we'll put it there   and it looks much better well now they're  too close to each other these two containers   okay so while we do that that we can push it to  the left and the right side so what do we do here   we'll use the main axis alignment property and  we do main access alignment dot space between   okay perfect it looks perfectly fine so  with this we are almost done here and   next to uh we have to check this on  iphone 8 okay so this is our iphone 8   yes it's iphone 8 and we'll restart  it let's go ahead and see while this section is quite okay over here but  now this height is not that proportionate   okay so we want to take care of that one now  once again this height was coming from here   which is 120 so we would go to our dimensions  file over here uh here i'll create a new section   now call it bottom height and here  create a new variable static double   bottom height bar and then we'll do screen  height now here we have to get the factor so 844 divided by 120 so 703 so our factor is 7.03  okay so we'll come over here and just replace that   one dimension damages bottom height bar let's  save it yes it looks much better okay and let's see what else um i think that's it   so so far looks good um next we'll  see how to put the text over here okay well to draw the text over here first  we understand the text component over here   okay so this is our text component and we  can collapse it we can scroll through it   and we can uncollapse it so here it doesn't  look that simple it's just not a text it's a   scrollable collapsible text okay so that's  what we want to do well now first over here   so we'll have a text we'll pass a text to a text  widget that means we're going to have to build   a text widget okay and after building the text  widget will pass a text to the text widget and   that text widget would be responsible for counting  how long is this text and if it's too long   then we'll hide some of it and if it's uh not too  long then we'll just show it completely okay so   what we'll do we'll set up a restriction that  how many texts should be visible at the first   time okay so we'll have a certain length or  height actually we'll take the screen height   and when it's more than that certain length say  for example 200 if the height is more than 200   then we'll just hide the text okay the rest of  the text so here we are going to use screen height   certain height in the text length these two  are these two things we are going to compare   if text length is more than the screen  height then part of the stack text would be   hidden and then once we click on that that would  be open so saying that we'll have two conditions   either the text is too long or too short if it's  too short we'll just show it if it's too long   first we'll show the half and then we'll show the  rest okay to show the rest we'll have a button in   a call in a row okay so here we have this show  show more and here we have this button so it's   clickable and here you see it's also change its  direction okay so saying that one this kind of   text would be also in a column format okay in the  column the first section would be the text section   and the next child would be this uh button  section but the button itself should be in   a row as well okay so this two because  you see in the button we'll have our   text and the icon as well okay so first thing  we need to do we need to go ahead and build our   text widget well to do that i'll come  over here and within this widget over here   here i will create a new file and  i'll call it expandable x expandable text widget okay like that and here we'll create  a dart file i'll close this one and here uh   because we are going to click on a  button so it is clickable right so the ui   is redrawable on this page so that's why  we're going to create a stateful class okay   instead of a stateless class because  if we create a state stateful class   we can use our set state function okay such  state function just works in stateful class   anyway so here we'll call it uh the class  name expandable expand sorry x and double text   okay all right so let's go ahead and import some  of the libraries okay all right so now over here   uh we want to pass a text from this class over  here okay actually right there so right now we   have this three sections over here do you remember  that so the first one is background image right   and the second one over here is uh  showing these two icons right so   i can reject over here and here we have this uh  pretty much like uh introduction about the food   introduction of food like that okay so here we'll  do expand expandable text with it okay that's what   it will do over here so right over here we'll call  it so once we call it we'll pass text to it okay   we'll pass a long text so we'll come over here  so we want to pass a text to do that we need to   first declare a variable so do final string text  over here and now this would be a required one   okay so let's go ahead and add  this keyword okay we are good well   after that we need to come over here and  over here we'll create two new variables   and we'll define them as late so the first one  is string string type and that would be the   first half of the text and we'll create and the  late string variable so it will call it second   half okay all right now we are going to use late  because we are going to initialize them later okay   so whatever the text we get based on that will  initialize this to text so that's why you mark it   late if you don't mark it late you're going  to have to initialize them immediately   okay all right well now after that we'll also have  a variable boolean so here we'll call it bull now   its name is a hidden text so generally we'll  set it as a true because first time when we   have a long text part of the text would be hidden  and we'll use a boolean as a true for that okay   so at the same time we also  need to initialize over here   uh initialize certain conditions okay well  for that one uh we'll initialize and the   variable and we'll call it uh text height  okay we'll do double text height and right   here we'll initialize it so over here we do  dimensions okay dimensions dot say screen screen height and we'll use a factor 5.63 okay so  it's more like over here a little more than 100   it's a little more than 100 so this will return  little more than 100 so this is the height we are   going to use so if the total text length is more  than around like 200 or something like that then   we'll hide the rest of the text so this is called  text height now regarding this solution actually   there are many different ways you can do it but  the one i'm going to use is the simplest one   otherwise the coding would be really long and  too much logic is there so this is the simplest   approach i'm using using the text number number  of letters i have with the text height this is   not i wouldn't say this is the best solution but  it works okay anyway so this is the variable that   i've created and then i want to create one state  method in its state method so we do overwrite   and here we'll have void init state okay and  now here we have to do super dot init state okay   all right now here we'll do some conditional  check okay now do remember this text will be will   be passed from this class or any other class and  after that it would be initialized here and then   i take it in in its state over here and i can do  some interesting things okay so i can check the   length of this text that's what we're going to do  so here i'll set up a condition i'll do widget dot   text now here we'll take the length of it  so if the length is more than this length   which is text widget that means that whatever the  text was given it would surpass this height okay   all right in that case we'll split the text in two  sections the first half and the second half why   the first half will be will be shown on the screen  immediately and second how would be hidden so   that's why we need to separate this text in two  sections okay now here we do first half okay all   right now here we do widget dot text dot substring  so here we'll start from zero and here text height to end okay all right so that's the first  section and let's go ahead for the second section   over here once again widget the text  dot substring now here we'll start from   text height to string to end sorry plus  one now here we get the text dot length   okay well now here we have too much information  and let me explain what is happening over here so we check the length of the text whether it's  more than like this amount which is around 100   or 200 it doesn't really matter so now what  i'll do from the whole text i'll try to take   certain amount so the length the height amount of  text so it'll start from zero say for example you   have a text like i love flutter laravel and golem  okay now here we want to set a condition that   if some this text length is more than 30 in our  case if it's more than 30 so over here i will   set the text height as a 30 so this length  is more than 30 okay it's like that so that   that that 30 first 30 i'll put over here and  then in that case i'll start from zero so this   should be zero say for example 30 is up to here  okay so i'll take this amount so substring means   take the text and cut from it certain part okay  and over here we'll starting from zero and ending   at this now once again this is the length coming  from here so it's based on calculation okay   so just an example hopefully it makes sense  all right i'll put it back now the second half   hopefully we'll start from here okay from the  next one so that's why we'll take plus one over   here and then we'll go to the complete length  of the text so the text may be say length of 50   so first 30 i'll put it in first half and  second there 20 will put in second half okay so   hopefully it makes sense well if the text is that  not that long that means that it's a short text so   what i'll do i'll go ahead and put it in first  half okay first half equal uh whatever the text   was given so widget.text okay but now as i  said that uh it's a late variable so they   have to initialize before they're used so now  here i'm either way first half is initialized   but for the second one we could do second  half we call empty okay so it's null nothing   but if you keep like that it is totally  null and at the runtime will have error   and with this one it's just empty not null so  once you declare a variable using late in dart   you have to initialize it before you use it  either it's empty or whatever it is but it has   to be initialized somehow okay hopefully it makes  sense so now we are over here in the container   okay well the first thing we'll do we'll create a  child over here and we'll just pass the text okay   and how could you do that well before we go ahead  and use the text over here we can do a conditional   check we'll do based on second half second half  is empty if it's empty that means that the text is   really not that long okay yeah so in that case uh  we'll just go ahead and use the text okay so here   we'll pass the text in our small text widget okay  which we already have so here we do small text okay this one and here we'll use the text whatever  the text was given so here we do first half okay well otherwise we'll do a different  thing over here okay for now i'll just put   here container okay so what is happening here  so if second half is empty that means the text   is not that long so i'm using the first half  because second half has nothing so everything   has put into the first half right okay so if the  text is too small i mean the length so we use   over here come over here and use the text  otherwise we'll fall back to this condition   of course you can't use container container  is empty right so we can't use that one   so over here we'll use a column widget okay  remember as i said earlier if the text is too long   we have to use a column and the column the first  section will show this text and in the second   section we'll show this button over here in a  row okay so that's what we're going to do now so here we'll have children okay all right now over here we need to do  another conditional check inside this text   okay so what i'll do i'll copy this  one over here and i'll put it there   so here we need to use a conditional statement  well we'll show the text okay but based on what   based on this boolean okay well we said that  initially first time it would be true right   anyway so here i would write hidden text  if it's true then i'll show this text   over here and with this three dot dots  okay so here i'll write first half plus   dot dot dot okay so here i'm connecting two texts  together remember first half we'll have a text and   then we are adding these three dots using plus so  in dart you can connect to string using plus okay otherwise what i'll do i'll come  over here and show first half plus second half okay hopefully it makes sense   so what's happening once again so we are going  to use small text if the text is too long we   fall back to this categories not over here but  even if we are in the second condition but uh   as a default setup we are just going to  show the first half plus the three dots okay   because at that time at first hidden text is  true right okay anyway so that's what's gonna   happen and uh next we we're gonna create  a button over here right below this text   regardless it's the first text or first text  plus second half okay it doesn't really matter   so here we'll create a button and  for the button i'll use inkwell okay now encode takes on tab  properly for now i'll keep it empty   and within it i'll have a child and  inside the child i'll have a role   okay and then i'll have children as well okay now  the first one is a text over here right okay so   here i'll just simply write small text  okay and i'll pass over here show more okay all right so that's one and at the same time i  think we can use also color over here   so we use f colors dot main color okay all right  and then we're going to use this icon over here   okay all right so we'll just go ahead and just  simply call icon icons dot i think this one and then we can also specify color for it  so we'll use app colors dot main color okay   well hopefully it makes sense all right okay so  now we'll go ahead and come to our popular section   over here and we'll try to put it here but earlier  i think i made a mistake it's not outside of this   position widget actually it should be inside  this position widget okay from here because we   already have a column inside it because everything  over here belongs to this position widget okay   all right so we'll put that section expandable  text widget over here so we write over here   expandable text widget and we'll pass a text to it  i'm sorry next to it and i'll copy it a few times   okay now i'll go ahead and restart our app so i'm  on iphone 8 right now so that's what it looks like   okay but of course uh it doesn't work like that  but uh what i could do i could just remove part of   it and we'll see whether it i mean this buttons  are visible or not okay so it's a pretty long   text over here so i'll cut this on i'll just save  this one in that case let's see okay one more time   we are on iphone 8 and let's check the condition  over here so what is the condition is the second   half empty well now let's restart our app and  let's see okay because this is inside init state   so first time it has been initiated so unless  you restart your app it won't show like this okay   now i'll come over here and i'll put it back  and i'll restart it but of course because uh   this text this widget's text has been calculated  inside in its state right so we need to restart it   i will say it's there anyway so while  hopefully we understand that how it's working   now over here we want to change this flag once we  click on this we want it to be expanded with the   text okay so we need to toggle this hidden text  value okay so over here we'll just do that okay   so here we do set state this one set state is used  for triggering redraw based on certain variable   value change okay so here we do hidden text and  every time we toggle on it we'll do the opposite   okay so earlier if it was a true then let's see  okay uh because remember first time it is true so   once you click on this button which is this one  over here it will become false well if it is false   then remember we'll fall back to this condition  over here if it is false we'll show the second   half right okay so i'll save it let's click  on this yeah now it looks like we do have a   bit of overflow over here and we'll take  care of that soon but don't worry now   uh well i think uh we can take care of that one  first so to do that uh this widget over here   because we want to make it scrollable okay so we  need to wrap it around a certain widget which is   called single child scroll view that's what we do  so over here our right single child scroll view   okay now single child scroll view doesn't work  alone inside a column you need to wrap it around   another widget um that's called expanded widget  okay so i'll wrap it around expanded widget expand it okay so if you want to make a certain  section of your column scrollable you need   expanded and single charge scroll view together  okay so i'll save it and we say it's already gone   now let's open it you can scroll it okay without  this tool the scrollable is not possible now   so it's working and you click on  this it'll collapse itself okay   so that's how it works now over here there  are few other things that we could take here   definitely the first thing the icon itself  so we want to change the icon all right so   well now over here the icon i'll cut it and i'll  do a conditional check if hidden true then this   one so which is the initial condition otherwise we  want to uh arrow drop i think up let's see if we   have an icon like this now we don't have so search  for an icon over here arrow up let's see upward   um yes we do have drop up okay all right so  as the state change we want to change the icon   uh direction as well okay so you see it's already  changed automatically now it changes over here as   well okay all right okay now another issue that  it's too close to it so we want to create a   bit of distance now over here um we would just  simply go ahead and hold this one size box 20.   okay all right okay it looks better and  a few other issues that over here we are   facing right now so this text is too small  so that's one thing we want to take care   well previously i think uh let's  see where we are right now so   this expandable text widget over here now inside  we have the small text okay now over here actually   we can pass let's see if we hover over on it as  you can see we can pass a certain size to it right   so that's what we want to do so the default  size is 12. now let's go ahead and check it so default size is 12 okay so from  here we can send a text size so   say for example we want to make it  uh 18 pixel right so we can change it   and well if we come over here our  dimensions file over here which is this one   now over here we do have a certain font size so  we do have 20 or we have 26 but looks like we   can't use any of them so if we're going to use a  new one so we have to create a new one over here so what i'll do i'll go ahead and create a new  one over here right over here so we do static   double font 16 and then we would have  screen height now let's calculate the factor so 844 divided by 16 and that  is 52.7 okay so here we do 52.75 okay all right now we'll come  over here um our let's see   we don't need this one we  can close this one as well   okay so over here we'll pass a text size so we'll  do size and we'll do dimensions dimensions dot   font 16. let's see okay all  right so it's a little bigger now and over here you we need to do  the same thing so here we do size dimensions dot font 16. okay now we know that we can also specify   the color so we don't want this color for  the text we want a bit of different color   uh so let's see so we'll start from here  over here so we'll use a color over here   and then we would use app colors dot let's  see text color so let's go ahead with this one or we have another one which  is called paragraph color   yes this one so this is what we wanted okay all  right so we need to pass the same one to our   small text over here okay all right and another  issue we can also solve this is densely a little   densely over here so we can also send height over  here so we do height 1.8 okay now it looks much   better and more readable okay hopefully it makes  sense all right so it's already working and we   have built a beautiful page over here so we are  done with two pages and next we'll see how to how   to build another page which is coming from here  it would be more like this one okay all right so a   lot of the uh items that we built before like this  this this ideas a lot of them we can actually copy   from the earlier pages okay now this page would  look like this okay so better scrollable okay   now here we'll see how to achieve this result and  this result is achieved using custom scroll view   and custom scroll view has special effect  like this one or like certain part you scroll   or expandable header section like that okay well  to do that we'll come over here and within our   food folder we'll create a new  file and we'll call it recommend dead food detail okay and over here we'll create a stateless  class and we'll call it recommended recommended   food detail okay all right now we  need to import the necessary libraries   okay well now here we'll return scaffold and within scaffold we'll have body within  body will return casts custom scroll view okay   well now custom scroll view it takes levers so  we'll go ahead and declare slivers okay now what   is slivers well slivers are a special widget that  has special effects okay you can understand like   this like this is a sliver over here because it  is a special effect as you can see it disappears   slowly and it is a color whatever color you want  to define and actually this is also sliver here   this body section okay because it can scroll  through but of course we can do much more   all right yeah so here we have two sliver  component one is this one and and that is this one   so slivers property over here it takes a list  of slivers okay so first sliver we are going   to use that's called a sliver wrap bar okay  so sliver a bar okay now sliver upper has a   property called flexible flexible space so that  that's one we're going to use so flex see flexley   flexible spacer now where we are going to why we  are going to use this because we want to have this   background image okay now we want to have this  background image and slowly disappear it and show   a certain color that's what we want okay so that's  where we are going to use flexible space spacebar   now it has a property called background okay  background takes actually image so here we   do image.asset now here we need to mention  the image path so here we do our images all   are in assets folder inside that image folder  and inside it for zero point png so this is the   image we are going to use so you can use whatever  image you want and make sure that you type in the   image path correctly so here we would use our  additional properties all one of the properties   width now here we want the image to take the  complete width so max finite and after that   what we'll do we'll come to our main  file over here instead of popular   we'll write here recommended all right  yeah and make sure that you import it   i think i might have a type over here let's see  reiku min well i think it should be ed i'm sorry   so i'll just copy this one put it right there  and over here i'll put the same okay all right so   anyway so i'll come over here and now i'll save  it and i'll run it on say iphone 12 over here   so let's see where is my iphone 12. so this is  my iphone 12 over here and definitely this is   not what we expected okay but at least we can see  things so we want it to take the complete space   okay uh the width all right but it's not  because it's missing a property called box fit   so box fit dot cover now it will force it to be as  a container all right now well we saw earlier that   we want to achieve this result this height okay  now this is called expandable height which could   be expanded okay yeah so that's what we want  to achieve so here there is a property called   expanded height and for now i'll put it 300  and we'll come over here we already see that   it's expanded okay so when it expands it's  expands up to 350. so that's why it's called   expanded height okay and you can already see  that you can squeeze it or scroll it but if   we are going to achieve this result now we  need to have some some more slivers within   this cleavers list okay and then they will all  scroll together okay and this special effect   so we want to use another sliver but that  sliver will put inside the body section of   the screen inside the body of custom scroll  view and that kind of sliver one of them is   delivered to box adapter so as you can  see this lever it adapts inside a box   okay or inside custom scroll view okay so now here  it takes a child and now in our case the child   could take any kind of text over here and now for  this text itself what i'll do i'll come over here   and copy this long text okay i'll  copy it from here and let's see   i'll put it there i think i need to put inside  this thing and i'll put it a few times so it   is really a long text as you can see from  here although i'll go ahead and copy it   and i'll check it on my phone okay now it's  already there as you can see that's a scrollable   okay now with this we are already getting  better a few other things that we can take care   now we want it to stuck over here okay so there  is a property which is called pinned now over here   i'll use it as a true okay all right now it can  expand after 300 and when it gets pinned we have   this certain height okay and at the same time we  can use this uh another property which is called   background color and for background color i'll  use a custom color you can use any color you want   so app colors dot yellow color okay now it's  yellow because i want to stick to my design   now there's another thing that i want to achieve  uh achieve like this one over here as you can see   okay so i want to achieve this kind of bar over  here regardless you want this with this background   i mean this border or not but i want to achieve  this result okay now to do that uh we have to use   another property which is called preferred  size okay inside bottom property so bottom   takes preferred size widget so that's what we're  going to use okay now it has a property let's see   another preferred size inside preferred size  so here actually pretty much you mentioned the   size that you want so you'd use a size dot from  height and we'll use 20 over here and i think it   takes another child over here and as a child for  now i'll just pass a random text over here and   i'll call it uh sliver app bar okay now i'll  come to my phone over here which is this one   okay now i'll save it and see the result  okay so it took some space over here okay   well i mean it didn't really take space it just  showed up over here okay now of course you can   do zero all right now it is still there okay uh  we can do uh much more than this because this is   just a text over here right but we want it it to  have a background color so for that one actually   what i'll do i'll use a container okay now  container i'll use say color we do colors.white   okay all right and it looks like it's  gone okay yeah now of course because   we don't have anything as a child over here so  we'll pass a text over here and now i will say   slaver app bar just now we didn't have any  content so it was gone now it showed up once again   now here let's see we can use other property  which is called width so we'll use double dot   max finite so it will take the complete space  over here and it's already looking better   and as well as over here um inside the container  we can use another property which is called   padding and here we do edge inserts only  now here i'll do top five and say bottom   bottom 10 okay so it looks  it's looking already better   and over here we want to center this  so i'll wrap it around center widget so it would be centered so it's already centered  okay all right and it's already looking great now   of course i don't want to use this text over here  i want to use our custom text which is a big text   okay and here we'll i'll have a different  name over here i'll say chinese side and that's it okay yeah now for this one i  can use a different font different size   okay because i think it's too small you can use  whatever size you want okay now here we do uh   dimensions font 26 because we know that in our  dimensions file we have all the font size saved   okay all right so it's already looking bigger okay all right now for the container itself  we can also apply a bit of margin   so here we do margin okay now for margin we would  do uh edge insets only now here we'll have left   and for left we'll have dimensions  dot with 20 and right dimensions dot with 20. okay you're right oops i'm sorry this  shouldn't be applied here but a mistake i'll   cut that and i'll save it actually i wanted  to apply it over here now to be able to apply   it over here we need to wrap things around a  container okay well we'll do that let's see yes anyway so now i'll come over here so there there is a bit of problem though now  as you see it's not as big as before so here   let's see try 20 so it came down a little bit okay  and this is what we want to actually achieve okay   so that's the preferred size so you can use extra  size if you think you are not satisfied okay so   if you take it out so it goes up 20 pixel if you  put it back it comes down a lot of pixels i guess   anyway so now the next thing we want to achieve  is this result these two icons okay so that's what   we want to achieve over here now for that one we  can use another property within sliver app which   is called title and title takes actually widget  any kind of widget so within it we'll use our   children now here i could go ahead and  simply put any icons so i can start i can say   whatever the icon you want and that would  definitely show up let's go ahead and check it so   it's iphone 12 and as you  can see it's already there okay yes now of course this is not  the icon we want we already have our   custom icon so that's what that one will use okay app icon let's see this one okay now here all  we need to do pass the icon name so icons dot uh well we do have this clear  okay this is what we'll use   and it will show up over here and it's a bit of a  icon and then we'll use another icon so app icon here icons dot shopping let's see what shows  up so we'll use this one okay the right okay so these two icons are together so  we'll use a property of row which is called   main access alignment so  we do main access alignment   dot space between so we see that they  go far to this end all right yeah okay now there's this problem you see it kind  of cut off okay now to get rid of this problem   we have to use another property which is called  toolbar height now we'll set it to 60 okay and   it's got a little better okay all right uh or  we could use more of them actually so use 80. okay yeah so now it's better but  in my case i'll just go ahead   and stick with 70 and we'll  see how it looks okay all right so it's already looking better okay yeah so  we are almost uh very close to the result   we wanted to achieve which is this one and  we also have to achieve this result right   okay now this result is actually done within this  container itself okay now here you see this is a   border right so all we could do we could come over  here and here we do decoration and box decoration   and here we do border radius and border radius dot  only now here with the top left and we do radius dot circular and you can just go ahead and 20  or the one we have saved in our file we'll use   that one radius 20 okay now what i'll do i'll  go ahead and copy that and instead of top left   we'll use top right okay all right and let's see and of course the this is the color so as we are  using decoration color has to be inside decoration   now we'll go ahead and save it and let's see how  it looks like yes it's already looking better   okay okay now i think instead of top five well um  yeah it does look okay all right okay so the next   thing we want to achieve is uh this thing over  here and we want to make it scrollable okay all   right well to make it scrollable definitely uh  scrollable like i mean like this this this kind   of scrollable okay or collapsible i would say so  this is what we want to achieve okay to do that   over here we'll have this text uh we have  this child right so over here we'll use column   and within column we'll use children and within  children we'll use a container okay container   and within container i'll have child okay  now within child i'll use this one expandable text widget and it takes the  text properly now here i'll put   the text that we had early so i'll just copy it  a few more times from one more time over here   and i'll put it here a few more  times uh it would be a long text okay   all right now if i save this i will see this  result over here okay that i can already scroll   and collapse this one okay like if i  come over here all right okay now uh   another thing why i use container because we  want to apply margin to it or padding right   so the container outside i can use a margin  so i would do margin over here okay and edge   let me go ahead and do it right after it so  margin now here we do edge insets dot only   now here all those left so dimensions dot with  20 right dimensions dot with 20 okay all right   now let's save it and it's already looking  better but now we have this background color   issue so we want to use scaffold background  color over here and we do colors dot white and it looks much better now okay all right  so this is the result we wanted to achieve and   here we are now we'll go ahead and achieve this  result okay well to do that would still be in our   recommended food detail file and over here we  already have this body now because we are using   scaffold scaffold has another property which is  called bottom navigation bar that's what we'll use   okay and now over here we'll use column now you  have to understand why we use column because here   we have these two sections this one and this  one okay so they are on the top of each other   and also inside the first child we'll use this  row and in that second child we'll also use row   okay all right now we'll go ahead and over here  write children properly and then we'll do row and   now within row uh i will have children okay now  for this icon and the background we already have   f icon which is this one so what i'll do  i'll go ahead and just call it so i'll do   app icon okay now over here it takes icon name  so here i would pass icons dot remove okay   all right and i'll just copy this one and put  it there and i'll use add this is another icon okay so i'll just go ahead and save it and try  to run on my device and this is what we see   now it's happening because we are using column now  first problem is this column is not wrapped around   any parent container scaffold is not really a good  container as a parent so it's messing up where   if you wrap column against inside a container  it would take that space in the container but   definitely we don't have a container but  there's another property which is called uh   main exercise we can use that one main exercise  dot min so it'll find the main exercise main axis   which is this one and use the minimum space okay  all right now here we see that so at the same   time i think it puts in the bottom okay all right  so now this problem has been sold now over here   these two items shouldn't be together so here  what we'll do we'll use another property which   is called main access alignment this one and main  access on man dot center okay sorry space between okay so now it is pushed too far to this  end now there's other problems as well here   the background color we want we don't want this  one so we can set our background color over here   and we'll use the background color we have  in our app so app colors dot main color okay   yes and as well as the icon the icon  color so we use color and here we do   colors dot white okay all right uh let's  see i think here is called icon color okay all right so well for now uh let's see so  that we know what's happening i'll put it just   like this okay now that's okay and let's save it  the icon is white but now the icon is too small   over here so we don't want such a small icon  now the icon is too small because uh for the   icon itself there is a property which is  called the size property okay all right so   now the size itself uh just a 16 so that's why  it's looking too small but we can use a bigger   size but here we see it's hard-coded the size over  here so we can create another optional parameter   over here and we'll call it i final icon size  uh sorry here final double icon size okay all   right now this would be an optional parameter  so here we do this icon size okay all right now so icon size over here what we'll  do we'll do here this 16. okay while it says that it has to  be constant do remember that   that's why we put it here 40 so  here we'll use 16 okay all right well now there's another problem so how do we uh  change it okay so either i'm going to use a 16   or i'm going to use whatever is given right  so in that case here i'll just write icon size okay so whatever you send from here i'll  use that one if you don't send me anything   new then i'll use 16. okay so hopefully it  makes sense well so for that one we need to   but we want here in this case actually use a 24 so  you want to pass 24 to it so for that one we need   to come to our file where it says app dimensions  or dimensions i think this is over here now   here we have this size for icon okay which is 24  so you can just go ahead and simply use this one   okay so once we are here now we can add a new  property and the property name is icon size   and we'll pass from here  dimensions dot icon size 24   okay now it looks better and bigger  and looks like we do have an error okay while because we have change of a lot of  things over here most probably for that one   we had this earlier error but now  the error has gone as you can see   okay so we are good now we'll come  over here and we'll come back to our   code over here okay so it's working right so what  i'll do i'll go ahead and copy this one and remove   this section over here and all i do just to change  the icon name okay so instead of remove it is add so let's save it and we see there's another new  icon now this section is doing great but here   the padding and margin issues that we need to  take care so we'll wrap it around a container   and we are doing that because we can apply padding  or margin if we have a container okay so here   we'll use a padding and we'll do edge inserts  now only now we do left right top and bottom   all of them so over here let's do the left and  we have this file over here dimensions dot width   now here we want to apply uh 2.5 times so whatever  it is so actually i wanted to apply something like   50 but i don't have 58 with so whatever i have  here i take that and multiply by 2.5 so that   gets me 50. all right hopefully it makes sense  over here it's the same thing but instead of left   we'll use right now we'll see we already have  changes over here and as well as top and bottom   so for top we'll use uh dimensions dot height 10  and bottom is the same dimensions dot height 10. okay so it's already looking great all right okay so that's all right now here we need to put  in the middle we need to actually put something   so which also means right over here okay yeah uh  what do you need to put as we saw earlier that   we have to have this section right so we need to  find a space here actually okay in between them   now here let's see uh we can use the  text i we just already we have one   that is called big text right and show  this text over here now here we do big text okay all it does it takes text all  right now here because i'm using dollar   signs so i need to have this slash then i  would do 12 okay dot 88 all right and uh   well here that has to be a different string so  that's why what i'll do i'll go ahead and do   like this and plus zero now in future they would  work independently like this section would be   dynamic this section would be dynamic as well  okay all right let's see what else we have um i   think we need to use the dollar sign otherwise  it will say it's not necessary okay all right   no so we'll go ahead and save it and let's see  the result so yeah that's what we have over here okay now the color is not really matching okay so the color is not really matching  so you see the color is more   dark over here but we don't have so  i think for this text we can use a   color i think we can pass color so  we do app colors dot main black color hopefully it should should have changed   and also the font size so let's use a bigger  font size over here so here we do size uh   yes we can put size so we do dimensions dot font  26 okay uh yes now come to our app over here   okay so now they look uh yeah better and  bigger okay all right so over here i think   we need to have some space because they're all  congested i guess so here here here here and here so now let's check it on our simulator all right okay so that's great and now we  need to focus on this section over here   okay this bottom bar and this bottom actually  we want to put right below this container   okay now do remember previously we  worked on our another page which is which is this one over here okay now  it did have a section like this okay   so we can go ahead and use that section let's see i think that  section was this one over here and as well as let's see the whole container actually i would  say so i'll go ahead and copy that one   and i'll come over here and i'll put it right  below it and we'll see how it looks like okay now   let's get my simulator i'll put it there  and i'll restart it yes that's almost there   so it saved us from a lot of work now  over here we need to make some changes   uh let's see well inside this  container um we don't want like this   so definitely we need to change this one and  pretty much everything over here so we don't   want this child as a row okay and rather than we  want an icon okay well for the icon uh we would   come over here and we'll pass a child over here  and simply will just pass icon okay all right let's see and the icon should be i  cannot take let's see why it's showing an   error we don't need that one now though  now here we'll use uh icons dot uh favorite   this one okay and we'll use a color for  this we do app colors dot main color   okay and what else i think that's it let's save it  and see the result let's go ahead and check it so   this is our device often 12 and it's  already there it's already looking great so if we we of course we can change the size  of it we could do a different size let's see   size say 45 it'll look bigger but we don't  want that whatever the size is given there   24 we use that one okay so while with this  we are done uh so far we have built few pages   uh we have built the home page over here  and then we have page this foodman page   main food page popular page and  recommended page okay all right well   next part of the tutorial we'll combine this few  pages together and we'll do navigation and after   that we'll see how to use how to build api client  repository because we want to read data from   our server and that is very exciting thank you  everyone while in this section we'll learn how to   build api client repositories and controllers  and how they're connected in our app   so i'll walk you through the complete process  so stick to the end so for this one first i'll   take a look at our basic app example and  then we'll understand that why we need our   api client repositories and controller and  how they should be connected okay now for   that purpose i already have a demo over here now  i'll click on this and this is a live app and   this app is actually on the server okay now over  here if i click on this i can go to a new page   if i click on this i go to a different page and  now here i can add things and i can add up over   here and then i can head to cart okay if i have  to cart there's a response over here then i can   close this one once again but if i go back this  one i can see my previous card which has been   saved early and over here i can add more stuff if  i want okay then i can come over here i'll be able   to see my cart and over here i can also reduce  or get more okay now after even after that i can   go back to my home page and i can come over here  this is my personal center and over here i have my   address saved and i can save a new address from  here okay and then i'll come over here and save it   okay all right and then if i come over here  i will see that i don't have any card history   okay like this but this history is coming from  our database okay and this is the running order   and over here i don't have any information  anyway so i can go back to my home page   uh and if i come back again i can scroll through  them and i can add more stuff and then i can add   it to the cart after that i will see that i have  more information over here now i can go ahead   and check out click over here okay and that's it  so i did that okay now if i come over here i'll   see that i have a new order generated okay sorry  about that one okay and this is my local history   of my cart okay so i can do much more information  of course over here i can log out and then i can   sign in once again and that's what i would do one  three seven six one eight four nine zero one six now i can sign in now once i sign in i see my  information over here the one i saved increa   once again i can go ahead and change my address  if i want all right so you get the basic idea so   app like this so this is a simple e-commerce app  where you you can make post from the server and   flutter framework gets it and process  the data and you can do whatever you like   so for app like this you need to have your  architecture ready to keep it up and running   because here we are doing actually a lot of  things okay now your architecture should be uh   ready from the beginning and it should  be the right way the correct way so it's   not a simple to do app where you just go and do  everything together so you have to separate your   logic uh your ui and dependencies so that's why  we need to learn how to work with api client   repositories so for that one i'll come  over here and i'll take a look at this   basic structure and here first i'll explain what  are these things and how they're connected then   we'll go ahead and build these things uh one by  one okay so anyway so this is our basic flutter   app over here and inside the app we have this main  function now within main function we are going to   call a function that's called init but of course  this init function we have to create on our own   in general i mean it's not in in the main  function itself we have to create it right   so we'll go ahead and create it now the  main purpose of this init function is   loading dependencies as you can see i wrote over  here so we'll load dependencies you might have a   lot of dependencies but here i just listed a  three actually you can do more now one of the   most important dependencies is api client so init  function would load the api client now here the   name is api because you can understand that from  here we are going to call some restful api so app   like this the one i showed you it should talk  to the back end submit data and receive data so   now this is a client side so now it would go to  the server from here right make request or get   data so that's why we say this is a client okay  so server is this one that will serve our client   but anyway it may sound very high-level for  beginners but it's just nothing but a dart   file over here in our case flutter app okay and  in this api client inside we'll have get and   post request body okay the actual body of this  get in post request would sit inside api client   so in app in general you just want to have you  only one get request uh so get get method and   one post method and using those two methods you'll  talk with the server get for getting data and post   for posting data but your app could be complex  but how complex it is it doesn't really matter in   general you will have just only one get request  and one get method and one post method okay   so hopefully it makes sense now so so get  and post request body are in api client   so now we need to call that body or the  method so the actual method is inside   this api client now we need to call the method  now in general the methods are called from   repository but once again repository just a dart  class over here because we are in flutter app   um anyway so we'll build a dart class and you  can name it anything it doesn't really matter   but the concept that we call this kind of dart  classes are repositories because it calls the get   and post method remember in api client we'll  have get and post request method as well as their   bodies right and from here inside repository  we just call them directly okay hopefully it   makes sense so body is there you and you call  the body from repository so the main purpose   of repository is just calling the methods what  methods get or post requests that's all so it   that's the simplest way of understanding and  in actually in real life when you go coding use   repositories the dark classes are pretty simple  and in general they're very small okay and uh   api client is a little larger than uh repositories  okay now next one we'll talk about the controllers   okay so now controllers process the data now  where is this data coming from a lot of time   repositories get data from api client remember  if we have data if we use get get request so   that means we are getting data from server now api  clients get the data from server because it is the   body it talks to the server and server sends some  data and but of course we call that get method   from repository now in return both api client  and repository the return data okay that data is   passed to controllers okay yeah so now controllers  they process the data and whatever the data   that we are going to process and after processing  we send it to the ui and you we redraw the ui   so that how it works uh but anyway now  take another look so if you are going to   for example make a get request so from  ui you will collect some data from you from ui you will call controller because you want  to get some data sorry not collect data for a   get request from ui you will call the controllers  okay now then controllers will call the repository   and repository will call the get method in  api client and then api client will talk to   the server okay and the opposite for post  request well definitely for post request uh by the way i think i need to talk more a little  bit about this one about get so forget once again   uh ui from ui we come to controllers and from  controllers we go to repository repository to api   client and from api client we talk to the server  and server process the get request and sends data   back to api client because it's a get request  so we get data and then that data is passed to   repositories and repository pass the data down  to the controllers and from controllers we put   the data to the ui and then the redraw happen  so this is the whole cycle of uh controllers   repositories and api client for a get request okay  now the opposite if you have a post request so in   general from ui will collect some data and those  data would be sent to controllers and controllers   would first process the data then it will come  to repository and then it will find the related   get or post request in this case we'll find the  post request so we'll call the post request and   that post you just sits inside the api client of  course at the same time we are passing the data   along this process now api client would find the  post request body or the method and sends the data   to the server now after sending the data to the  server server process the data and send a response   back to us now once it send a response once again  it it comes first to api client then to repository   then to controllers and then to the ui so this  is the basic structure that how it works okay   so hopefully it makes sense so now now we are  clear what is uh api client repositories and   controllers now we'll go ahead and take a look  at first hand how to build this thing actually   now we are going to build init method api client  representatory and controllers and you can just   follow along with me and if you are following  from any other tutorial just to try just trying   to understand this concept you are still good to  go just follow me but i will follow along with   my project the one i'm doing over here but if  you are not following this project you can just   simply make a simple flutter app i mean just the  beginners app the default one we make in flutter   app just go ahead with that one and follow  along with me and you're good to go okay   now this is where we left last time  but this time we are going to build   api client repository and controllers so  for that reason we need to create some   new folders the first folder i'll call over  here i'll call it helper okay all right   so this is a folder and within helper  i'll create a new file and i'll call it   dependencies okay dependencies dot dart okay  all right that's all now over here we'll create   a class well we don't need to really create a  class we just call create a method over here   and method type would be future but it won't  return anything and the method is in it and   then we'll just simply have this curly braces  okay all right now because it has a future   the return type so we need to use a sync and  that's all okay and this is the init method   that i was talking earlier okay it's as simple  as that okay now once we are done with this one   but uh once we are done with this next we need  to go ahead and create a class for api client   and once we create the class for api client  we'll call that class inside init method and then   we can call the init method from our main function  okay so that's why now we'll go ahead and create a new folder so here i'll create a new folder and  i'll call it data and inside the data i'll create   another another new folder and over here i'll call  it api okay and inside api i'll create a new class   and i'll call it api client dot dart okay and  create a class and we'll call it api client   and in our case we are in uh we're going to use  getx for managing our api client controllers and   repositories so that's why we need to extend get  connect and then we need to implement another   interface which is called get x service okay  all right after that we need to create some data   uh variables for initialization the first one we  do uh late string token because in general when   you talk to the server you should have a token  and that token should be initialized inside your   api client okay so that's why we have a token over  here now here i'll create another variable that is   also string type and we'll call it at bayes url  now this is the url of our app uh the app that   would talk to the server so server url okay so  that's what we'll have over here now of course   we'll pass this from somewhere else the one calls  api client from there we'll pass it to over here   now we'll create the constructor for  api client and here we have a required   variable or parameters so record this dot and   base url and after that we'll go ahead  and create a constructor body over here   now we'll use base url equal app base url now  we'll also use another parameter which is called a   variable here we need to initialize it that's  called timeout now we'll give it a duration seconds 30. okay all right now let me ask what  are these two things now if you hover over on   it you see they are coming from get get connect  and connect to dart so this has to do with get x   uh package management system these two variables  so get x package management system should know   what is your base url so you pass it to  that one and each time you make a request   so how long the request should try and  after that whether it should continue or not   so here you try a request or try to get data from  the server for 30 seconds okay uh keep sending   the request and after that if you fail you'll  stop it okay so this is the time out time and   we'll create another variable over here and  there will be map type and will that it would   be late type as well now the variable itself  is a late type now here we'll have a string   and a string okay and over here we'll we'll have  a private variable we'll call it main headers okay now what is map map is for storing data locally  or converting data to map we can do that as well   now it has a key pair value so that in our case  we are expecting string as a key and the value is   also string but this is just for this variable  okay so here we are going to create a map and   map will have key and pair value type the  case string the value is string as well   and soon we'll see actually what is the headers  okay i'm going to do that now here i have i   marked it as a late so that means that before i go  ahead and try to use this one i should initialize   it so i'll initialize it inside the con this  constructor and here i'll call main headers okay   now once again uh maps they have curly braces  okay in general in dart file something that   wrapped around curly braces uh most of the  time that's a map and on the other hand a list   are wrapped around this braces or brackets okay  so that's how you differentiate so anyway here we   will have a key and value so in our case the key  is content type and here we'll write application json and charset utf that one and authorization a u t h o r  i z a t i o n authorization and bearer token so let's see and we need this one  okay now headers why we have this   api client and this headers now once again i said  that if your client is used to talk to the server   now here we are going to talk to the server  but every time you talk to the server   you need to mention the header in your url and  that's where we are going to initialize this one   regardless it's a get request or post request you  should have your basic headers ready so when you   want to get response from the server you tell the  server hey look this is a get request but i want   you to send me json data okay that's all okay and  this is also for the post request as well so if   you send a data to the server server knows from  the header that oh the json the data is coming   from the client which means our app or from this  api client that is json format okay so that's why   you need to mention the content type over here and  this is the decoding or encoding section that how   it should decode and encode a lot of time this is  not that important but it's better if you have it   now here if you make a lot of post requests  in that case you should have you should send   a token from your device to the server so  that's why here we mention our token okay   and that's why we have this variable  over here hopefully it makes sense now uh let's see um yeah and now this bearer  thing so a lot of time the token type is bearer   so you need to mention the type over  here now this is used for authentication   and this kind of key is called authorization  because we want authorization from the server   and the token we send that is bearer type  okay all right so that's about our api client   now we need to go ahead and create a class for  our repositories okay now in our case uh once   again here we'll create a new class and inside  and we'll call it sorry we'll first create a new directory and directory name is repository  okay all the repositories would be lived in   the would live in this folder  now here i will go ahead and   create a new repository that would be a dart  class and i will call it popular product repo okay and dart you can name it  anything you want but in general a   lot of time at the end they put this word  called rapple okay that means repository   that's all now we are here and as i said  earlier the repositories are pretty simple okay   now i will create a class based on my repo name so  i'll call it popular product repo okay all right   and here we'll extend get a service now the package has been imported automatically  now repos talked to the appoi api client and that   has to do with internet connection so that's  why a lot of time when you load data from the   internet you should extend this get x service so  just simply remember when you load data from the   internet if you use get x package you should  ex your class should extend get x service okay   yeah that's it okay now here we need to create  a variable and we'll call it final and api the   type is final and that that variable will be api  type uh client and we'll call it api client okay   all right now over here we'll pass api client to  product uh to our repositories as we saw earlier   over here okay so they are connected somehow okay  so repository should have access to the api client   because if it has then from inside repository we  can call a method that is live inside api client   okay so api repository should have an instance of  api client so that's why we are creating this one   over here hopefully it makes sense okay because  if we have this one now we can go ahead and   call any kind of method that would leave  over here okay so this is the instance now over here uh i'll go ahead and create   empty method and method type would be future and  it would send me response from the server okay   and i'll call it get popular the  method name popular product list okay and over here i would need to mention  here the type that should be a sync type   okay because it returns future now here we need to  have a return section otherwise it's being cranky   okay now we'll take care of that one now i forgot  one thing though over here we need to create the   constructor okay so we do popular product repo  now this is a required one so do required this   dot api client so whenever you call first time  this repo you have to pass the api client okay   all right hopefully it makes sense now here we  need to return something okay return what well   as i said earlier from repository you would call  a method inside api client but we don't have the   method yet so we need to we'll need to go ahead  and create a method okay well for now we'll just   create a post method and after creating the post  method we'll call the post method from here okay   now we'll come to our api client over here so here  we'll go ahead and create a get request okay i   mean get method actually not a request so it would  be future type and over here we'll have response uh by the way if you wonder what is this  response actually this is the response would be   from the get x package okay because instead  of http client here we'll use getx client for   getting data from server and get x returns  a response to you but of course inside the   response you have your data so the type is  response over here now here we'll call get data okay now get data should have the uri okay because  you need to specify the uri uh the url for your   server i mean for the request the endpoint  okay so here the type is uri okay all right   and after that you should have uh well  we can have a lot more thing over here i   think for now i'll just keep it simple okay  and then i'll have this curly braces and   after that we have to return something as you said  as you see here the type is future response right   okay now here first definitely we have to use  a try class this one okay so inside the try   we'll call something from the server okay  and if it fails we'll catch the error   in our catch clause okay all right now  over here we'll return a response okay all right now here well there are a lot of things  that we need to take care right now well the first   thing we want to create a get method over here  or get request so that would be a wait and then   we'll pass we'll call get and we didn't get we'll  send u r i okay yeah that's as simple as that one   okay now let's see it's asking you  to add async modifier okay all right   now so it will get the data and of  course first it will wait for the data   and once it returns the data we'll save  it in an object which is called response okay all right so and after that  we'll just simply return the response okay yeah that's as simple as that  one okay but if there is a response   okay now if there are problem over here now  we are going to return something interesting   so here let's see this is a response now  as you see here it takes status code and   status text some of some of them okay so we'll  go ahead and use two of them right now so if it   fails we'll send a status code equal one and  then status text okay now the text would be   coming from our error so you do e dot to string  okay hopefully it makes sense now with this   we are ready so this is a very simple uh request  for getting data from our server and of course   in our case we are using get method from getx  i'm not using http client okay but of course   get x inside it uses http okay so anyway all it  does is it's try to get get the data it wait for   the data when data is returned it save the data  in a response type object and then we return but   if it fails then we will return the fill and the  error message things like that hopefully it makes   sense now we are here over here inside this okay  as you said that it should return something now   what it should return uh well before it returns  it needs to call the api from the api client   right so here we can just simply go ahead and  call it so here we'll go return await api client   dot get data okay that's all okay  now here we'll pass a url endpoint   url okay url that's as simple as that one okay  so now we are talking what is what we saw early   now we are realizing this one as i said earlier so  repository would call a method from the api client   so repository is just simply responsible for  calling it and that's what it does over here   okay of course this is not a correct url we  have to build that url somehow say for example http.www.stack.com api product list okay it should  be something like that but we have to create this   one okay all right so that's what we learned  and at the same time we learned that once you   get the data for get request first repository  calls the data from the api api returns the   data to the repository and then the repository  would send the data back to the controller okay   so now we have to go ahead and create a  controller and once we have the controller   we can get this data because here you see  it returns your response okay so inside the   controller will get that response and process  it so for this one i'll go ahead and create a new folder inside it and i'll call it controllers and inside this controller i'll create  a new file and i'll call it popular popular product controller dot dart   okay that's as simple as that one now here i'll  create a class and i'll call it popular product controller okay now here it will extend get x   controllers okay no service services getting  services in general they're in rappos   okay or inside api client sorry over  here i think we can close that one and this one as well so  anyway so here we have this uh   popular controller product uh popular product  controller now here we need to create a   variable that's what we'll do and we'll call it  popular product repo and now here we would say   paw peeler product repo okay hopefully it makes  sense now here before i go ahead and initialize it   so i need to pass the record to it just like the  rep over here before you go ahead and initialize   the repo you need to pass the api client okay so  they're all dependent to each other so now here   popular product when we go ahead and initialize  it i need to have an instance of this repo because   if i have an instance inside this controller of  this repo then i can call this function okay so   that's why i need to go ahead and create this  instance but anyway now here i'll create the uh constructor over here okay now here  required this dot popular product repo   okay this is something that you have to  provide okay all right and after that   here i'll create a list for now okay and the  list type i would create as a dynamic dynamic and here i'll have a list inside of it  and the list name is popular product   list okay and we are initialize  it to null okay all right now why we are doing this  though because as i said earlier   from here i'll call this rappo and now rapper  would return the data so it would return data   over here and then i'll save the data to  this list okay hopefully it makes sense   now here i would go ahead and create a method  and the method return type is future void and   i'll call the method name get  popular product list okay all right   and that's it and over here i think i need to  create this have this async modifier because   the return type is future now i'll  come over here so now i have this   instance of wrap over here so i can just  simply go ahead and use that one and   call a method inside of it now we know that  inside there is a method so the method name is   get popular product list i think  is it this one let me check it   get popular product list yes so this is the one  so from here i call this one and this one will   go ahead and find the data find this method inside  api client all right now api client would return a   response so repo will have the response over here  now repo will return the response to me okay and   i can catch it over here okay i can save it  so anyway so i'll first save the response   as a response over here response response  now why i'm writing here response sorry now why i'm writing here response because remember   rappo returns a response so over here the  variable should be saved in a response   object and now here it's yelling at me  because uh over here i need to put a weight   now the error should be done why we are putting  a weight because over here that returns a future   type okay so we need to wait until we get  the data okay now once the data is ready   once the data is ready then uh well so somehow  it would return a response either the correct   response or a failed response either we need  to check it so we do response dot status   sorry response dot status code if it's 200 now  in general most of the api client http client   they return a status code of 200 if it is  successful okay most of them they return this one   so in our case get x also returns status  quo 200 if the response is successful   that means if the response goes from from here to  here and then to here and then this one not this   one when it returns from here the status code is  just you see it's different okay yeah so otherwise   when it returns from here it will return to  us 200 okay so anyway we'll come over here   so if it returns the correct response uh we'll  save the data in this list before we go ahead   once again i'll initialize it to null because  you may call it many times this method   so if you don't initialize it to null you  might your data could be repeated so first   we'll initialize it to null okay and then  i'll call popular product list dot add all okay now over here you need  to put your data all right   yeah that's as simple as that one  but now putting the data over here   is not that easy you have to have something a lot  of time we need to go ahead and build a model okay   and the model would get the response do remember  because from the server we get a response and the   response is part of the data within response we'll  have part of the data and our data is json type   so here inside we'll have json type data  but we need to convert that json type data   to a model okay so we need to go ahead and create  a model but we don't have that model yet okay so   we can't really go ahead and use it but it gets  you the idea okay so for now i'll keep it empty   but of course it'll show you an error okay now  once you have this one over here most of the time   you just want to update because if you call this  method so that means the data has been updated   and our ui would know so this update is more  like set state okay this one all right now if   it fails over here okay then you would you want  you'd want to return something different okay   and that is the idea of how you connect your  controllers repositories and api client okay   now if this is successful okay now this list  you can access anywhere in your uh ui okay well   but to do that you just simply need to one thing  over here you need to do like this list dynamic popular product pure product list get i think get should be here and here popular product list okay now why you  don't want to call this one directly from ui   because this is a private variable which has  underscore in flutter in dart if you have   underscore that marked as a private variable so  once the data has been saved here and then you   can just call this one from your ui and this is a  simple list so inside the list your data would be   say for like this a b whatever the data you have  like this so you can just go ahead and read them   okay now before we want to see what actually  happens we need to go ahead and build a model   otherwise this is not just gonna work okay  but you get the idea so the most basic idea   that how it works okay so you have this init  method inside this it will have api repository   get post and controllers things like that okay  but now here is another thing is missing from   the puzzle that our init method okay so now we go  ahead and put data or the dependencies inside our   init method okay so for now i'll comment it out  because otherwise i'll have an error now here i'll   come over here and this is our edit method okay  now here you need to load the dependencies okay   all right for uh flutter get x you  need to just simply do get dot lazy put and then you just call your dependencies from  here okay now in our case the dependency is   api client the first one in general  in dependencies you want to load   api client first okay here i think  we need to import the library yes   now remember it has a constructor and it takes  data so in our case it takes app base url   okay now here we need to pass a busy world  it could be anything like http www.debate.com   okay all right let's see over here i  think we can import the whole package now let's go ahead and import the library   and the error should be gone so as i said  earlier you need to first you need to load   api client and that's what we did over  here okay so remember api client takes a constructor over here and we are passing the base url to it and then it will save it to  get x inside internally okay so that's the   first dependencies that we loaded now  in general after loading api client you   want to load the repositories so here  that's what we do you do get lazy pot now here we need to call our  repositories so our repositories name   over here is a popular product  so i'll go ahead and copy that now here i'll just use this  one and now inside of this one   you should pass api client do remember that  here it takes api client right so we already   initialized api client over here so now we could  go ahead and pass api client to it okay api client   yeah and now here we do get dot find and we need  to import the packages all right okay now here   so we initialized we created an instance of api  client now of course it's not here directly but   because we are inside get x package so once you  write api client get dot find get x will find it   for you but of course this name has to be same as  the name you mentioned over here if your name is   bit different over here or whatever the name you  use over here you have to use exactly the same   name okay now these two names are all same so now  gatex can find the related class for it okay so in   our case this is the api client class hopefully it  makes sense all right so this is for record right   or repositories repos and this is our api  client okay and next here we'll have our   controllers okay yeah now the same way we have  to go ahead and load our controllers in our case   i'll just copy this one now instead of popular  product repo i'll call the class the class name   is popular product controller so this one and i'll  come over here i'll replace this one now over here   first we need to import the package and now  we see that this controller takes product   wrap right so we need to pass the wrapper to it  and we already initialized over here the repo so   and the variable we created that's popular  product wrapper will copy this one and i'll   just replace this okay and it's gone so this is  how you correctly load your repositories in a   function okay first api client then all the repos  and all the controllers so you might have a lot of   reports so all the ripples try to load together  and then you might have a lot of controllers and   all the controllers you load together here one  by one one after another hopefully it makes sense   well then we'll have to come  to our main file over here   main.class now as i said earlier this init is  called from main okay so this is what we'll do   now here we have to import our dependencies  uh package so which is inside the init method   and so let's go ahead and import it so  here we do import now here the package well i think that's inside a helper folder and the  class name was uh dependence is the file name i'm   sorry this one and we'll import as dep okay will  it make sense you can name it anything you want   now here before you start to load your main  app or before you start to run the app try   to load your dependencies here and that's  the general convention so here we need to do   a weight and we would do dab dot init okay  and this is how your dependencies are loaded   okay before the app starts to run okay but  to make sure that dependencies are loaded and   you wait so here inside flutter we use  another function uh that's called we we jets   flutter binding dot ensure initialized so with  this method over here it will initialize that it   will make sure that your dependencies are loaded  correctly and wait until they are loaded okay yeah   so now with this we're pretty much done about  this section but only thing here it's missing is   this model as i said if we don't  go ahead and create a model   we can't really get i mean we can get  data from server but we won't be able to   show the data in the ui now another  thing we also need to solve over here   uh if we come to our repo all right now this  one is hard-coded this has to be dynamic okay   or this link has to be saved somewhere else  so that's what we'll go ahead and do next   and then we need to go to our endpoint which is  server side and we have to have a method called   a list okay that list would return the data so two  things to go two things to do well the first thing   we'll do next is go ahead and build a model  and once that has been done we'll go ahead and   create this endpoint in the server and then we'll  be able to show the data inside our controllers   and then from ui we'll just simply call  this method or this field over here   earlier at this tutorial i told you guys that  later on we are going to have the focus on dart   and actually later down the road most of  the coding would be about dart not about   flatter anyway so before we go ahead and  build our models we have to clear some   concepts about json and models and how they are  connected and we'll also take a look at what is   nested json and how we can build a model okay  so we'll focus how to work with this well to   work with this you have to come over here and  this is a basic example of nested json over here   of course just a diagram and i'll walk you through  very quickly now here in general nested jason's uh   or any kind of json first it'll have curly braces  and inside curly braces it will have a key and   value this kind of section or part like here i  have these two curly braces and so that makes   it json and now inside json we have a key and we  have a value okay and here i have another key but   inside this key well i have uh over here another  json you can understand it like this section   okay so that's another json so json inside json  that's called nested json that also means that   outside you have curly braces and inside you have  another curly braces and within the inner curly   braces you have more key pair values so we know  that first thing first condition for a format to   be json it has to have a key and value so we have  over here so that's the first json and inside it   we also have another key and values wrapped  around the curly braces so that makes it the other   jason or the nested jason okay so in general nest  adjacent would look like this outside curly braces   and internally it will also have curly braces  okay so that's the most basic idea all right so   that's all our theory now we'll come over here and  over here you can just type it in dartpad.deb and   it will take you this kind of page and over here  we'll clear some ideas now over here definitely   we have seen what is called nest adjacent but  before we go further because we have to clarify   another idea which is called map and later on  we'll see how map and jsons are connected and   we'll see how map jsons and models are connected  okay so they are all connected so over here we'll   clarify part of the idea about map so i'll go  ahead and declare a map variable and i'll call   it bar and i'll call it my map okay all right now  in dart if you declare a variable and variables   body section it if it has curly braces that makes  it a map okay now just like jason we saw over here   over here key value map also has a key value for  it okay so that's what we're going to do here   we'll do the basic one first i'll do name and i  would say does to you that's my name though and   now here i would write age here i would write  34 and here i would do city i would do shanghai   okay all right so that's what made it a basic  map okay so anything wrapped around curly braces   and inside that you have this key and value just  like json that makes it a map of course in dart   there are other different ways to declare map now  for those understanding you have to come over here   this is another article that i created uh there  are a few different ways that you can create   map like this is the first way just now we  did is the second way where you can have first   create a map instance using this constructor and  you create the case and put the value directly   and there's the other third way okay now over here  you mentioned the type of the key and the value   so in our case here we are saying  our keys they all should be string   and the values are dynamic so that means they  could be string or they would be integer or   any other type okay so that that's what makes  it dynamic i will come over here and basically   in this section would be sticking to this format  of map but here actually just now what we saw   and over here the basic idea is same because over  here we have this is these things are called keys   and they are all string now the value it's string  or integer as you can see over here all right   so over here we see this is how we declare a  map and create values for them in a pair within   using keys okay now we'll see how to access them  okay now over here and generally you'd go and   you do like my map and if you over here if you  write your keys name like name so name is my key   over here for the first one and i'll just hit run  and we'll see it prints values okay all right so   that makes sense so that's how you access  the items inside a map using the keys okay   well there are other different ways but here  we'll just stick to this one okay all right so   that's the most basic map okay but just now we  saw a map looks more like jason what do we saw   over here okay yeah within curly braces key and  key and value key and value in this format right   so you could say they are relatives or cousins  all right now we'll see what is a nested   uh map okay or nested map or the same over here  what is nested json okay now while over here i   already have this one okay now i'll create  another field and um over here i would call   say address okay now after that i'll put it  like this i'll put this brackets over here   okay now for address i'll create one map inside  of it all right now here i'll say country   and here i would do say china okay and  here do city and here i write say shanghai   all right now here i'll copy this  one and put a comma over here   and i'll put it one more time again now  here i'll write say bangladesh and cd daca   okay so here over here this is a map right but  while this section has a key pair value right   okay but what is this now here in dart whenever  you see something is wrapped around this kind   of braces that's called a list so what's what do  we have here so here we have list of maps so this   is a list of maps we have two maps you can have  more maps okay that's what we saw earlier if we   go back to our json file remember here's the json  format but the most or the most amazing part about   this json and map they're pretty similar okay  yeah i would say a lot of times 99 similar okay   yeah so when if you understand what is json  then get your header on map becomes pretty easy   okay so now here i have this key and while  in this case this is also key but this key   contains a list and a list contains a map okay  so here i have list of maps okay now for this one   pretty much how how do you want to access this  one but here just now we saw we could do my map   and here i can print name all right now i can  run it and i'll see this one my name over here   print it but of course if you try to do this  one my map and let's see let's see the result okay so it does print whatever inside of this okay  yeah now there's another way to access this thing   not like this say i just want to have a particular  value from it like the country for the first map   okay i want to just get the  country or the city name   whatever you want i think i would type  over here though all right anyway so   you can we can do that but how how we do that  now here i'll type over here now i know that   i can access this one right so here what i'll  do i'll create a new variable and i'll call it   address list and here we would do we'll save this  list which is coming from our map we'll save that   in a new variable and i will call it address map  okay all right so let's see oh that is my map not   maymap all right okay so now i took this list now  this list definitely coming from here and that's   the maps key so i took the maps key one of the  keys and interestingly this key contains a list   right so now this is a list so if this is a list  i can access it okay access the inner variables or   inner items okay not variables the inner items and  how i would do that well here i would do address   list as list we need to cast it to list  and then we'd use 4h okay and it takes   elements and each of the elements we'll call  it v or we can call it e this is the convention   okay now here we can do a  print so here we do e country and now we'll print it over here  let's see and let's see how things go   all right so the first country is china  the second country is bangladesh okay   so while when you convert it to a list and each  time it will take one of them and after taking   that it will try to take the key whatever the  key you mentioned over here and form that one   it would print the values so over here we could  do city and we'll see different results right okay so we have shanghai dhaka so  now we know what is nested map and so which is pretty similar to our nested json  well now once again i'm going back to this   one again and again because in general  you in in your app in your flutter app   you'll have your json this kind of json actually  coming from the server and once you take it from   the server it pretty much look like this okay  so actually once you take it from the server   i would call it map instead of json even though  the convention they say it's all json but   the format it gives you most of the server  side when you return data for restful api   the data is pretty much json response and  most of them they have this kind of format   and we'll see that the restful api we are going  to build and use that also returns this kind of   json and which is pretty similar to map and if  it is similar to map we can do this a lot of   things because it becomes a map all right okay  so that's the basic idea about map and nested   map and nested json well now how to go ahead and  build a model for this one that's what we'll see   now okay now we'll go ahead and build a model now  why you should build a model well once you build   a model there are tons of benefits okay well  you really don't want to work on your flatter   project or app using map and access them like this  like earlier we did okay so for example my map   name like this okay you don't want to do that  because as your project gets bigger it would be   hard to maintain especially the naming thing if  you want to change that's very difficult because   you have to name in a lot of places but once you  do build a model you just change in one place and   that makes your life easy okay and there are lots  of other benefits and this is also a good practice   so i strongly suggest whenever you have json file  or map in your uh flutter app and if you're going   to do some uh build a class or make some operation  on them so try to build a model based on your map   and it will make your life a lot easier and the  model building model class idea is same throughout   other framework or languages okay so once you  master how to build a model based on a map you   will see when you try to learn another language  it becomes pretty easy okay the idea is always   same just like we saw how json and map they are  similar right so the ideas are all transferable   okay anyway so to build a model first we'll create  a class over here and the class name i'll declare   person now why i'm doing that because here  in this map i have person's information okay   that's why but you can name it anything you want  here first i'll go ahead and type string name   h and string city well for now i'm not going  to put this one we'll do it later for now i'm   going to cut it take it out well now here you  see this is a small class where i have this   members and the members names are same as  the keys in my map right so in general when   you build a model and you should have fields and  those fields they should relate to your json file   or map keys names okay so these are the keys  names that's why you should do that now this   is a small map and for the small map we build  a small class which is a model right of course   we still have constructor so we'd go ahead  and do constructor over here we'll do person   this dot name and this dot h and this dot city  okay all right so now it makes uh now it's a   pretty much complete class over here based on  this map so we also say that this is a model okay   now for such a simple map we have a simple  model okay so all the fields from here are here   now take a look we have this one so what  does it tell us now it tells us that this is   another map right while they're  repeating but the format is same   so inside this value inside this key inside  this key there is another map okay so that   means here we have to go ahead and declare a map  not string or end we have to more like something   that's uh based on this map actually not really  declare a map based on this map now earlier we saw   that we get this for this right now that also  means that for this section we build a model   okay so here inside for this section we have to  build another model now we'll have two models   so that tells us that it's a list of models over  here right so that means for this section i have   to create a model and for the related field inside  this model i have to create a list in that list   i'll put this models okay because it's a list  of maps from each map we make a model so here   from list of maps we create list of models  okay so the ideas are pretty similar okay   all right now over here what i'll do i'll go  ahead and copy this one first and i'll put   it here and i'll call it address okay yeah now  here just think this address as a separate map   now it is twofield country and city okay so here  i would do country and well we already have city   so we'll just put it there okay now here we  all we need to do need to remove this one   and here we need to write country okay remember  they should they should be similar all right   now here instead of person  we would write address okay   okay so now i have a large map and for that map  we have a model but of course this model is not   complete inside that map we have another  map and for that map we build another model   now because this is a big map it has another  map so inside this model we'll create a   list of models okay that's what we're going  to do so that's why here we'll write list   address and here we call address  okay hopefully it makes sense   now once you do like this over here you  also have to make some changes here you do   this address and yeah we are good to go that's  it so that's how you make models from nested map   or from nested json you make a model where they're  nested models so this is a model instead of this i   have another model and that is nested model okay  all right now before we go ahead and finish this   section we have to build another we have to  learn another important concept a lot of time   it'll inside you in this class you'll have another  method that's called from json method this is the   convention but i think you can call it anything  you like okay now it takes parameters so the   parameter type is map and we know that map is  pretty much more like string and dynamic type so most of the time when you go ahead and build  a model and inside this model model means class   right so inside this class you will have a  method and that method is called json okay   so what actually you do based on this method  actually you create object okay once you   create object if you know say i create  an object from person so object name is   person now i'll be able to use a person to  access the fields it has like for example age   or name like that of course here we  can't there are other steps to do anyway so so this method takes a parameter  and that parameter is a map okay and   the map is string and dynamic earlier  we learned that map could be string   the key could be string and the value could  be dynamic okay that's what we learned early   and this is what we are doing now anyway  so here we are so what it means that   in my somewhere in my app i'll call this  function or call this method and then i   have to give it to a map so i have to give it to  a map like this okay all right and once i give   the map to it the values would be stored in json  over here so i can use this value this variable   to retrieve those values and initialize them over  here in this field okay and based on that we can   create an object okay hopefully it makes sense so  that's why he would come over here and here we do   uh jason now jason should have name  as a field inside of it and then here   you do h and json once again h remember what we're  trying so this one will have access to the map you   give to your from jason uh method okay so as i  said earlier it will send something like this   to it over here so that means this fills you have  to use over here to create assign the value to   this field and create object so here we are now  and here we have this city and we do json city now while next part is quite interesting now  here you see we have a list right and this list   takes a model so how to work with this  one but we know that this is a list okay   now here it says it could be null so we can go  ahead and do a check if it's null or not if it's   no will not do anything if it's not null  what we'll do we'll go ahead and work on this   so if it's not null like this okay so here  i do address now here we do address and uh   we'll write this statement that means  create a list okay create a list and that is   uh empty address okay well so here we are creating  a list but because you see over here that means   empty and we assign it to this one of course this  is this one okay but at the same time this is   means empty list right and the type is address  okay because the list has a type it could have   type we know that okay so that's why we are  initializing this empty list to this one okay   hopefully it makes sense now uh this is a  list over here so this is a list okay all   right now we know that our address this section  is also a list because remember this one points   to this section and at the beginning of this uh  section earlier we we learned that this is a list   list of maps okay so this is a list now here  what we could do we could use this one i'm sorry here we could use this one okay and then  each list has a method which is called forage   okay so that's what we're going to do so  here we do 4h or maybe it might have an   error that's a null null safety thing so what  we could do we could come over here and we do   this one as list okay just like earlier we saw  and then we can access for each method okay   now if we do that you can access them  one by one using um any variable you want   and then we'll put the curly braces and then we  are here okay so what's happening here so this one   even though it's a list but we force it to be a  pure list or the list actually if dirt likes okay   so we are casting it making sure because after all  this is coming from map or json file okay it was   not purely list so i cast it to a purely list  okay now after that this e because it's a loop   this loop would run over here two times  so first e would refer to this one   second e would refer to this one okay now  remember this is a map we learned that for map   we can create a model and we already did  this one okay so right now as i said earlier   we'll pass this value and create an object  okay now of course to be able to use this one   over here uh we we we we need to create another  method over here and the method is once again   pretty much like this one okay all right so  what i'll do i'll go ahead and copy this one   and i'll put it over here i'll just simply change  the name person to address now over here we don't   need this section because we don't have for  this section we don't have any nested map or   json okay now i'll remove this and we're good  to go and over here we need to write country so what do we have here so over here we can  just simply pass a map and based on that map   we can create an object right so this is a method  that also means that we can call this method from   somewhere else from some other classes okay so  that's what we're going to do now do remember   this section actually pretty much same as this  one only difference is this has a nested list   which it doesn't have this has a nested list  because this has a nested map all right anyway   so now we'll come over here now what you could  do we'll call this method okay so here we do address add remember this is the list empty  list so we can put things inside it and we   are going to create objects and put that  object inside this list okay so here we do address dot from json okay now all we  need to do we need to pass this one okay   so pass e all right and that's  all let's see we have an error so here you can say that it's not null yeah  i'll talk about the error a little later   now let's take a look at this one so over here i'm  looking through this address this list over here   and each time i look through i have  access to this one this is a map   now i'm passing this map to this method and  it processes the information and it gets me gets me an object and i put that object in this  list okay and object type is list because we said   that sorry the object type is address okay so we  are putting them all in a list okay so hopefully   it makes sense now we can go ahead and create  an object based on this model okay we'll go back   and see how to create uh objects based on  these models okay well so here first i'll   go ahead and create a new variable i'll call it  var and i'll call it obj and here i would call   person dot from jason okay now remember earlier  we saw that we should pass a map to jason okay and we already have a json over here and  what is our json so our json is my map okay   or map all right yeah that's all it  takes so now we just created an object   using our class or model and we supplied  it to a map or a json like this okay   now interestingly i could do a lot of interesting  stuff with that i could do vj dot name   okay and it will print the name for me over  here it did and i could do age all right it'll   print the h for me i could also do address okay  and of course here it'll print this one because   over here we are creating object and calling this  method so in this list this is the list which i'm   calling over here which relates to this one so  now it stores because of this one inside this list   over here it stores instance once it's create  objects okay of course we can access that   now for for that one to be accessed here  we need to do obj the map okay map map   uh well sorry no really like that say let's  create a new variable first and we'll call it   my address and here we do obj dot address  so i'm just taking this chunk over here now   i want to access each of the element within it  and for that one i would do my address dot map let's see okay now here i can create  an instant i can access each of them   so this e would refer to each of them as a  null checker make sure that it's not null   okay all right now here i could do print e  dot as you see these fields are already there   because it's an object it's not a  json anymore okay so once you have   object and you use the dot operator you see the  fields immediately okay hopefully it makes sense all right let's see okay now we need to  convert it to list because map is not a list so now we'll see over here let's see now e country  are we making any mistakes over here   oh sorry i i tagged it wrong over here i need  to take it country so it couldn't find it   anyway so now we'll come over here and  we'll see the country's names are there okay   also that's how you build a class or a model based  on your map or json okay and that's how you create   nested models or objects based on your nested map  okay hopefully it makes sense now well as you see   over here i had this one and based on this i had  to create this model and this model okay well   there's a lot of writing actually in flutter app  when you're going to develop uh even a small app   you'll have a lot of models and for each model you  have to write them manually but which is painful   fortunately there is a tool you can use that  one now here i'll recommend this tool over   here you could use this tool i think it's very  useful all you need to do you need to take your map and give to it do remember even though it says  json but we know that we learned early that this   is nothing but adjacent okay so just take it and  put it sorry put it over here not really over here   and then you can name it anything i'll call it  person all right and just generate dart for you   you see this is a model over here it created for  us okay and it also created the inner model which   is address okay so it's it's a beautiful thing  and it's very handy tool but i would suggest first   go ahead and do a few times on your own by typing  because then you'll have much better understanding   what is map what is json and what is class  and how to initialize stuff inside of them   okay and then you can use this one okay well  that's a lot of talk and a lot of understanding   hopefully you got it okay well next we'll see  how we can use our json file from the server   and create models and after that we'll  use that one in our app over here okay   do remember that here we are waiting to use  a model and from that model we will create   objects and save inside this  one okay all right now of course   over here as i said that for our app we also  have an endpoint okay so this is our endpoint so   popular this one so what we'll do i'll go ahead  and copy this one i think actually it's copied   over here already same same url and it's a get  request now this is a sorry this is a postman   tool that you should use it's very convenient  for post requests to get request put to delete   a lot of others now over here when you make  a post or get requests it gets you a response   most of the time the response is json type okay  now we can just hit hit it one more time and we'll see that this is the data we got back  from our server and this data is exactly the   same format as this one we saw earlier okay now  of course uh over here it's a lot of data but   you get to see that it has this curly braces then  some fills inside of it and then this braces and   a lot of other information within it okay just  like this one over here curly braces um this   i think third curly braces and second curly braces  okay now we saw that we we write them manually we   create our class manual but this time we don't  want to because we already have the json file   over here or the map regardless how you understand  it so all we could do we could take this one and   copy it and we'll come over here to this  one and i'll put it there right there okay and then i'll create a new uh well i'll limit something new because  we are going to display our products in our   flutter app so i'll call it over here product  product that's all okay now it will create a new model for us and which it already did okay here  we are now imagine there's all of these things   you're going to create on your own to write  manually you might create mistakes okay you   might have mistakes so i strongly suggest you  use it but first you have to familiar with   this json file and model and practice that  more and then come back over here okay all   right so i'll copy this one and now i'll  go back to our flutter project over here   and within it i'll create a new folder inside  lib directory and now over here uh i'll call it   models okay now in this directory we'll  have our first model okay so i'll call it   product uh products model or actually  i'll call it popular products model   all products actually they're gonna use the  same one so a popular products and recommended   products they'll all use the same product model  now over here i'll put everything over here and   for that one i'll copy it i'll come over here  and copy them after that i'll put it over here   okay and while here's another method to jason  we donate it now we'll remove that in future   if you need that we'll generate another one before  later on and now i'll also delete this one as well   and okay now this is exactly same as the person  and address like that okay so this is more like   the person that we created early sorry um yeah we  created early and this one is exactly same as the   address class we created early but of course this  time it has more information not like that one   just two fields okay all right so now what i'll do  i'll go through it quickly and i'll explain a bit   of the stuff and change it okay well uh first  thing over here um you see the names they're   not quite correct so i'll go ahead and change  the name now over here instead of products i'll   call it product model okay because i change the  name and i have to also name in this constructor   and for this class as well and now over  here i will also need to change this one   and over here it's the same and over here is the  same and i can remove the new keyword it's not   necessary and we would make some changes but uh in  general this would be the private fields and for   private fields actually we use underscore okay so  i'll go ahead and tag underscore for each of them   now here i'll say this would be initialized  later rather than it could be null so   now i'm telling the compiler that  this list would be initialized later   okay and now over here we also need to  make some changes well here instead of this i'll type here required okay now i'll remove the content  over here i'll put it there   remove over here put it there and remove over here all right now here i need to change the type to  private because i want all of my fields to be   private unless otherwise i specify them okay  now the errors are gone especially this one   okay now you can ask why i'm doing like this  well that's because i want to create some   uh public fields now these are all privates okay  now i want to create a new field and uh okay   i also need to make it private over here as well  okay so i need to change it over here as well and   change it here as well okay and now over here  i would do this dot total size equal total size   of course we don't need this underscore so i'll  pass this three values from the map over here and   that the corresponding values like this one will  be assigned to this one okay so that's how we're   gonna work because in dart you can initialize the  constructor many different ways just now earlier   we didn't have this one so there was one type of  initialization but because i'm going to create public fields so i would separate public  fields and private fields using different name   anyway so now here i would  do type id equal type id this dot offset equal offset now here this dot products okay all right so what i'll do i'll go ahead  and create object and as i create object   over here the values would be passed okay  do remember that while over here it also   creates object but as it does actually  it's connected to this one over here okay   so they're internally connected  because this is the constructor   when we create object first we have to pass  value to our constructor and then from there   uh would be able to use this one and this one  as well okay now here i'm going to create a   private public field and i'll call it list  product model and here the public field name is   products and here we have to use a  property a keyword actually called get   that belongs to dart here i want to get all  this list over here the objects that's saved   in this list and i can get it through this one  and this is a field so if you're coming from   other programming language you will see there  is getter and setter so this is the getter   but only difference is they don't take any method  they just take a field okay so most of the time   you want to use the arrow function like that  okay right you can write like a method but   this is a convention so if you have a getter  or if you have a public variable that would be   accessed from outside of this class then for  before that variable you can use get okay so now   outside of this class if i call products  that means i'll get all the list   over here from here okay okay so with this  uh this is the first change we made and   we'll go through it quickly now here i also  have from jason just like we did practice   earlier now here once we pass the map so the  map would assign the corresponding value to them   okay now as it goes through the values one by  one it will hit products this one over here okay now products has a list of maps okay as we saw  earlier over here so product has a list of maps so   over here uh we are first initializing  this products list which is this one   to empty array empty list okay and then  whatever we have over here we look through them   using forage function and we add it to the list  remember this is a list this is a list but it's   a private list belongs to this class now we use a  product model okay from json we pass each element   we patch we pass each of them like this within  this curly braces i guess sorry it's a bit   annoying up to here like this we pass each of  them and then over here this one gets cold and   as it gets cold it creates and returns an object  actually okay so that object is returned over here   and then it's saved in this list okay now it  loops through all the list which has inside   this braces okay in our case we have six elements  because you see total size is six so we have six   map inside of them all right so this loop runs six  times okay and then everything is saved over here   and after that we can access the list of objects  using this one from outside of this class okay   now well we're done with building the model  okay and the model classes things like that   so now we'll come to our controller and over  here we would add this one okay now remember   first we need to call this one um i'm sorry we  need to call this one so as we call this one   we pass a map to it okay now here we have to  pass a map but we have this response object   do remember that response object has a body  so i'll copy this one i'll put it over here   okay so response object has a body you see yeah but of course we can't just  simply pass the body to this   uh at all uh iterable which keeps a lot of  list inside of it we can't do that we have to   convert it to a list of objects using this model  method this one okay so here we'll call products products let's see products from  jason and we'll pass this one okay now   it takes a list of objects so remember  over here we have uh over here   we can access to this one using this one  over here so we can just call this one   so here we do products now it will return  a list of objects okay and that's how it   works and with this actually basically we  are done with our first successful method   for getting the product list from the server  okay all right so over here we are getting   every information using postman but now we'll  see how we get this information inside our app   okay well now i'll go ahead and first launch a  simulator which i already have and i will come   over here and i'll make sure that everything is  okay now we do have a bit of warning let's see okay now for now actually we'll skip this  warning and we'll just go ahead and see   whether it's work whether it works or not  because it's just a warning okay all right so   now we need to make sure that this method gets cold and information gets  updated over here that means the information   from the server gets saved over here okay now how  to do that remember we are in flutter organics so   this is a controller method so our controllers  they're all get initialized over here like popular   product repo and propeller product controller  using this one they all get initialized i mean the   controller so we need to find this controller  and after finding the controller we can call   this method now for now for the test purpose  i will come over here in the main method   and over here i'll try to call  it okay so here i would call get dot find and over here i would do  product popular product actually popular product controller and then we'll get  it we can access the method okay all right so in   flutter get ex if you want to find a controller  in general you will use this section and   the controller if it has any field or method you  want to access that one you just call them okay   now first we'll go ahead and run it make sure that   it got initialized and created  yes it did over here it says that   product repo and product controller but well we  don't see any information here now well we'll make   sure that it gets initialized so we'll try to come  over here inside of this over here we do print got products all right now  we'll refresh it and we'll see so we'll call it one more time okay now it looks  like it didn't work okay so it didn't go inside   this method right why uh we can go ahead and look  at our api client over here now it takes the when   it first gets initialized it gets base url right  now actually we are passing the base url from here   okay that's that part is correct now  if we see the get method over here   get method takes uri now let's see where  is this get method get called getdata   well it's get called from here but now  here actually because we are using getx   and this getdata internally calls or let's see  calls this get function but this get function   is coming from get x now this get function  itself doesn't want the complete uri remember   it doesn't want the complete uri it just  wants the end point okay that's all it wants   because remember when we initialize this api  client first time we are already passing the   base url so over here all we need to do we need  to pass the end point so in our case let's see base url is uh this one so all  we need to do we need to pass   this section okay so i'll cut this one  over here okay and i'll come to this let's see uh so actually i'll remove that one  i'll keep this one and let me see our api client   and dependencies so i think  we can put a slash over here   okay or we can put a slash we already have a slash  so actually we don't need to put slash anywhere   so now base url has been given  at the initialization and   when we call getdata we are just passing the  endpoint so this is the endpoint over here so   in the get method itself over here it  will first find the base url and then   this uri they'll connect and then they'll  get the data now let's restart one more time   okay and this time we see that we are able  to print this one that also means that   it has data inside okay that there should be  data okay all right now what we could do would   come over here and we'll just simply do a  print over here print popular product list   okay all right yes so here it looks like  it's printing the product model and the   related information okay so that means that  we are successfully able to get the data   and after getting the data uh we are able to  save inside this and we are able to print on it   so well that's a very good advance well now  we need to go ahead and dissect this product   model which i mean by uh we need to retrieve  them well it's already in the app but we need   to find a place where we really go ahead and  use them definitely we are going to use them   in our uh popular product page because popular  food page because earlier we have built this uh   two ui for a popular product and recommended  product but here now we are getting the product   information for popular product right so we need  to show this information on the popular product ui   page as well as well as the images right okay  now before we go ahead and do that we need to   uh restructure some of the things and reorganize  well now for example over here this base url okay   shouldn't be actually here so we want to save  it somewhere else and just use it over here   directly call it okay so this is a constant  for our app so base url is always a constant   now over here if we come to popular product  repo this is also a constant but that this   is a constant for popular product right and if we  come to our api client over here we do see that we   should have a token but for now we are passing an  empty token so this all of these things we should   organize and we should put them in a separate  file and for that one we'll create a new file okay   now over here within utils folder we already  have colors and dimensions now i'll create   another new folder and sorry in the new  file and here i'll call it app constants dot dart so here i'll put all the constants for  our app and we'll create a new class for this   and we'll call the class app constants okay  and that's as simple as that now over here we can define some variables first  one we'll do static const string   now here we'll define a variable  which is app name and here fname is   dv food that means the best food wow if you are  following along with me and in future you want   to change the name of the app you'll just name it  here but of course we need to save it somewhere   we need to use it somewhere we'll do that  but in your case you need to change the name   over here to whatever name you want and then  here we'll have static const and app version for now it's just one and  then we'll do static const   string base url so here we'll write here https   mvs dot my domain name i'm not using the best tag  in this case i'm taking it from my testing server and this is the base url and then we'll  have other two urls for now and we do   const string now here popular product u r i here this is the end point  our endpoint is api v1 products and   over here it's popular okay all right  okay and we'll create another endpoint   and i'll just copy this one  and here i'll call it recommend dead product uri and over here i'll change it   recommended all right so we  do have these things let's see also don't worry about that one just some  convention thing but in general constants are   in capital letters but android studio might have a  different convention well now uh we need to go to   those files and change them okay now over  here instead of uh uh let me go ahead and   change over here first so over here you don't  want to send this one you want to send app   tab constants.baseurl okay and we need to import  the file library okay so that's how it works   all right so you just have one get method  and every time you want to get a different   same get method but different uri you just  pass it so and uh would come to what else   let's see you know dependencies over here will  pass the base url so app con stands dot base uh i think over here we shouldn't pass  base uri it should be popular product uri   okay because we are passing the base uri over  here all right okay now um if we uh i think   we need to create another constant and that's for  stoken a token so const string token all right so   it would be a random token right now so we'll  just call it db token in your case you can have it   anything you like but later on we will get  generate token in the server we'll get that   one and this would be replaced by that token now  api client over here so we'd come over here and uh for now we'll just say send app constants token okay but in future we still need  to change it but for now it's fine okay all right so with this now uh all the constants  are pretty much saved here so if you need to   change something you just change over here you  don't have to go through the other files okay okay   well after this now it's time to show the fetched  data from network it's time to show them on our   main page okay so we'll go to our main page and  while now main page should the entry point should   be in main.dart file but definitely not this one  so i remember our main page is um let's see where   okay uh food uh food page body this is where  we show everything so this is the page that we   want to call first so i'll copy this one over  here i'll close this and then i'll come to   main food page and i'll put it there okay all  right let's import the library okay now what   will happen when you first load the ad the app so  it will call the method and remember this methods   makes a get request to the server and if it gets  the data then it saves the data inside this list   okay so when this call has been finished and data  has been returned it would save everything in this   list over here okay anyway so i'll uncomment  that for now i'll keep this one anyway so   now data would be loaded and if the data is loaded  we know that while either we can use this one   or other ways to access this list and work  with them okay so we'll come over here now over here let's see what do we have  so we have a container slider section   and the dots and another container and the  listview builder for food so i will enlarge it now   these are the common sections we have now because  in the main app let's see where is our main.dart   over here so we already changed the home path  so if i restart it'll load us the home page but now this happens when you certainly change the  app status because we have a lot of changes from   recommended food to food page bodies  so we need to restart it manually   and then the arrow should be gone okay uh let's  see why this is happening so we'll come over here and okay we are not supposed to call it  directly we are supposed to call it through   uh main food page okay not food page body  so that's why because it doesn't have any   scaffold we remember that we learned early  okay so instead of food page body we'll call   this dart file which is called main food page okay  so this is over here and this is the class name so   we'll open our main dot dart will come  over here and we'll just simply replace it   and restore it and before  that we need to import it okay now this is our homepage and  this is what we are talking about   okay for now we are fetching data from  server and we want to show the data over here and main food page will click  on it and let's enlarge this   it is this few sections over here this one and  this calls food page body okay and food page   body is actually showing all of this as we saw  early and first part is this container which is   showing this one right so this is where we want  to show the popular product now while so this   let me find our controller and uh let me close  this some of them maybe api client app constant   and let's see right now we need to work  with popular product controller over here   so once again they are saved over here right  now we need to find this controller in our ui   and then we need to get to this one if  we can then we'll be able to access the   data right so for this reason we'll come  over here and to get the data immediately   that has been passed that has been passed from  server we need to wrap this container around get   builder okay now i'll go ahead and cut this  one command x and then i'll do get builder and within get builder we need  to mention our controller type   our controller is popular product controller  okay and within it it takes a parameter which   is called builder and within builder you can  create an instance okay well instance of this   controller and you can call it anything  you like we'll call it popular products   okay and then we do return okay we need to put  a comma here now here we'll do return and the   one we copied early okay now because it's a  return statement so we need to put semicolon   now this should be coming from our  gatex package so here we would import it   get package okay all right now the error should  be gone so now this get builder connects popular   product controller with the ui so whatever  happens or any kind of data if it is updated   we would know for this ui using this get builder  okay so if you want to get updated data and you   want to re redraw ui then you should wrap your ui  using get builder and the related controller okay   and of course most of the time you also want to  create an instance of this controller now we'll   come over here well as we did that there now we  can go ahead and change some of the things all   right now the first thing we do over here we want  to change the length well we know that it returns   certain items for example if we come to our  postman and we know that it returns total six okay   anyway so i want to know the number of items it's  returned now here we learned that popular products   is an instance of this controller so i can put  over here and after that i can access any kind of   public field inside this controller inside this  one so do remember popular product list this   is a public field which is this one right now  we'll come over here and we'll do length okay   now this should be the length  okay now the same logic goes for   our dots indicator why because the number of dots  should match the number of items we have over here   and for this reason what i'll do i'll cut it  and then i'll wrap it around get builder okay   so to get builder and over here we would  mention the controller type which is   product popular product controller  popular product controller   and over here at the same just like earlier here  we'll mention the popular will instantiate an   object from this products popular products okay  and then we do return like that just like this   and then we do return and we put  whatever we cut early and now we have to put this semicolon and as well as this one okay  all right now i don't think we need this newer   keyword new that's why it was yelling at and let's  see replaced okay we can ignore that one first   now here the same thing so here popular products  dot popular product list dot length okay   all right now let's go ahead and  restart it let's see what happens okay all right we do have six right yeah  and and hopefully we'll have six sliders one   two three 4 5 6. it means we successfully loaded  data from server and as well as counter them   and show them on the server app side but  now there is an error as you see over here it was saying that dot count  should be greater than zero   now the problem is because it takes time to  load okay yeah so because it takes time to load   so by the time the ui is drawing the  data doesn't return anything okay   so that's why it is creating problem over here  now we can solve this one so over here if it's   less than or equal to zero okay if it's less  than or equal to zero then we use one otherwise   we use whatever the length was given okay  sorry copy and paste of course i think look at this no this one okay and  let's see the place it is empty   okay that's a good suggestion if there is  nothing that means empty well if it's empty then   we'll use a 1 otherwise we'll use whatever it is  there okay well that also means that when data has   been loaded this part would be updated and we'll  see update over here as well so now let's go ahead   and restart it and as you see there was one first  and then it's gone and it showed six items over   here now we don't have that error this is the  warning we'll take care of the warning later   because we want to get excited it's been  almost seven hours and this is the first   time we see we're getting data from server  and thank you guys for sticking with me   but anyway so now it means that our uh app  and our controllers everything is working   now it's time to change the data right now here's  the thing uh well here we need to pass an object   uh from this product list and then based on that  object we'll be able to access the image name   item and things like that okay  so we need to make some changes   while we'll make changes in two places over  here we need to pass and a product item   and we'll catch it over here and once we do that  we'll be able to access the value of that object   over here especially this image icon over here we  can we need to change the images well to do that   first we need to pass image i mean we need to pass  an object well remember that earlier we learned   that this list is list of objects this is a list  it contains objects over here we learned this one   right so once we created a model uh and from model  we created object we saved object products object   over here right so this is a list of objects now  this is a list that also means that we can access   them by index okay index means by zero one two  three four like that so that's why we would come   over here and create will pass a new argument over  here and we'll pass it like this popular products and our index so what is our index well  in this case the index is position so   we'll put the index here when index is zero  this is zero all right and we need to add an   uh required positional argument over here okay  and now it's gone all right now i wouldn't really   call it popular product list i'll call it popular  product okay so here i'm sending a certain object   from the list and i'm catching that object over  here now object type is product list sorry product   model if you come over here our object type is  this one right not this one do remember we have   two classes over here so this class contains this  one over here anyway so now we'll come over here   so now i have the object and as i have the object  earlier we learned that in our dart pad um online   tool that we can use dot operator to access the  object and its parameters and things like that so   the first thing will change over here instead  of asset image here we'll use network image   okay all right so we do network image now over  here definitely we need to change the path now how do you change the path over here now   for changing the path uh we need to access  our object first so what is our object name   our object name is popular product popular product  you can do dot now here you see android studio   smart enough to know the object's name so we  could do just img now what is this img let's see okay now here well we are saying that it want to  be null this is called bang operator and it tells   the compiler this is this is not going to be null  all right otherwise compiler really doesn't know   about what kind of value is coming over here  whether it's null or not after all this is   coming from network right anyway so now if we  see over here what is img mg is this one okay so of course if you just try to write this  information over here our flutter will have   no idea that what is this link okay because it  doesn't contain any base url so we need to put   the base url over here okay and here what  i would do i'll write here app constants dot base url well plus but it's still not work why because  well i know because the back end the image is   saved in under pub uploads folder  okay so i need to add that one   we'll see our backend very soon but let's see data  on the front and first that how it looks like okay   now the the images with this it will have a  complete path all right now what we'll do we'll   go ahead and load it and we'll see whether  the static images has been changed or not   okay all right so we'll go ahead and load  them beautiful you see our images are loading   uh they're loading slowly but these are all new  images they all came from server congratulations   thanks for sticking with me and you have done  a great job so far stuck with me over here and   learned a lot of thing and we did a lot of work  now images are all different so what you could do   next we can go ahead and change the name as well  over here right so we need to find where it is   so over here this is a hard coded  one so over here we do product list   uh sorry popular product dot  name okay now let's save it   well i think we need to tell the compiler that the  name is not empty see the name changed immediately   perfect so now we are talking to the server  beautiful isn't it okay so far so good   well before we go ahead and do something else we  need to work on the loading icon okay because uh   first time it may load slowly well now my server  is fast so that's why but if your server is   slow it may load slowly so you want to load the  load icon next we'll see how to load the load i   to work with this loading icon to work we  need to first come to our controller and   let's uh find our controller hopefully this  is this one over here not really okay so   i'll open up the folder and here i have this  popular food uh popular product controller   and over here we need to set up a boolean  okay so here we'll set up a boolean and   we'll say it as bull is loaded okay well  and we'll set it to false okay all right   of course this is a private variable and now  we will create a public variable based on that   and that would be also bull  and we'll call it is loaded okay now here we want to create  a get get getter for this   so when you use get so you can access  this one from outside of this scope   and here we want to get is loaded okay all  right so now we need to keep track of this   one and whatever changes we make to this  one it we would be available to this one   and then we'll be able to use this one outside  and then we can set up our loading icon okay all   right so over here when if we have status code  of 200 all right yeah so over here we could do   load it so here we do i think uh over here  right is loaded equal true okay all right so otherwise the default value would be false all  right so this is where we are okay now of course   we can do even much more advanced thing uh but  there will be a lot of coding but for now we'll   stick to this one and after that we need to come  to our let's see over here food page body okay   and over here we have this section uh container  list view builder and get builder okay all right   so over here for the first one we  do have this get to be builder now inside this one actually we have a container  right so this is the container is showing   this section so first i'll cut this one and  then i'll check over here i'll do popular   products and do remember just  now we created uh is loaded field   if is loaded true then i'll do something otherwise  i'll do something else so here is the part that   you want to do something here this part is if it's  false you do over here something different okay   so here i'll show the container  if loaded is true okay all right looks like i cut it but  it didn't work so i'll go back   i'll cut it from here okay and then  i'll check one one more time popular   product is loaded if it's true  then we'll show this one whatever i   got from there okay otherwise i'll show an empty  container for now okay okay now let's see so we are we need this one okay now  with this this statement is complete   okay so once again this is called ternary operator  it takes a condition and this condition is a true   then this part executes if it is false then  this part executes okay but we just don't want   a container like this so we could draw something  like called circular progress indicator okay so   this one and of course here you could have  i think that's okay too so we do app colors dot main color okay all right now let's go  ahead and try to run it and see the result okay yeah you see so that was loading right  one more time we'll check this out   yeah so you saw that loading icon okay well uh and  over here i think we are great we don't need to   change anything over here uh this section is doing  great all right while next one would go ahead and   load our products over here which is uh while  this should be recommended so instead of popular   i think i would go ahead and change the word  so this should be recommended products okay   anyway so uh this section is over here let  me find the tag control f i'll do popular uh let me find it how many places i can find it  okay over here so here i would do recommended recommended all right let's  save it yes it changed okay   now uh over here there's a container that  shows this work now this is the listviewbuilder   and inside the listviewbuilder we have this  section which should be a recommended food   now for recommended food we are going  to go ahead and create a new controller   so over here we'll create recommended product  controller dot dart all right now for this   section we also need to create a repo because  each controller should have its own rapport okay   so now here i'll go ahead and create a rapport we  would say recall mended product grapple dot dot well now here i'll open this one and this one  as well and for now i'll close well they're all   closed i think model section we can close now  this is the popular product controller all you   could do you can just go ahead and copy all of  this and uh to come over here and i'll put it   now we need to make some changes so instead  of popular over here we'll do recommended okay all right so i'll copy this one and  i will put it as usual over here that should be recommended product  repo we have to create that one   so the first part is being changed everywhere  okay here now here we also need the changes so of   course it's a small letter r recommended product  list so just go ahead and change all of them   because we don't need to rewrite the  whole code and the same over here   i think it should be small lighter  let me change them now otherwise   we'll get error so the error will be gone once  uh we create this wrapper and things like that okay well this controller is pretty ready now  over here we are going to use the same product   model and other information stays the same and  here we'll have a different method so here would   call it recommended get draco mended product  list okay all right and over here we also need   to change because our wrapper should have a  method like this get rec recommended all right   now it'll show throw us an error it would  well it didn't do it yet but we'll go ahead   and create one now if we come over here we  need to copy everything from this ripple   so we'll put it over here and instead of popular  we are calling it recommended okay all right   now i'll copy this one put it over here as well  and over here the method name should be track   men dead all right and everything else stays the  same now here instead of popular we need to use   recommended we already have a uri for this one  because only we create uh this app constants class   now product repo will close  this one we don't need that   recommended controller let's see we need to import  the package and the errors they're all gone okay   all right so these two controllers they do look  same but soon they would be very different okay   uh so we we have these two raffles there ready and  of course this is the product controller well now   we need to load them as a dependencies in  our project file so the dependencies are   loaded over here okay so we're gonna go ahead  and load them so first i'll copy this one and   i'll just put it right there and i'll make a  slight change in the name here we do recommend it okay all right and so this is recommended  product repo and a popular product controller   and here we need to pass recommended all right now we'll go ahead and import uh the  libraries looks like it didn't get recognized   let's see recommended product repo but  okay i'm making i have a type over here now we can go ahead and import  it and over here is the same   all right let's go ahead and import it okay  okay they are all loaded right i mean they're   all we are ready to load things so now over  here we'll see if we have error or not okay ah over here is the problem because it was  supposed to be popular product controller   i i just changed the name so anyway i'll copy  this one and the first one is popular product   pop pure okay product controller  and over here it should be popular okay now we'll go ahead and restart app and  everything should work perfectly okay now   just like earlier we worked with  recommended product controller like   it loads the data and puts the data in a list so  for get recommended product it would be the same   but now here one thing though here we have  a different endpoint right so let's select   it and on mac i'll do command b so i'll come  over here so this is the recommended recommend dead i think i have a typo okay now it's fine  but one thing you do would go ahead and check   this one if it works on postman or not so   i'm putting up my postman and after that  i will go ahead and test the api on the   postman first a lot of you don't have the access  to the api yet just follow along with me i'll   soon i'll open up the back end for you and you'll  have better idea what's going on so over here   previously we did this practice for popular  product now here we do for recommended okay so this would be a get request so we just change  the end point everything else stays the same   now i'll put a hit send button and looks like yes  we have total size of five okay so of course this   is getting uh different information than the  popular why because with popular we had total   size of 6 and type id 2 but here we see type id  3 and total size of 5. so here what i'll do i'll   just do popular one more time we'll see  that our information is quite different okay   so that means our endpoint is working well if  your endpoint is working on postman in general   that should work in your app as well okay so  now i'll come to uh this section over here   and this is the list view builder right so  just like this one over here we'll go ahead and   wrap this around get view builder okay that's  what we'll do so here we do get builder and   over here we need to mention  the type of the controller   in our case this is recommended product controller  okay recommended product controller this one   okay now here we'll create an instance  of it we'll call it recommended product now here we'll hit return  button and inside we should have our   listviewbuilder okay but before we  go ahead and put our listview builder   just like this we should have this loading  icon right so because remember we didn't really   change anything in this controller so exactly  we'll do the same process so here we do uh   recommended product is loaded if it's true then  we'll show our list view builder otherwise we   do circular progress indicator and here we do  color so color is app colors dot main color okay yeah all right and because it's a  return statement so we need to use   semicolon okay now we'll go ahead and boot  up our app from the scratch and we'll see   how it works as you see it's still loading over  here it's loading loading loading well now if   the loading is taking too long over here there  might be the problem that this section recommended   product list over here we do have some problems  okay now let's see whether what it prints okay   get product recommended i'll put a log over  here and i'll copy this one and put it over here would write here could not get so most probably we have  some problem over there okay all right uh it's nothing to do with  the problem over here the problem is   over here in our main function because i'm  not loading them at all but you have to i mean   i'm not calling them to load it for loading  okay so over here remember in main function   we are calling this method to load all the data  okay when they're loaded ready then over here   we can show them right but here i didn't call  the method remember we have a similar method   in recommended product controller so here all  we need to do go ahead and change recommended product controller and okay and over here  it should be recommended product list let's see now we'll go ahead and run it okay  and let's see yes well of course it loaded but   we didn't update this pages okay you see the icon  has gone now here we would come over here to this   food page body now here there are places that  we can change this icon and images okay now here   definitely this is the asset image that we need  to change but earlier we did the same for our   this section over here now we can  just simply go ahead and copy them so go ahead and copy them and  i'll just simply put it over here okay but of course here we  don't have popular product   so in our case the instance  is a recommended product so here our instance is a recommended product  so we'll copy this one and put it over here   okay all right and let's see a recommended  product over here now of course uh   all let me enlarge the screen and  let me explain what's happening here   now let's see recommended product is over here  now this one here we just create an instance   of our controller okay now using the controller  i can have access to the list so let's go ahead   and find the list so what is the list this is  the list right okay now here we need to access   it by index okay so what is our index now here  our index is coming from here this is the index   of list view builder right so this is where  it's coming from so we need to put here index   so here we do index and now from that index we  get a particular product model right and from that   model now we can go ahead and access img okay it  makes sense now here's another thing that we need   to change the length okay so it shouldn't be hard  coded anymore so i'll put it over here and then   we'll do get recommended product list dot length  okay so maybe we have five products so our index   would go from zero to four and because listview  is more like a for loop so each of the objects   you can access over here and they're related  information okay all right so that's uh almost   done now we need to come over here in app  constraints and we'll create a new constants   that's because here we don't want to hardcode  it like this because we already put it in two   places so we want to uh declare it over  here so here we do static const uh upload url okay now over here we do just  uploads okay and you're good to go   so what i would do i would come over here and  instead of being hard-coded i'll do app constants but instead of base we would do upload url okay all right and i think we have  another place that where we can change it   that should be at the down bottom over  here the same one so do up constants dot upload url   okay all right now we'll go ahead and restart our  app and we'll see hopefully here new images okay let's see and it looks like we do have an issue  okay we are missing over here a slash okay   so that's why it can't read the image path or  for that one i'll come over here in app constants   inside this one i'll put a slash okay now i'll  go ahead and restart app hopefully we'll see   the images okay let's see yes these are the  images we are talking about okay these are   all new images that got from server okay  perfect now we have to make another change   now the name right so we want to take care of  the name over here uh let's see so we need to   come to the section over here uh as you see so  this section is pretty hard coded all right and   over here we do this one we do a recommended  product dot recommended list we'll go inside the   index now here you do name i think okay now let's  save it okay it wants you to put the bang operator   to tell it that it's not null of course you put  it only when you are sure it's not null okay   now let's restart as you see we  have different names over here   and that's beautiful we have done a great job  so far and next thing we need to take care   is this warning okay the next we'll see how  to go ahead and take care of this warning   well now we'll go ahead and analyze this problem  over here well it says that operand of null aware   operation has which include excludes null  while this means that this can't be null   this is the meaning okay this is a null  aware operator and where is this coming from   so i'll click on this and this is actually  pointing to this one it's telling you line 22 and   the ninth word or ninth letter so this is the  one it's talking about okay now here once again   it's the operand of null upper random null our  operation has a type okay so it already has a type   and which it excludes null now when we use  this one it means that this certain instance   or variable cannot be null okay well here we don't  need this one because we already initialized it to   be an empty array or empty list i would say so  it's empty empty doesn't mean null none means   it's not pointing anywhere in the memory  but here uh it cannot be null because it's   already empty okay so here we already said  it is already empty so we don't need this one   this is only once again if you're not sure uh  whether it's being initialized in your app or not   but you are pretty sure that it's coming from  somewhere else and from there it won't be no in   that situation you use this bang operator so we'll  just simply remove the bank operator over here   and restart our app and hopefully we'll see the  error is gone okay yes great well with this we are   uh pretty good and so far we came a long way now  in next section we'll see how to tap on them and   go to a new page and for that one we'll build our  route class a wrap class that would help you to   maintain your project and you'd learn when you do  a much bigger project how to organize your routes   well before we go ahead and work on the routes  class first understand how the basic routing   works on flutter get x well so for this one let's  understand one thing so once i click on this one   i want to go to the popular food details  section and once i click this one i want   to go to the recommended food details section  that's what we want to do but right now they are   not clickable at all okay well we could do this  thing easily first what do we do to come over here   and find our uh food page body  which is this one we already have   and for now i'll close others we don't need  them now okay um so i'll close this one   i'll close this one up constraints controller okay  and dependencies i i will keep popular for detail   and we also need to get recommended for detail  all right uh not the repo we want the ui okay all right so now from here once we  click we need to go somewhere all right   all now let's find where we can make it clickable  so this is the main food page and food page body   which is this one over here okay well let  me enlarge the ui uh the screen over here   now this is the get builder for recommended food  and this is the get builder for our popular food   now over here this is the page builder right  and uh instead the page builder over here   actually i can make it clickable okay uh so  because this page view dot builder it takes this   amount of screen okay so this is the place where  we can make it clickable okay and then we'll go to   somewhere else all right so what i'll do i'll uh  on mac because i'm on android studio i would hit   option enter so it will ask me to wrap around a  widget and that's what i will do now over here   i'll call it gesture detector okay and within it  inside i will use untap button okay now over here   wherever i click i want to go to a  new page okay well in flutter get x uh for basic routing you you generally do get dot  to somewhere okay or get dot named that's okay too   all right so you can use any of them so here if  you see it takes a page dynamically all right so   here we'll call a certain page from here we'll  go to popular food details so we do paw popular for detail this one okay we'll  just simply call this one yes okay now i'll restart our app and let's make  sure no errors yes no errors now i'll click on   them yes it took me a new page okay all right  that's what we expected and that's what happened   but we can't go back well for going back actually  first we need to go back okay well so i'll come   over here and i know that over here we have  this button so we can use this button right so   just like earlier we have to make this button  clickable okay so this button is defined over   here and the first icon this one okay so just like  earlier we wrap it around gesture detector okay   and over here i'll write gesture detector okay and  it takes on tap event so i'll put here on tap okay so here simply we could do let's see get that to   the home page okay now what is your home  page home page is uh i think main food   made let's see main food page i think this is  our homepage okay so simply we'll do this one   so i'll restart it and i'll click on this okay  it takes me to the home page and let's see if i   click on this it takes me this one of course  the information here is still static right   and the same over here but over here  if we click nothing happens because   we didn't register any ontap event we just  did for these things okay now this is simple   and it's okay for app like to-do list but  here we are not building a to-do list app   we're actually trying to build a real-world app  well now with this approach uh the problem is   you manually type type in your page's name  but we want them to be more dynamic okay   and that's why we'll organize all of our routes  in a new file okay and we'll use a different   approach but we'll still use x package but  more professional and a scalable approach   to help with our routes okay because we want  to do many things when we go to a new route   for example working on the data process some data  and check on the data okay and we get the two that   could be a problem and another thing is that you  want to keep your route logic in a separate file   that's the best way to go and from ui you just  call a certain route okay now we'll go ahead and   insert our lib folder we'll create a new folder  and we'll call it routes okay now over here   i'll create a new file and we'll call it route  helper dot dart okay now over here we'll create   a new class and we'll call it route helper okay  and over here we'll have members and functions and they all be static members and classes or  functions things like that okay so this is where   we will keep all our route logic all right now  for to this one first i will declare a new route   and uh the stream type and over here we'll call it  uh initial okay now that refers to our home page   okay so this is where we want to go all right  now in fact right now we can go ahead and use   this initial route and to use that one we need  to make some changes inside our get material app   okay so over here i think i'll remove this one for  now we are not using any kind of blue swatch okay   now over here we'll have a section which is called  initial route okay now we'll just call route   helper dot initial okay so with this  we'll come to this file over here okay and   get this one now let's restart our  app and make sure that it's working   yes it's working because it loaded our homepage  right okay well so we already started to work   now get material app has ended properly  which is called let's see where i can find it there's a lot of information a list okay which  is called get pages now get pages actually   it takes pages over here as you can  see it refers to pages pages like   recommended food detail popular for detail  like that okay and we'll use that one okay   now as i saw earlier that it takes a list of pages  okay list of pages so we need to create a list   and apply it over here okay or  for this one we'll come over here and here i'll do simply i'll do   aesthetic uh variable i'll create a list over here  it will be list and it would be type get page okay   so get page is our type now here i'll just  simply call it routes and here i'll create a list over here okay yes all right and as  we create uh routes now inside we saw early   that over here this one it takes a list of  pages okay once again let's see over here   okay well now for that one we need to create or  call a function over here actually which is called   get page okay this one and it takes name and your  page okay so well this is a function that you call   or i would say more like a constructor as you  see it has a new over here so it takes name of   the routes and where to go all right so we can use  this one over here for this one first we already   have over here as you see initial route as a  slash this one so here i think we can do this one   slash over here okay and over here we can   mention the name okay now what is the name  in our case the name is main food page   yes now with this all we need to do let's see oh  it's a list so you need to put a separate comma   now with this all you need to do come here and  then use the property which is called get pages   now here you do route helper dot routes because  it returns a list and this one expects a list okay   i will go ahead and restart it okay and it still  works but of course it takes a list of routes   but our initial route has been defined using this  one now if you cancel it comment out let's see   what happens okay well looks like it still works  well that's because it goes to the list over here   and find it and it works like  that okay that's as simple as that   and you can navigate to different pages right okay but now here the problem is right now uh well  this is a transition is a problem as you can see   but we'll take care of that later if you  have a lot of pages it won't work like that   okay because right now it just finds only one  and gets over there okay that's what it does   anyway we'll put back our initial routes okay  now we have the route earlier we want to go to   a different page once we click on that one  we have to define a route for that one okay   well uh how to do that one so first we'll create  a static variable once again now we do static   const string we here call it uh popular food  and here we do paw peeler food well in general   routes name string if you have two words they  should have slash okay all right so now over here   we would do get page and name over here and  here we do a popular food page this one okay and then we'll call the page and our pages  the related page should be par popular   food detail this one okay we would come over here okay now let's see oh i'm missing the argument  here which is called page   okay now arrow should be gone now the problem is  how do i go ahead and call this one i can't really   okay because this is a string okay so what  i would do i would go ahead and use this one   and put over here okay now this refers to that  one over there okay all right so now from my file   from the places where i'm trying to  tap over there i can just call this one   okay this one would find over here this  one and then it would trigger this one   okay let's go ahead and test it so just now we  are on main foot page and sorry for page body   so instead of using this one we'll use get  dot say two that's fine and here we use   route helper and popular food okay now let's  go ahead and save it and see the result and we'll click on this and data is  still loading okay now we have a problem uh well now because we are not really using name   uh it says that unexpected string use two names  instead so let's go ahead and use that one okay now let's go ahead and restart it   okay and let's click on this and it  works okay now you can once again go back   this works so it looks like this does work uh  how it works well let's go ahead and prove it   so because this is an arrow function right well  instead of writing it like this actually i can do   an anonymous function over here and return  this one and then i can print a log over here   say i would say popular food get  called okay now over here i'll restore   it and remember i'll click on this and i see  it works so i call this one it comes over here   and of course there's a route register for it  and then it goes over here okay all right so   that's working okay but now uh it it keeps things  simple and but it also has a bit of problem okay   uh let me tell you now if i want to pass parameter  and i want to process the parameter working like   this is a bit difficult okay now where to  pass parameter that's that's a problem okay   so what we'll do we'll come over here we'll come  over here and create a function and we'll call it   uh static and over here we would have a type  which is string and the function name is   get pop paw popular okay and it would be a  function that returns a string over here so   the string has a variable inside the variable  is a popular foot now this returns a string   so we have the type over here string and this  variable refers to this one okay now over here   this one doesn't change and that's okay now  with this approach there is a beautiful thing   because now instead of calling this one directly  i'll call this one but as you see it's a function   so when i call it i can pass parameter inside  it okay argument so i'll receive it receive   them here as a parameter as i do that now  over here i can receive those parameters i can process them and i can do conditional  check and based on that one i can either go   to at this route or a different kind of route this  is the best approach for working with routes okay   now to prove that that this works as well we'll  go ahead and use this one instead of this one   okay do remember when you call this one it will  find this variable in this class over here and we   already have and you'll see oh it has a router  defined so it will set the route over here   and then if you pass any parameters inside  that parameter you can grab over here and   i'll show you how to grab the parameters and  work on them okay all right now once again   we'll come to our footpage body now this time  instead of popular food we'll call the function   get popular food okay so now we are calling  functions okay now let's go ahead and restart it and you click on them and it still works  okay well soon we need to pass parameters   uh that's because when you're going to a new page   i need to show a new picture right and the new  information but right now everything is static   okay and before i go ahead and do that let me  change part of the route helper class over here   now over here you see if you hover over  on it it has a transition property okay   now we'll go ahead and use those  properly now here right below it here   i'll use the property which is called transition  i do transition and i think it takes change the fade in so let's restart it you see the effect is quite  different okay that's what we love   all right so every time you come to a new page  now here it looks beautiful because it's fade in   now here there are other properties as well you  can use them like zoom circular reveal i haven't   used them left to right okay i'm going to use  this one let's go ahead and check what it is now   i'll click over here um well it didn't really  look very different anyway so i'll stick to the   old one fade faded and we are good okay  now over here this is what we did for   popular food would do the same for our initial  route so over here we'll go ahead and declare   static string get initial initial i think  we'll just call it get initial and over here   i think we'll just have this one  and that's all okay and over here oh sorry not this one will have any this refers  to this one and this refers to this string   and here we'll use uh initial okay all right so when you call this  one it would come over here and at the same time   it matches this one and this one over here   let's see is the spelling correct  yeah the spelling is correct and no we want to use a variable because  we want to pass variables later okay   so don't worry because we'll pass variable  so that's why it's being uh it's yelling at   us anyway so now here we'll go ahead and once  again make sure that it works and it does work   okay now we'll quickly go ahead and replicate this  one and we'll create one more for recommended food   and here we'll call recommended recommended i'll copy this one i'll put it over here and  i'll do command d over here so copy it now here rec record and here alright recommend it as well so this is recommended food and now for  recommended food we'll create a new get   page so here i'll just go ahead and paste  this one okay now here we do recommended food and here recommended food okay and i think we need to import the  recommended let's see the class name where we are   typing the correct class so rec m-m-e-n-d-d  recommended oh looks like we have a type over here   actually we don't need e over here the same  one over here and within route helper class uh   we didn't just simply call it okay so now  let's go ahead and restart one more time and click on this it works  you can go back click on this uh it doesn't work well that's because we didn't  connect our route in food page body with this one   okay now earlier we did this one for recommended  uh product control for recommended food   now this one so earlier we did for popular food  now here we'll do for recommended food okay   now here we do have this container and this  container wraps around everything right   and let's see now inside of this i have this  another container and this is the text container   so this is a listviewbuilder so yes this is  the perfect candidate and we can wrap this   around a widget and it's called  get gesture gesture detector and now here we'll use on tap now here we'll use get dot to  named and we'll call route helper dot get pop recommended food  okay now let's click on them now click on this yes it works but it  looks like it messed up with our uh   ui over here and it doesn't work it does work but  you have to click on this one okay all right so   next we'll see how to go ahead  and solve this problem first   to solve this problem we have to come over here  and look at this and where is this coming from   well this is coming from the back menu well uh  now this is a page of uh recommended for detail   right so you come over here and if you  come over here uh you'll see that we have   sliver upper and if you hover over on it you  will see there is one boolean that's called   automatically implied leading so this is what  causing problem so all it does is create this   button for you on your own but we can turn it off  so we'll do it false okay now let's restart it   okay and now we'll go over there and it looks like  it's working we can do cancel on it but of course   we don't have this cancel button here yet vectors  so here i'll wrap it around gesture detector   i'll do gesture detector and then it will have  on tap event and within ontap event we'll have   our get route and then over here we'll  have child as a child we'll put there   now it will work and we need to put a comma  over here okay now right over here we do get dot   things like that okay but before we need to  import the package let's go ahead and do it   okay now we'll come over here and we need  to get to named here we do route helper dot   now of course we need to import this one as well  here we do get dot helper dot uh now we want to   go back to the initial page which is our main page  all right now let's save it and we can go back to   the main page okay after this now we'll go ahead  and see how to pass parameters as we work with the   route and call her out okay well now for that one  first we would come to our popular food over here   and over here we have let's see what do we what  do we have actually we would come to this one   not popular food and over here  we see that we have two sections   so popular uh product controller this one over  here i do have gesture detector wrapped around this pageview builder actually i would want to  remove that not really over here it's not really   a good place uh what i would do i would simply  copy this one first so because i want to use that   and then i will remove over here as  well as remove this section okay so   it will put back to its original state okay  yes it's here and this is inside the container   so to work with this actually i would  come over here build a page over here   now i'll come to this function and  this function also has a container   so over here this container okay actually i  want to wrap around so for this one i'll select   it and then i'll wrap it around a widget and  widget name is gesture detector okay all right   and now over here i just copied on tap  event that one i'll put over here okay now i'll save it anyway now after that i will  come over here and make sure that it works okay okay now from here we want to pass down our  parameter well to do that we need to make some   changes well first we have to get certain id okay  and based on that id we'll do things now remember   each list has an id in the list itself  because lists are indexable right okay   so we can access that one now do remember when you  pass over here we pass an index and product model   okay well for now we'll just get the index  and we'll go to a new page so over here   actually i'll just simply pass the index  okay that's all i'll do but now it'll say   let's add this positional parameter now  because do remember this is a function   so this is the function over here so here i need  to do int i would say page id do you remember it's   just page id not product id product it is quite  different okay now after that over here oh so we   are passing over here the page id now because this  one in return calls this route right this route is   over here and this route then comes over  here so we can pass this information down   to this one over here well to do that all we need  to do here we have just like if you're coming from   web programming web programming route you  pass parameters like this you do it and then   name of the parameter okay so here i  will just name the parameter page id   and after that i'll tag whatever was given  okay so this one so now let's see page id   okay now this page id is this one because it's a  variable now if you want to put a variable inside   a string you need to use dollar signs so that's  why here we are using dollar sign now this is   this is the parameter we want to retrieve and this  would be a value so this value is given over here   to this this variable okay or this parameter now  this one we can catch down over here okay yeah   all right so now we'll  catch it and pass to it okay well to well simply we could do things  like this ver page id equal now whatever   you got from there so we we are passing down our  variable or a parameter so how to get that one   to get that one you do get dot parameters this one  and inside whatever variable you want to catch you   write that one okay and that's all okay and after  that you just pass the page id over here page id okay well now here it will ask you go ahead and  add another parameter to popular food detail   and that's what we need to do okay so let me  walk you through one second what's happening here   from here from here we are passing an  index well this is the index from the   list list index and we are calling it  page id so after that we come over here   and because it's a function so i can get it over  here because the function is actually over here   the function body and within the body  well whatever the value has been given   from here i grab it over here in this variable  and then i catch that variable over here   using this special helper function which  is called get parameters okay now this   takes a string and we passed it and then uh we  send it to our screen or ui now of course it's   asking you to go ahead and add this one so what  i will do i will come over here and at the top   over here i'll create uh a variable and it will  be in type and i'll call it page id all right   okay now this page id is required you must send  it so i'll use the required this dot page id   all right now let's see what's what else i think  we need to remove this one okay now we are good   now over here we have this page id now what's  the point of sending the page id to this page   well now i have the index value right so this is  the actual index that has been passed on from the   from this place right so now we can grab it if  we can grab the index we can grab the list and   then we use this index certain index and then we  can get an object so that was the point okay now   over here simply we can just get a object so here  i'll create a variable and i'll call it var and uh product i'll just call it maybe yeah i'll  just call it product okay and here after that   we need to get access to the list  the list the one we have in over here   this one okay do remember uh no i don't want  to open the repo i want to open the control   controller so do remember there is a list right so  i want to get to access to this one because this   gets access to this and this is coming from here  we already know that so i want to have access   to this one so for that one i think okay here  first i need to find the controller so you do   get dot find and then you mention your controller  name the controller you want to find so controller   is popular for the popular food controller  it's been initialized but because we have   many controllers and this is how you go and find  a certain controller and after that you can get   a certain property of it so the properties this  list that we want okay now this is a list so i   can access it the inner items so here i'll just  simply pass page id okay all right that's it   now if i did that well this gets me an instance  from this list do remember this list has all the   instance of product model okay so now based  on that index i have an access to the product   model certain product model okay so here i'll come  over here and well i will do few things over here   i would say print page id is i'll do page  id to string okay and over here i'll also do   our product name is because this is a product  instance a model right so an object based on   the model so i can have access to its different  properties like as you see if i put a dot i can   already access it so android studio is smart  enough to let us know but now here i think okay let's convert it to string now i'll go  ahead and restart everything from the scratch   and looks like we do have an error let's see  where is this error coming from route helper okay here i need to pass it like  this page id page id and let's see convert it to uh well now we are passing it as uh   int so we need to part it parse it  to end because i think here uh this   might get us something different more like  string so over here we would do uh parse dot and this one okay now we'll pass  page id over here let's see okay now let's go ahead and restore it okay  so well now if i click on this i would expect   the page id and the product name well this would  be the product name right so this is what i would   expect so i'll click over here and page id is  zero and product name is nutritious meal in china   okay and this is what exactly we had over here  now i'll come over here and i'll click this one   and then i would see i'll try to see the  index as well as this name so page id is   2 and this is exactly that one we had early right  now if we have this one that also means that we   could come over here i'll comment it out right  now we don't need this now so we can go ahead and   start to change these names so this was hard  coded right so here we do product dot name   okay all right so make sure we're telling compiler  that it's not null and that's one what else   now remember this is the long text so we don't  want the text hard coded so we'll come over here   remove it and we'll put whatever we have gotten  so here we do have product dot description i think   we also need the bang operator one more time uh  and as well as the image okay now here we do have   image let's go ahead and see the image  image should be over here because that's the   background image now here we do have asset image  so change it to network image okay network image   and over here we'll just use the name so first  we do app constants constants dot base url plus url plus product dot i m g okay all  right and we'll restart everything   and hopefully it'll work this time and we'll come  over here and we see the name and the introduction   it's beautiful right and it's already working now  if i click on this one we see a different name and   a different introduction okay all right and what  else i'll come over here i would want to see this   image and this text and this is exactly what we  wanted right so it's already working and we have   come a long way it's uh pretty beautiful isn't  it okay but of course we can optimize it more uh   like the price over here is pretty much fixed  over here 10 rmb so let me find 10 over here 10 well i could do this one not really let's see okay this one now over here uh first i think  we need to have two strings   okay now this string would be a variable okay over here well to do that one first we'll have dollar sign  and then we'll have double break it and within it   we'll access product dot price okay and we'll say  it's not null and let's see remove the unnecessary   operator yes because we are already using  this string this double quotation and this is   a variable well in flutter or in dart actually  if you want to use a variable inside a string   you should use this one as well as i'm sorry  uh this brackets okay now let's go ahead and   restart it now we'll see if the price changes  or not now the price is 12. earlier it was 10.   now click on this one price is 2153  that means it's already working   and we'll check this one over here and we click  this and we see the price is 18 so which means our   price is working and everything else is working  over here and we're pretty satisfied and another   thing you may ask why i have this curly braces and  this dollar sign while earlier we have seen that   in route helper if you have a variable and if the  variable is inside a string which means inside   single quotation or double quotation for that  variable in front of the variable we use this   word which is called uh in this dollar sign okay  and that's good enough but if your uh variable is   uh let's see which is over here part of an object  then you also need curly braces okay now here   this initial is not part of an object because this  initial previously was just a string or this word   popular food it's just a string so it's not a  part of object but over here product it's it's   an object right so if you want to get a variable  from an object you should have this curly braces   as well as well as this dollar sign okay hopefully  it makes sense well now we'll go ahead and check   on this one okay because right now they're  all showing the same thing so we'll go ahead   and work on this well for that one once again  we'll come to our main food page over here uh not this one sorry we'll go to uh food page body this one okay now just like  this over here for popular food we had index   so we'll also use the same index for  recommended food so which is over here   okay now i think over here we can also make  a little update here we do raccoon mended foot all right so we know what's going on over  here now over here once again we'll pass the index   okay now it'll throw an error  so we'll go to this function   now over here would once again do  page id so this index is over here over here as a page id okay we're just naming  it page id you can name it anything you want   then we'll grab this parameter in the url actually   and we'll call it page id after that because  it's a variable we are passing and using so   we also have this one now we have to find this  one in the list so remember this is a list okay so   over here would come over here and just  like this we'll just simply copy this one   and i'll put it here and then i'll pass it down  and for that one we'll just simply copy this one   okay all right now it will throw  an error so we'll come over here   and over here just like popular food at the top   uh popular food let's see where it is this one  so at the top we'll have this one like that we'll just do here uh final end page id over here we'll use it as a  required record this dot page id okay all right   uh well i think we're good but earlier we  didn't have finals so we couldn't use const   you can use the final if you want and then you  have to use const okay then you're good to go   now we are over here and after that we'll  find the controller and we'll put it in a   variable variable name is product you can  name it anything you want we do get dot   find okay and then we'll find the controller  but in that case the controller is recommended   uh rare command dead product controller okay  and then we'll find the list the list name is   recommended product list because this is a list  we have to pass the page id that's what we'll do   so this will get us the page number from the index  okay once we have this one we get the related   instance and now we'll come down over here and  we'll start to make changes well the first change   we'll do over here image dot network okay and  then we'll print the full path over here and this   is the full path for this one we need to import  the library okay and we'll just put a comma comma   at the end okay all right and we're good to go  and after that we also need to change this text so i'll copy this one first and then i'll delete  all of it because the text is too long so i'll do   here child and then this is the widget that i want  to use and it is a text property and text property   wants to take a description that's what it will  do and we are good to go all right and what else   i think we also need to change the price  over here so for the price itself once again   here i'll have the dollar sign and then  the curly braces because we are using   a property from an object and we do product  dot price okay make sure that it's not null   and over here actually we can remove  this one first okay we don't need that   and uh as well as this one for now okay these are  all string okay now i'll save it and restart it   and we'll see how it goes now let's start from  this this place over here this is the image and   tags this is what we have and the price now we'll  come over here chinese side and we see you have   a little bit of text and this is the product  price well that's too much though now over here   we see the product price and this text is  pretty much same but this title has not been   changed so let's go ahead and change  the title now i think the title is uh   let's see where is we have the description we have the shopping cart so this is the sliver  app now over here we have this one and we do   have bottom navigation bar okay so that it's  inside the sliver app inside i think let's see container over here okay within preferred  size so over here i'll just simply do product   dot name is a bang operator and tell  it that it's not going to be null   okay now let's restart it now let me click on  this one yes okay but of course in this case   we have a very short text and over here the text  is short and over here the text is i guess long   and it is as we expected before we worked okay  all right perfect so so far everything is great   okay well we're still not ready to go and  check the back end because we have to learn   and do a few other stuffs before we go ahead and  check the back end okay well in next part of this   tutorial we'll see how to work on this button and  add things in the cart and show it over here okay   so that's what we want to do in this section we'll  learn the basics of a shopping app or a shopping   cart before we go ahead and learn this section  first take a look what we have covered previously   well previously we learned our app architecture  and we learned that from main method we'll call   init method and then we'll load the dependencies  and in general our dependencies are api client   repositories and controllers and that's  how the whole app comes alive and it   it runs okay and based on that later on we learned  how to build nested json how to work with nestor   jason how to encode and decode nested json  and we also learned how to build product model   we'll go ahead and take a look at the basics  of a shopping cart or shopping app okay so in   general we'll have ui and ui would interact with  the product controller and the product controller   would interact with cart controller and the card  controller would interact with local storage   how the interaction happens here it goes so in  your ui you will have an instance of your product   so we'll have a product instance and using that  product instance using a dot operator we'll call   the properties fields and methods from our product  controller now if you need more information from a   card controller so you can have an instance of  card controller inside product controller thus   you'd be able to call the information from cart  controller inside product controller okay and then   ui would get instance as well from uh cart  controller or the properties but not directly   it will happen through product controller okay  for example product control from here the instance   would call cart controller from here we'll call  some fields or properties of product controller   and then product controller will go ahead and  call the related fields methods of card controller   using an instance of card controller inside the  product controller now the same will happen for   local storage from cart controller well a card  controller will have an instance of local storage   so if i'm going to get some information from local  storage i'll get inside cart controller using   the local storage instance okay so that's how the  basic flow works so in general for a shopping app   you wouldn't really go ahead and call the methods  or fields of card controller directly inside ui   you do it through product controller okay and if  product controller wants to get some information   from local storage it won't directly interact  with the local storage it would happen through   card controller and this way our logics are  all separated business logics and your code   becomes cleaner now after learning this  we'll go ahead and build our shopping cart   well after having the basic understanding of  product controller card controller product   model and cart model now we know how to go ahead  and build our app well first we'll come to our   product controller and we'll open it up over here   and this is our popular product controller  and over here first we'll set up a method   right below this method so i'll collapse  it now come over here and i'll call it   void the type is return type is void and  i'll call the method name set quantity   okay well in general it  will take bowl is increment now as we saw earlier in  our basic understanding that   we need to pass a boolean to it  so this method would in general   would be responsible for increasing or  decreasing items based on this button click so now with we'll either set it to true or false  when we call this one okay well true means we   are going to increase item based on this click  false means we are going to decrease item based   on this click okay so that's why we need to do  a conditional check and we'll do is increment is   increment all right if it's true let's see i'm  missing an n if it's true then we'll increase   something okay otherwise will decrease okay  all right and increase what of course increase   uh quantity right so you want to increase the  quantity quantity or decrease the quantity well   for this reason first over here we need to set  a variable and we'll call it uh integer quantity   well in general when we initialize  it we'll initialize it as zero now   over here uh we are going to set this value okay  now here we could do quantity all right now we   could do quantity called whatever the quantity  was given plus one well initially it's zero right   and zero plus one is one so when we call  this method based on this step event   over here so it would be called and if the value  has been passed true then it would fall in this   category so initially quantity is zero so zero  plus one is one and if you click on it next time   now one plus one equal to so if you have a third  click on this it will become two plus one equal   three so the total quantity is a three well so  this is the basic idea right so now we'll go ahead   and copy it and put it right here now this time  instead of doing plus we'll do minus okay yeah   all right now with this actually this is the most  basic function of uh increasing or decreasing your   quantity in the cart item so for this reason  uh we will go ahead and use it in our ui so   we'll go ahead and find our popular food detail  over here and definitely here we have an ui okay   anyway so i'll come back to our  main page and i'll click on this one   and over here we have this uh let's see  there's a bottom container and within it we have this icon okay now this icon this is  the icon that we want to tap and increase well   first we'll go ahead and check it with icon that  add icon now for that one we'll wrap it around   wrap it around uh widget i'm sorry so if you're on mac you'd select it and  option enter and then it will have this   option for widget okay now we'll select  it to we'll change it to gesture detector   okay now i'll enter hit enter we'll  go to a new new line and over here   uh will have an on tap event okay so here we  do on tap okay all right now from this on tap   event we want to call this method the one we just  created okay all right so now let's see this thing   well to be able to call a certain method from  this controller we need to create an instance of   this okay all right now generally we can just go  ahead and use bit get builder around it and then   we can create the instance and that's how we'll go  ahead and do it okay so we'll just come over here   and wrap it around get builder but  for that one first i will cut this one   and over here i'll call get builder okay and it  takes product popular product controller popular product controller and then  it takes a function and so   but it takes uh an object over here so the object  is this one actually so we'll call it popular popular sorry for the typo popular product okay  now we'll hit enter so make a new line all right   so so that you can see now here we'll do  return and we'll put back what we had early   now with this we created an instance of this  controller okay so get builder actually takes uh   well i'd say it's a function and it's a type of  product controller okay anyway so now over here we can would be able to use the instance and  do certain things so here we'll use product popular product this one and then  we'll do dot and then we have access to   set quantity i think this one okay now  for now we'll set it to true okay well   this one actually want to pass a boolean as  a true okay and now the error should be gone   now once again now if we go ahead and try to log  it or print a result well definitely it will print   over here okay we'll say increment okay all right  now i'll do return it and put it over here now i   can click on this and i see that it says increment  okay all right now for next we really want to   increase the result based on this but right now we  are not doing that okay but we need to do that and   for this reason um well how to do that over here  actually we need to increase this value right yeah   so how can we do that well for this  one actually we need to able to access this one in our ui okay but  this is a private variable   okay so we'll go ahead and create a public getter  for this one so we'll come over here at the top   just like earlier you do hint get  quantity and it will get quantity for us okay all right now there's another way of  writing this one if you don't know actually   if you get confused what is this you can  also do like this return quantity okay but this is not the usual way of doing  most people do like this so we'll stick to   this one okay this is called arrow function  arrow function just has one line to return   that's why it is called arrow function or  something some people call it fat arrow   okay so in arrow function we just return one line  so you're returning whatever the value is this   so now over here now i'll actually close this  one we don't need this uh any of them for now   and over here now this is the place uh let's  see this is the place where we should get that   value okay now over here we can get access to this  instance like this one okay and we would be able   to call it so we do popular popular product dot  quantity okay all right and i think we need to set   it to strength okay now let's go ahead and save it  okay yes we already have three now if you do four   let's see uh i think i have removed this log over  here so i'll put it back here i'll do increment   okay now let's restart it now we have  seven now there is an increment as you see   or you can set the value print the  value over here so we do quantity we need to convert it to string okay   so now now we have 10 we have 11 we have 12 like  that but here there is no increase that's because   even though it's being increased but the status  of the state is still inside this controller   we need to tell our ui to know about this  and for that one we can just simply trigger   for your update so updated a function built inside  get extend management package so in general you   just go ahead and call it and then you are able  to know immediately that there is a new value   okay so redraw the ui now here you see now it  increases immediately hopefully it makes sense   okay so now with this we are able to already  interact with our page and the controller like   that now we'll go ahead and do the opposite  now the opposite means we want to decrease   okay so for this one once again uh this section  actually i'll copy and i'll remove over here   and put it there and i think we need a  comma and instead of add we do remove okay   now here instead of true we do false now if it  is false it will belong to this section okay   all right so now we print a log over  here and here print decrement okay and here here i'll do plus quantity to string okay so  whatever the quantity is there it will take it and   do minus okay now let's uh do minus as you say is  17 18 19. so if i click clicking it's still there   and you can increase it as well it's beautiful so  we are already able to make uh part of our cart   actually and over here now this is the problem  it gets minus and this is not what you want   okay so before we go ahead and increase and  decrease and return a value and save it to it   we need to do a check on it okay well for this  reason we'll go ahead and create a new function and now here we'll create a function and the  function name would be check quantity it will   check on the quantity and the quantity would  be coming from here so we'll call this function   from here and we'll pass this value over  here so we'll receive here as a quantity   okay and now we want to return something  okay so we will check on the quantity either   we'll check if it's less than zero or more than  certain quantity or if it's the correct one   so whatever it is will return so first we'll  check if it is less than zero or not okay so   do one to two less than zero if it's less than  zero here we do we'll just return zero okay   now else if if the quant quantity is more  than certain numbers 20 then we'll just   return 20. okay this is a random number say  for this item you just want to have maximum   20 orders from one person okay you want to take  so that's why you write here 20 but it's based on   your needs you could do it anything but actually  this data should be coming from server but   that's that should increase the complexity  total computation complexity and code a lot   so for now i will just set it to a random number  so you can change it based on your requirement   it could you could also take it from server as  well but in this tutorial i'm not going to cover   that one so i'll keep this one a little hard  coded but feel free to change the number based   on your needs okay so if it's less than zero we  return zero if it's more than 20 we return 20   else we'll just return whatever the number  so that's quantity okay all right 1 2 t now   here one thing you have to know this quantity is  different from the quantity i declared over here   so this variable in global scope this is in local  scope so just like any other programming language   local scope gets priority over global scope so  here this quantity definitely is this one okay so   now this this over here all these conditions  they're returning something right so that's   why i need to put here end okay now as i do  it that's okay now i all i need to do just   call this function from here okay so i'll put it  there and i'll put a bracket around it okay i'll   copy this one and i'll put it here as well  instead of plus or two minus okay all right   now we'll go ahead and save it all right and  let's see now we have two items right and try to   decrease more and we'll see what happens okay   minus one zero now it doesn't decrease anymore  okay all right because we are just returning zero   from here okay because it's less it checks  this value over here oh it's less than zero   so quantity is zero it can't be minus now let's do  20 okay and we'll see if we can increase more than   20 or not no you can't as you see if i click  on this it doesn't work anymore all right so   that's the only number we get highest number  but of course this is what you see from the log   right we need to also tell our user that  you are doing certain wrong operations okay   well we can do it easily well over here if it's  really less than zero before we return actually   we can send a message to user and that's pretty  easy with get x so all you need to do call a   function get.snack okay because remember this is a  controller and this controller is gettex type okay   all it takes uh a title and our title  name is item count and the message   you can't re use more okay yeah that's the  message but we can do a little bit of check   and style on this so here we can set a  background color okay we do that and here we do   app colors dot well now i think we need to import  this file first otherwise we can't access the   static properties and you would do main color  so background color is the main color and color   text for the text color we do colors dot  white okay all right now let's see over here   i'm missing a comma now the error should become  we also need to import this library over here   okay now this is for if less than zero if it's  more than 20 now here you can't add more okay   now we'll do the same thing all right yeah so now  let's go ahead and save it and check the result well after saving it and let's try to add  one more and we'll see what happens you see   you can't add more okay all right and now  let's decrease it and we'll see the result you can't reduce more okay so already message  is working as well okay well now let's go ahead   and add one more now we'll come over here now  we'll go back and it stays there that's okay   now if i come over here it's still here  but this item actually i didn't add   so whatever you open later on it's still there  okay now that's because uh this section has   been is we are dealing with a product controller  popular product controller and there is one field   which is quantity okay so this field is global  to this file over here so whatever you open   it stays in the memory okay it's not a local scope  it stays in the memory so that's how whatever file   you open it is still there okay definitely this is  not what we want okay you don't want to have seven   after you added three but it becomes seven right  so that's a wrong way of dealing with this thing   and this is not what we want okay but this logic  is really great over here no problem with this   but we need to add another function so each time  we open a new page or new screen or new food item   we need to initialize some data and check on  the earlier values to avoid this because over   here these two functions check quantity and set  quantity it's logically perfectly they're doing   good okay now this is the architecture problem we  are talking about so over here we need to create a   new function and that function will be responsible  for checking on the current things okay   all right so for that function uh we'll create a  function for that one and it will have a void type   we want to return anything we just check on the  local variables and do some change and that's all   okay now here i will call it init data okay all  right so here the unit product uh it sounds better   okay now this will have a product model uh well i  think we'll have it later uh pretty much first now   all we need to do we need to call it from  somewhere and then once we call it we'll set   the current quantity this one which is in global  scope we'll set it to zero okay whenever we call   this one we'll set it to zero and that's all we  do for now okay so every time we open a new page   we need to call this one okay now we'll come over  here in a popular uh product controller so here uh we can just simply go ahead and  call the function that we created okay   all right so here i'll just remove  this one we don't need this anymore   okay and here i'll just simply call get.find  okay yeah get dot find popular popular product controller this one okay it'll  find it and then we'll just use init   product okay we'll call this one i need to do the  initialization now let's go ahead and save it and now we come over here we open this we can add  item to it and reduce item to it and the other   logics they don't change they still stay the same  now we'll come over here let's see uh we go to a   new page now it sets to zero but on the new page  we can also do the same operation as we are doing   early okay so now that but with this approach  the problem is uh it sets data to zero okay   now that's a problem we need to overcome this  problem well for overcoming this problem we   need to do more stuff in this controller and  in this method okay so before we go to new page   if you like it i mean if you like the product you  edit it and you would add to this card okay once   you add to this card you have to save the data  okay now save the data globally in one variable   okay and later on whatever you add okay that data  would be increased i mean when you save the data   globally that data say for example here you added  two and you confirm this three items here you   added three items and you confirm over here okay  let's add it okay after editing after adding it   it will show up here immediately that you added  two items and it would save to go you added three   items sorry and it would be saved globally  over here in our app and then when you come   over here and try to work on a new product and  maybe i added two items and i confirm over here   previously you had a three three plus  two it would immediately change to five   but at the same time when i come back  over here because previously i added   three items i'll be able to see not the data is  being erased okay but currently it's being erased   over here and we also need this one so we need  to introduce more variables to keep the track of   the data okay all right uh so here we'll create  another new variable okay and we'll call it uh and over here in cart items okay these are the  items in the cart and it would be initialized as   zero at the beginning and then we can also get  it okay now over here we'll get it like this   and get in hard items okay over here  and here we would do in cart items plus   set quantity or quantity this one okay so this  would be responsible for the total items being   added in our cart okay from different pages  including over here but first we are focusing   on just this one okay all right so yeah that's  what we want so whatever we add it would be   added over here and this would be responsible for  globally keeping keeping track of our products or   items that being added in this list okay now  of course this function will play an important   role over here okay so each time we need the data  we'll also set the data over here this one in cart   items equals zero well you might say that what's  the difference you're setting it against zero yes   we'll do that then we'll do a conditional check if  we will see if previously there are data saved or   not if it's saved then we'll take that data okay  so that fresh data would be coming from somewhere   that has been saved okay and we make sure that  initially everything is zero but because we'll   have another variable where we set our i mean  whatever we are saving it will be saved there and   from there we'll take it and put it over here and  then if you add more stuff by clicking over here   then this and this would get together okay so here  we do like pseudo could get from get from storage   okay so we'll have a storage system and you'll get  from storage and set it in in cart items okay now   then if you get certain maybe you have to get  certain numbers from the storage you have you will   have certain numbers because you saved it once you  click on this button we'll save everything to a   storage okay and get from storage so we'll check  and try to get items from storage okay and then say for example storage previously i added three  okay after hitting on this button now here it will   have three but of course we have to check if  this item already exists in our storage or not   if that exists then we'll get the item so here  we'll have if exist okay if exists somewhere   if it exists then get the item for example say it  is a three okay that's all okay and if it doesn't   then just continue what you are doing okay now  at the end when you call now say for example   in the storage we already have three so we got  three over here and then you are adding more okay   say for example one two three so  this is already in the storage   and you have three and then you want to  add more when you come back to this page   then over here first we'll get this three and  then because we have quantity this one right   so this set quantity this quantity  would be added with this together   and then we'll get the total quantity over here  so this is the logic okay uh it may sound a little   complex right now but as we work on it more and  we'll eventually get through it okay all right   well now as i said we have to check if certain  quantity has been saved in if certain product   has been saved okay so here first we need to save  our product well now we need to save a product in   a controller per that would be a card controller  related to this icon over here okay so for that   one we need to go ahead and create first create  and controller so we need to go ahead and create a   card controller but before we go ahead and create  card controller first we need to create a wrapper   for card controller remember every controller  should have their own dedicated repo okay so   well in general as i said earlier  repos are dedicated to process data   or get sorry wrappers are dedicated to get data  or store data that's all they do all right so   here anyway we'll go ahead and create a new  file and we'll call it cartridge okay cartridge.   now for now we'll call it a class as  cart repo and for now this would be   empty it will have nothing okay and as we grow  we'll add more stuff to it and then we'll come   to the controllers over here we'll create  another file we'll call it card controller dot dot so throughout our app we'll have only  one card okay and that is the card controller   and it will deal with everything else  okay with all the product controller   either it's popular or recommended now here we'll  create a class and we'll call it card controller   and it will extend get x controller now over here because every controller takes  the related rapport so here we need to call   our rapport card repo again we'll instance instant  instantiate a variable or an object based on this   okay now we need to get it the file okay now  error should be gone now let's see and we need   to put it in our uh constructor as well so card  controller and we do require this dot card okay   hardware and with this we are pretty much done  with this controller initialization now we need   to do another thing because all the controllers  should be loaded in the dependencies okay so   we need to load our dependencies and  our dependencies are over here okay so over here i'll load uh the card controller  apple okay so here i'll do get dot lazy lazy   put with this to load our dependencies  and here we'll call card repo okay and card repo in general just uh for now it would  be empty okay it wouldn't take anything in   the constructor like as i showed you here it's an  empty class there's nothing okay so we don't need   to pass any parameter now just like that other  controllers you need to load it over here lazy put   and here we do our controller now  of course card controller takes card   repo it do get dot fine with this it will  be able to find the card card ripple for us   okay now with this our dependencies are ready  to be loaded okay yeah so now load the app from   the scratch make sure that everything is okay  fine now here i think i could remove this uh   our prints we don't need them now i think they  were over here early so i will just remove them   okay all right okay we're great and there's  another one in recommended product controller   this one uh we'll remove this one as well  but we'll keep this on if things go wrong   we'll see that has been printed so now for  now recommended product i will close okay well now earlier i said that if we click  on this as the products the increase   will hit on this button tap on this button and  then we'll save it to a global variable okay   all now that global variable actually a global  map so we want to add item to a map and that map   would be coming from card controller okay now the  card controller here will create a map because in   the map each time we click on this everything  will be saved in a map in key and pair value   well in general the keys would be int like the  id and we'll understand it more as we work on it   and it will take a model okay but we don't have  the model yet because remember when you process   data in general when you receive data from  server you have a model when you send data   to server based on that model you send data now  here we are saving a lot of information globally   not just this number we have to save product name  product quantity product price and product id   but now this is a little bit different than this  this would be a little bit different than product   model because in product model we don't have  quantity and things like that okay especially   the word quantity now in card controller we need  to save information that how many quantities   has been ordered what's the total price and  what's the product id things like that okay   so that's why we will need to go ahead and  create a new model and we'll call it cart   model okay part model but of course this model  doesn't exist yet so it will throw us an error   okay and we'll create a variable name items okay  i will create an empty map now here this cart   model is throwing error because we don't have  this model okay i'll close this now for now and over here i'll go ahead and copy part of the  product model now our model product model is   over here so we don't need to rewrite everything  so i'll just partly copy this class over here   and then i'll come to my project file  over here and here it's a models folder   i'll create a new file and i'll call  it cart model okay cart model of dart   now here i'll put back everything but  instead of product we'll call it cart okay and here is the same let's see yes that's it now some  of the properties we don't need   cart model actually we don't want to save any  description uh and we don't want to save any stars   we don't want to save any location we  don't want to save these things as well   okay we also don't want to save this  one so we'll go ahead and remove them so let's stay organized remove them   now over here description section we don't need  stars section we don't need and this part as well okay so this would be our  very simple product cart model   but here we also need to add some other stuff so  here we'll add uh quantity so content will be end   call it quantity and here we'll also have a bull  over here and we'll call it is exist so it means   whether it's existing or cart or not and then  we'll have a string now string to save our time   this time is like when it's been created okay   so we'll keep that keep the track of that one so  that's why we have this time now quantity before   how many items has been added okay and exist will  trigger it we'll save the value if it has been   added in our cart over here or not so  for that one we'll use this field over   here now here we need to come over here  and we'll do this say quantity i think   and this dot is exist think it should be exist  not exact and then this time okay all right and   over here we need to add the related field as we  create object based on the json data so here we do quantity json quantity and let's see typo once again and here   okay let's see q u a n oh let's see i'll just  copy the q-u-n-t-i-t-y we are good q-u-a-n   okay quantity now here we also should check this  one is exist json is exist now over here time json okay let's see now well okay these are all optional right now now  we'll come to our card controller and all we need   to do import it okay all right okay so with this  we are able to import uh uh we are able to create   an items variable which is type now in the cart  itself we'll create a new method and we'll call it   foil add item okay now this one will be called  from here over here when you click on this one   it would be it would get cold but of course it  wouldn't get called directly from ui it would   get called from product controller so in product  controller we'll create another function which   we should call add item and from there we'll  call this one and it will create it will do   the necessary process of data and save it okay so  first here we'll go ahead and create this method   and this method would take product model okay as  a product and it should also take the quantity so   you should pass the quantity because we want to  save it okay so here we'll call it quantity all   right after that over here once this function has  been called we want to save it to this map okay   now to save it we don't want to save the duplicate  items okay so that's why we need to check on them   well for that one first we'll check over  here items this one so we get this one   and then we'll put if absent okay now here  you see my map has a key that is end type   and it has a value that is an object type okay  so as i call items dot put if i've sent while now   any kind of map they have this function built  in okay so that's what being called over here   all it does is check whether this key certain  key has been has been inserted in this map or   not if it's not it will go ahead and insert  that object whatever you're passing or item   based on this key if it doesn't exist it  will put it over here if it exists it won't   okay so that's what it does now this key this  key and my key over here they are same okay   but i have to make sure that whatever i give  they're unique but it would also check internally   because that's why it's called put if absent okay  now here i need to put a unique key over here okay   now unique would be coming from this product  object remember the product is coming from our   backend and the back end every product has their  id the id is the id field and we can go ahead and   check on this so this is the id and this is  a unique id why because this is the primary   key in our database we'll check our database  later but for now you have to know that this id   is a primary key so this can't be duplicated so  as you add more item in the backend more products   there will be new ideas and there they would be  all unique okay so we know that the product id   is unique and we also know that when you take  data from server we convert it to product model   so at that at the same time we have saved this  id well we can go ahead and check that we did it   so this is our product model remember there's  an id field so when you convert the data to a   model object we already saved it maybe you didn't  notice it but we created over here we passed the   id over here and saved it in this field okay so as  the object created the id has been automatically   saved inside it okay so for that reason now what  it can do we can get this object and we can access   to the id the product dot id you see it can  find it automatically because product model   has a field that is called id okay anyway let's  see now here we have this error because uh it says   the argument in type cannot be assigned to the  parameter type end okay well now in the product   model i said that this is optional as you see over  here okay all right well now here i'm saying that   when you type like this you're telling hey there  would be a value and use it but compiler is not   sure whether it is optional or not because here  you put it as optional okay actually we can go   ahead and remove that as well so we'll do that  okay now here for that one we need to use another   keyword which is called required okay all right  and then it should be gone let's see over here now it created null knowledgeable instance  must be initialized so we have to initialize it   before we go ahead and use it now that's a lot of  hassle so now i'll put back whatever i was doing   okay but here i can easily solve this problem  because i know there will be always an id it   can't be null but i need to tell the compiler  that it can't be null when you use the bang   operator we tell the compiler that it is not null  okay all right yeah that's it and now after that all we need to do put an object remember this  id refers to this one and this section over   here refers to this one okay so we need to give  it a model over here okay now what model the   cart model okay that's what we're giving it to  it now over here let's see i think we need to   have the semicolon as well and our model okay  now of course cart model if we see over here   when you create object it takes these things  okay this thing so we need to give these   fields one by one okay so simply we'll just  uh go ahead and copy it and put it over here okay and instead of this id we do id and now here we get product id okay so this id  the same id we are passing to it okay all right   and we'll save it but of course product model  itself doesn't have any idea what kind of id uh   sorry the cart cart model itself doesn't have any  idea what kind of idea it is but we know that this   is a unique id and this is product id in future  we would be able to retrieve this one and do more   data processing based on that okay all right now  over here we'll save it as name okay now save it   pass to it and the name is coming from product  id as well okay now all of them because   i'm taking all this information from product okay  so that's why i'll just simply do product dot   okay and here we do price and product dot price  here i would do img and product dot mg okay now here now these three are special now this  three over here quantity doesn't exist in product   model it can only exist in cart itself or product  controller okay and this is what we are passing   so over here we do quantity and we'll save  whatever the quantity you pass to us okay   so this this refers to this one and this refers to  the cart model this one okay so don't get confused   i will come back for this one so we'll just  simply set a boolean over here we do is exist   and we'll set it to true because you are adding  to it right so that true means it exists okay   now for this one we do time now  here we need to get a real time   because real time is unique unique time unique id  and unique things we can use as a reference later   so that's why we'll just simply go ahead  and use date time okay they turned up now so   when the item has been added to the cart we  are taking the current time and saving it okay   but we need to save it as a string okay because  it is a string type so with this actually would   be able to add item to our card controller and  inside this one okay you're right well to be able   to use this function at item uh all we need to do  we need to come over here food product controller   and within it we'll create a new function okay  and we'll call it add item the return type is   void okay add item now this is a take product  model as a product and from here actually we'll   call the function we which we wrote over here  at item okay now we should be able to access our   card controller from here okay now this one we  can do easily okay now do remember init product   uh this one gets called uh from each page  for example this one first time uh when   you build it okay when you first time build  any kind of page this function gets called   so actually from here within it we can pass a  card controller okay so here we do get dot find   and we will do card controller and that's all  so this is the card controller we are going to   send okay but of course this one doesn't have  any parameter as a card controller so we'll add   it okay so sorry uh this one over here we'll  add it card controller and card okay like that and we are good so init product will have an  instance of card controller or init product   is passing a card controller now in our  app throughout the whole app we'll only   have one card controller and one instance of  that one okay so wherever you call it from   wherever you call this card controller from that  will be able to access all the data that's over   here okay so in general in an app there is one  card controller and it kept tracking of your card   like adding removing total item things like that  okay so that's why now our job will be much easier   now over here we'll initialize card controller  okay so here i'll create a variable and it   would be type of card controller so the card  controller and cart okay and over here i'll say   we'll initialize it later okay so when you use  lit variable you have to initialize it before   you go ahead and use it so now over here first  time we'll initialize it over here we'll do card equal card okay once we have this one now from here we can so now over here it gets initialized okay all  right so if it's initialized the card control   instance is inside of this one so we can call  this function which is called an item from here   and at the same time we can pass the product  model okay so here we'll call cart dot   item okay this one and here we  are passing product and quantity   well now quantity itself is saved over here but  we'll pass the private variable not the public one   so from ui we'll call this one and internally  it'll call card controller and the related   functions are methods okay so that's how it is  related so in general most of the time from ui you   don't want to call your card controller you'd call  product controller and a product controller would   call card controller okay all right so here we are  now in popular food detail and over here we'll add   add item function and to be able to add it we need  to find this section where it says add to cart   i think add to cart should be somewhere here okay  now this one is wrapped around big text so i'll   on mac i'll do option enter and i'll get this  option and over here i'll write gesture detector   and once i do that over here i'll have an ontap  event okay i'll do untap and within it i'll call   add item now let's see definitely this one should  be wrapped around get builder which already is and   it has a instance of this controller so you can  use that instance to call this function so i'll   come over here i'll just use this one simply and  then i'll call add item okay and all we need to do   we need to pass the product as uh an instance okay  now it's already let's see where it is coming from this is coming from here because  when you come to a new page   each page will have this instance which is created  from uh it's not an instance it's just an object   from our product list okay all right anyway  so now we are here and we'll go ahead and tap   on that and before we go ahead and tap on them  i think we can put a log inside this function   okay so now this is in the controller  itself so i'll put a log over here   inside the card controller okay now here as you  see there's an arrow function okay over here now   instead of doing arrow actually i can do simple  this kind of function okay so here i will do this   one okay all i need to do a return statement okay  and sometimes it's convenient for printing your   messages because i want to print a message  over here i would say adding item to the cart okay now we'll go ahead and restart our app now  once i click on this i would expect to see a   item over here okay and a log over here  but at the same time actually we can print   out some information you'd print out over  here our product id okay we do product dot   id okay whatever the product that was given to  it and we'll convert to string as well as the   product quantity okay so this is one we also  want to print over here the right quantity   here do plus quantity to string okay  this is the log that i would expect to   see over here once i click on this so let's go  ahead and click on this and over here yes we are   loaded everything has been loaded correctly now  i come over here definitely everything is zero   now i would click on this and now it is four now  let's go ahead and wait and see what happens i   clicked on this and it said is that adding item to  the cart and four so we have added four items okay   that's beautiful and the id is one i think  cart id okay yes now i'll go ahead over here   and try to add this one and of course this  time this information is gone because this   is what we did early because every time we come  to a new page it refresh everything right now   click on this i'll add it over here so  i say card i t id is 2 and quantity is   2 as well okay now here i would come over  here and now click on this but here first   thing i would expect that here i still  have the record but we don't have it   because we didn't do that part yet but it  is true at the same time that we are able to   add information inside of this and we will  prove that very soon okay how can you do   that over here just simply when i click on  this i'll i'll try to print a log okay length length of the item is going to do items okay dot length okay because  do remember just now we added   a few items to it two items because we worked  on two uh uh two products and each of them   uh well now they store they get stored as a model  so we have two objects inside this item right   so we are next time we click on this first  we'll see that it should print two right   for this one actually i would come over here  is a new item previously you added two so i'll   add one more over here or maybe five and then  when i click on this i would expect it to print   two and then go ahead and add a new one  right so that's what we would expect i think i didn't restart it so  let me go ahead and try a new one   over here now we'll add two items and here  see length is three which we have already   added three times before the last one was added  over here now let's see if you click on this one   this is the item we added at first  now we'll go ahead and click on this   now here it just printed the length is 4 which  is over here but here it didn't print this one   look at why because this product id  the certain product id already exists   in this map okay because they check if if absent  okay put if absent okay so because we already   added this id so you can't add it directly anymore  so but i i do want to add more items to it right   yes but now over here we could simply  go ahead and print and print the   quantity of item in this list okay well for that  one i'll simply go ahead and restart everything   and everything is over here and now what i'll  do i'll click on this one okay and i'll click   on this so remember this is the second item  and we added three items to it uh let's see um okay we added uh card id is a two and quantity  is three okay all right now this is the first one   now i'll add them i'll click on here and  we see that id is one and we added two okay   now here's the thing uh for now i'll comment this  out and actually i want to see the number of items   that's been added in the cards with their quantity  well for this one actually i'll start after   let's see where we can start um it looks like we  have to start over here okay we still have to do   because we don't have any other places we are just  returning okay all right so now over here because   items is a math map so what we'll do we'll create  a forage loop to go through it items.4h and it   would give you a key and item key and value well  now key refers to this int value refers to this   now value is a model so we can access to the model  using this one and we can simply do a printout   over here quantity is now here we do value  dot quantity to string okay all right okay so now over here we'll encounter one  problem once we do that but anyway so now   let's go ahead and click on this one just  to restart it and now let's click on this okay well because we're not adding  anything let's let's add anything over here   and we'll add on to it so we'll go ahead and add a new item maybe  this one and add two three four five six   seven okay now we'll click on this and we  see that uh adding item to the cart over here   we see that card id is six quantity is seven okay  so we have added seven one while which is coming   from here but now over here of course this one is  not added yet so these two are for the previously   one the one we added okay all right so because  this one would be added from here so that's why   in this list in this list you didn't see the seven  quantity but if we go ahead and say we work on   this one and we want to add say five now we'll see  first five over here and then over here three two   seven the earlier quantity okay all right three  two seven okay and this is the current quantity   because this log prints first and then it gets  added to the model uh sorry in the cart so   anyway so now there's another problem so  let's restart our app and come over here   and let's do one check over here so just click  on this okay now here my quantity is zero but   it still gets executed over here this adding item  actually it adds the item over here we can print   the log and then it comes over here and add the  item so that's why we see that okay now because   we are not adding anything so here we need to do a  conditional check okay so with this one over here   so what i'll do i'll split it a  little bit separately now over here   okay now i'll cut this section um all  right see this is this section yes   so i'll cut this section and i'll put it  in a conditional loop over here looks like let's see we have to cut up to here yeah okay so here what we'll  do we'll do if if quantity is greater than zero okay but not zero  greater than zero then we go ahead and   add to the controller okay otherwise we  don't okay all right now restart everything   and now over here if i come to this one and try  to add it nothing will happen okay of course   over here we can also give a message to the  user that you must add at least one item okay   so this is the condition right  so here we can give at least one message to the user that you are not adding  anything in the cart but we can actually be   much better so instead of giving this condition  over here we can do it over here because here we   are adding item okay so over here we can check the  condition if quantity is less than zero or not so   if quantity if quantity greater than zero  then we go ahead with this condition okay otherwise we send a message to the user  now send a message we can send this message   the one we already had so simply we'll copy this  one and put it over here all right yeah so i'll   write it there you you should at least add one  item in the card you should at least add an item in the cart okay all right and that's all okay well now  if we do that one actually when you're in   the cart controller we don't really need this  condition anymore okay so we can do control z   we'll go back to the original state where we  were okay all right now we'll restart everything   and here we'll see if it works or not okay  so now here we are we didn't add anything so   here we'll just simply add this one you  must at least add one item in the cart   and now it's a zero you can't reduce more okay now  you should at least one add one item in the cart   or you can go and do the usual one okay adding  card id 1 okay quantity 5 which means that we   are falling back to the condition the correct  condition over here so we only get this one   if we have already one item okay so here now  adding the condition but the loop doesn't work yet   because the loop is empty over here i mean this  items is still empty okay we didn't add so it it's   get added only after this section gets executed  okay so yeah so another thing we learned over   here if you have a map you can look through it  using 4h and you can work with the value get the   get the value print the value and do whatever  necessary things you need to do okay all right   so what i'll do i'll go ahead and remove this i  don't need this one anymore now okay all right   now let's see what happens uh the problem is  i added five and i want to add one more now i   click it nothing happens even if i decrease it  still it doesn't get added it's already there   so you just can't do anything so you can't  update it so you need to find a way to update it   and luckily it's pretty easy to update content so  here we do have items dot put if absent okay all   right so we have a pretty much similar condition  where it says items update well for items update   if we want to if we want to able to use it then  we need to use another condition first and that   called contains key okay so in the item if there  is a key contained while over here we can check if   the key already contains in this item or not okay  if it's not there we'll go ahead and do one thing   and if it's there and we'll do another thing  so first over here if the key already is there   that means that it's been added early right so in  that case for the same product id we just need to   do some update but if this key is not found there  it means it was never added in this item map okay   yes so anyway here we'll do conditional check  okay if contains key then we do one thing   otherwise we do another thing what another thing  we do we do this thing okay let's see over here   this is the condition let's put this one and  this is for this one okay so i'll cut this one   and put it over here so now what is this key once  again this is the product key okay product dot id okay well we can also use the bank arbitrator to  tell that it's not empty but anyway so now here if   the key is already found in this list inserting  this map it means it's already there right   anyway so then we can go ahead and update it  if it's already not there we just directly   add it okay all right so that's why here  we do items dot update now once again   just like this condition it also takes the  key okay so whatever the key you want to   update you need to put here in our case this is  the id right so here in our case product dot id   all right but if in your case let's see  once again um so it's being judged it   it's being treated as optional so you say okay  it's not going to be optional it means which   means it's not going to be null okay anyway so  after that you get the value now here if you see here for updating you have the key and then here  automatically we get the value as a cart model   okay so it for it takes a model or an  instance or an object related to this one   so do remember every object every product id  there is an object model right or an object   so this is that object that also means that we  can access the internal property of that object   so here we do some interesting things  first we'll put a comma over here   and instead of writing this fat arrow  we want to write a little more in detail here we do return okay now once  again if you see however on it so here from this one you understand that  the method name is update but it returns   a model and cart model in our case okay so  that's why we have to return a model and we   have to return a cart model okay so in our case  we do cart model okay just like this one over here okay now we're returning but luckily we can just  simply go ahead and copy this one okay all right we can just simply copy over here so over  here we see that update method returns a model   and put if apps absent this  one also returns a model okay   but with this model it's get added to this list  and over here in this model it gets updated okay   based on this id now what id you want to update  of course in our case this value because remember   value is an object from this product model in  this case so we'll just replace product with value okay and now over here this one quantity is the interesting thing  because we are dealing with the quantity okay so   whatever quantity was there take that one so  we have to get that one value dot quantity   okay because this is the one  that was already saved early   and then the new quantity that has been passed  okay yeah add that one so that's how you update   the quantity okay let's see there was a null  checker okay all right so this has to do with this   flutter sdk in some version you might not  need this so a lot of them you need this or   null checker but for advanced version the latest  one actually a lot of them you need to tell that   it's not going to be null okay because earlier  in our cart model we said it might be optional   but over here this kind of less at this kind  of map they don't take optional values they   they need to know for sure that some of the values  are not optional which means they want to be null   okay so anyway so now with this whatever you send  that content is being added to it okay now while   after this we'll go ahead and print a log and for  printing a log actually we need to find a better   place this is not really good place to print  log for this one actually i would come over here   and here i have this method which  is called add item over here   so right after this i want to print a log okay  now to print a log i have to be able to access the   this card controller items so what we can do we  can set up a getter over here so here we do map   and because i'm returning a map over  here and this type of cart model now over here i would do get items  items okay now this became more like a   public field so we'd be able to use this one to  access from uh this product controller okay now   over here we'd go through it so we'd say we'll  use uh over here method for each method okay we do   cart dot items dot forage okay now within it  we'll do print method and here we'll write here dude okay the key is or actually  the id id makes more sense is well key value dot id to string to string okay and the quantity is here once again value the quantity  dot to stream okay all right now we'll go ahead   restart our app and do a little bit of checking  from this scratch over here now over here this   this one would get printed after adding the  item in the cart right so we'll come over here   now over here we'll add two items  now i'll click on this let's see okay now the id the id is one and quantity  is two right okay now that's fine and for   the second product we'll come over here and we'll  add five okay now let's see what happens over here   okay so the id is one and quantity is  two id is a two and quantity is five   okay well now here's the thing i want to add  over here more more items say i had another   eight right so actually in total i want to be  able to see eight items for id two quantity   right for id2 i would want to say eight but let's  see when you click on this now there's a problem   okay now this eight it gets added up with this  five so it becomes 13. okay so now there's this   problem with this quantity over here so what  do we need to do after setting this quantity   in this after adding this item we need to able to  set the quantity to zero okay so quantity has only   value other than zero during the adding time  before adding it's zero after adding its zero   quantity only has a value when you click on this  one or this one okay otherwise it's always zero   okay this way it won't mess up with our app now  let's save it restore it now over here definitely   we can't add anything because it says we need  to add at least one item now here we do three   okay now that was previously three right   and then we added so that was previously  13 then we added three so it becomes 16.   now let's see two more so right now i would expect  to see 18 right okay that's it so it's working now   for the first one over here we can check it again  previously there was a two as i see that right   now here i would add another three so i would  expect to see the result over here five and   eighteen so let's click on this that's what  we see so now it's working correctly okay   now there are other problems as well well  it's not a problem it we didn't do it yet   so let's go ahead and check it now i want to  reduce the item okay so it gets immediately   zero okay so that's one problem okay so we  need to work on certain issues over here   how to solve this one okay now before i mean  sorry this one it becomes zero now uh this   problem happened since you added quantity  equals zero okay but we need this as well   but we need more variables to work  together to make it up and running well now there is another thing that we should  do first this one so here we learned that if you   just now it was 18 you add 1 it becomes 19. but  actually when i come to this page i want to see   18. i don't want to see zero right so that's one  problem that we need to solve first and then we'll   solve that other problem reducing because  they're somehow connected and then it would   become very easy to work with this one and  other part of this app so for that one actually   remember from over here popular food detail  when you come to this page first time   okay every page has a page id but  page id is coming from our list   now based on that list we get this object that is  saved in this one and this is the object over here   okay and we remember that every object  over here that's coming from our server   the big they have unique id right so all  we need to do first we need to somehow   work in this car controller and we need to  check in this one whether the cart model   inside the id which is this one okay  actually this is the product id right   so this id whether it matches with the id over  here the one we retrieve based on this page id   so inside the product model there is  id so this id whether it matches to   the id over here okay so that's what we  want to check once again to be more clearer   let's come to our product model uh this is our  product model so all we want the product model   this id whether it matches this id or not okay and  based on that we can show because a lot of time   you just come over here you'd come over here  and click on this and you might not add anything   okay so if you don't add anything we'll just  show it to zero when you come back next time   but if you added anything and if you come back  next time we'll show the edit item over here okay   all right so for this one uh we would come over  here to our cart controller and within this cart   controller over here we'll create a new method  here we'll call the method exist in cart and   it'll take a product model as a product and then  we do two kind of check well first if this items   contains over here product id if it does which  means this one if it has a id of this product if   it contains the key well that's very good in that  case we can go ahead and do a for loop checkup   and if it does actually we don't need to do that  if it does then we'll just simply return true okay so here we just simply return true okay because this exists all right now over  here we need to set up a boolean okay otherwise   we'll return false okay over here return false  now here with the return type is bull okay now all   we need to do we need to go ahead and call this  function from over here uh not exactly over here over here okay so here we would call we'll create a new variable  and we'll call it exist okay   ver exist equal false okay but  now here exist equal card dot exist in cart so we are sending a product model  to it now what is this product model and where   is this coming from for this one we we need to  be able to send it from here as well okay now   here for now we're just passing one parameter so  here we do product okay all right and over here we would just take it as a product  model product model product   okay now the error should be gone now with this  we'll be able to print and take a look okay   so every time we initialize the variable so here  i check it let's say exist or not okay plus exist dot to string okay now i'll save it okay i'll come  over here and i would want to go over here and i   see exist or not true so it returns true okay for  this one and for this one it should return true as   well now the last item which is this one we didn't  add it to cart and it returns false so now with   this we are able to know we are able to know that  if an item exists in the cart or not okay well if   exists if it's true then we can do a lot of thing  okay now from here we'll call it another method   so we'll create another method  over here and that method would be   called inside of this now over here we'll try  to get the quantity if it exists okay over here   we'll create a new method and return type would  be int but i'll write it a little later first   i'll write the method name so do quantity and  it would get product model okay and product   over here once again would would be doing a  little bit of reputation just like this one we did   so here first we'll check if items dot contains  okay the key is product dot id if it contains   then definitely we'll go ahead and do a for  each loop so here you do items dot 4h over here and remember this key is the same as this key  okay yeah if it contains then this key and this   key they would be same y i can tell you because  first time when we added this item over here so   put if absent over here we are also adding the  same id as this one okay so this id this id this id and this id they are all the same id they  are all product id okay now anyway so we'll come   back to this section and here we'll do another  conditional check if key because we are doing   a loop so we need to know which one is matching  okay but we know one of them will match okay if it   matches here over here will return something okay  now first i'll create a local variable over here so i'll call it var quantity equals zero okay now here we do one quantity equal  get the value and over here we get quantity okay   and then make sure that it's not null we are  telling the compiler and after that over here   after this line will return quantity okay now the type is end okay and that's all we  want now hopefully it makes sense so from   product controller over here we'll pass this one  to this method and first we check the id contains   or not if it does then we'll go through a for  loop and if the for loop happens certainly it   will find one of the quantities that matches with  the id then we return that quantity and then we'll   put it over here okay now we'll simply go ahead  and just call over here if exist if exists then   we'll go ahead and over here get the value  now where to put the value we'll put the value   in this variable the one we created in cart  items okay this one so let's go ahead and do it   so here we do in cart items equal cart dot get  quantity okay and we are passing the product   model okay now over here we'll say we'll  print a message we'll say the quantity is   the quantity in the part is over here  in item cards okay all right we need to   convert it to string that's what we're  going to do okay now let's save it over here uh for this one the quantity is zero right this  is the last one but anyway so we'll come over   here now we'll click on the first one this one  and we'll see the quantity in the cart is a two   so now we're ready to display two over here  so now this one the quantity item is 19   but for this one we'll get zero  okay perfect now all we need to do   we need to work on this and show it on on over  here when you open it first time whatever the   quantity will show it okay now before we go ahead  and show it let's make sure that the other one   it works as well so currently it's quantity is  two right so if i add to it okay now let's see   so quantity is four okay that's working as well  now if i go and come back once again i see the   quantity is four right okay so that section is  working so now in our ui over here we need to show   change this section okay now this section is at  the bottom over here uh i think uh somewhere over   here so currently we're just showing the quantity  but this time we don't want to show the quantity   we want to show this one okay this one because  this is the combination of this one and this one   and this is alive when you come to this place  and when we do plus minus things like that okay   and this is this one has the value that was  added early so together we can get the latest one   okay so hopefully it makes sense so now for this  one i will just simply come over here instead of   quantity like this we do in  cart okay items and i'll save it now let's go ahead and check on this one so this  is four this is what we wanted and expected now   check on this one this is 19 this  is what we wanted and expected   and this is zero okay perfectly it makes sense  beautiful so we're almost halfway through our   card controller and we can also make changes  so here we do five okay now of course   if i go back and open it again it would be  four why because i didn't save it it's only   alive if you save it okay if you come back here  you still see four because you didn't save it   so i'll add two more now add it now if you come  back okay uh i i'm not sure the button worked okay   so now if you come back and you'll see sex  okay so over here in the app itself while   the app is running during the run time this is our  storage okay everything gets stored over here and   throughout our app everywhere we are using this  one to store items as long as the app is running   alive okay but soon we'll use local storage the  benefit of that one even if you don't use the app   your data is still there okay because this  data would be gone if you restart the app   okay it would be gone immediately this  is only alive when you're using the data   okay now so far so good now there's another  problem so adding button definitely works but if   you do minus you see it becomes immediately zero  okay it says like that uh now if you come back and   check it well it's still six but you can't really  reduce anything okay now it's the problem is   because of over here uh check quantity okay so as  because remember every time you come to a new page   we have this uh function called any  product now it quantity gets zero   right so even if it is zero if  it's zero now over here uh this one uh you try to do minus over here so  zero minus one okay because we are   uh tapping this minus button remove  button so it falls back to this condition   now this is zero minus one is minus one now it  checks over here oh it becomes less than zero   so it won't allow to do you anything okay  all right but now because our app has been   changing so we don't want to uh just use this  condition okay we want to check the condition   based on previous data so six is our previous data  and it's pretty easy and where is our previous   data stored our previous data stored over here  in cart items okay so all we need to do we just   need to add it over here in cart items okay  so over here i'll do pull uh put put a bracket   and inside it i'll add in card items plus one  okay now i'll take it over here and put it as well okay so now if you do minus it will first think  how many items i have before while before i have   six so six minus one is five but which is not  less than zero so here okay here it will return   minus one now wow that's interesting you are  not supposed to return minus one but now because   we are adding more items more conditions to it  minus one is okay why because do remember here   i receive minus one right once again if i do if i  click it once one time over here so at that time   first over here because at the beginning quantity  is zero when you come to a new page right   so zero minus one is minus one so here  for checking this quantity over here   i'm sending minus 1 okay well even if it's  minus 1 over here but here i already have 6.   so 6 minus 1 is 5. 5 is not less than 0. so this  condition is not true this condition is not true   so it only returns over here whatever you send so  that's minus one right now interesting thing is   that when you add item over here you see you are  sending minus one to add item and that's beautiful   okay so we'll come over here and we'll see when  we update an item so it falls to this category   so here you're sending minus one so previously  i had six minus one it becomes five and that's   all we want okay and that would work perfectly  fine okay i'll save my app so here i have saved   my app and after that i'll restart once again  and i'll try to do everything from the beginning   okay now here i'll do it one more time whatever  it is okay now right now i have five over here   i can decrease i can increase and everything  is dealt over here using this variable which   is called quantity so quantity is alive  at this moment which means it's not zero   well it could be minus all right okay so it's  minusing that's so there is a positive over here   now what once i click on this button this  method gets called and then it's calls this   one and over here it stores the data first  time using this one and then it returns okay   and after that it sets quantity to zero  okay let's see it so save it now quantity is   six now over here at this moment over here  this quantity must be zero and it is zero okay   now what will happen if we try to go ahead and  reduce once again and try to resubmit the button   but now once we click on this button over here  we'll see immediately it becomes zero that's   because actually in the map we have stored it but  in product controller over here we didn't have the   track of the data so that's the problem okay  so let's go ahead and check it i click on this   and it becomes zero immediately and which  is a faulty it should not act like this   but it's a part of the design so over here  well what we could do we could set this thing   okay so cart in items equal card dot get quantity  okay so now i'm passing the same model that i have   used before okay and after that i'll get it back  i will add it to the cart and then i'll get it   back and put it over here now this this would  be reflected over here so i'll still over here   i'll still see the item is six okay hopefully it  makes sense now i'll go ahead and start once again   and i'll see that it works as i said that okay  now i'll click over here now i'll save it now   five has been added now i can go ahead and delete  or remove items okay now it's four all right yeah   now it's five now it's six okay now i can reduce  it to four and i can yet save it okay uh well now   this is another problem though and look at this  one so i was trying to save it over here and now   he said it it you should add at least one item  but the problem is now over here you see every   time i like say for example i do minus over here  what happens quantity becomes zero why because over here after adding let's see what happened  after adding well definitely first thing after   adding quantity already becomes zero and when you  come to this new page we get data initialization   uh over here okay and that is zero all right okay  but when we are trying to go ahead and add item   we do it using this set quantity and over  here so zero minus one that's minus one right   so check quantity returns me minus one right  now over here we have a condition set up if it   is less than zero then we see this condition  if it's bigger than zero we say this condition   right so currently it now falls back to less than  zero now first we'll go ahead and comment this out   and we'll check what happens okay  all right now i'll save it okay   now over here let's see i can reduce it and  i did one now it's three now it's minus two   now let's go ahead and save it now it's saved  correctly okay now over here once again uh we   added the item and then put the latest data over  here now this 2 is coming from here not from here   you have to know that this set back to 0. anyway  i can add it and i can add it any number i want   now we'll see the latest item is 8. now  i can go ahead and minus it and then   over here ic7 and i can save it and latest  quantity is 7. so it's working okay and if   i come back and see and it's still working  now over here you see well i will add data   and first maybe i'll reduce and then i'll save  it quantity is four first one was seven all right   now take a look at another example this one  now here i want to see something interesting   i did not add anything say maybe mistakenly i  would click on this but previously i had this   condition which was checking but i don't  have this one here so that's the problem   okay so now we'll move this code over here all  right so we'll check if definitely this is not yet   added in the cart right so we'll fall back to  this condition okay this condition over here   so before putting over here we'll check it the  quantity okay we'll put here inside this map   only if quantity is greater than zero  okay otherwise we won't put it okay   otherwise from here we'll send a message what  message this message okay so now i put it over   here of course i need to import the libraries  let's go ahead and do it and i will do it okay   now i'll save it okay yeah so now if i go  ahead and let's restart everything okay so this is four now i'll come over here and  this is zero now i try to add this i'll get   this message okay now make sure that you get the  other one if you try to reduce yes you can't only   thing you could do at this moment you can add then  you can reduce and try to reduce again you see the   result or you try to add okay and then you can get  a lot more and then you can add minus like this   and then you add it now it's working so our cart  is right now perfectly working okay and this is   what we wanted all right now over here okay so i  didn't add anything so i see this message okay but   i can add over here now i'll save it and well this  is the earlier messages they are still showing up   okay but over here already see that  we added four okay so that's how it   works now our original data is also saved  over here okay and it's still working fine   and we are here it's nine all right now if i  want i can go ahead and remove one and i save it   the new data would be saved over here okay all  right let's see yeah now come over here and   we have now this problem over here now let's see  what's happening so i'll do minus and i'll save it   okay let's see five four nine six so yes so it's  working i thought that was a problem but no now i   do minus three and i'll save it over here now  five three nine four now i'll come over here   with this i will try to add two more so i would  expect it prints eleven over here nine five three   eleven yes so that's working okay now there is  another problem so for example over here if you   check it so it doesn't really matter which one  the first one right so we do have this thing   now at this moment i want to and submit  this one okay now let's see what happens   so the but you see the id is one the quantity  is zero let's see where is coming from   okay well so it's coming from here that means  that even though the quantity is zero but it's   still in this list okay this is the last problem  we have with our card i know there have been   many problem but that's cart that's not that  easy okay because you're dealing with someone   else's money so you have to keep track of every  small detail it can't be buggy anyway so from   this message even though i quantity zero and i  try to add it and user may do it okay because   as you add you can remove so user may confirm  this add to cart button things like that okay   so it's still there so now we have to do  over here we need to remove it okay if it's   zero then we need to remove it okay then how can  we do it but this condition falls back to this item over here updating item right so over here  we need to do some check all right so first at   the top i'll declare a variable and i'll call  it total quantity and which is equal to zero now over here i'll get the total quantity okay  now here i would do value dot quantity plus   uh the quantity you send over here okay now we need a null checker over here okay the  hero is gone uh what's happening here so here   this section remember this value is the  old value which means old object okay   for this cart model so i'm getting the old  value whatever it was there and whatever the   new one is given and i check on it okay all  right but it doesn't really matter i whatever   even after even it's zero first  i go ahead and update this   and after updating it i remove it from the card  okay so here i would do if if total quantity   less than or equal to zero then what i'll do i'll  simply go ahead and remove it from the cart okay so here i would do items dot  remote and i will just pass the id   okay now what's the id the id is quantity  product dot id okay product dot id we'll pass it   and remove it okay now let's go ahead and restart  everything from the scratch okay now here i'm here   of course because we started our app  everything is gone now i'll add four over here   i'll come back to this one and i'll add one i'll  go back i will come back again now here i will put   it back to zero okay now i would confirm okay so  confirm submitting it submitted and we have only   one item because that's been removed previously  we would have two items but now only one and   it's also zero at this time and over here it's  still two okay now we can also do another check   confirm that it's gone so here we'll submit it  like this okay all right so it's been submitted   so for next submission it's asking you you need  to at least add more but anyway so here you see   it's zero but of course you can go ahead and  add more now it's two all right anyway so for   our popular product the card is working the logic  should be pretty much same for recommended product   but anyway next we'll do one interesting  thing whatever the item over here we see   or for many different products we'll add them  together and show it over here so as you add   and confirm it'll show up here okay that's what  we'll see in next part okay so we are almost   done with this card controller over here all  we need to do show the edit item over here okay   all right to do that first we need to come to our  card controller which is over here and over here   uh let me see i will collapse them now it looks  cleaner and over here i'll declare a new method   and the method would return integer okay well in  this case i'll just simply use end get and total items okay so whatever the items over here  i want to get that now do remember this is   a getter and it returns a field not a function so  you don't need this function icon over here okay   get is a special keyword belongs to dart okay so  it tells that it would return something like uh   in or things like that and it would  return a field it's not like a function okay the benefit is this kind of thing you don't  need this uh parameters over here okay anyway   so over here first we'll declare a variable  and you will call it total quantity okay   now here we'll set it to zero and then i will  return total quantity all right now the error   is gone because it wants you to return a field  okay and this is the field that we are returning   but of course before we return we need to  access the data inside of it and we need to find   the items in or the quantity in these items okay  so for that one first we would do items and then   would put dot operator and you'll have many  options okay and for now we'll use the forage   okay so forage it's more like a  for loop but it has a key and value   so we are interested in the value  property okay not the key so over here   do remember that in our case this is  key and this is the value and value is   an object stored over here so we have a lot  of objects as we add and confirm over here   objects are stored in these items in this map  format okay now anyway so i'll do value and then   so if you have total two items over here this  for loop this for each loop will run two times   and two items the values or the properties  we can access through using this one and   as well as we also need the dot operator so here  we'll have the quantity okay now we want to set   the quantity to this one okay and whatever the  quantity we get we give it to this one with the   previous one okay so here we need to put this  operator and it's gone by the way so this means   like this okay so that's the short sentence  all right so we so whatever the first value   add the new value and save it to this  one and next time you run the for loop   it will get once again so for the second one  we will get the first value plus the value for   the from the second object the quantity value we  added together and we get this one okay and this   is after that when the loop is over we return this  value okay all right but i'll stick to shorthand   uh this is more preferred okay just like as  you do more and more advanced programming   things become more concise or short like  this function over here it's more like a   function but it is still not a function it's just  returning a data anyway so now here we are done   with this part and now in product controller  over here it will create a new method okay   now just like card controller we'll put  all of them together now here we do indiget   total items okay now over here you would  just return cart dot total items okay   this one and that's all we're good to go  because over here we have this cart instance   and card instance is initialized over here  when each page page is initialized okay anyway so now we are ready with this section now  we'll come to our popular food detail section and   over here we'll have this three sections well  so this one is showing the background image   and this one are showing the icon image over here  okay now actually this is how we want to show them   so like this okay as you add more stuff over  it it would get increased like this for example   uh take a look over here you have two items  now you can add another two it becomes four   as you confirm you see four over here okay and  when you go to when you go to like other pages   say for example this one you still see four  because this is the total item in the card   even though for this page there is  nothing over here but you can add them   okay as you add it becomes six immediately  so this is the result we want to achieve   okay well for this one anyway we'll come  over here and we have this row section over   here row is showing this one and this  one well now over here we have this uh two sections gesture detector is for being  tappable and this is the other icon that's   being shown over here okay all right now  if you see this earlier layout actually   on the top of this existing cart we want to have  another two layers one is the background layer the   other one is the number itself okay so we need to  add two more layers over here okay all right now   this is dynamic okay if your items are gone   they're not over there at all okay  yeah like for example you remove that   now confirm now this is four this four is coming  from the previous item which we saw over here okay   now if you reduce all of them it's just  gone so it has to be dynamic okay as you add   it would show up well like this okay so it  would show up so that has to be more dynamic   well first thing in a flatter if you  want to have more dynamic based on user interaction so state management system  helps you in our case we are using getx   and using getx we can achieve the same result  as well there are other state management system   as well but so far we've been using get x  anyway so to be more interactive with the user   interaction and if you want to show the data  immediately and so for that reason we'll use   gap builder we got builder we have used before  and over here now the certain controller the   one that we would be interacting we'll use that  one so popular product controller this one okay   all right now over here it takes a boulder  parameter and for the parameter we need to set an   instance over here okay all right so we will  call it anything we like it doesn't really matter   and after that we can just simply return like this  okay now within return you have to put your stuff   okay but now as you see so there are two layers  actually three layers one is the card itself   the background layer which is little blue and the  numbers so three layers they're all together over   here so for that reason we'll use stack widget  because using stack we can put things on the top   of each other okay and just now we i cut the other  line over here that was showing this icon i will   put it back okay uh sorry i need to put children  first like this okay and let me put the semicolon   and then i'll put back what i cut before  okay all right now if i go ahead and save it   nothing will change yet but our icon is still  there okay if you remove it the icon is gone   if you put it back the icon is back anyway so now  this card will be always there okay but we put   cart because other two items are dynamic okay now  we why we put card inside stack widget because   other two are dynamic it may show up it may  not show up so if they show up this three   including this card and other two would overlap  each other so that's why we put this shopping   cart inside stack okay otherwise we just put it  outside anyway so now over here we need to get   we have to do conditional check if i add more if  it's zero like right at this position we don't   want to see any circle and number right because  it's zero as i add more and confirm this button   then i will see stuff over here okay well  now for this one we can do conditional check   conditional check based on this field  over here because this one eventually gets   data from this one the total quantity right so  we need to go ahead and call this one and do a   conditional check and that's what we'll do  so to get that fine first we need to access this field so for that one here we do get dot find   popular product controller okay and then we  can get the related fields that are they're   defining the controller so the first one  is total items and we'll check if it is   equal to one or more than one or not if  it is then we'll show something otherwise   we'll show something else so if it is true  then we'll show our container if it is not   true we'll show something different  anyway for now in both case i just put   controller and i'll change them very soon  okay so it's a conditional check using   itinerary operator if it's true we fall back  to this one otherwise we fall back to that one   but of course here we don't want to put  an empty container here we want to put   this circle the background circle okay all right  well for that one once again we can use this   app icon over here so simply we'll just go  ahead and put it there but in this case actually   i'll put enter and i'll make a new line  okay and this way we stay organized   okay so this condition is a true then we  fall back to this one otherwise that one   but anyway you need to go ahead and change the  icon in our case we'll change it to a circle okay   and we'll put the size to 20 because app icon text  size we know that and over here we'll use icon   color now in our case we'll use icon colors  dot transparent i can color be nothing okay   but we would see a background okay so  we'll set the background color over here   so that would be app colors dot main color  okay all right now actually we can go ahead   and do a test so our app is over here  i'll just add item edit two and i'll   click on this okay but before i go ahead and click  on this most probably i need to restart my app   because i just made some changes okay so over  here i'll save it but as i restarted everything   is gone so let's start over again so here i'll  add and i'll confirm over here and we'll see   what happens okay all right but it didn't show up  yet well but the quantity has been added now why   it didn't show up the reason is over here because  this button add item you're adding but actually we   do have new changes in the ui you are after adding  in the ui we want to see the total quantity but we   didn't inform the ui that we are going to update  the ui right because right after this the quantity   or the item count in card controller which is  this one gets updated and then we get that value   first this one gets updated immediately of  course we get this value when we call this one   but this gets updated immediately but we didn't  tell the ui that it gets updated so we need   to tell the ui that it gets updated over here  inside this function we'll just simply put update   it's more like set state okay and then i'll  remove the sections we don't need them anymore   it was for previously conditional check  so over here we'll save it and we see   that circle is there right because we  just added now if we remove and confirm   the circle should be gone and it is gone so  our app is already interactive as you see   at least we can see the circle and circle would be  always there because we have two items in our cart   but if you come over here our circle is still  there even though it's zero over here because   total item in the cart is two but for this  page even though we don't have anything   well in future we'll create a button we'll click  on this we'll go to a cart page over here we just   see the items in the cart but not the details  soon we'll create a cart page and go over there   but anyway so after doing this you should  be able to update your page immediately okay   so in fluttergarx once you update your ui  update anything in the controller but you   want to update ui and ui doesn't get updated most  probably you are missing this update method okay   anyway so now we'll come back to our food  controller now first we draw this circle okay   all right but the circle  position is not very correct   okay so we are in such step widget so default  position is top left and this is where we are so   we need to change this default position all  right so for this one uh we'll just simply   go ahead and wrap this icon over here using  position widget okay so i'll do here positioned okay and position has some property so which is  called a write property and the top property so   we'll use this that one so you do right zero top  zero okay now let's go ahead and save it and we'll   see it moved immediately at the top okay and this  is what we wanted but now yes we see the circle   and the background but we don't see the text  well that would be a very simple task for us   so once again based on this condition we can show  the number right well for this section first i'll   once again i'll go ahead and copy this whole  section okay and i'll put it right after it okay uh well i know if you're just starting over  starting flat air or dart it looks like a lot of   thing but it's all about this itinerary okay if it  is true you show this otherwise you show an empty   container which means nothing no color okay just  empty now over here of course we are not going   to use the circle and we are also not going to  use the icon and over here actually we are going   to use a text so i'll just simply go ahead and  remove that and everything else stays the same   for now this stays the same so  over here all these big text   remember we we built big big text icon  sorry this widget long ago now inside this   i need to show this total item okay so for that  one i'll just simply go ahead and copy this   and put it over here in our text properly because  if you hover over on it you remember it has uh   um there should be a text for it but  text is let's see where is this text color yeah this one okay it's a required field  anyway so now i'll put it right there and i need   to convert it to string because it text wrote it  takes a string okay and that's all okay but there   are some other properties that we can take  here within big text we can confirm the size   of the text itself okay we need to  put a comma over here so we how big we want okay the text so we wanted 12  pixels and the color we want white color   colored white okay all right  now we'll go ahead and save it   and we see we previously added two and we said  immediately okay over here we have two right   now we'll come over here and add another three or  four and now we'll see immediately it becomes six   it is but now over here all we need to do  change the position okay so over here we'll   change the position so do top three right three  top three okay now it looks better much better   okay well with this we are almost  done with our uh card controller so let's go ahead and add so it's nine now you  can go ahead and remove this two icons over here   and you confirm it over here it's immediately  become seven isn't it beautiful you can go   ahead and add it and become eight you can  go ahead and remove it it becomes seven   of course if you try to remove more you can't okay   and then you try to click on this it'll say  you should at least one item in that cart okay   so it's already working and but yet the data is  saved over here in our cart controller this map   okay in future we'll see how to show the data in  the how to save the data in the local storage okay perfect so next we'll see how to go ahead  and do the same for this one but we actually   laid out everything for card controller it's just  another 10 minutes time and we'll be able to make   this card this card usable for our recommended  products okay when i said that this cart is   reusable i mean this one well you see our cart  controller the most important part is this   items map all it does is save information  and of course you can add information to it   you can check whether certain information  exists or not then you can get certain quantity   and similar stuff like that okay well it  has nothing to do with any kind of product   controller regardless it is a recommended product  controller or popular product controller it's very   independent all it cares about product model  and we know that product model is over here   and this product model is shared  between this and this controller okay so   car controller only cares about a product model it  doesn't really care about your other controllers   and that's why it's reusable once again because  our both controllers use the same product model   so it means that regardless which controller  i use as long as i can put data and retrieve   data in this map and from this map then it means  that this controller is reusable and another thing   like if you come over here to this product  controller and you see we have several methods   here and only one method is directly related to  this controller which is get popular product list   and this methods actually they just work  on the data okay what data they work on   this using this variable quantity as you see  they don't really directly interact with this   list over here which is this one okay none of the  methods the work on this list over here okay so   there are saying that one that also  means that these methods they are all   reusable so even though they're laid out here  in this popular product controller actually   even if i don't write them in recommended product  controller i can still use them from here once   again because they all work on car controller not  on this method okay so that's why this methods   already defined here and i can reuse them from  here okay all right now after saying that i'll   come over here in my ui and the ui is this one  recommended food controller and i'll go to the   bottom navigation bar over here because i want to  activate these two things over here okay all right now while this part is pretty interesting well now  first we need to work on this add button and then   we'll work on the remote button okay now just like  all the time over here this is our app icon and we need to wrap this thing around gesture  detector okay all right so what i'll do i'll just   cut this one and i'll write here gesture  detector and it will have on tap event okay and over here i'll keep it empty for now and i'll  put the this app icon as a child over here okay   all right and i'll make sure that um tapped okay   so i'll click on this and i'll tap on this  and i'm tapped okay well that's one thing and   as i tap on this i want to increase the  product right so i can just simply go ahead and   call this one set quantity equal true okay well to  be able to access this method from this controller   then we need to initialize our controller over  here and for this reason this column over here   we'll wrap this column around get builder okay so  i'll cut this and over here to get builder okay   and right over here i would  do popular product controller remember i'm not doing recommended product  controller because recommended product controller   i don't have this method yes i can go ahead and  do it but i don't need to okay so anyway i'll   come over here and it takes a builder property and  which takes an instance and i will just call it   controller and then we'll return this column  we can save it and make sure that things are   working fine yes they are well now because i  have this instance which is called controller   so i'll be able to access the method which is  called set quantity so i would do controller   dot set quantity and here because  this is add so i will set it to true   okay all right now if i go ahead and save it  and actually i can go ahead and tap on this   work on this and if i do that i can simply check the items being added over here i can   print over here okay i would say  number of items so here i'll do quantity to string i'll save it okay now as i tap on this quantity  number of items one number of items too   now we'll do the same for this minus button and  for this same reason okay i'll just copy this one   and replace this one okay and  we need the comma over here now here uh we'll remove this add icon  and use it as a remove icon okay   all right now instead of plug for true  we'll send it here false okay i will save it   okay now over here everything starts from the  scratch okay so four items now i can do decrease   three items which we had before i think  this log now we can increase okay three four   five six decrease it becomes five so  it means that it's already working okay well but now over here recommended product item   this product price while the price is here  but now as you increase or decrease the amount   you can also show it over here okay  so this is what we need to do now   so for this reason i will come over  here and i think here we have this one so i can just simply go ahead and call  in cart item okay so i'll come over here   and this one this section i can replace  it okay so here previously i learned that   if i want to call a variable from object  then we need this dollar sign as well   as this curly braces okay now over here i  would do controller dot okay all right and   let's save it and we see immediately it  is five you remove it it's four you add it   it's five okay and you save it like this  it's the value is still there reload   hot reload whatever you do the value is  still there and you can decrease like this   you can increase like this isn't it  amazing so which means it's already working   all right well next we need to go over  here and call the add item button okay   all right now this section is i  think let's see over here okay now   this price is just 10 it's a hard-coded  it should be this one but in real life our   food wouldn't have that so long price but  anyway i'll just for now i'll go ahead and change it over here as well  okay so here i do product   dot price okay hopefully maybe i would need this  one we'll save it and we see the product is there   immediately okay and this is the multiplication  anyway so now this is our button over here   now this text is showing over here now  what i could do uh we'll cut this one   and over here we do gesture detector  and on tap event we'll have child and child as the container now over  here just like earlier using this   controller instance which is this one  i'll use this one over here as well and then i would call add item okay and i'm going  to send this product instance okay i'll save it   okay all right now i'll go ahead and edit now let's see what's happening  looks like it throw us an error okay we'll go ahead okay now here this is the problem   uh that's because over here cart  isn't hasn't been initialized well if you come over here popular food  detail you'll see at the top we have this one   so over here we initialize our cart controller by  sending a card controller to this init product but   when you come over here first time we didn't do  that we can just simply copy that and put it here   now restart it of course i think we need to  import the card controller we did now restart it   and everything is smooth now we'll come over here  we'll add items and remove items and try to add it   okay it's been added to now over here we'll come  over here and we see two well because this card is   for the whole app even though we don't see it over  here but we'll see here because for this page over   here we already use this card controller button  right so that's why we we are able to see that   and over here we can come over here add more  stuff and we see immediately right now once   again this part should be pretty simple so what  i'll do i'll go ahead and copy this one okay   get builder um return stack this section and let's  see i'll copy this one and i'll come over here okay so i have this cart outline over  here okay and which is this one now   i'll just comment out this one in case i need  that and i'll put back what i had early and what i   copied early so this is my shopping cart outline  the icons and this two are based on condition   this position and this position once i save  it over here you'll see i didn't save it yet   here we see six now once i come over here and  after this i save it hopefully we'll see six   over here as well let's save it and we see six  you can add and you will say seven now you close   this come over here you still see seven okay  it doesn't really matter wherever you go and do   whatever you do you add stuff sorry and you see  immediately it changes well i find this button   is not that responsive let me check out  why and this button should be let's see over here this one actually as i was doing  i was supposed to wrap this container   around this gesture detector not  gesture data inside the controller   and that's why it causes this issue so  first i'll remove the gesture detector okay now the error should be gone now over here i'll  wrap this container around gesture detector   now it would be more responsive okay  so here i'll do gesture detector   and i'll just simply call here  on tap method so here we do product dot sorry it should be  controller the dot let's see what's the   controller instance name this product controller  dot add item and send the product okay and we save it now wherever it  doesn't really matter wherever you tap   it would work okay all right so it's  been added three right now tap again   so it's not adding well we don't see any message  though but here you come over here now immediately   here we'll see nine it works you add one  more it doesn't really matter where you tap   the button is more alive right now it's working  okay now you can remove all you can remove all   and add over here so it becomes seven and  you come over here you still see seven   so which means it's already working okay now you  come over here remove and save it now we have four   okay you add one more we have five so our card  is totally working now but now the problem is   you have many products some products are added  from here which in our case not from here i think   the product was from here four products from here  and one product from here total five products   but now if you have too many products added for  example you add few products from here as well it increases well that's a good thing you  come over here you do the same you increase   or take one out you decrease but you really  don't know which 10 products are there   well next we'll see how to tap on this button  and go to a new page and see all the products   that's been added to this cart list okay  we go ahead and start working on this   card screen i think we need to take care of  another problem now the problem is right over   here now i think you have probably encountered it  as we are working on the app but this is the part   that i forgot to finish so now we'll do it now we  just added it in the cart so after adding it uh   things happens okay let me go back and start again  so over here i'll take this one as an example   okay so right now we have uh 10 items but  on this page we don't have anything well   so for this reason while this is a recommended  food detail we'll come over here and over here in   cart itunes is zero right and we know that in-card  items is coming from over here so this is a summation of incur items this variable and this  variable right okay now i'll add two on this   okay so over here now once i click on  this add button what will happen uh first quantity would get zero and end card item  will be two right because after adding we   return the amount okay so i'll click on this  button okay and we'll see here it becomes 12   okay all right now it is 12 and we have two  okay now here's this problem now i can go   back and reduce it okay but do remember right  now at this moment at this moment over here so as i go ahead and check i'll see that in cart   in cart items equal to and as i but currently  quantity is zero right quantity is zero but as   i start to click on this now quantity becomes  minus one right so quantity equal minus one and while over here none of this condition over  here they fall into this category so we just   return from here right okay so now i'll click it  one more time now at this moment quantity is two   right okay now here you see here i do have in card  item two and quantity minus two and together it's   zero but not less than zero so we still fall back  to this category okay now the thing is that i can   go ahead and add it so that would go usually but  the problem is if user taps it one more time and   it may happen okay so at that moment quantity  would become three right and if it's minus three   well then let's do it so let me tell  you if it minus three here we'll see   two so what will happen i didn't tap on it  yet because here plus two and minus three   of course if i tap on it in that case minus three  so that would become minus one but after minus one   i'm going to return from here zero right and  if i return 0 do remember my earlier equation   over here this is so this will return 2 why  once again because i fell back to this category   because this is less than zero so but from here  we are returning zero so two plus zero it becomes   zero but we know that this item over here this  number is this one and this one once again is   this one okay so even though i reduced to zero  but i still see two so this is the problem that   we need to take care okay now let's confirm  this so i hit it once okay um let's see i think   i've done it previously something so that's why it  didn't work okay let me go back do it now i hit it   one more time it became two immediately okay so  that's the problem and it comes from over here so   because quantity becomes first it becomes minus  three in this case or less than zero and then   we are returning zero so and then this  equation so that's what is causing   this problem now let me take care of this  problem so here we will do we'll check if   in cart items greater than zero that  means there is something already in the   cart for this page okay well in that case we'll  change the quantity so quantity you call minus   incarnations okay so whatever quantity  it is i'll give it to this one okay   and from here we'll return quantity okay  all right now over here we are returning   quantity but in this case quantity would be  minus and do remember that earlier over here   uh first time when you're doing just minus  just you come to a new page we always return   minus right for removing and for adding always  return positive number and now we are going to   do that and this way this bug is also solved okay  so now what will happen when you become okay let   me let me let me save this okay now if i click  on this first it becomes -2 sorry reduces one   then one and then one okay now at this moment  it will come over here okay so when it comes   over here it will fall back to this categories  because if i click on this it will immediately   this quantity would immediately become -4 well  minus four while in the cart we had a three   so it becomes minus one so it falls back to this  category now well the cart item is still more than   i mean it's a big i mean it's a positive number  greater than zero so we give minus three to this   one so we are returning minus three okay  now if we return minus three over here   so plus three minus three equals zero okay so  if you try to click over here so it says you   can't reduce more and we didn't see the weird  result okay so that's how it works okay now   we'll come over here we'll take any page for  an example now i'll go ahead and try to reduce   so i reduce two of course the changes here  will be confirmed after you click this button   now you do it once and it says you can't reduce  more but we already reduced two over here right   so you can go ahead and confirm over here and  we'll see here immediately that it's 10 okay   so that's how it works so only this part of  the code that you need to add in your section   in checking quantity and i'll remove this  one and over here we don't need this one and what i could do i can just comment it out  because they might be useful later okay and   yeah that's all now this section is  completely workable you can try to   reduce now it won't work it'll only work if you  do positive now go ahead and add it it becomes   um 11 now if you go ahead and remove one now  it would become 10 now of course if you try   to resubmit without adding anything nothing will  happen in this case okay but we get a result that   and notice that it says you  need to add more okay now   so the 10 is always there so now what we'll  do we'll go ahead and build ui and here we'll   be able to click and go on that ui okay so for  that reason i will come to my pages over here   and over here first i'll create a new directory  and i'll call it card so in this folder we'll re   put all our ui related to cart so here i'll create  a new file and the file i'll call it cart page dot dart okay now over here  i'll create a stateless class   and we'll call it cart page okay all right and let  us import the dependencies so here we are and then   over here we will have scaffold this scaffold  will return will have body and within body   here in this page we'll use a stack object  and it takes children and while now over here   uh well when you go to this  page after clicking we want   three menus all one is the back button one is  the home button and this this button over here   this uh cart button okay so three menus so  over here we'll use a position widget okay yes now that page these three icons would be laid  out in row format in or in row okay so that's   why here will return row okay all right and we'll  also had like this left and right padding so   that's what we'll do right now so we do left and  we'll use dimensions the one we laid out early   dimensions dot with 20 okay so this would  be responsive and write dimensions dot with   20 and we also use a top position over here so the  top now for the top we'll also use dimensions dot   height now while we're going to height 60  but we don't have 60 so multiply it by three   whatever shows up okay all right  now over here we do children okay   all right now after doing children  over here we'll first put our app icon   okay well in this case our app icon would be app  icon the one we already built uh built before so   here we have this icon properly okay and we need  to import the library otherwise we'll get error   okay now here simply we'll just use icons dot  arrow back okay yes this one and over here   i'll also give this icon background icon color  okay now icon color would be colors.white   and now over here we'll give it a background color  and background color would be coming from our app   colors and it would be main color all right and  uh let's see now the icon takes size over here   so we'll do icon size but now if we  want to make these icons as dynamic so   we need to uh declare this icon size in our  dimensions over here in this file so i'll i'll   open it up over here so we  don't have a size for icon but   yes we do have but we have like 24 and 16. uh  i think we can go ahead and use any of them   okay so we'll use this one so we already have  so we'll come over here and now here we do   dimensions dot this one 24 so  we already have one defined   okay so now of course we need to go to our main  file over here and for now we'll manually change   it and later we'll set up the route for it so here  i'll close them we don't need this now for now   and instead of main page main footprint  food page we do cart page okay and we need to import the library  okay now i'll go ahead and save it   and uh looks like we do have a bit of issues and  let's check check on it so i think we have a lot   of change in the app and a lot of time because if  you have a lot of state change in that case you   need to restart your app and here we are we see  our icon okay now okay so that is our first icon   now i'll copy and i'll put it three times because  as i said earlier we need three icons okay   now i'll refresh it and we see them over there   well now this icon would use home button  icon okay so we'll use home let's see sharp okay let's save it well the sharp doesn't  that's a mini sharp sorry so let's do it home think i'll just go ahead with outlined over  here but save it yes we see and for this one   i'll still keep this shopping cart that'll do cart and this one okay shopping cart so i'll go ahead and save  it all right now they're together so i'll   use a property which is called main access so  we domain access alignment dot space between   okay now here they're all equally laid out but i  wanted this home button to a little bit over here   so i'll move it to the right and for that one  right after this icon so i can add more space   so that would move this icon from here to the  right okay so here we do size box okay now size   box with width and we have dimensions dimensions  dot width well 20 multiplied by five so that would   be 100 okay so we'll push it right over there okay  all right so well for now this page is static okay   because we need to work on this uh uh rest of the  part of the screen or page here we'll show the   items that been added in the cart itself so with  the image and icon name and how many product name   and how many quantity has been added and the total  price so that's what we'd be able to do next part   actually let me show you the result we want to  achieve so this is the result actually we want to   achieve so pretty much we have this section over  here right now of course over here the icons are   a bit bigger and i'm over here i'm staying with  the default position and this is my original app   where i moved the position a lot a little bit but  anyway and after that this is the result we want   to achieve okay and as you see over here we can  increase the amount we can decrease the amount as   well and as you do that you see there is a change  of amount over here as well things this is these   are the things that we want to do so it's pretty  dynamic so you can add as many as you want and   if you removes one of the items then it would  be gone okay so if it becomes zero it would be   gone immediately from the list okay and it gets  updated and we want to show the image itself and   over here the taste and the price things like that  and you can click on that you can go back to see   if this is what you want or not you can go back  once again and see your original result and then   you can go for checkout so there's a lot of work  on this page so let's go ahead and get started   well the first thing we want to do over here  we want to get a list list of items that been   that's been added to our cart okay so that's what  we want to get okay previously we were getting   like if you go to home page for example over here  previously over here when you came we were just   getting the result that has been added a  particular page okay and over here we were also   getting the result okay yeah but now this time  uh this result we can't directly use it over here   and i will explain why uh but first let's  go ahead and see uh why and why not okay   well we'll come to our product controller  over here okay and uh we'll collapse them   collapse all of them so here i just have the total  item so that's what we are seeing right now okay   and this total item we were able to see over  here okay but actually them right now we need   more information to show this this this this and  everything okay so here it just the total amount   okay so that's not good enough for us this section  is only for over here okay like the total number   but if we want to get more result we need to  do uh we need to build a new function okay   but that would be a very simple function okay  now if we come to our card controller which is over here first here within it will create a  new function okay and that function would be   responsible for getting us pretty much everything  that we need to build a page like this okay   now do remember in this map itself we are storing  data now it has int and cart model okay so this is   where we get we store the objects okay so we want  to build a new we want to build a new function   where we would be able to get the objects okay  remember earlier we just got the value whatever   i mean total quantity from this list over  here but this time we want the model okay   or the object itself and later on regarding  showing this amount this amount this and this will take care of them separately okay so for that  reason first i will come over here and declare   a new function and this function would return all  the cart models that stored over here or all the   card object that's stored over here okay or over  here actually so whatever is stored over here   and all of them together we want to return  okay but of course we are not going to return   the map itself because map has key in this  case we don't want any key okay all we want   is the list of cart models or card objects  okay that's all we want so that's why here   we'll create a new list return type would  be list and it will return cart model okay and it would be a getter so  we'll use get and over here   we'd we right over here get items okay so you're  getting all the items now here we are saying that   we are going to return a list of cart model and  this is what the get does okay now to be able to   return it first we need to look through this map  okay all right and for this one first we do items   and then we'll do entries okay every map has a  method or property called entries and based on   that you can get another method which is called  map okay so every map like itunes is a map has a   property called entries and based on entries you  can get a map okay map returns a function but it   also takes a parameter so this e would be related  to all the cart model one by one say for example   in our cart items over here if we have 10 items  so zero one two like that so e first in the first   loop it would point to zero or the first element  or the first cart model and in the second loop   e would point to the second one and in third one  in third loop or third time it would refer to the   second or index two card model hopefully it makes  sense okay now here it returns a function okay   but uh we don't want to return it like this we  want to make it more readable okay over here now   you see this this refers to in and model at the  same time okay not just model so e refers to both   of them okay so uh even though i said e refers to  the zero but zero has end and card model next one   e is one and e will have end and card model so it  is the key card model is the value so over here we   just want to return e dot value okay we don't  want to return anything else but here we need   to return because this get should return something  what it should return it should return a list okay   so first we return a return we put the return  keyword over here just because of this one okay   now the map itself also returns so here we also  need a return value okay our return keyword   and then over here we need to turn this map  into a list so that's why we do dot to list okay   all right now that would be gone okay now  because map and maps entries they don't return   a list but over here we are saying that we'll  return a list so that's why we put two lists   so we convert it to a map okay sorry we  convert it to a list and if we do that   then we can go through this list over here or the  place where i will call this then i can index i   can look through them using index like zero one  two three like that okay hopefully it makes sense   once again here there are two returning keywords  the first return is for the get itself because we   are saying we are going to return a list that's  why i return and map also returns something okay   well well you see map returns iterable now  here iterable means that you can't index   through it using index like zero one two  three okay it only you can only go through it   using either key or values like that but we don't  want any of this all we want to return a list so   we convert the map to a list using tool list this  one okay now with this we are pretty much done now   this is in the card section so now in our uh  product controller which is over here in this   one we'll create a similar method like we did this  one early like like this okay so here we do list   part model and here we do get and  get items okay now here we do return card dot get items okay and all we need to  do we need to import card model okay and   that's how it works okay so now with this we  already built this uh list that the one we want to   show like this okay and then we need to go to our  ui section which is inside the cart page over here   okay just now we built we built the first  section which is this one now we'll go ahead and   build this section all right now this  section has to be inside a list view   builder and we also want to be able to scroll  it if you have a lot of items over here okay   yeah that's what we want to do so that's  why we'll definitely need a scroll view or   our list view builder okay so first here  i would go ahead and define the position   well now here why i'm using positioned  well that's the reason because i want to do well definitely i'll have this bottom section over  here but that belongs to scaffold not the stack   why i'm using stack because this section  i want to make it scrollable okay   i want it to be scrollable and at the same time  i want this to be positioned and fixed okay   and i found using a stack widget i can get better  uh control on where i want to put things like that   okay so that's why i would a lot of time i prefer  to work with stack in instead of column okay   column does create a lot of extra problem but  with stack those problems are pretty much gone   anyway so here i would come over here  and first i'll define a container   now let me set up the position for  this one okay so here i would do top   now for top one first i'll use dimensions  dot height 20 but i want 100 pixel based   on device height okay so i'll multiply it  by five okay over here i will have left now   for this one once again i would do  dimensions dot width 20 and dimensions dot with 20. now the bottom itself  would be at the bottom which is zero   by zero i mean that the bottom would be here so  in our case the container would be pretty much   from here to here okay now for now we can  set up a color okay we'll do color colors colors dot red okay so this is where our staff would be  okay and this is where our top position 100   and if you want you can also increase a little bit   around it but we don't need that okay so  this is where we want to put our stuff   anyway so uh this is just for debug purpose  we'll remove that later okay because once you   put a container with a collar you actually know  where are your stops your widgets or items things   like that okay all right so the first thing  first over here i'll go ahead and put a child inside this container and that  would be a list view builder so here i'll do child and list view  listview.builder okay and once again   it takes a context in our case we are passing a  default context and we'll index through it okay   and after that we need to return okay so  here we need to have a return statement   but before that we need to set up some  other properties so here it is item count   okay so here uh how many items would you want  now the items would be same as the list length   that is written from here so now we need to  come over here and for now say i'll just put   10 and for now here i'll just return a container  okay and here i'll do say height 100 and with   say 200 okay i'll go ahead and save it  before that we need to put semicolon because it doesn't have any color so i would  put a color over here i would do colors.blue and we'll have say margin okay and edging sets  only only the bottom 10 okay so this would be just   simply for develop purpose okay now you see this  is already scrollable and if we were to work with   the column it becomes sometimes a lot more painful  okay so i found working with this makes it much   interesting okay anyway but of course  we have some of the stuff that we need   to take care later on but it doesn't really  matter okay so here i'm returning a container   well now i have this container and container is  showing this section over here and one by one but we want like this okay definitely this is what  is built for over here to understand what is this   but now here we have to know that  we have a single container but here   this container which is this one which is this one  is not going to work so we would need a row okay   and in the row the first item is this  image and then we'll need a column okay   all right so instead of the column we'll  have first child the second child and the   third child would be a row once again okay  and within that we'll have two children   and then the last child will also be in a  row okay so let's go ahead and get started   well so i'll just remove this sentence and all the  syntax and then i'll write here once again return a container first now i'll give it a height  okay so we'll do 100 we'll change it later   and now over here we'd want  width so we'll do double dot max finance so it'll make sure that it takes  all the available space possible okay   now we'll see that it works because i can save it  okay it still works of course i remove the color okay all right and now over here  we'll have a row okay as a child   so here we go and the children okay well the first one is once again  if you see this is an image   and the image has border so we want to put the  image inside a container okay so here we do container width 100 but actually what we could  do we could go ahead and do this one so height 20 5 okay so now we'll just copy this one   put it over here and we'll have height okay so now  we'll end up having a square and over here we also mention it okay so it becomes responsive next we want to do decoration for  showing the image so we do box decoration   now here we'll have a border radius a  bit of border radius so you do border radius.circular and now here i would do dimensions  dot radius 20 okay and these are the work that we   did before and we should be happy about that now  here i'll have color and i'll do colors.white   okay now let's go ahead and save  it and it's already showing up   and this is what we want don't worry  we'll take care of that later very soon now we want to show an image inside of it so here   what i would do i'll do image  and for now i'll use asset image uh well let's see decoration decoration image  and within it i'll do image and asset image and here i would mention assets image food zero dot png and we need to  come over here now inside it we can   mention the property which is called fit or  if you just use asset image i don't think we   can access this one and that's why we need this  decoration image okay now fit is boxfit.cover okay now let's go ahead and save it and see  if we can see the image so we are already able   to see the image well now i think we also  need a bit of uh padding or margin okay i   actually would go ahead with margin so here we  do margin and as insets dot only for now would   stick to bottom one bottom margin so here  we do this one and we'll use dimensions dot height and we want padding like a  margin like 10 and it's looking better   okay all right now we'll go ahead and take care  of this section now this is coming because of   this listview builder because listviewbuilder has  a top padding which is applied automatically and   we need to remove that well to remove that  we need to wrap it around another widget   and that is called media query dot remove  padding okay so media query dot remove padding now over here it takes a context so we'll  pass a context over here you do context   and now over here we need to say remove top true so now it's gone all right but now with this we  have a bit of problem now here it's too close to   each other okay so here what do you do we'll do  a margin so here we do margin and edges is only sorry so we'll do top and over here  height dimensions dot height 15   save it so now it's looking much better so we  have a bit of distance all right well next we'll   see how to go ahead and work with this section  for this section we wanted we wanted to take   all the available space and that's why we will  use a container and expanded widget together   okay now within the row this was our first child  and we had it now here we'll use expanded widget and we'll have a container inside it so ex  container inside a container widget inside   expanded widget it takes all the available space  of their parent container okay so that's why   we did that and this is a what at least we want  for height because our parent widget is ro sorry   this is what we at least want for width and our  parent widget is over here the first one is a row   so it will try to take all the available  space horizontally okay now here we do height   and we'll have dimensions dot  100 dimensions are the height   20 multiplied by 5. so over here now we'll  have child and we'll have a column well in   the column itself we want everything to start  from the beginning so that's why we'll have uh   the column we want everything to start from  the scratch oh sorry from the beginning   so let's take a look so if this is a column we  want everything to start over here now this is   horizontal right so horizontally start from  the beginning so that's why here we'll mark so here we'll mark it as cross-access alignment  and we'll do cross-access alignment dot   start okay that's one and if you see  carefully now we want the space to be   uh this vertical space we want them to be given  uh evenly okay so that's why we'll set up another   property and which is main access alignment  and over here we do main access alignment   dot space event okay all right now we'll go ahead  and start doing our children so here you'll see   this is a text over here bitter orange marinade  i guess they read it so here first we'll have big   text okay this one and simply will just use bitter  orange juice it doesn't really matter what we put   now let's put it there and we see right there  okay now with this we come to another problem   so this within the container itself  while this container which is image   and this expanded widget which is the  text over here we need a bit of space   so here that's why we do size box and  we do width and dimensions uh with 10. okay well now it looks much better well now the text is we do have the text but we  want to have a bit of different color not this one   like this color okay so that's here  we'll use a color and that would do color   and we do colors dot black uh 54. it  is the color i had originally okay now to be able to look at things beautifully so over  here i'll just simply remove the background okay   now here we are when you need we'll put them back  now after this we want to show this text over here   and for that one we can use right  after it over here right after it   here we can use this text let's see so we  can go ahead with small text okay so we have   a small text widget small text now here for now  we'll put spicy and in future we'll see how to   retrieve this information from the server okay  all right now let's save it now we see spicy all   right okay the next part is be working on this  price while once again now as i said early this   whole section should be in a row okay so we'll  go ahead and build another row so let's put a   row widget over here so that's what i'll do i'll  do here row and after that we'll hear children   and okay so we need a text over here we should  say a price well for that one we'll just simply   go ahead and copy this big text i will put it  there and then for now i'll have a random price   so i'm going to put dollar sign and if to show  dollar sign you need to use slash in flatter   and then over here uh we should have red x  and this color so i'll go ahead and save it   and here we are we see okay now next section is  showing this button over here the one we saw early   okay and for this section actually we have laid  out our design long ago we can copy part of the   thing part of the code will come to this popular  food detail section now you should follow along   with me you should come to this bottom navigation  section and right after that there is this   row and within this row we have the container okay   now this container is showing that data so what  i'll do i'll go ahead and copy this container okay remember where we are copying from so instead  bottom navigation bar the in inside the row the   first container now we'll come over here and  we'll put it right there right after big text   and it would throw us some error but don't  worry we'll take care of that very quickly   so over here we'll comment them out for now and here just like this so it commented out  and let's do the same for this one now the   error should be gone and let's save it and now  here we see now we do have a bit of overflow and   that's because it's being  copied from the original file   and on that page the layout was a bit different so  instead of having uh over here 20 we'll have just   10 and for every other places we'll change  them and the error would be gone as well   okay so that was this padding issues now let's  save it and we see that's gone now of course we   need to push it to the right right okay well  for doing this one you see that we are inside   this row okay inside this row so over here we  can put a property which is called main axis   alignment and here we do main access alignment  dot space between and it would put everything   beautifully laid out like this okay all right and  the next thing we want to do we want to show this   result the one we get from cart page okay our  card controller now earlier in cart controller   we already laid out the method so all we need  to do we need to go ahead and call this now   where to call it from well now do remember this  is all list view builder and in listviewbuilder   we are showing them one by one so over here  this listviewbuilder will wrap it around get   get builder okay so for this reason i'll  first cut it and i'll i'll be here i'll write   get builder okay now i'll here need to find a  card controller remember this is a cart page   not a product page so we'll find a card  controller to show our data now definitely   we need to import that now at the top we  also need to import uh our get x package so now let's see okay well we need a bit of more work to do  otherwise we'll get error so here we do builder   and here we'll just say cart controller okay now  here we'll return and we need a return statement   and after that we'll have this listview builder  okay now with this we are able to access the   properties and fields inside uh our card  controller now i'll open up card controller   and the first thing i want to get is access  to this one okay so this is getting us the   items so i'll come to this cart page over here  now i'll use this card controller this instance   and i'll put it right there and then i'll access  to the properties which is called get items and   then get items to the list so i'll get the length  from it okay perfect all right and after getting   the length now over here we don't need this  hard coded so over here once again i'll put it   there card controller get items now remember get  items in the list so we can iterate through using   index and over here we want to get the name  property and we'll tell it that it's not   going to be null okay now for now this is also  hard coded as well but here this section we can   remove that so here we do this one plus  sorry dot get items and here we have index   and now here we'll have price okay and we  say it's not going to be null okay let's   see the problem over here we already added a null  checker was really once then i'll check it there   okay let's see and okay so this is the  problem that we need to convert it to string   okay now the error is gone and where else let's  see uh and as well as we need to change the   image okay so this image is pretty much hard coded  right now and so would come at the top over here   now here instead of doing asset image we would  do network image okay so here we do network image and here we would have app constants app constants dot base url plus app constants dot upload url plus we'll have our  card controller dot get items index dot   omg okay and then not null but of course  this is not going to work yet because this is   not getting any kind of data from anywhere okay  so first we'll come to our main file over here   and instead of this cart page we'll go back  to our uh main food page let's see which is   this one okay and then i'll come over here  okay now i'll start the app from scratch   and actually before we go ahead and do that we  need to also uh go through this navigation so   what do we want to do let me tell you so here  we are so i'm opening it over here so now i'll   click on this and i'll add it and after that  i would want to click on this one and go to   the cart page okay well for that one we  need to come to our file which is called   let's see popular for detail and over here we  need to wrap this icon over here inside gesture   detector now this the icon is over here so i'll  wrap it around gesture detector okay and let's see so here we do gesture detector  now we'll have on tap event now but this is not how we do routing but  this is just for demonstration purpose   so here we do cart page okay all right and that's  all okay now let's save it okay it's been saved   all right now you click on this you'll go to cart  page okay and this is where we are of course we   need to update this data but the the thing over  here it makes sense now the last part we want to   do about cart page over here because we want to  go back to main page and for that one over here   this home icon and we'll also wrap it around  a widget and we'll call it gesture detector okay and over here we do untapped so for now here we do get the two all right  once again soon we'll change the route this   is not how we do routing but i just want to  show you that how things should work let's see   well we'll take care of this thing  later or even right now let's see okay we are good and after removing this it just  works so now here i want to click on this so i can   go to home page i can come back okay now i can add  more stuff okay i'll click on this but of course   if i go there this button still doesn't work  right so for that one uh we need to come to our   uh product controller over here recommended food  detail and over here we have this button shopping   cart outline so this one okay actually we wanted  this one so we'll wrap it around another container another widget and gesture detector and here we do on tap card page let's import it save it and we are good to go okay now we'll click on this we come over  here now we see that this is what we added   now we can add more stuff over here and maybe  we'll add two confirm it's 10 you come over here   now we see our items beautiful so it's pretty  much already working now youtube has a limit   of uploading videos for 12 hours  you can't upload more than that   so i'll cover rest of the thing  in next part of the tutorial

Channel: dbestech

Views: 1,062,252

Keywords: flutter food delivery app, flutter ecommerce app, flutter ecommerce app with backend, flutter ecommerce ui, flutter food ordering app, flutter food app, android ios food delivery app, flutter getx app, flutter ecommerce app with admin panel, flutter e-commerce app with firebase, flutter app tutorial, flutter app development, flutter app development full course, flutter app project, flutter app example, flutter app for beginners, flutter tutorial hindi

Id: 7dAt-JMSCVQ

Length: 719min 49sec (43189 seconds)

Published: Fri Jan 28 2022