Transcript for:
Comprehensive Flutter App Development Guide

so friends so so so so so 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 will 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 one  you'll definitely get better at flutter and dart   programming language while in part two we'll have  12 hours and by 12 hours you will finish eight   complex ui screen and after this you will 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 tag 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 well  previously this is where we have finished and   now it's time to take care of this routing  definitely this is not how we do routing   or for routing first we'll go to our routing page  over here and project folder and over here we have   let's see route helper okay so here  first we'll define a new route variable   for this card page so here we would do static  cons string card page now here we'll call it   card page okay and we'll create a related method  for this so here we do static string to get   card page for now it won't take a new parameter  but soon it will so here we do card page yeah   for now that's all okay and over here we'll  define the page okay uh so let's do it   let's see right after this you would  do get page now name is a cart page and over here we do return cart page okay  all right and uh we could let's see if we   can assign another transition property to it and  here we do transition and transition dot fade in um let's see oh this should be transition okay cool now would come over here to  recommended page detail over here so   instead of this one we'll use get the  two named and here we do route helper dot get cart page okay all right and here we'll  save it and as well as we'll come to our another dart ui screen which is the popular food  detail over here and from here we do   do the same thing so we'll just simply  copy this one and put it right over here   okay all right and i guess we need to import the  library and that's what we did so this is popular   for detail okay and we'd also need to come back  to this page over here cart page like for this one   and over here at the top let's see so this one for main food page okay so  we want to go back to the main page uh   well let me close this one and dimensions now uh come over here and let's see yes we have  a route for this one that's initial route   so we'll just go ahead and use it so whatever i copied just now i'll put it  here and here we do get initial let's see   in a show it should get recognized it didn't  but i think we need to import the file and   now it's great so over here i'll click on this  and now it looks like it's working if i'm over   here now i click on this one well now this  is the problem because the icon is too small   so sometimes it doesn't work okay so let's  see would come to our popular food detail   i think which is this one and we'll put  a log over here we do print and we do   tap here and we'll save it okay now  let's see looks like it doesn't take that touch event so we do have problem over here so let's restart it now see why it doesn't  work so here we had this too now we'll confirm   and now let's go over there and it works  now come back it works now of course if you   tap over here it won't work this was only for  this icon circle and it works just fine okay   so next we'll take care why this button doesn't  work well now the button over here if we go back   and come over here it works just fine uh well it's  still very small and if we tap outside it doesn't   work and if we add more stuff say more than well  add one more okay 10. now if you click it doesn't   work because over here the size is too small and  once you add more stuff most probably displacement   happens so that's why it doesn't work now  to make sure that it always works i'll first   we'll come over here and remove this  gesture detector from here okay so i'll   simply first remove this one over here  okay and over here i'll simply remove this   now this is a child inside the position widget  now over here we have inside the stack widget   we have all these things okay so now we want  to make this whole stack widget clickable okay   that's what we want to do so we'll just collapse  it and then wrap it around gesture detector okay now over here we'll have this on tap event so here  we do get dot to named now here we do route helper   dot get cart page okay all right now it should  work okay so now you click wherever you click it   will take you there okay well now if we go ahead  and remove everything from the item now let's see   okay so now it's gone but you're still able  to go there and which doesn't make sense right   if you don't have anything over here you  shouldn't go there well we can do it easily   well we can do a conditional check so based on  this one now i find this this this is too long   and i find this is quite an annoying this sense  syntax so what i'll do i'll just copy this one   because this is an instance of this controller  so we can just simply replace that one and   would achieve the same result now we'll save  it and make sure that it works yes it does   and if you add more stuff um we see it  immediately over here we can go back and come back   all right so it works because this is just simply  an uh instance of popular product controller   anyway so now over here just to do a  conditional check just using this one   over here we'll copy this one and we'll do if all  right if this is then we'll go otherwise we don't   do anything okay so now let's save it well first  to remove this and submit it okay so now nothing   is there now if you click on this it shouldn't  work okay and it didn't but if you add one   confirm you click anywhere and it goes all  right so it works now we'll use the same   logic for our recommended food detail so i'll just  simply copy this one first and i'll come over here   and over here the same thing so i'll remove  this one and over here this section okay   now over here we do have this stack widget so  i'll wrap it around issue detector and here do   gesture detector and over here we'll just copy  what we had early and i think we need a comma   okay and now the error should be gone now once  again this is also popular product controller   and i will save it now i'll come over here and i  can see that i can still go back to this page okay   yes and let's see yeah okay so i'll  click over here and i'll add more stuff   and we should have total four we have and we  can go back okay all right so looks like uh   it's working as we expected all right now let's  click on this next we'll see how to show the items   over here now we'll see how to show the quantity  over here and we can do it pretty easily all first   we'll go to cart page over here and over here  we have this get items and if we on mac if we   hit command b it will take us to this definition  and over here we do get a list of card model and   this items in the list are all over here and this  card model is also about all of this okay and   we are already returning a model remember  we earlier we saw that we have this map   and map the value is the cart model anyway  so here we do have already the value   so as we have the value now we can reach or find  the quantity inside this okay so i'll come over   here now one thing i'll do i'll simplify this  one a little bit okay so over here i would do var cart list and instead of doing it  like this i'll cut this and put it over here okay and now over here i would do card  list dot length okay so later in our app we can   in this page in this page we can use this one  to access everything about this cart list okay   so now we need to find this section and replace  this item which is zero so over here now over   here we'll do cart list okay let me put uh  underscore because that means a private variable   so over here okay now okay  so over here would access   each of the element by index okay and then we  do dot and now here we do have the quantity okay   all right and most role you need to put this bang  operator because while now here not bank operator   so in optional can't be assigned to string so  that's why i would con convert it to string   okay now what we'll do we'll save it and let's  see and we can already see the quantity okay   so it's working now if we go back to our home page  and add a new item over here and we come over here   we added we come over here and we see the new item  that we added three now add one from over here so anyway so let's add a little more item now  we are here now we can say it's perfect so   this section is also working as we expected well  next we'll see how to click on this buttons and   increase or decrease from here now we want to  click on them and able to increase or decrease the   amount from here as well as if it reaches zero it  would be automatically gone from here that's what   we want okay well now if we come over to our card  controller over here and we do see that we have an   add item this method over here and  it has two sections one for updating   the model or the map actually so  because we are updating the map   or adding new items in the map so this is what  we want so we want to be able to call this add   item method from here and then we'll be passing  a product model and a number the quantity that   we want to increase or decrease well previously  when we were in popular food detail or popular   recommended food detail things like that like  this one and this one so it was easy to access the   product model because i could access them from  here using this controller okay but from cart page   because everything is wrapped here around this  cart controller not product controller so we   don't really we can't really access the product  from here do remember that once again earlier   from other pages like for example if we wanted to  add one item or decrease one item so from certain   page from here we would pass this product model  and quantity right now once again those pages they   had we were able to access this model somehow  but from cart page we can't but now if we are   going to do the same operation over here then  we need to be able to access the product model   okay now how can we do that well now one thing  definitely we could do we would come over here   and save the product model inside the cart model  okay inside this and then because we can access   the items using like this or from here  like this okay if we have this one we   can access the certain cart model and inside  the cart model if we have this product model   then we'll be able to access that  product model using dot operator okay   because after all my add item already takes the  product model okay so inside this i could save the   product model inside the cart model and then from  this page we'll use dot operator from this list   okay and then we'll be able to access the product  model and that one will pass over here like   once we remove our add item okay hopefully  it makes sense now all we need to do   we need to come to our uh cart model first so  we'll go there and over here we'll increase   a new field and we'll call it product model  okay and we'll instantiate an object declare   a variable from this one and over here in the  constructor we want to be able to receive that   okay now over here we'll do the  same thing for product we'll do json product okay over here we can write like this but  it won't work well now we are passing json right   but over here we want to save an object like this  one okay but when it comes down to this part it   comes as a json okay so we need to convert it so  we do product model dot from json and we already   have a method over here if we go to product  model we see i already have a method for that one   which we created early from json we make it to our  product uh we make it to an object okay so we can   use this this method that's already defined and  all we need to do we're gonna pass this json okay   because it takes adjacent and json is string and  dynamic things like that we learned very early   anyway so now with this uh we have a  little modification in our cart model   so inside we have this product object just like  quantity we accessed earlier using dot operator   now would be able to access the product object  using the dot operator that's what i said early   anyway now uh when we create this cart object  using this cart model we also need to save it okay   so over here uh well this is for updating uh it  doesn't matter so here we'll do product product   okay now this is the product we are sending  to our variable over here or this one okay   and this product is being this one now we we  need to do the same thing when you first time   put items in our map so we'll just simply put  it there okay now we'll restart it hot reload   and hopefully no error now we'll come to  our cart page now over here we'll access   first we'll be accessing this method which  is called add item so over here we'll use this instance card controller to access that  one okay so let's come over here we would do   card controller dot add items now it takes  product as an object how can we access that we   already have a list of objects now over here  we'll get an object based on the index and   we'll get the product the object  we wanted all right and let's see   okay because this is optional so we need to say  that this is not going to be optional now over   here because we are going to remove so simply  pass minus one okay all right so here's always   when you whenever you click on this button it's  it'd be always zero okay i mean sorry not zero   it will always reduce okay anyway so now we'll  copy this one now we'll simply put it over here all right yeah and in this case instead of  minus we'll do plus all right now we'll save it   and it looks like we do have a bit of uh error  okay so we don't need this plus sorry okay   we're good now we'll i'll go to home page i'll  come back here now i will see if i can reduce   okay well now we do have an error  over here let's see what it is   so null checker operator used  on a null value so let's see okay so let's restart it because we created this  model long ago and at that time i mean we created   this cart long ago and that at that time the  product model was not inserted inside this okay   so that's why it's it's find product as a null  because they don't have this model inside remember   we are following this one from tutorial 1 and  over there at that time we didn't have this one   right we just inserted early so we need to  restart our app and now we'll come over here   we'll add items okay and i'll add another two  or three items from here okay now i'll come over   there now see if i can increase now let's see  okay while i click nothing happens well that's   first good news if i reduce nothing happens either  well that's because over here mostly we are not   uh let's see well we are inside get builders so  you're supposed to see the update immediately which we did not okay so first let's go ahead and print a log  over here and we see what happens so we do print   and let's see if we are being  tapped or not so here being tapped   okay and then i'll restart it  and i'll try to click on this   while it's being saved now restart it again now  yes after restarting we can see that it works   now let's come back to our method over here  which is add item now at item it doesn't have one thing that tells the flutter framework  that the content has been updated so   over here we can just simply call update  okay now previously it worked with   uh product controller let me show you why  it worked would be simply just say this one   now for add item after adding the item we  automatically over here you see from ad item   we first call this one and then we call this one  at the end so we got the updated value immediately   but now inside this cart controller we  are calling this method directly okay   so here we don't have any update so that's  why it's not being updated well it means that   node is telling the ui that there is a new content  okay now anyway let's restart it now go ahead   you can do now you can increase you can decrease  you can do whatever you want okay all right now   let's come over here would be here and sorry for  the noise because i'm in china and it's their   festival so people are playing fireworks outside  now at some stars from here now i come over here   i see my item is still here now i want to do  minus okay now it's gone automatically okay so and let's remove this one and see okay so it's  gone automatically next we want to able to click   on this and go back to the previous page but  of course if we click on this nothing happens   and let's add a few more item now here i'll add  another two i'll go back to this card now what   do we want we want to click on this and go back  to the page we had early and then we want to come   back again and then if we click over here then  we will go back to this product for detail and   then once again come back that's what we want to  do okay well now to do that we need to do a bit   of coding uh well first thing you need to know  that how we are going to do that now this is a   cart page and this car page has to do with this  card controller and whatever item we see over   here everything is saved inside this items and  this items over here i'm using this property and   this property all it does makes a list of the  cart items over here and it's returns as a list   okay so that's all it does and it returns  everything from this map but as a list okay   so this has the list of the items that's added in  the cart right okay that's one thing and this one   previously we have accessed over here in cart  page uh let's see inside cart page where was it over here okay so now this is a list this  is a list of items that we have over here   now do remember that if we see once again  this one this items over here this also has   a product inside that we added early a product  object okay so this is a cart and inside this cart   each of the item also has a product model as an  object okay now if we go back to our earlier one   of the page over here say recommended for detail  so we come to this this recommended for detail   takes a page id well now this is coming from  here uh main food page body let me show you so   over here whenever you click any of them uh when  whenever the click happens as we can see from here   that it takes an index right and this  index has been passed to this one over here   the same is true for this popular food detail okay  so every time a click happens we pass the index   or a page id and then from the list over  here we find that product based on this id   from this list so we get an object right product  object because this list stores product object   if we want to see over here regardless  it's a popular recommended food controller   the mechanism is same so over here so this has  been taken as a product object as you can see so   this product is coming from over here  and this is over here so over here using   from json and product model which is over  here so we turn json to our product model   and product model is our object okay so that's  what we do sorry for this so anyway so this   list also has objects inside okay now why i'm  talking about this one so as i said earlier   whenever we are here so we do have objects from  our recommended food detail uh are popular for   detail i mean from those controllers from  this list okay so we do have objects from   here but we don't know once we click on this  flutter doesn't know which one is being tapped   so we have to know it to know this we need to know  the index okay now do remember each of the list   stores objects and they store the object in index  manner which means that the list could be iterable   using index like zero one two three four okay so  we'll come back to this uh cart page which is uh   this one and over here we do have a container  which is this one this container is the image   container which is showing either this or this  okay so i'll wrap this around gesture detector   so what i'll do i'll write the gesture  detector and we'll have ontap event   and over here we'll do child  and we'll pass that container okay as a child now over here once i click on this   i have to find first the list which  list they are in but that's easy to   do and from that list we need to be able  to find their index okay so but definitely once i click on this i really don't know  which list they are coming from okay so we   have to find it manually so while two controllers  they have two different lists right so i can use   any of them first and then try to find the list  okay now to find them in the list we need to pass   an object from this list product object okay and  it'll find it and give us the index whatever the   index is we can find and once we find the index  will pass that index to a router and that router   will either find the recommended food detail or  popular food detail page okay so let's go ahead   and do it then we'll understand what's going on  so first i'll create a variable over here so we'll   call it var popular index okay now this will hold  the index from the list so over here i would do uh get dot fine now here we do popular popular food popular product now we can access that list so our  list is popular product list okay   now once we do that we need to find the index  of certain product okay so we do index off   let's see there's a property which you just  call index of this one so this one takes a item   and if that item could be found in this list then  it returns okay and saves it in this variable now   what item we want to send we want to send one of  the items from this cart list okay so now here we   do cart list okay and we'll go through the index  and we remember in the cart list we have saved   our product our product model okay make sure we  are telling the compiler that it's not going to be   null okay and then we just return so what i'll do  i'll put it like this so that it makes more sense   and understandable what's going on so i'm taking  this list and in this list i'm passing an object   okay and this object is coming from  the stored item here in this list   which in this case stored over here which in  this case stored in the list okay hopefully it   makes sense so we find we take any of them of  course we are taking it based on index okay so   if we click the first one it will take the first  index which is zero and for the zero index it will   find the product object and if it can find it'll  return the index from this list and save it over   here okay well i know there's a lot of index index  index but that's how it has to work over here   or if you click on this one which  in this case the index would be one   so for one index one it will find that first  it will find that object from the cart list   and then it will pass that object to this index  off okay now if index of can find that object   from this list it will return the related  index from here okay hopefully it makes sense   all right well now if it can find the result  would be zero or greater than zero if it confined   the result is less than zero so we'll do a  conditional check over here if pop popular   index equal or greater than  zero that means it found it okay   so over here we would do one thing otherwise  would do another thing if it couldn't find that   means it's not in this list okay well  in that case we'll just copy this one   over here and we'll put it right there and over  here we'll call it recommended okay rack men dead   all right and i will copy this i'll put it over  here and i'll put it over here and big r okay and   make sure that you import it i think it's  auto imported for me so now we are taking   this controller and from that controller we find  recommended product list which is this one okay   and then we try to find it but we know that if  we can't find over here it must be here because   for now we just have two categories well if you  have more categories of course you need to do   more check over here more conditional check okay  anyway so if it can find this belongs to popular   uh product list okay or popular food detail  so right now it found in this list so we'll   navigate it to uh popular food detail page  okay to do that here we just simply do get dot   to named now over here we'll call route helper  we'll call rot helper and here we want to call a   function which is called get popular food and over  here all we need to do pass this on this index okay and that's all now the same over here so  we do get dot to named okay now route helper get recommended food now over here we want  to pass this index and we'll pass this   and that's all okay now let's go ahead and  restart our app because a lot of changes   so and here's we do have a bit of dart code okay now let's go ahead and add a staff so now  i'll go back over here i'll add three stops   and then maybe i'll come over here and add more  okay now i'll go over here now i want to click   on this i should go back to this page okay  and it happens okay and of course over here   you can go back to the cart yes now over here  you click on this it takes you this page and   you click on this it takes you this page click on  this it takes you this page now here's the problem once you click on this where do you want to go of  course you want to go back to the cart page right   but you don't now we go back to the main page  this is the problem that we need to solve   look at this so once you click on this i'm i'm  going to see this thing right but now close it   you want to go back to the cart page where you  have everything not the main page but it takes   us to the main page okay so next we'll see how  to go back to the related cart page to do that   we need to pass more arguments to this route  over here because we need to keep track of   where we are going and from what page we are  going back okay well uh let's go ahead and do it   now over here because i'm in cart page so when  i click on this button so i want to while here   once again so i click on this i confirm i  come over here so now uh once i click on this   this will take me to the popular page right so  okay but on this page i came from cart page okay   so here i want to put a tag over here okay  so just a simple i would say cart page okay   because now i'm from here i'm being redirected  from earlier cart page okay so that's why we had   now of course this is through an error because we  don't have anything like this over here so we are   passing more parameters so argument so now here i  have to take it as a parameter so here i will do   page now i need to receive it over here so here  we do ampersand page equal page so if you have   multiple parameters you pass like this in the  route using basically the first one starts with   uh the question mark and the next one you go ahead  and do this ampersand to pass more parameters   now this one is uh this one which is uh  related to this one the first round parameter   now eventually gets called this one right so over  here we also need to catch and pass it to this one   so here we do page we call get dot  parameters now here we do page okay so whatever being passed to this variable over  here uh i think which is this one later on okay   this one gets from this one which is dynamic  but anyway so now we need to pass it to this   one over here to page page and make sure  that it's not empty now we need to come to   a popular page otherwise we'll still have  an error so over here we do final string page so now here we do require the stop page okay  now the error should be gone and after that we   need to come to this section over here i'll just  simply remove it now here we do conditional check   it will do page equal card page okay if it's from  cart page now let me redirect to you to cart page   okay so here we do route helper dot get car page  okay otherwise uh we can just simply go ahead   and go to our initial route page  okay so here we do initial page so we don't need this section all right so let's go ahead and save it now if  i click on this uh well looks like we do have a   bit of issue so let's come over here here it's  fine i guess now this file okay here we need to   pass more parameters because here we do have got  popular and here this is our home page so this is   going from homepage which is over here okay now  let's save it okay now let's go over there and uh let's restart everything now  here we'll go ahead and click   okay now we added force items now here we  are going to go back to the previous page   and once i go back i should go back to the  cart page now i'm in the cart this is correct   okay click on this once again here i'm on the  cart page now here i do go back to home page   but this time if i click on this i should go back  to home page because that's the earlier page right   perfect so that's what we wanted and this  is that's why we need to keep track of the   page where we are going from but  of course this is just a string   you can name it anything you want  all right so that's why now over here   um we need to make changes in some other places  as well okay well so we'll come over here   and we do the same for recommended page  and the approach is actually exactly same okay and over here i need to do the same  thing var page we call that parameters page let's pass it down to this one over  here page page now we need to go over there   click on this and you want to receive  it over here okay so string page so here we do required this dot page okay now  there should be gone now would come down over here   now what you could do you can simply go ahead and  copy part of it and change them quickly so here   i'll be here and here if it's from carthage go to  cart page otherwise go to initial page okay that's   as simple as that one and let's recompile it i  think we'll have an error and that's okay because   we forgot to update part of the thing now here  we are also going from cart page so we need to do   cart page and what else route helper route helper  homepage body and over here so because this is   from homepage okay now let's go ahead  and restart let's see if it works or not   it should work okay now let's add more stuff to  this so definitely we can go back to home page   now here let's add stuff to it this is home page  once again now let's go ahead and add from desert   dessert sorry now we'll go back to our cart  page now let's click on this i can view   definitely i can go back to our cart page  i can view i can go back to the cart page   and i can once again go back to the cart page  once you go to the home page you click on this   and you just go to the home page okay well  definitely that part is working pretty well   now we'll see how to show our icon over here sorry  the menu bar or the bottom bottom navigation bar   over here well now this is for cart page right  now we have laid out this logic before so you   can go ahead and simply copy part of the code  from here and here we do know that well i think   that should be popular page so here we do have  a bottom navigation bar so we'll just simply go   ahead and copy this section and i will come over  here now here we do have stack right it's a stack   and right below it we can put this section because  scaffold has body and bottom navigation together   right so that's how it works and we might have a  couple of errors let's take care of them quickly over here we don't need this section i'll just  simply go ahead and remove this one we also don't   need this and where else um okay let's go ahead  and save it let's see what do we see here ah yes   so this is what we see and uh definitely we  also don't need this actually we don't need   this plus minus button over here so we  can just simply go ahead and delete them   so now here with the size box and also the same  for this one we also don't need the remove button   let's save it perfect now of course here we  want to see the summation of all of this okay   now for this one we need to come to our cart  controller which is over here and over here at   the bottom we'll create a property and it would  be in type and it will return as total amount   now over here it wants us to return something  so first we'll return zero now over here we'll   declare variable and we'll call it total  equals 0. now do remember this is our item   an item is a map and it has int and cart model  cart model is the things that being added and we   saw earlier that cart model also has a price and  quantity right so we need to get the total price   now here what is the total price of this one 36  right 12 multiplied by three now what should be   the total price of this one now 24 12 multiplied  by two so we'll do basic math over here very   basic math so here we do items and we'll go  through a for loop for each loop now over here   now this forage loop is for map itself and let's  see over here well this is another type but we use   entries and we also had the other one over here  4h previously we did anyway so now we'll come   over here uh let's get organized now over here  we'll have total you call the quantity the price   multiplied by quantity right so that's what  we want so over here we do value because   value is the actual cart model which has  quantity and which also has price okay now the error should be gone  i should be gone here as well   we are saying that they they are not going  to be null let's see the thing okay it's gone   now of course this is just for one item right  24 but if you go to the next item you need to   add it to the previous total so that's why  here we do this one and after that instead   of returning zero we would return total okay now  the error over here it looks good so this returns   us the total amount and here is the basic math  for each item you multiply and you add it to the   next round okay so this is more like a forage  slope now we would come to the cart page over here   uh i guess this is our cart page and now over here  instead of saying add to carter will say check out   now at the top i believe we do have this one in  card items but definitely we don't need this okay   now look at this one here we have popular product  controller but actually we want access to cart   controller okay so here we write card controller  now because it's wrapped around get builders so   if there is change in the cart controller so this  cut controller would be updated automatically   and so as our view right so here we'll remove  this one we would call a card controller cart let's see what do we have here sorry i  made a mistake it should be cart controller okay we'll copy this one now we'll put it  right here and then we'll call total amount   okay and let's convert it to  string now let's save it okay   and we see it immediately now if you reduce one  item five dollar would be gone so it makes sense   now twelve dollar began so it's working but all we  need to do we need to add it to another string so over here we'll do this one for now it's a  dollar icon you can put it to whatever you want   okay so it makes sense now if you remove one item  completely it's gone okay it's gone if you go back   come back to our cart page it's still there if you  remove yeah okay now next thing we want to do is   uh over here we want to put a bottom navigation  bar so that we can go back to our cart page   immediately not from here okay so here of course  we need to go back from this page that's okay but   what if the user wants to go back to the cart  page from the main page okay well for that   for that reason we need to add a bottom navigation  bar over here and in next section that's what   we'll be doing first we need to come to our main  page over here main.dart and one thing that we   can comment this out because we already defined  initial route and it should still work okay and if   we go to the route file and we'll see that initial  route gets called by well either this or this or   this actually that's the same thing because here  we're directly calling uh let's see which one uh over here route helper.initial which is this  one okay but we can also get we can actually   also call this one and it would be  the same okay no changes at all okay   all right and that's how we should call because we  are trying to be consistent how we build the app   uh but now we want to build a  bottom navigation bar over here   so that's why we need to change some of the  logic and first we'll go ahead over here and   create a new dart file and we'll call it  homepage.dart okay and we'll create it as   a stateful class over here and we'll call  it home page okay and we'll import the   necessary packages and the libraries and over here  will return scaffold the reason is because we want   to have bottom navigation bar and it takes  a body now with the body we'll have this one main foot page okay so we'll come over here and  we'll just simply go ahead and call this one okay but of course if you go and run it no changes  yet because main dot dart is referring to initial   and the initial is referring to main food  okay but now we don't want to call it from   main food we want to call it the main page  okay so now let's see our homepage actually so this is our home page so main page which  is this one calling this and this in returns   calls this one okay now let's restart it of  course no change yet just some logical change   now here we want to have bottom navigation  bar and we want to have i think things like   let's see uh well not really this one but anyway  so here we want to create a list of variables or   pages okay so we do list pages and over here list  is more like an array if you're coming from php   or java things like that so here it  would take list of items or objects okay so here first we can define this pages okay which  is this one well for now we only define this page   then we can do a container just a dummy  data and it will have a child a child would   take text let it say next page and  we'll wrap it around the center widget   okay all right and i'll copy it another  two times and next next page and next next   next page okay so we'll have four pages now  having this list over here the benefit is you can   access it using index okay now there's a  list i'm accessing the list in the body   okay now the list gets me the first item in the  list using the index okay so this is a widget   okay main food page is a widget we can confirm  that it is a widget because we are returning here   build it return type is build over here which is  widget okay so build method returns widget type   so this is what makes this a widget so here  we are returning a widget and this is a widget   too these are all widgets so we have widgets  but of course if you restart no changes but   if you change the index you will see there  is change immediately so which is this one which is the last one so if we have a list   variable we can toggle through the indexes  okay and change the pages that's what we   learned now of course we want to change this  index dynamically so that's why we need to   declare a variable and we'll call it selected  index equals zero now this one would be here   okay so now if we change the value of selected  index we'll see the related page okay like that so hopefully it makes sense let's see we need to restore it to get it  affected okay now we need to find a way to   toggle this selected index and we'll be able  to do that very soon now you do it in the   bottom navigation bar okay so here bottom  navigation bar takes bottom navigation bar   and within it it takes a list which is called  items now items is a list over here if you hover   over on it you'll see it takes a children list  of children the type is bottom navigation bar   so it takes item text list of children and their  type is bottom navigation bar so i'll just simply   go ahead and copy them now here it would ask  you to have at least uh one of them which is   called icon okay so here we need to do i think  it's icon yes and over here we do icons dot home   okay home outline and it also takes title  uh let's see it should be outside here title title is home as well okay now we can add  constant modifier there should be gone   it's not an error just annoying stuff  now we'll have four items in the bottom   navigation bar so we copy it four times  now if you save it you can already see them   but it's hard to see right what's going on so  first thing we can change some of the properties   while the items are still there and just the  color doesn't it's not very obvious so here we   do selected label which is the one you select  or tap so here we do a colors dot main color   okay now if you save it uh before  we save it i think we need to uh okay we got the wrong property so here  we need to do selected item color actually   select item color this one have colors dot  main color now save it you can already see   our stuff now over here unselected item color  the one are not selected would call it over here   lose colors dot ember accent so these are the  unselected ones okay now here we don't want to   show the text okay so i want to hide the text okay  well so for that one we do selected labels false   so the text should be gone and  unselected labels unselected labels phones as well okay  uh before we go ahead further   let's go ahead and be able to tap on them okay  because now we can't tap so this is boring well   now bottom narration bar takes a function which  is called on tap okay now this enter function   okay uh should have a function and we should take  index in their parameter okay so first over here   we'll go ahead and create a function and we'll  call it uh on tap nav okay so here we do int index so this function would call it from here and now  they are connected there this function is bound   to this one now as they're same it tells you that  okay you should have an int as a parameter which   we already have so once you click on them index  should be over here so for the first one the   index should be zero the third one index should  be two the second one index should be one so it   makes sense right so now once you tap on them it  will happen automatically so the tapping thing you   don't need to care so flutter will do it for us  automatically okay so we'll come over here all we   need to do we need to save this index to selected  index okay so here we do this one but what we want   as we click on them our ui should change right  now this value also changes now if we want to   trigger ui change we can use state okay so now  based on this flutter would know okay there is   a change in the variable and value so that  could mean that flutter should redraw the ui   and if it does then we'd be able to see  okay now let's save it click on them and   we see that we are already tappable okay we can  tap on them but of course the icon color is and   icons they are all same so let's change some icons  here we do our hive and we'll call it history   the name doesn't really matter anymore so  here you do shopping cart and here we go cart and here just me and here diagram should be person  okay now they change automatically   now we do see that we do have other issues now  let's see where it happens you click on this   it's fine you go to another page now it happens  so we are going from this page to this page   and it tells you that well you are leaving  this page but you are not disposing something   in this page so let's go ahead and  find this page this page is this one   okay now it tells you so whenever you live  this page go ahead and call super dispose   so well we already overwrote our dispose  function last time but we forgot to do this one   while at that time actually we just had only  one page and it had some nested pages okay   so this pages were nested inside the main  page but now we have more pages and they're   independent so when you go from here to here  literally you are leaving the earlier page so it   should be garbage collected or removed from memory  as you leave okay this is the idea though anyway   so you should call this one so now the error is  gone now let's see okay so we are pretty good so yeah okay now this is the  problem as you tap you see   the content change but the button doesn't change to change the button we also need to change the  index over here and for that one we have another   property which is called current index this index  is same as this one so as we are changing the   index from this untap function over here we also  need to pass it to this one okay this function   is just responsible for changing but not assigning  to this one okay so now we'll be able to assign it   okay now you see you can tap on them and go  ahead and change as you want now here we do   have another issue it says that you need a  layout now it's a complex process over here   for the bottom navigation bar okay uh because we  are hiding this one um just labels and they're   still there but i think it doesn't get any layout  because it's being hidden uh one way to solve this   you can do selected font size 0.0 and unselected  font size 0.0 okay now this solve the issue all right yeah now however you  tap the arrow should be gone   well now this is a basic bottom navigation bar  next we'll see how to turn this one into an   amazing beautiful bottom navigation bar using a  plugin all right so this app bar is pretty simple   sorry the bottom bar or bottom navigation  bar so here is one thing we are going to do   well we'll go to this website okay so pop that  down and dev and over here we have this uh popular   bottom navigation bar looks like it does  have quite a bit of liking and popularity   unfortunately because i'm in china a lot of the  images could not be downloaded uh but this plugin   is for bottom navigation bar and it does come  with a lot of styles so we'll go ahead and install   it and see how we can use it in our project  okay well to install it you'd come over here   and uh you'd copy this section over here  okay and if you're following along with me so now we'll come to our uh pub spec dot yml file and over here let's see where is our dependencies so  right below it okay dots indicator   uh we'll install it okay and once  you put it there make sure that you   have this alignment otherwise you'll  get error and click on public pubget   so it will download the dependencies necessary  okay all right i'm pretty much done almost now   uh just now we worked over here for building this  bottom navigation bar and personally actually   i would go ahead with this  one because this is coming   right out from flutter  framework it's not a plugin and this code would be persistent it doesn't  matter what flutter version we use okay   so but this one over here it does come with  a lot of styles so some of you or most of   you might be interested in using this kind of  styles okay so once we go ahead and install   we'll see well it comes with almost  20 styles okay you see over here but the one currently we have over here  this is only one style of course we can go   ahead and style it but different style needs  different type of coding so we'll see how to   use that one so i want to keep both of them and  it's your choice which one you go ahead and use   but this idea what we learned here we'll use  pretty much there over there we'll see how we   are using items which takes a list of children and  we'll also see how we are going to use this body   okay and from body we switch the pages anyway  so i'll come over here and i'll select this two   lines over here and i'm on mac android studio so i  will hit command shift and backslash okay now with   this this line has been comment out because we  don't need this now but of course we'll get error   now what we'll do we'll come over here remember  that we are using persistent bottom number so the first thing we do would go ahead and  initialize a persistent tab bar controller so   we'll copy this one and come to this part while  definitely we need to initialize the variables so   here part of it but this should go inside uh  our init state method okay so we'll go ahead and   create init state override and void in its state  okay and we have to write super dot in its state   just like we did before for super dispose method  so for each state we have to override it now in   its state method is the method that we  use to initialize the variables before   your class really gets into action the related  variables or dependencies okay now here   the second line i just cut so i'll put it here  okay now make sure that you go ahead and import   this library it's coming from the plugin  itself and over here the problem is that   we are using a new flatter version with old  flutter version it works so if your flutter   version is old it should work if it's not just  add this late modifier and you are telling that   flutter you're telling plotter that will  initialize it later before we use it okay and over   here we just initialized it okay now next section  is right here so we'll copy from here okay and we'll put below it because eventually  for me i might stick with this one okay okay well now it has two sections that i we need  to work on so build screen in items but item is   the same as this one over here that we worked  with so that one and nev uh build screen should be this one okay so you need a list of pages  but of course this idea is same but this   plugin doesn't work like that it's a little  differently so here these are the list of pages   so just copy it and put it right below it and  copy this one so these are the items which   has the bottom navigation bar item but in this  case of course this is persistent bottom number   so copy it and put it right there okay now  this two pages we don't have we have this four   so we'll go ahead and copy and put it right to  there okay now of course here we have four screens   you should have four bar items as well  so we'll just go ahead and copy them okay now we'll use some of this icons over here well  the second one in our case is archive okay and here we'll write archive every  box fail and the third one is let's see if we have cart okay   we can go out of the cart fill and  here we write cart and here we do me so here we do person okay uh and  let's go ahead and restart our app here we are it's already there of course it's  very different the one we worked with okay so um this is also good i  think this one is let's see   style one now if you want a different  style just change the number here   use style two so you will see it's different  okay changes immediately style three okay it's   different it is a bar at the top style four five  i'll go ahead and show you five so this is cleaner   okay yeah and style six is also good i think all  right so there are different styles up to i think   19 all right so this is style one and  this looks okay uh but in this case uh   we could do a change inside this thing okay  now the color match is really important   so you could go ahead and do the color match  on your own so it's up to your choice okay   now if you want to change the color you  have to come over here and change the color   but why i showed you how to use this one because  a lot of you might use different styles okay and   i think this plugin is useful because it comes  with different style okay but just change the   color over here okay now for me i'll not use  this one okay for now so i'll keep the code here   okay i'll keep all this code and just i'll  comment this out that's all i would do okay all right and i think this is the one  we had early so we'll uncomment this   so on mac android studio command shift  backslash so this should uncomment   what we had early okay all right and we  also donate this one as well as this part   okay but in future if you want to use  them just go ahead and uncomment them okay now of course if you don't  want to use this plugin at all   so don't forget to come over  here and remove this okay and do   pop get one more time okay so i'll go ahead  and delete it but i'll put the code there okay   the code i had earlier okay so it'll  take care of rest of the things all right now we'll go ahead and build a splash screen uh  the screen that pop up when you first load the   app but this screen is quite important because uh  first thing is animation and your branding or logo   but most importantly you want to load  resources uh currently if you come to main dart over here this file you'll see that we  are loading over here like this but this is not   the correct way to load uh as we progress will  change a lot over here so before that we have to   go ahead and build a splash screen and from there  we'll load resources and we'll have a function   over there uh anyway now we'll come to our  project folder over here and let's collapse them now over here inside pages we'll make  a new folder and we'll call it splash   okay now over here inside splash  we'll create a new file and we'll call it slash page the dart okay now  this page would show or load at first at   the beginning before this one gets loaded and  this would also do animation now for animation   we need to use a stateful widget but of course  we can go ahead and do the animation with uh   get x but i think we can also  learn some of the things that's   directly inside flutter framework so this  time we'll be using a stateful widget   uh just like we did earlier for our home page  okay over here we also used stateful widget   now if you come to this page uh sorry this  one here we'll create a new class uh we do st   and then i'll choose the option stateful widget  and here i would write a splash page i think uh   let me go ahead and change the name the  actually the convention is splash screen okay so   that's where we'll stick but our pages we do have  name with this page so we'll stick to that one   all right but if you want you can also go ahead  with the home screen or whatever okay uh so here   we'll call it splash screen now over here uh let  me show you that how it it would work now this is   my the app that i built before now this is the  screen that we want to load first okay but here this one would be animated and  this one would be animated as well   okay and it would become from small to big okay  things like that well now this two would be driven   by animation okay so that's why we need to go  ahead and create some variables for animation   so first here we'll create animation variable and  while this class is inside flutter package so all   we need to do maybe just import it and animation  will take value so the value is a double type and   here we'll initialize it later so here we do  light animation and it's inside this coppertino   library so it's imported automatically  so this is the first variable we want   and just like over here earlier we had  this tab bar for animation sorry tab   controller for animation we also need a similar  controller and that's called animation controller   animation controller okay and once  again here we'll call it controller   now we want to initialize it later  now this i think also incites this   flutter search source package and we don't need to  import it separately it's already inside flutter   framework now so these two variables would control  our animation well this is the one that would   we would apply this one to later over here and  this controller just like we saw earlier over here   so we need to initialize this controller  variable inside the init state method okay   so we'll come over here and here we'll  create a method so do that override void init state okay now here first thing always we need to do  super dot init state override it and then we'll go   ahead and initialize the controller variable now  here we'll copy this one put it right to there and   then we would do the new animation controller this  one okay now this sync is in general set to this   okay and it also takes other  parameters if you hover over on it   like duration uh and while  the vsync is a required one   and duration is optional so we'll go ahead and  use duration now here we will do duration duration okay and if you hover over on it so it takes  optional parameters here it says second so we'll   use seconds okay seconds two seconds all right  and let's see we need to come to this end okay   now we still have an error over here now it says  that if you're going to use vsync which we have   and then your screens splash screen state should  implement something with is called ticker provider   so here we need to go ahead and use this class  which is called sticker provider state mixing   okay now the error is gone and here let's see  okay so it doesn't take double it takes end   so if you want to do an animation in general  the one inside flatter framework then   your stateful class should have this class as  well okay then after that you can do animation   okay so well that's the initialization for  animation controller uh sorry this animation   animation controller yes and then once you're done  with this then we can use this one for this one to   be initialized how you do that here's like this  so we do animation you call new curved animation   the type of animation we want okay now it takes  a parent in parent is the animation controller   okay and over here within curve you need  to mention that what kind of animation   you want how you want it to go like how  fast or how slow things like that okay   so it comes with curves over here and here we do  have some option we'll simply go ahead and use the   linear one okay all right so well let me put it  like this so that we know what's what's going on   okay let's see it asks us to use unnecessary  new keyword and over here same and most probably   it wants you to use constant uh keyword  but this is uh i think flatter uh this   android sdk version okay in general older  version you don't get this thing okay so   if you're following along with me so your sdk  versions should be i think um over here between   this okay and then you should have this warnings  that i get but if you don't use them because   they're just warnings so that's okay fine so once  again so we created these two variables okay so   they depend on each other especially this one  animation using this on you do actual animation   for animation you should realize a controller  variable which is called animation controller   and over here you tell flutter that how long  the animation should continue for two seconds   and the animations the power the juice comes  from this class ticker provider state mixing   okay and then you want you create the type of  animation you want okay so and you mentioned here   is the type like linear bounce in so there are a  lot of options that you could go ahead and check   here you can try one by one but we'll stick with  the simplest one over here okay now being said   that we're almost done with this page but now  here look at this structure over here so here   we want them to be in column format okay so first  thing here definitely we don't want container we   want to scaffold okay scaffold okay because if you  have controller just sorry container you'll have   black background but with the scaffold the default  color is white anyway so it takes body all right now over here within body because we are  going to do it in column so here we do column and the children so the first one would be this image  okay all right now here we'll see uh   we'll use the image so for this one simply  would go ahead and do image dot asset now here   you mention your image name so our  images are in the assets folder i guess   assets image logo part one dot png okay now let me  check over here uh so here we do have this assets   image and here we should have an image which  is called logo part one which is this one okay   exactly this one all right so this is the  first image we are going to use all right and now being said that uh let's come over here   uh first we'll do a very simple test and we'll see  whether it's working or not so here i'll remove   initial route and here i'll just do simple home  route just for testing and here we do splash   screen we'll call this one okay now  i'm over here i'll restart my app   and actually i'll also start from here  okay so this is what we see right now   okay now uh it's way too big so let's  limit some of its size here do with say 250   all right okay now it's a little smaller   and i want it to be centered okay now it's not  centered so here i'll wrap it around center widget okay now so this is centered horizontally but not uh  vertically okay so here we want it to come down   so for this reason we'll over here use main  access alignment and we do main access alignment   dot center okay now it came down of course  now i do have white background this is not a   png image just a jpg even though it is said here  png well to overcome these issues here we can work   on the background color so we do colors dot white  okay now it just looks like your background color   well now what do we do we'll just go ahead and  copy this one and put it right there on mac   so i did command d so it copied  and pasted now this one over here   we want it to have two so which is image  two okay now this image is also once again   this one which is this one the best food so if you  download it the starter file should have this one okay all right so now this is good  of course we did a lot of work our   animation but we didn't apply any of them  so we want to apply the animation okay well to do that uh all we need  to do over here we need to simply   wrap this thing around transition animation  or skill a skill transition okay so we want   to do the animation just for this one not  for this one okay so i'll wrap it around   transition but in this case i will do scale  transition from small it would become bigger   okay so here once again uh widget and widget name  is scale transition this one okay now it shows   error because it has a required argument scale now  if you hover over on it scale takes animation okay   which is double and we already created animation  which is this one okay based on this controller   so here i'll just put animation and the problem  should be gone so now let's go ahead and run it okay so we were supposed to see that but we didn't  see it let's see why um do you have any error over   here let's see no are we missing anything okay  well now here's the thing actually we are missing   another property over here we need to start the  animation which we didn't so we'll just simply go   ahead and create take an object from this and  start okay if you don't want to do like this   let me go ahead and show you how to do it  another way so here we do controller equal   controller dot forward okay this one but this takes more properties so it's a  bit annoying so just uh we can go ahead and   apply more properties to it and it gets the job  done but there is easy way to do it so over here   we have two dots and here we'll just simply call  forward okay now it would work so that means   create an object of this which is controller  which all we already have and from that controller   use a dot operator and then call forward okay so  it might be new to a lot of you for example here   let me give you an example so a lot of time if  you have var um x and it's coming from any class okay now say your class has your class has uh say i'll write the class  over here and say your class has a method   for example the method name is new object  and it just some does interesting thing okay   and maybe after that it returns something  okay return x y z whatever okay certain value   now traditionally we could do  like this and then we would do   another variable or another x we don't need to uh  re-declare so now we could do like this x equal x   dot new object okay like that so ob g okay now x  will have a value what is returned from here of   course originally it was just an instance of this  class but now it would be covered by the new value   but if you don't want to do like this this one  shortly is done like this new object okay and   that's what we did here but of course uh it's not  that simple for here but the idea is similar okay   hopefully it makes sense and this is a new i mean  operator that's in flutter dart framework so it's   very convenient you should know that so next time  you see this two dots don't freak out it's just   creating an instance first and from that instance  doing something different based on that instance   anyway i'll remove that so here forward which  is coming from this animation controller class   it starts the animation okay so here we'll go  ahead and restart it now we see that it started okay well that's getting interesting now the  animation does start but after starting we want   to do something we don't want to get stuck over  here okay we want to go ahead and do something   different and for this one here we'll initialize  a new class which is called a timer now timer over   here takes a duration and a function duration  is more like okay well after being initialized   here how long you should wait so that's the  duration so we'd go ahead and pass it a time   into seconds say three seconds and three  seconds later three seconds later do something   do what go to a new page so we'll use get dot  off okay named make sure that you import get   package library at the top which you should have  this one okay and then at the same time you call   our route route helper okay and  then you do something you will go to   the initial page so you do get initial okay  yeah that's what you want to do and i think   it wants to put us a const modifier okay all  right so that's what we are doing so here   once again i'm initializing stuff over here  and after that we'll wait three seconds and three seconds later we'll go to our uh get  initialize page which is means our homepage   right now let's go ahead and  restart it and see what happens and of course it's been three seconds  but it doesn't take us anywhere   now for going there from here  we need to make some changes   and as well as we need to set up new route okay  well first thing here we'll set up route for our   uh splash page so here we'll declare a variable  static cons string splash page here we do splash page okay and we'll create a get  method for this so here we do static   string to get splash page okay and over  here we'll pass this one as a variable okay all right now in the list of pages in the routes over here we  also need to mention it so here we do get dot page   now what do we want to get called we want to  get call of this one so splash page we'll put   it here and over here eventually we'll call our  splash page okay or splash screen the file name okay so in route class or yes  sorry in main class over here so   we don't need this one we'll have this one so now  here we call get splash so this one would call this uh this one over here okay and this has a variable  okay now this one would relate to this and   get cold from here the splash screen okay  so now here uh we can go ahead and start it okay yes beautiful so that's what we wanted  okay so three seconds has been gone and we came   to our home page and this is what we wanted  all right yeah so let's do it one more time beautiful okay all right now uh after being said  that we can also move some of this some of this to   another file which is a splash page over here  we don't want them to be here so when we load   we do the animation within that time   we can load some resources well to do  that over here first we'll create a call load resources okay and of course we need to  create the load resources resources   okay and what we want we want to well  let's see we had this one right over here   so we want to cut this one and put it right there  okay but we need to import the related libraries   okay all right and actually until we risk until  we load we also want to await okay so let's put   a weight keyword and async modifier okay now from  here we are not doing that once we call this class   over here and at that time we start loading and in  general splash screen or splash page they do the   loading resources from the internet okay all right  now let's go ahead and restart it one more time all right okay and over here we can also  define a type we will call it future void okay   yeah uh pretty much like that so let's  make sure that we try to load and wait okay so now yes and hopefully we can do this thing no we can't  uh that's a problem now let's restart it uh okay once again they're being deleted from memory  okay product controller as you see okay yeah   now to solve this problem we  want to keep them in the memory   and it's actually pretty easy  now one thing the whites uh get removed the reason is well when you call  certain controllers get x controllers before   get material lab they generally stay in the  memory but now here uh in our splash page so this is getting called after get material  app this resources okay so they get deleted okay so it looks like you are not using  them so it just get deleted but uh   we want to use them so we need to keep them  in the memory after the drawing is done   what i mean by this okay now the ui  drawing is done so you click on them after drawing the ui when it is done this  controllers get deleted from memory okay to   save memory or phone resources but  we want to keep them in the memory   well for this one here we'll come over here  get material app or wrap it around product   controller okay but of course we need get builder  here we do get builder we do popular popular   product controller okay and here we'll have  builder and within builder we don't want to   create any instance here because we are not going  to use any instance okay that's the first one and   then we would also do return now we'll use the get  builder nested get builder now here we do this one okay and we'll return here but of course this  time we need recommended product controller   recommended product controller  okay now let's see here this one now here we need to return get material app  okay and of course we need another return here   so we'll have three returns now the first return  because bill wants to return something that's why   get builder also wants to return something  the second one also wants to return something   now let's go ahead and try to use them okay and we are here and everything  is perfect uh you can add stuff to it   there come back to home page  uh add more okay get over here   uh come over here click on this on different pages  and we still stay in the memory okay now there are   many different ways to keep your controllers  in memories i'm talking about fluttergettex   not other state management packages so this is  one of the ways of course you can go ahead and   also do another solution which i don't do uh over  here if you have this helper class dependencies   uh over here you can also set things like that  permanent true things like that per permanent true   things like this okay so but in our architecture  this doesn't work so but most time it should   work if you go ahead like this but anyway so in  florida get x if you want to keep things in memory   this is one of the ways but this get builder  should should be called before get material app   okay and now actually we can take care of  another issue well it's not an issue though   like uh the size over here so if you see  that right now the size is hard coded so   we want to make it dynamic the width right so  for that reason we'll come to our utils over   here and in the app constants over here  we'll declare oh it's sorry not this one   over here in dimensions uh we would declare a  new variable okay uh let's do it right there right below it splash screen dimensions okay well it could be  anything but for now we'll just do it   for image okay so splash image or  img now screen height well now the   images width was 250 so if you divide it  by 250 then the proportion is 3.375 okay   or we can just stick to 3 8 all right and over  here we do double okay now we'll come to this uh   splash screen over here this one sorry and we'll  import here dimensions dimensions dot uh splash   img make sure that you import it so now let's  go ahead and run it okay and let's restore it yes now this should work as well yeah okay so  that's being dynamic no problem and now the   next thing we want to do regarding this page over  here uh over here we want to show the history of   this shopping cart we have right now okay so once  user confirmed on the checkout so we'll show the   history over here and but of course that history  would be coming from our phone because once user   say click over here on the checkout uh we'll save  it locally in the phone but of course as well as   we'll also save it in the database but  first we are taking care of our local device   so once user click information over here then  confirm it over here then we'll save it in the   local device and then if we tap on this we'll be  able to see that okay and uh another thing though   right now while the card is empty right so  instead of showing this we'll show another   page saying that your card is empty well that  would be for another episode i'll skip that for   that thing right now anyway so i want to  focus on like if you have items over here   and if the user click on this checkout button of  course it doesn't work for us yet and then we'll   see them as a history over here okay so that's  what we want to do well now for this reason we   have to first install our local storage which  is a shared preferences we'll go ahead and do   it first uh to follow along with me you should  come over here in your popspec eml file okay and here we'll install a package  okay so this one so i'm using   version 2.0.11 and then we'll get the pubget  so it will install the necessary dependencies   well once the dependencies has been installed i  mean the packages now we need to come over here in our dependence is this one okay  so here we need to load it okay   now it should be at the top very beginning  because whenever user interacts with this app   we would retrieve the information locally  okay so it should be initialized first   so here we'll create a variable and  we'll call it uh shared preferences and here we do shared preferences okay dot get  instance all right uh and in general we want to   wait for this if it takes time to get initialized  now with this we will be able to get an instance   of shared preferences and we can use this  instance later on for storing and retrieving data   but of course we also need to initialize  as part of our controller okay now we want to the data is here but you can't use  it until you initialize in your state management   system so our state management system is get  x so here we need to load it so we need to   merge it with get x so over here we'll just  simply do shared preferences okay yeah all   right so this would be loaded now for the app okay  so in our controllers we'd be able to use that   now over here in the cart repo you have to pass it   share references and we need to find get and  find it okay now if we go to cart repo we don't   have an instance like this so it will throw an  error if you see it was empty for a long time   so in the cart repo over here uh we'll  declare variable we'll call it final   and shared preferences and here we'll create  an instance okay now let's see hover over on   it so well here it says either you do it late  or you can initialize it through constructor   and we would do using constructor card repo now  here we do required this dot share preferences okay now whenever the dependencies get  loaded over here we create the instance   and we load it with our overall  dependencies inside get x state management   and then we pass it to the cart repo and cartridge  this time should be automatically initialize it   and that also means that after  that you should be able to use it   okay now you have to know one thing that  shared preferences they store data in   a string format okay that's the only way they do  let's go through this idea one more time so here   we'll have this card and we'll add items  to it we'll come back to home page and   maybe we'll add more items so we'll have  total six now we'll come to this checkout page and on the checkout page if we click on this  button of course it doesn't work now after   clicking on this if we come back to our home page  and if we click on this we'll be able to see the   history now this would be also true if you restart  your app okay because it will be stored locally   so this is what we want to do okay and as i  said earlier that shared preference stores data   as string so first we'll go ahead and declare  a string and we'll have a list of string   and we'll call it cart and  first we'll initialize it to   empty string of arrays or list  okay because we'll have a lot of   information saved in this shared preference  and they all would be saved as string okay   all right now over here when i when we pass the  data to this card we have to pass the data from   our controller from our card controller so let's  go ahead and check so here is our card controller   so from here actually we'll send data to  this cart report okay just like previously   we saw that product controller works with product  controller repo okay so this two would work   together now we can close this dependencies we  don't need this so here we'll create a method okay   so we'll call it add to cart list  okay and over here it will take a list   so the list is cart objects or cart  model okay so here we do cart model and right here we'll create a  variable let's say a cart list now we need to import it the model  we created now here we'll have   when we call this function okay we'll  pass an argument and that would be a list   and over here we'll receive them the parameters  as the list okay now from here we want to pass the   argument and from here exactly from after adding  or removing okay so this whole function does   adding or removing or updating right including  the removing as you see right after that over   here we want to update our list which is  over here and as well as we want to add   so here we'll call this method which is this  one add to cart list okay now here simply we   can go ahead and call it and how do you call it  so you already see we have a cart repo object   so now we'll use this one over here heart repo  dot add to cart list okay now here we need to send   a list okay as we said that we want to receive a  list in the parameter so when you send argument   it has to be a list and we already have the list  actually this is the list but of course this list   we used other places and this is the list that's  gets updated automatically all the time because   this list eventually connected with our  map okay and we know that whatever we do   map also gets updated all the time  because we have this update method   so what we'll do we'll go ahead and  simply just pass this one over here   okay and that's all now add to cart list  would be able to get it over here and   we can save it in the shared preferences  well now what happens once again every time you add remove things like that and confirm to  this add button that also means that we are saving   data in shared preferences okay all right so now  how to save data and share preferences well first   i said that shared preference only accepts  string okay it is some methods like if you   tap on this using this dot i think uh  well we'll see that later maybe not yet well we'll see them later no worries so here  we want to take this list and save it in shared   preferences okay well once again shared preference  just takes string but here i'm sending a list of   objects do remember cart model is not a string  it's an object right so we need to convert this   one to a string well first we'll come over here  and we'll make sure that it's empty if it's not   and we'll make it empty because this would  be get cold a lot of time from here from   this function okay so every time we come over  here we'll make sure that it's empty and after   that we'll take this one okay now this one is a  list and list has a method which is called 4-h   we can use that one okay now over here uh this is  the list and in the list we have this objects now   we want to convert this objects to string  well for that reason here we will do heart   dot add now cart dot add once again  accept string but i have this one   so i need to convert this one to string and add  it to this card okay so here i would do json   encode and i will pass this element over here  okay whatever the element i have over here so   i'll pass this one um sorry let me copy it  and pass this on all right and using this now i'm able to convert this object  to a string and then i add it to the   card okay this card list which  which is also string type   okay now after that i'm able to add this card in  the shared preferences so here i'll copy this one   share preferences then i would do dot and  here we'll have a method called set string   list okay well we also have a set string but we  are using set string list because we are passing   a list to it okay because this is a list okay now  over here we can put a key so we'll call it cart list okay and the value is this one okay and that's all now here the  interesting part is once again this one okay   so here we can put a simple comment  convert objects to string because   shared preference only accepts string okay  that's all so b c a u all right anyway so   each time we call this method from here  we are passing a list and first we'll   empty the global list we have here and we will  use this one to convert and store well i mean we   are storing the object that we pass but before  that we make sure that we are converting it to   a string okay and once it's done here we  save it as a list and if it is saved actually   here we can print the data okay print um shared  preference let's see dot i think it's called get   string list okay this is for retrieving and all it  does it takes the key and this is our key so here   i'll just simply go ahead and save it and but  of course you just save it as uh give it as   cart list okay now let's restart our app okay now let's come over here let's do add some stuff  on it okay now i click on this button immediately   this method would get cold and eventually this  one would get called and we are expecting to see   a list of string okay so now let's go ahead  and click on this and after clicking on this   we get this error now where it says that it  couldn't convert the cart model to incredible   object well if it is not possible by shared  preference over here on its own then we need to   come to this cart model and provide a method to  convert this object to an encodable object okay   now here would come to our project and we'll come  to cart model which is this one and inside the   cart model we have a method for converting json  to an object okay yeah so from json we convert it   to object now from object we want to convert  it to json and now we are going to do it for   shared preference over here okay so before it goes  ahead and encoded it will try to look for a method   in our model and if there is then it will use it  okay so here i would do map and string dynamic die   make okay and the method name is to json okay and here we are returning  type of map object okay and we'll get well i mean here we are returning map  and map is more like json that's what we saw   and before we return like this uh we can  simply grab this one and then assign it   to the string key okay in our case the key  is a string and the value is dynamic okay   so here simply will do id well that's the product  id and we do this dot id and then we have title   or actually name in our case name right  and we do this dot name and then we'll have   price so we're just doing these things  over here now we do price this.price img this dot img on the quantity  quantity this dot quantity   and what else uh i'll just go ahead all of this is  exist and the time like that okay so here is exist   this dot is exist okay and  this dot sorry time this dot   time now this one will uh deal a  little later now i'll cut this one   and from here we'll just return okay return  like this okay now the error should be gone and let's see okay so now we do have a   method that converts the object to a map and a  map is encodable it's more like json as we saw   earlier okay so now we'll come over here and  nothing really changes over here in terms of   uh this rapport so we'll just go ahead and  simply save it okay restart it over here and   now let's see i think we can restart  our whole app it would be better okay so now let's go ahead and add stuff to it  now let's add it to cart now as you see we can see   the information that's been saved in shared  preferences okay now this has been coming from   i'm sorry car prep which is  uh this one okay all right   all right now now we know how to save and  retrieve but of course this is just printing   to confirm that we are doing stuff now  over here you can add more stuff to it okay   all right another three uh  so you'll confirm now you see   so previously you added one that one as well as  this is the new one okay you can add more stuff   from here okay confirm here  we have eight and here we see   this first item and i think the quantity was three  the second item quantity is a three now over here   the third item quantity is eight total eight over  here okay so now all of this here coming from   our shared preferences okay now the key shouldn't  be hard coded over here so we can put a key   in our app constants okay so here we would do a  new variable we'll call it static const string   it's a cart list okay and here we do cart list uh let's see okay all right  now we'd come to cartwrap   and here we just simply replace it at constants dot to the cart list okay and here we are printing this one as well okay all right now we'll go ahead and make the  opposite method opposite of this one over here   we are taking the object and then converting  it to json and then we are putting in this   list of string so over here we would write a  method and the method would return something   the method would return a  list of object and list of   cart object which is a cart model okay  now here we'll call it get cart list   okay so and it will return here as something cart  list okay now for this one uh first we'll go ahead   and create a list and the list type would be cart  model okay and here we'll call it cart list and   we'll initialize it to empty array or empty  list actually and here we'd return cart list   okay all right and now the error is gone of course   you can't return really like this  because you'll get nothing okay so let's hit enter and we don't need that much  space here okay cool now first thing we need   to do here we do have a key right this is the  key so from the key we need to get the value   okay so first we'll check if this key exists  or not okay so here we do shared preference   contains okay now contents k is this one we are  checking if the key exists okay so we need to   wrap it around if statement we do if if it exists  then do something well if it exists then get it   okay get it and save somewhere so here we'll get  it so how to get it well that's pretty easy we do   shared preference get string list and over here  we would do this key over here so now with this   we'll be able to get it but if you get it you  need to save it somewhere okay now here we get string remember here we saved a string so if we  retrieve it we'll get them as a string now we get   the string and save it in this carts which is also  a list of string now here you need to add null   checker to confirm that it's not null so what's  happening here first we check if this key exists   if it does then we retrieve every information  which is in string form and save it to the   cards okay but this method wants you to  return something as a list of cart model   or list of card objects so now we have our  information over here but these are all saved as   string now we need to convert it to an object  okay an object of list then we are returning   well for this reason now first what we  will do we will use this cards over here   which is local variable remember this is  local variable not the global one okay   so here we do for each lobe this is a list  of strings so we can use for h and here we'll simply look through it and add to it okay so that's why  we are looking through it using forage and then   we'll add to it so we do add so there is a method  called add now over here we are getting string   from here so there are strings here and each of  the string the items are saved in accessed in   elements like this once again let me  make an example uh here list object list okay so that it's visible so here object one object two object three i like that okay so each element  it's more like a loop that it's going through   so each time it iterates over and it refers  to a new one okay so pull it make sense just   like this and then we'll convert it to an object  while before uh then how can we sorry how can we   convert it to an object now here cart model have  a method if you remember that's called from json   here from json actually if you click  on this and say this method it takes   map and if it has map then then it can convert it  to an object cart model object okay so now here   the elements over here well they're all  string so they are not yet mapped so in   flutter we have a method which is called json  decode okay this one so and within it you can   apply or provide your string and that's what  it will do and after this it would become a   json i mean x or actual map and from json takes  map okay now this would work well here we wrote   it like this but a lot of time you'll see  they write it like this cards dot forage okay and over here you'll see  they're returning like this cart   model dot from json okay json decode and element okay all right so this two  are exactly same so i'll remove that   just shorthand way of writing this thing okay it's  a fancy way of writing i would say but they're the   same thing okay and even earlier we had this thing  so here we could do the same so i'll write the new   version of it so it's a cart list for h okay and  here you just do add actually and then json encode and then we are sending the element okay all right so this is the shorthand version once  again this is the fancy way of doing things so i'll remove that okay now they look all similar  anyway so now with this we are able to add items   in the local storage and retrieve item from the  local storage okay okay now we'll go ahead and   try to print this out well let's go ahead and  print over here and i'll restart my app so that   we start from the scratch okay all right so uh  i'll minimize it a little bit so here i'll add   the two items and here we see it  immediately reflected and so this is item   and over here we add more and we see immediately  more and more items as you can see from here   okay now of course we are printing this one  uh now what we do we'll go ahead and just try   to call this one okay and try to print from here  as well now here i'll do a method uh print print   statement i will do inside get card list and then  i'll get carts and i'll convert it to string okay   and from here simply we'll just go ahead and  call get card list okay now i'll restart our app   okay uh well i think we should restart from  the scratch then we'll get better result so here i am now i'm adding it to it  added three and we do have an issue   now definitely it does print the information and  after that we do have this error over here now if   you see come over here so the problem is over  here it's saying reporting and from jason cart   model okay so now this uh this from jason this  problem is happening so let's go to cart model   okay so it does when you give it to json object  or json it creates an object okay that's okay fine   but now over here if you come to two json which  we added early over here uh because of this one   when we are doing this one so json in code needed  a method inside this cart model which is this one   but over here actually we are not using two json  for our product model okay so it was half and we   set it at that time we said that we'll deal  with this one so we need to add this one so   because originally in the object we have  this product model as well but when we just   convert it to json object we are not converting  this product model to json object so encoding   and decoding the whole thing over here gets  messed up okay so over here we need to add a new   uh section where we want to convert the product  itself to json okay now we need to go to our   product model over here first and here we do see  that we don't have any method related to this one   okay so first we want to have a method the method  will convert the object into a map or json okay   once again uh on the dark side json is pretty  much more like map so we'll declare it dynamic   uh sorry okay all right now over here we will  call it two json method okay and here we'll   return stuff okay now with this our error should  be gone now here's simply what you want to do   uh let's see so we can copy part of the theme from  here okay and uh let's see come to this section   now over here of course some of the fields  might not match so let's see for product   itself we don't have any quantity so that's  why we get this error now instead of quantity   let's see we do have img then we can get location  so here we put location and that location as well   okay and well i think we can just simply go ahead  and copy this section and put it right there   and change manually so here we do have created  at so created at the fields are correct so all   we need to do we need to wrap them around a  double quotation okay and over here this one   and just get rid of this that's that  okay all right so over here same thing yes i do understand it's a lot of  coding but that's how you become   efficient and professional there is no shortcut  you have to practice practice after practice so here let's get rid of this section they start  and okay uh let's see now created at it should be   capital a and updated at okay and id all right  now with this we are good so all we need to do   from our cart model we need to call this one  okay and then we'd be good to go all right so   now let's come over here to cart model and over  here we do product okay and this dot product to jason okay all right and uh let's see   so it wants a null checker okay so now  we are pretty similar what we have here   and uh with this section so whatever we are doing  we are from json we are converting it to an object   and now from here from an object we are converting  it to json and the same thing is happening to   product itself over here okay hopefully make sense  now we'll go ahead and restart it one more time   okay and now we'll go ahead and add stuff to  it and if we are here in the repo now let's see   okay now this time we don't have any error okay  because this conversion and the conversion it's   working pretty well as we expected okay just  to clarify one thing again so if you have   object so if you want to convert an object to  json first you need to use json in code okay and   then you'd be able to convert it to something like  json or string okay because they're pretty similar   and close but if it's really an object  it's better in your model you have this   to json method okay you can call it whatever you  want but there should be a method inside okay   and that helps it okay and the other part is  if you want if you if you have a string or a   map so first you need to wrap that  string or map using json decode okay   and then once again call from json  method okay and this way you will have uh like let's say from string to object okay and  from object to string the opposite so it's quite   important so uh if you want to work with flutter  and dart a lot of time these two method from json   and to json they're very useful and json encode  and json decode okay they're quite useful and you   should know how to properly use them so in general  um if you get data from server or from a storage   you should always use dot from json well the model  name could be anything okay all right so in the   inside the quotation in general you'll expect a  map or json okay things like that because server   or storage in general uh if you retrieve data  from server or from local storage they do give   you either string or json format so whatever you  get first you wrap it around json decode and then   call this method so this is something that you  should know even if you don't understand you   should try to remember and it'll really help you  a lot in the long run and this idea converting   from json to object and using json decode it's not  only in the dart any kind of server side language   of course dart is also server side language  it is useful pretty much everywhere the idea   and the same goes over here because in general  when you want to send data to server or save   data to a storage in general you do either  using string format or json object okay   now of course a server might send you object so  in that case you have to decode it or if you're   if it does send you json still try to encode  it first okay and then save it so this is the   basic principle anyway so now after doing  this you might still ask that what the hell   is going on here i mean we did this both and  what's the point okay why we are doing this   all right now so here is the thing uh  let me tell you that why the big picture   now this is our app over here now over here we  have total three items i think i already added it   in the list okay yes i think i did and now if we  come over here if you open it's still there right   it doesn't really matter but now let's imagine  a scenario where the user might kill that   for some reason so let's kill the  app okay now sorry not this one   over here this one okay so after killing the  app uh now user opens that it's gone okay   so these two methods actually the  pre-work of retrieving and saving data   to local storage and from local storage okay but  of course we we still need to write another bit   of code to work it exactly with this okay so  now here after adding when you kill the app   the data is totally gone but we want to save  the data locally in the phone okay because   yet until now everything is uh saved  over here in the cart controller   uh this item map but this is a memory when  the app is killed the memory is gone so you   don't say it but you might ask why we did this  thing yes it's all now it's in the local storage   okay now we can save in the local storage but  retrieving the local storage that's true but   there is another half of the work that we need  to do okay because right now we do get thing from   our local storage but this is not the way we  want to show it to the ui we still need some   processing okay now over here uh the app that  i was i'm working on like this one so if you   kill it say you kill this app and this app that i  already built over here now if you come over here so it's a restarting okay now if you come over  here uh well let me add some item to it okay   now we see that it's here okay now  let's check out okay we checked out   now here we do have this item right okay now  uh let's go ahead and kill the app okay now   let's open it up so we see our item is still there  after killing okay so this is the result we want   to achieve uh we have done half of the work so  we still need to work anyway let's continue well   now we'll call this method from car controller  and we'll come to our card controller over here   and we'll create a new method now this method  will call it get card data okay so get part data but this should return a list of  part items so here we'll call it   the type would be cart model okay now of course  we need to return something otherwise we'll get   an error okay so for returning something first  let us set us an array uh sorry a map over here   uh i'm sorry again not a map a list okay so here  this list and here we'll call it cart model okay   and we'll call it storage items items and we'll  set it to null sorry empty array empty map now   only for storage and shared preferences okay so this is the only purpose why we use  this one okay now here we want to return storage items this one storage items okay  now the header should be gone but of course   before we go ahead and return we have  to put some items in it right and   what is this as well so it's a bit  confusing let me create another method here   and but that would be a very different method here  as you see we have kind of method like total items   or total amount or get items now these gets  us a certain property okay so when you call   this you get a property or field only one  field right like here you just get this one   here you just get this one okay it's more  like a function returning function but it does   just do one interesting thing and it has a keyword  which is called get so anyway you see get that   means that that function or properly should return  you something okay the only difference is that   with normal function like this one it doesn't  have this curly braces and it doesn't take any   uh parameter over here okay so this is the only  difference and it's a shorthand coding i think   anyway now there is a opposite one that's called  site so here we'll use us use the set keyword   and create a method okay so the method type is  set just like this one this is get so that means   it'll set something but of course we need to give  it a name it says set cart so it'll set the cart   well now because this is set it is a natural  property or the natural way of doing things   it accepts something okay so what it will accept  here in our case it will accept a list of card   model okay that's what it would  accept it would accept and set   okay so with get you have to return something  and with set you have to accept something   okay in your parameters so this is the  difference but with this kind of method there   is no hard-coded rules with getting set there  are hard-coded rules like in the function you   may return something you may not return you may  accept something you may not accept anything okay   so but with the set and get things are pretty  much hard-coded and they are also convenient so now here we'll accept something and set something so here we want to set like this  so we do storage items equal items okay now   earlier we have this storage item over  here and it takes a list of cart model   and we have a list of card model and we set to  it okay now from here we need to call set card   not really calling actually assigning  value so once again it's more like a   variable which is like this one remember  that earlier we just use this kind of like if you use this you can just print  things like that which you do with a variable for example let me give you an example  so you can just go ahead and simply call the print   total total items right we did it before but of  course with the function you can't do like this   so with set you what do you do  you would pretty much do like this say in this case we'll set it to a list so here  we do like this list of something okay like that   so now here we exactly will do the same thing  so here we want to set something so here we do   set card now set to what now set to  this one over here get card list okay   so in our cart controller we already have a curved  apple the object so we can call carter apple   and then we'll do this one okay get cart list now  get cart list over here returns a list of cart   model and that one we set it to set card and set  cart sets the items it receives to a new map ah   sorry a new list okay all right so that's all it  does so now so until now we built this add to cart   and get cart list now we can use get card list of  course get card list comes after adding item right   so first we added then we can get if you can get  we can call it from a card controller and if we   can call it we can also use the values to set okay  all right now before we finish over here this one   once again this one gets called over here  and set value right we need to do one more   thing over here okay now we need to make  some changes uh no not changes we need to   build this one now here we'll set it here we do  items okay uh and we want to put stuff inside it   and we do items put if absent things like that  okay we this similar thing we have done before   and we are going to do again and i'll tell you  why very soon but now this is a list storage item   right so we can do a for loop so do int i equals  zero and length so it gives us the length of this   list and then we do i plus plus and i'll create  the slope and now we'll go inside this slope   now inside the loop we'll call items okay  items put if absent now it does take a key   now where is this key coming from well just  like before we worked at item if you don't know   so the key over here it comes from the object  okay the object is being sent from here so we   use that id and put inside it right so here  we're gonna do the same thing but here where   is this object coming from this object is this  one from this list right this list or this one   contains a list of cart model objects so here we  do storage items and we'll index through it and   we'll get a property which is called product and  product has id okay that's all now you might need   to use null checker to say that this is not going  to be null let's see actually here i think here and we already have a null okay it wants both for product and id but in  the old version of sdk you might not need that   now here we need to return something well now  here you return an object if you see early okay   but we already have this object so we don't need  to create it so all we need to do we need to   retrieve the object from this list  so here we would do storage and i   and that's all okay and let's see  i think we need yes this one okay   so let me walk you through this one  more time that what's happening here well here we are setting it to this  items map because map of course takes key   and an object because this is  our map right so key and object so now we have a list well the list itself has  a lot of objects and it doesn't have keys but   we can get the key inside uh the objects okay so  we look through it one by one using for loop and   index through it and at the same time we set the  id as well as the object okay and that's all right   so now here we first put it in the storage and  then we update okay now you might ask well now   this update isn't it going to conflict with  this one no well first thing it always checks   whether it's going to update or create a new  one it only puts inside if it's not there   okay if it's there it tries to update  it okay but for updating we also have   a lot of conditions but that's not the main reason  that why it's not going to conflict because this   one will only get cold when we start up the app  or user kills the app and then restarts the app   then we'll call this one okay so when your app  starts for the first time definitely this is empty   so you can put information from our storage  okay so this is our storage once again this   is coming from here and here is here  and this one is our storage object right   so this method will only call first time when  we launch our app at that time we'll see if we   have information in our storage or not from this  method okay well if it is then we'll put it there   and if we can put it there then we can get  more information and show it to the user that   they have done something previously they  have some record of their um usage of the app   okay if there is nothing that will not show  anything okay so that's what it this set   property or this set setter actually this is  called a setter in java you have this thing if   you work with java it's called setter and getter  okay now in dart it's pretty much the similar okay so hopefully it makes sense now of  course we can go ahead and call this one okay so here we could do things like this uh   get dot find here we'll find the  card controller okay and we can call get cart data let's then restart our  app so i'll restore it one more time   and let's see okay so app's been restarted and   okay while here we do have a message where it  says that the length of card item zero which we   put over here uh where it was let's see i  think it's over here and said get car data okay   now here we do have a log but it is not supposed  to zero so i think uh we are messing up somewhere   uh let's see so over here okay this is  the problem here i need to add this one inside this cart list okay  and which i forgot to add okay now it should work but we have  to restart our app one more time   to get it going okay now here we see that uh the  item is one all right so once you restart your app   uh the storage is still there and we know  that we have items so let's add more items   okay so over here now we have this amount  of items okay now let's go ahead and check okay all right now let's come over here  you see that our itunes are still here   even though you restarted the app okay so  that's how it works so because of this one   even though you restart your app mr means  installation so it still works okay now without   this one if you don't have this mechanism it just  won't work okay let's see let's restart it now   and you'll see uh right now if you go ahead  and check nothing is there okay it's empty but   because of this one you go ahead and check  you'll see that you have a lot of information   okay so the information oops let's see okay from  here actually okay so yeah so it's still here   okay now it all happened because of this one all  right if you don't have this the information would   be gone okay so of course uh this is still not  done so next step what we'll do actually we want   to show over here but we'll only show over here  if the user confirms the checkout button okay   and then what we'll do we'll remove the items from  here but we'll show them over here as a history   okay so over here even until now we are just  mocking the data that user has checked out but   of course not before we check out we have  to do user registration and things a lot   of stuff like that okay but this is one of the  toughest problem i would say that we overcame   because this car controller is bit complex  okay the way it works a lot of information   but hopefully it makes sense so i would suggest  you pause the video and go through it and think   about it what's happening if you just keep  following with me you might get tired okay   take a breath because this is a long video so  with this we are almost done with our storage   but uh we still need to go ahead and build this ui  and show the information and then we'll clear out   information from here okay hopefully it makes  sense once again to confirm that if we click on   this checkout button this information should be  gone but they should also be saved okay well for   now if we restart our app somehow if the user  restarts the information that we added early   is still there in our cart right so this is what  we have achieved so far and this is something   that you should have in your card controller  so the next step is that we will mock this   uh idea or information once we click on this  this should be gone and then this data should   be showed up over here okay over here all right  so being said that that means that once we click   on this button we have to save the same data  that the one we have so in our case the set sto   shared preferences is helping us to store data in  two phases first one before checking out and the   second one is after checking out okay all right so  that also means that we have to go ahead and make   a new method to capture this data so once we click  on this button we'll be able to capture this data   and here we'll clear them out okay all right well  to do that we need to come over here to our cart   repo and over here i'll create a new method and  i will call it void type and add to cart history   list okay so this is a method now basically  what it would do it would take information from   this global cart over here okay and then just  store it separately that's all it would do   okay so for now we'll do a for loop  and we'll go through it into i equals 0   and i less than cart which is the global one  and we would do length and i plus plus so   we'll go through it and then we have to declare  and the global variable so we do it list string we'll call it card history so this variable  information is persistent up to this page   and this variable variable information  would be persistent up to here   until the user log out so it would be still  there let's go ahead now all we need to do we   need to add the data to this new list that one we  declared okay all right so here we do cart history dot add while every list has add method so we  are going to use that one okay and over here   we'll do cart i so we are going through  it and that's all we are adding to it   okay all right and now over here we do shared  preference set string list so here we'll set   up a new key we'll call it cart history  list okay and the value should be this one okay but once again we should define this one in  our app constant file so we'll go ahead over there   and here is our app constant file and right  below it uh i'll do a copy and here i'll do   cart history list okay and here i'll just simply  put this one okay now we'll come back to cart repo   so we'll just simply replace it  okay so here we do app constants   card history list okay now first thing we want to  do just go ahead and try to call this method from   here okay before when we do removing of this  stuff so now let's go ahead and find this file   so this is our cart page so over  here i'll close this one we don't   need home page we also don't need this one  we don't need main function we don't need   products model and this one as well okay  so we'll simply come over here at cart page now it should be at the bottom so  this one okay and we already have here   so you can first go ahead and print it well no  we don't want to print it we just simply want to   call this function the one we created  okay now we need to call it from here   so over here we need to define a new function  so similarly here we would create a new function   and we'll call it add to history okay  and simply we'll do cartriple dot add to   history okay now first thing for debugging purpose  we want to go through it and we want to see   what it prints okay so history list over here i'll  do cart i and we are good okay so let's save it uh i think we don't need this section anymore  let's find it and delete this print log okay so we   see it's over here in popular product controller  so we'll just comment it out for now all right   so i'm on android studio and i did ctrl shift  and f so i can find certain keyword globally   okay ctrl shift and f anyway so now it's gone and  we can also remove this one we don't need this   so on android studio on mac control shift f so  let's find this one uh i think we don't need   this section okay so this is also over here so  just comment this out uh yeah we are good so now if we come to cart page over here now  from here we can simply call this method   okay add to history list now let's take a look at  our cart page okay it's already wrapped around get   builder card controller and it has an instance of  this controller which is called a card controller   so we'll just come over here put  it there and then we'll call um add to history okay all right  so hopefully we want to see   the printed information okay let's  resave it now click on this all right here let's see whether we printed information   or not uh let's come over here one more time make  sure that we are being tapped so here we type tapped okay let's receive it and now here click  on this so we do see that we are being tapped   but now over here let's see what's going on  uh okay this one uh most probably because uh   we need to restart app as well as remove  everything and add it and then we'll see okay   now if you want to remove everything from  a certain shared preference instance then   here you could just simply call this one let's  see so this is just for debugging purpose we can just simply go ahead and call over here  shared preference dot remove and the key so app   constraints key cardless so this is what we want  to remove okay before we go ahead and add anything   uh we'll just remove this one only debugging  purpose and this time okay so but of course   we need to come to home page and try to add  some items to the cart like this one okay now   let's confirm to it okay so that means it will  remove all the old information okay so all right okay and it did it should cut list and now let's  uh click on this one okay being tapped yes we see   so here these are the latest information that  we get so that means that we are successfully   able to print information from card  repo from here okay so all right so now   if we can add to this one that means that we  can remove this information right after adding   because we don't need them anymore okay all  right they only stay until you click the button   okay all right so here we have  to do things like this let's see come over here and here we'll call a method   which is called clear create a method actually  it doesn't exist yet so here we do void clear and the first thing you want to  do you want to set this one to   empty list okay so here you just simply do   like this and it would set it to an empty map  sorry not a list and after that we also need to   uh remove information from here okay now one  thing we could do now we know that it will add   information okay so right after that over here uh  we'll create a method and over here we'll call it   a remove card okay remove card now  the body is over here void remove card okay now here we'll just simply do the  one we had earlier for debugging purpose   this one okay so we'll cut this one  and we'll put it there okay that's all   so now when this gets cold and after adding  this we'll simply remove this one okay   and over here let's do call update method to  let the ui know that these things are gone   and do a redraw of the screen so  don't show them anymore all right   okay now let's save uh now here let's see and if  we can tap on this and if they're gone or not okay   yes so that means that data that's gone from here  but should be saved in this string key okay and   that's all but we can prove that it's it's still  there so we'll create another method and while   that method we are going to create not just to  prove that it exists because we will also need to   be able to use them later because i said that over  here we need to show that data okay but before we   show we need to create another method okay before  we go ahead and create another method let's   make sure that what we are trying to do and it's  logical okay so the data is here now you come here   the data is here all right now let's restart our  app and we'd expect that this data the one we   added it should be here okay yes it's still here  okay and that also means that this data should   also be there of course we can't view it right  but that means that so far this logic is working   okay now of course if we click on this one  this should be gone and add it to this one okay   uh add it to yeah this one all right and we can  prove that that the earlier data is still here   okay uh let's go ahead and prove it well we can  actually go ahead and create a new method okay   so we'll call it get history list so uh  we'll create the method right below it   so over here uh it would return part model because  it's returning the history so returning the object   and here we do get part history story list okay so all it do it'll  take this information from here   and return from here okay so here once again we do  shared preference shared preference dot contains   key so we are checking if this exists okay  all right so i'll copy it here and put it here   well if it exists then do something so if  it exists here over here this car history   okay now first set it to empty list and then  cart history should be shared preference dot   get string list okay now over here we get it all right okay and let's see here it wants to put a null  operator okay and now right here we'll return now the problem is we can't really return card  history because card history has dynamic uh sorry   card history is a list of string but here we  want to return cart model so that's the problem so what do we need to do we need to convert this  information whatever inside here into list of   objects the one we previously did for this method  actually okay so the idea is pretty much same okay   so actually almost same so this is the same thing  we need to do over here because we want to return   a list of cart model objects so we need to decode  this one okay once we decode that would turn into   map uh sorry that it turned into map or  well map is more like json and from json   we can create object and add to it right  so that's why first here we do like this   we'll create a new variable over here  and we'll call it list cart model i'm sorry okay and here we'll call it cart list history okay now here we'll return this one but of  course you just can't return an empty list   you need to convert them to real object so  here we'll take this one whatever inside this   and we'll do a forage loop okay and  inside the forage we'll get each element   and then we'll add to this history okay all  right and then we do add just like this one   we did exactly the same thing okay so now over  here we do cart model okay from jason but before   we give it to json we need to encode it because  we are getting string so over here we do json sorry we need to decode it json  decode and here we have this   element okay this one and we are good to go so this one is exactly same as this one okay  just a little longer that's all so this is same   as actually this method but once again because we  have two steps of keeping information on the app   so that's why we're repeating that and we are  putting them in a different list okay all right so now we want to prove that the thing exists  so over here we'll copy this one and for now   right after adding over here we'll call  this method this one and it returns list   of objects so we can get the length right so  over here would just simply do print the length   of history list is here we do  this one that length dot to string okay yeah that's all so now let's save  it go ahead and restart our whole app to   verify what's going on and we need to add  another few another two lines over here   uh you see that we are adding a string to our  cart list and this string key over here right   and we are adding this one but we are also missing  another thing if we previously had any information   over here we also need to keep that one and then  save this new one right so over here we do a check   if shared preference dot  contains now if this key contains   let's see if it contains or not if it does uh  let's see over here we need to put app constraints constants if it does then do something so what do you do so  here we do cart history equal shared preference   uh get a string list and the key is coming  from here okay then we need null checker sorry if the key exists there that means that it is not  null okay all right so and then we can go ahead   and add things to the cart uh from the cart the  one is uh temporarily saved here okay and another   thing we should also do i think uh set this  global card to be an empty array okay so this one so here and make sure that we're safe now over  here as you see previously uh well just now   we added one over here okay uh okay let's  forget what happened and now let's restart   and over here it says that we already have one  okay and now i'm going to confirm the checkout   and let's see what happens so this time we'll  go step by step so let's confirm the checkout   tab okay the history length is three so  that's most probably the previous data   was there now once again we do more tests so  that it becomes bug free first time over here   for just for debugging we'll remove few  information actually we do it over here okay before we add we'll remove  some information so remove this one this way we'll make sure that we  don't have any bug and i'll copy this one and do part history list so first  time now we'll remove all of them   and start everything from the scratch this  oil will know actually what's going on   because there is too much information  to wrap our head around so let's restart so now if we come over here uh you add it  okay now add to the cart all right now uh   after adding this time everything has  been removed okay now let's comment it out okay all right so one item is there and we see  this item and this time history should be empty   and once you click on this there should be one  in the history right and this should be gone   let's go ahead and verify it okay now history  length is one okay and this is gone all right   now we can add more stuff we'll add  two over here okay and more from here   so here we added two items but the quantity is  five but for now we don't care about the quantity   all right so previously in the history we had  one right so now we are adding two more items   so total history should be three and this should  be gone right all right so history length is   three okay now do more tests and make sure  that we don't have any bugs uh over here   you add it and put it there but this time we'll  just restart the app okay and uh being said that   so after restarting it we'd be able to see  that this this information is still here   and when i come to check out if i do check out  previously you had a three and including this   one we will be able to see four from here right  and this should be gone so now let's restart it okay now we come here and we see yes we have  one after restarting our information is still   there do you remember restarting doesn't  mean reinstall so don't get confused now   previously in the history we have three items  okay so if i add this one that would be four but i   don't want to add now i want to add more from here  okay all right so total it should be five right   let's add more information okay now total amount  should be five in the history let's confirm it's   five yes okay so this part is pretty pretty much  working and i know it's been long hours about the   card yeah card is a bit annoying it has a lot  of information and actually there is more to go   now with this uh over here we are pretty much  done one more last thing to do but the thing to do   we'll do that later so now based on this history  list this information over here this one would   be able to show information over here right so  before we go ahead and show information over here   let's take a look at how you want the information  to be displayed here and some basic algorithm   that how we are going to realize this now if you  look at it this is my uh app that we are building   and this is where i have already done it but i  need to share with you that how it should work   as you can see over here we'll have will  display the history based on first based   on time okay so this time is different than this  time and this time is well also different than   this even though they look same because they  have difference in the seconds but of course   we are not displaying the seconds so first we'll  separate the items in the history list over here   based on time okay so we have to do that and  then we'll put this items together based on time   so it's one order and in this order we had three  items so we see three items and we have a button   where we can click one more but for now this  button doesn't work we'll make it work later   now over here we just had one item so we see  one item and over here we see three items   but here total four items we are just displaying  three but we have four okay so because this if   we want to display four of them it be gone  okay so this is how we want to display so   here in each row we'll just display three  three images but the items could be a lot more   per per order there could be more and more  items so that's what we want to do so here   we know that now get card history list will  give us the list of items and the orders okay   uh we know that and we will have to separate them  based on time but now there is a problem though   uh while in history list over here whether  it's add to cart list or get card list   we don't have a time but of course if  we go ahead and see card controller   in card controller for each of  the item in order we do have a   time but that also means that this time like  for example if we take this one as an order   and it is a three items so those three times would  be different right because the user may be just   browsing the page one minute later they added this  one with this and another one minute later they   added this one so here the time is quite different  right so we can't really depend on this time   okay because for each order three items they might  have different time and if they have different   time we can't display it like this it would create  a problem so we need to find a way to display   and show i mean to have the same time for each  items in one order okay so we need to do it but   for now based on this we can't but uh if we  come to our cart repo and over here let's see okay so over here this one when we add  to cart list we can make a bit of change   before we add to cart list over here this one we  can edit time okay now this time would be very   different than this time okay all right why you  see that each time we update something in our cart   we send the whole items items we are doing  for this certain order if we don't know what   i'm telling let's go ahead and come over here and  let's create a new item over here so now here uh   for now this items over here is empty this  item i mean this one okay so if i click on this   well it'll put items into this right we know it and we'll see okay so now this has one  time over here but what if you want to add   more items okay another four okay so but at the  same time we also know that this is also being   added here right because we see this add to cart  we send everything and after sending everything   we add things to this one using this forage  loop so this is the perfect place where   we reassign this time okay because this one gets  called for all these items over here okay that   also means that this one is valid per item do  you remember earlier we saw once you click this   this one just gone meaning that we set card  to zero right so this is also valid per order   and it only exists until we check this  one but anyway so once you come over here   it always gets cold so there's all these items  over here they get updated and their time   so over here instead of writing like this we can  do the other form okay this one because we need   to do some stuff and that function is only valid  if you want to return one line but here we need to   do some stuff before we return so what do  you want to do so here we need to add time   to our element over here so we do element dot time  as you see we can access time but what time now   once again over here when you  get called this add to cart list   this loops through all of these items remember  this one okay so it takes everything from here   it takes everything from here from based on this  get items right so it takes everything from there   from itunes and loops through it okay so what  we'll do first over here we'll declare a time   okay and we do var time okay now for now  here just to do something empty otherwise   it gets cranky so now over here we'll  get we do that date time okay now   and that's all now this one is coming  from a package i guess let's see oh it's not it's coming from dart core package  okay and we need to convert it to string   because here we'll use a string so now   here we do time so because we remember each of the  element in this list is a cart object a cart model   and we can access individual property or fields  so we did so now once it comes over here after   doing everything once it comes to this one  which means this one over here this time field   get reset and all of them will have one time okay  yes that's how it will work and it works okay   let's go ahead and save it and after saving we'll  uncomment this one because uh we want to reset   this one for all the objects in this cart list so  let's save it and make a tiny change let's see now   as when it touch this on any of them this  should get cold uh from here okay due to update   and then uh what we'll do we'll uncomment this  one again and we'll see that how it works okay   so let's remove this all right now we need to  uncomment it otherwise it will get cold again   okay now let's save it okay now let's check the time for each item  so this is 15 41 and here this is 1541 even   though we added them different time but we see the  time is same and we can confirm once again okay   so uh because we didn't check out so that means  that we can go ahead and add more stuff okay so   let's start from here okay and uh let's confirm to  this one okay now we'll see if we come over here   we'll see that each of them each three of them  they're having the same time okay so here 16 22   16 22 even the milliseconds they are same  which is over here or microseconds i would say   and um yeah uh which are we missing anything else not really oh yeah 16 22 yeah like that 16  22 yeah we do have three items 16 22. all   right so that means this is how we can per order  reset the time because it doesn't really matter   so even though user might have added this one one  minute ago this was two minutes after and this is   three minutes after but it doesn't really  matter okay because we want to save as save   same time for all of this per order so now  this is uh working pretty well okay so this   is another concept that we got cleared and i think  we don't need this one here we can just restart it so now with this we know that how the time should  work and per order they will have unique time okay   now let's check out over here okay and it's  gone while the length of history is a three   okay now let's uh go to main over here this  one let's check on this one we come over here   it calls the get cart list and we come to set  cart and let's find our set card reset card   which is over here okay all right uh what do we  want to do we want to print this one over here get history card list okay so over here we will  see if we can uh print this one or the time so i think we can all we need to  do find the right place add to it   history card this one okay uh after  printing actually oh yes we already have it   okay yeah so this is where  it's coming from and as well as we can print uh one more information the time   for the order is over here we do  get cart history list okay and over here say get the first element and then  you can do time from it then to string okay   and we'll we'll we'll change it like this or  actually we can do it in a for loop just for   debugging purpose so here we do i and equal  zero and i is less than get card history list   dot length okay and i plus plus so over here  we'll have this message and instead of doing   o we can do i so once again this  is for debugging purpose and we'll   remove them later but anyway right now we know  in the history list we have three items so add   more items okay now we'll come over here and  add more stuff this one uh add two two items   or just to go ahead and check out and let's  see the time okay now here let's check out   okay yes so the length is four and let's see we  do get up to length 4. all right sorry about that   for loop does work but instead of i you need  to use j because i forgot that i was adding   i another variable but so  they do have the same name   so the second i over here was being overshadowed  by this one so that's why this loop was not   running but anyway as you can see from here i  already added another item so we have six items   so do remember just now for the first three items  we had the same time this is the second item   or second order actually so this is the first  order this is the second order and this is the   i guess third order and fifth order okay  so now we can add more stuff and one more   time and confirm that it works okay now i'll  add four items this time over here from here from here and let's find here okay now  over here i'll come over here   now after clicking on this i would expect this  last four will have the same time 24 right yeah   okay there we go so 24 24 24 and these are the  earlier and total we have 10. so we know that   in history list we have time like this right  and that's what we are going to use in our   leverage to show items over here okay now go  ahead and take a look at our algorithm so just   now we know that history list has order it  will have different orders and each order   will have many items but items could be different  but they have the same time right so that's what   we just confirmed over here so we'll have many  different orders so but uh in each order we'll   have different item with the same time  okay like this order one just like this   order one and they have the or i would say first  order actually uh they have the same same time   this is the second order different time third  order different time fourth order different time   and this is the last order different  time so that's how it works   so get history list gets me things like  this now based on that we'll make a map   this what this map will do it will try to find  for example in the first order and the time it   will take okay and that's it'll also take the  second order and the time it will save for us   and for the third order it'll also take the time  okay all right so we'll shrink this down to a map   this list but based on order and time okay so  because even this is one order but they have   one time okay we'll save it in a map and also  we'll do based on this map we'll also find for   example first order how many times well we do  have one time but it was repeated three times so   save it okay and then we'll go to the second one  and we'll see okay well second order has been   has only one item and the time has  also just been repeated only once   and we'll come over here in our history  list we'll continue and we'll check more   and we'll see oh well over here this order even  though the time is one but it's the same time   has been repeated three times and why we are doing  like that because based on this we know that how   many items has been added in the same order okay  so this is the same order and same order has a   same time but that's been repeated three  times so that means that this order has   item quantity all right or it has been item it  has three items it has one item it has uh three   items so based on the number of times the same  time has been repeated we know how many items   in certain order okay so we need to know this  because if you don't if you don't know this we   won't be able to draw this thing okay yes i know  this sounds a bit complications but do remember   it's actually coming based  on this one so over here   uh because time is the only unique factor others  might not be unique okay so we can easily get   access to time and based on time we'll separate  them and we'll see if we have in the same order   if we have three items sorry three times that  means three items okay so over here we have four items and we do have the time has been  repeated four times so that means four items   okay all right now how it should work and how  we go ahead and build this one we'll do a little   practice over here and then after practicing we'll  exactly copy the same code to our flutter over   here and we can use that okay now we do a copy  first over here now if we come and look over here   from ui actually i want to call this one because  they'll give me a list right so this is what we   want to call okay now for now we'll create some  dummy data over here and here we'll call it   this one and this will have some dummy data   now the data actually would be coming from  here we already produced the data and we'll   just simply go ahead and copy one of them and  that's good enough for us okay so most will copy   let's see yeah up to this point okay even  definitely we don't need all of them just some   fields just to mimic that what's going on so for  now i'll skip this uh everything else over here   i'll just keep the time let's see this one  we also don't need quantity anything like   that because the time is the unique factor  okay and all right wrap this okay now here we'll just go ahead and repeat them because we are going to see once we have  this one how do you process the data   and show this thing over here we need to  do a lot of dart coding for this okay so sorry about that okay i will make some  tiny changes and only change you do   in the order of time okay so maybe this is this  was added on the sixth day this is all i did   on the seventh day seventh day seventh day all  right so the time is the unique factor over here all right okay now this is a list but this is  a list which has uh a certain property i mean   interesting property so it's a map of list okay so  this is a map before we saw how map works and now   map over here we do have a key our keys they're  all string okay so over here we'll do string   and now the time we focus on time  so our time is also string okay   all right so we created uh let's  see line three uh we need one more   this okay now the arrow should be gone okay  line four it's uh yelling at us and for int   okay well now the value over here for  int uh even though it's uh uh the the key is a string over here this one and  this one but looks like the value is   sometimes end sometimes string okay  so we'll make it dynamic over here okay and now all these errors should be  gone now this is a list of maps before   we learn that maps are wrapped around curly  braces okay now interesting point about this   is we can actually pinpoint the time from this  list okay uh we can also do a for loop over here   if we want in i equals zero i less than uh get  well it's a long name so i'll just copy this one   dot length okay and i plus plus and  now over here we can do print now   we'll do this one and we'll access certain  each of them in a loop based on this i   iterator now we can print certain properties  of it if we want so now let's go ahead   and run it okay so you can access the  time as you can see from here okay um   let's see oh yeah the different time is over  here we are doing based on month it doesn't   really matter so so this is one thing we could  do we can of course access id okay if we want   but for now we are just accessing the time okay  so uh because over here it's a list of maps   so we can access certain field within it okay  but this is just for demonstration purpose we   don't need this thing now okay earlier i said  that based on this data whatever we get from   storage local storage we want to make a map  okay do remember so this part is exactly   this one okay the same idea now based  on this data we want to make a map okay   so for this reason uh well we don't need this part  so over here now this is the code that we're going   to write we'll just copy directly later on to our  flutter app okay so but here we get a better idea   how things work because i have the data that  i can see if i come over here my i have to   look at this printed data and which is not very  convenient anyway so here we'll create a new map   and if you see from here the map nam i  can call it cart items per order okay   so here i would create a new map here i would  do map now in this map what i'll have um   if you see i'll have order and a time okay  well for well now here is our qtb string   okay and now the time is a string as well okay  that could be one thing or i can save from here   as i said early based on this we're going to  make a map so in this map we'll save time okay   and how many times this time has been repeated  that one so that one would be saved as end okay   and now we'll call it cart let's see what is the  name cart items part order card items per order so we created a map like this okay now we'll go through this for loop   and we'll save items in this map okay so here we  do four and i equals zero i less than this one dot length l okay and i plus plus now over here  we do a check because this is an   empty map right now so we'll put stuff inside  it once again we'll put the time as a string   in this certain time how many times repeated  like three times so we have to do that the map   in this map we want to save our information  so here contains key yes this is the right one   okay if this one has key okay now  what key the key is coming from here   from this list okay and earlier we saw  that we can access the list using this i   like this okay yeah but of course we need  to put it in a conditional statement so here   we do if like this okay now here if it  contains do something if it doesn't contain do   what so if it doesn't contain just put it put  inside of this so if this map doesn't have this   key it means the time for example first time when  we look through this one we are looking through   so first time it will point to this one but of  course in this map first time this time doesn't   exist right okay well so this condition over here  this would be false it doesn't contain so here   we'll call put if absent remember we used  it before in our flutter app over here   for a card controller this is the same method  uh this one okay put if absent so we'll put well   first time we are looking through this list  over here and this of course doesn't exist   over here right so we can just simply go ahead  and put all right so here we'll put this time   so we do this one we'll take the time  from it and take the time using this i   and the certain field okay so we are taking  this field over here which is the time so we are   putting it but now it does take other property so  this is our value sorry this is our key remember   this has a key so our time is the key and it also  needs a value so what is the value values int int   is here one okay so first time  when i find this time i'll remember   in this map that okay your value is one  okay because i found you first time okay and   next i'll go through this list again while  next time it would point to this one right   well it makes sense now in that time this  condition is a true because it's already there   what is there this time because this is o205  this already we added in earlier iteration   and next time i come through it i find it  again right so this time is already in this   map so how can we increase the time so what  we'll do over here we do this one first   card items per order now here we just update okay  update what update this value okay so here we   do this one just let's go ahead and copy this  first we need to find the key so this is the key   and for this key we are going to update the  value okay so value has been added one earlier   now here we'll take the value remember here we  are not accessing it as one we are accessing as   as it as a value of course you can call it  anything you want it doesn't really matter   so plus plus value because i found  it second time okay so i'm increasing   over here the value we are saying oh the certain  time has been found two times it means in this   order at least there are two items that's what it  tells us so next time while i go through it again   it will find this one and after finding this it  will try to check if this time which is this one   exists or not it will find it it will oh i see  you again so it will increase the value to three   okay one two three all right so for loop will  continue it'll come over here and it finds   the new time oh six well it doesn't contain in  this map so it would be over here okay now it   will add a value one it means i found you once so  next time it goes it'll come over here it'll say   oh this is a new time so if it's a new time we'll  come over here so hopefully it makes sense it'll   continue and save the time all right now what we  could do here we can go ahead and print this map   okay just let's uh for debugging purpose so  let's go ahead and print it okay let's see yes okay so over here you say it's a three three is the key  uh sorry the value end all right for time for this   time so we have here printed our time which is  this one actually the complete time and we found   it three times over here in next one oh six which  is this one we found it one time and next one is   this one which is this three and we found that  three times okay hopefully it makes sense all   right now over here it's time to take out this  into value from this map okay well this would   help us in our view which is over here because we  need to loop through our history which is this one   history list and exit from this list sometimes  because i need to redraw and go to a new line   and redraw okay so that's why we need  to go ahead and save it save the time   so now here i'll declare a new function and  it would return a list but it will return   list of int and we'll car we'll call it cart  order time okay so card order time to list because from over here over here we are  taking the time and we'll convert it to list   because right now this is a map okay all right  and once we convert it to list will return   so we want to access this map right so that's what  we'll do and first we'll do here return okay now   this is a map map has a property which is called  entries and entries is a property which is called   map okay now over here it takes an  element so it will point so the first e   so it's more like also a for loop you can  understand first a will point to this one   okay all right if you point to this one okay now  for this one this is the key and this is the value   so from e we just want the value okay and then  we'll convert it to list okay yeah that's all now this could be scary for many people so  what i'll do i'll comment it out and i would   like this let's take a look uh as easier  format card items per order okay entries dot   map e over here now from here we'll just get the e  dot value okay now before we return we'll convert   it to list okay now this is the detail format  but the convention the new convention is you can   keep it as simple as possible so this is  the simplest one okay all right so over here   internally the for loop happens over here  okay anyway so we'll just remove this this   one and we'll stick to the standard one  right now okay now over here we'll create   a new variable okay and just for testing  purpose so here we would call it list int now order times okay now here i'll call this  function this is a function actually   okay all right now i can print four  times okay let's go ahead and print it okay now we can access the time all right it's  beautiful okay so this part of the code we can   directly copy and put in our dart in the flutter  app okay so we don't need to repair that but   this gave us a better idea that how we can take  information from this list and separate them step   by step so first we took this one and then we made  a map and based on the map we got some information   now this will help us to build this ui because  in this ui now we know if my list is this one i   know that first time when i run the loop i'll run  it three times okay and then i'll run it one time   because of this one then i'll run it three times  okay now we can repeat this idea for the app okay   all right now before i finish this dart section  uh i could do another thing actually now of course   this part could be would be totally reusable in  our dart tab i mean we can just copy and put it   there no problem now of course how actually  this loop would work now uh let's simulate it   so here we do four and let's see hint x equals  zero and x is less than so we'll take this one dot length and x plus plus now we'll create  internal loop over here and here we do   int y equals zero and y is less than let's see  we'll take this one this is a list okay and x   and over here we do y plus plus now here okay  now here we could do some interesting thing   here we'd actually access this card guy over  here okay now i could say well recipe one   recipe two recipe three well maybe this is one  again because that was the second order one   so maybe three two four it doesn't really  matter so this is my order one this is my order   two and this is my order three okay now i'm  trying to tell you that we would be accessed   this one separately and we can break out from the  loop because we need to okay so this procedure   almost the similar one will repeat in our flutter  ui code okay anyway so here i'll write my order is now over here we'll do plus and we'll come  over here and we want to access it okay now how   are we going to access it this x or y none of  them so we'll create a new variable over here   where we'll call it save counter  and first one is zero now over here we'll use save counter okay and  counter equal plus plus so each time   we access it actually uh let's see what  is the problem good card history list okay enter the string all right okay uh we'll just  go ahead and check this one now what's happening   over here so we take this map first over here  this is the map okay or this one okay we look   through it and at the same time now we'll  check how many times because i do remember   that so this one so this time this time how  many times has been repeated so they have now   this map and this one they have a one-on-one  relationship we know that so this was my list now   i had this is my map and this is the map list of  time they have one-on-one relationship like this   so this time certain time has been repeated three  times this one has been repeated one time and this   one has been repeated three times okay so that's  what we is happening here and we can combine all   this information and look through it and then we  draw okay anyway so now let's go ahead and run it all right so my order is you see so this is my  first order second order third order and this   was again okay this is this is and this is well  now you're gonna ask me what the heck is this   can't i just go and look through it yes you  can but now because we combine these three   we know what time we have to finish this  loop finish the inner loop okay because   if you can finish then you can go to the next  one and draw okay otherwise you will have no idea   when to finish this one because you have no idea  when your time finishes when your order finishes   because this is the first order this is the first  order so now because of this information okay   because of this three actually this this and this  uh or sorry this would be able to successfully   go through the loop and finish the  inner loop because here you see this   is the inner loop it does finish okay and  we could prove it differently here you do inner loop y index okay here we do y to string uh why well i think it's we do  we need to y to string okay let's go ahead and run it did we write yes  okay index 0 index 1 index 2 that means   this is done okay this part inner loop is done  that means this is done too this would be done   too okay all right so dart code over here  is finished so we need to go ahead and start   writing our ui and lucky for us  this part has been done and we   also know how it works so just to  repeat it now we'll come over here okay sorry we don't need  the postman we need this one i want to keep the background white okay now  over here we want to start drawing things over   here so we'll come over here and over here we'll  create a new page okay i will call it card history okay now we'll create a stateless  class okay and we'll call it card now over here instead of a  container will return scaffold will have body okay i'm sorry uh now we need to import some of the  libraries okay and over here we'll do column and children now let's see uh we also need to  import this one now over here uh we need to draw   our app bar so simply we'll  use a bar over here emperor   okay barbara will have title now title take text  and here we'll use big text we do have big text   right here it takes a text and here we do uh  cart history okay all right now let's go ahead   and save it and let's see if we can see some  result or not uh we don't see anything yet   um let's see oh yes because we need to  come to our home page which is over here uh   and over here this one so we need to update  this one third one which is this one okay   so here we would just simply  call card history okay now let's receive it okay uh let's try to restart okay here we are okay now actually we want to  put another icon over here so it is a property   which is called i think actions which takes list  of children i think we can use that one as well   so come over here and here we do  actions now here it takes let's see   list of widgets okay so let's try to see if we can  use an icon button over here icons dot uh shopping cart uh yeah we'll i think we'll go ahead  and this one all right and let's see okay   now this is the problem they're too much to the  end okay now that is the reason that i'm not going   to use app bar and a lot of you might ask me why  i was not going to use that one okay and this is   the reason because i don't have much control on it  and so that's why i'll just completely take this   out over here okay so i'll come over here inside  this column and i'll draw things inside this and i   don't want f bar so i'll go ahead and remove this  one okay because i want to have complete control   so yeah now i'll draw everything inside this  column over here now i'll start with the container   okay now for container i'll have i'm going to put  things in a row okay so here i would do child row   and children all right so first one i want to put   this text over here now i would do big text  and the text is card history all right and let's see yeah and i'll use the  color for this one colors dot white   okay and for the container itself i'll  also use uh background color okay or color   so here i would do colors uh well here  we use app colors dot main color okay   and the container will have width so i want it  to take maximum possible width possible okay and   uh apart from that we can also apply some padding  to it the top padding okay now here we do padding   now here we do adding sets only edge  instance only top okay and we'll do 45   all right and what else we can change uh okay now  here i want an icon okay so here i'll do let's see icon but we do have app icons which we can  use app icon all right and here is i can start shopping cart outline that's  what we want to use shopping cart outlined this one okay now let's  go ahead and save it and see the result   okay well that's what we have for now and  uh of course this is not the best looking   we need to make more changes well we can  set up height to it and we'll do height   100 and now let's save it okay well not bad and over here because this is a row we don't  want to put things so closely to each other   here we can use a property main access alignment  main access alignment dot space around this one   and actually this is what we want all right now so that's okay now i can itself we can change  a little bit so here we do icon color okay   i can open a color let's go and  see here colors dot main color okay   yeah so i think that's pretty much it for now  okay so this is the header section that we have   and next we'll see how to go ahead and use  those i know this design is a little bit   different what i had previously okay so this is  what i had but you can change the icon color so   anyway it doesn't really matter so because  in future we want to be able to tap on this   over here when i was doing the  design i didn't think it like that   of tapping but for this tutorial actually we want  to take it more further than my original idea   so because i want to be able to tap and more  information that i want to show over here   so this is perfect with this  bit of background color okay so here we'll come over here now for the  app icon we know that app takes background   color which is this one so we'll also use  the background color okay so over here   would pass background color and  we'll do uh up colors dot yellow okay so this is what we'll have for now okay  so with this we are done and next we want to   show how to use this one okay all  right well before we do that actually   we can copy our information from our dart code  over here let's come over here and this is the   information that we want to copy we'll  come over here i'm sorry about this one   okay now we'll put our dart code right  there now we will have error let's see now uh we need some information like okay here  we do have a cart list which we don't have   and not over here it should be over here actually  yes okay now of course cart list we don't have so   we need to go ahead and uh call this variable  and create this one so i'll copy this one and   i'll put it right there okay and uh we'll call  it var equal now this is coming from where this   should be coming from a cart controller okay so of  course in cart control we don't have a method so   we'll do we'll go ahead and create a method  first okay so we'll come over here and okay below over here we do uh list cart model okay get cart history list  okay now over here we do return card repo   get card history list okay that's what we want  to return and over here we'll call this one okay   so now we need to access our cart  controller we do get dot find and here we'll access cart  controller okay and then we do get okay we need to import the library for  get x package otherwise we'll get error okay now once again we'll come over  here and you get car history list okay all right uh but now previously  we are in dart here we are not   so some of this uh notion that we can't  use so here we do time as you can see cancel because here actually we are accessing   information because here we are accessing  information using uh cart model object right   previously we didn't have object we had over  here we had map and maps individual field you can   access by their name but over  here we are down to objects anyway now do time sorry that time now let's see what's happening here   so most really needs assurance that it's not  going to be no once again uh if putting this   gets you error you can you may not need to but of  course it depends on your sdk version once again   uh this part we don't need to change okay now we  need to go ahead and build listviewbuilder because   we want to show information like in this manner  okay first here we'll go ahead and declare uh   container okay and within the container we'll have  uh left right and top margin and that's what we'll   do do margin and we'll do edge insets now here uh  we also need the property only okay now here we do   top dimensions dot height 20  then we would also do left   dimensions dot with 20 by this time we should be  pretty familiar how they work and with 20 as well   okay and right after that we'll have child over  here now as child will have list view actually not   really list view builder even the earlier i said  that was uh tip of the tongue i guess now here   inside list view builder we can have children okay  and for children we can use text test or hi there   like that okay now let's go ahead and save it  now find our simulator and most really we have   error yes we do have error here now the problem  is list view needs a certain container height   so for example if you have this height like that  now the error should be gone as you see but now   of course we don't want fixed height we want it  to be it to have dynamic height and all take all   the available space so that's why i'll cut this  one and i'll wrap it around expanded widget okay all right so now here we go so right now we are  inside expanded widget okay now put it there and   refresh it well nothing happened but of course no  error as well okay now of course we can put many   child like this okay and would be able to see  them it's a list view builder while finally enough   inside list be builder we can also have  for loop well not just in list view in   many places we can use actually for loop so here  you do say i equal less than 20 and i plus plus   and right below it you put whatever widget you  need for example hi there this is the widget we   want to put and we want to run it 20 times okay  even you can run it more many more times as you   want and it it becomes scrollable that's the  beauty about it and over here you can also do   dynamic stuff all right so you see that the  indexes are there okay so here so far we'll use uh   list view but of course in our case we need more  uh widgets and a lot of information change over   here now of course here we don't want 100 we want  uh items per order from here we'll control it   and we'll use the length of it okay all right so  now we want to run it as many times uh this one   okay and over here actually i'll change the  name to list counter not really save counter   all right now inside this actually  as i said earlier if we take a look   so here we'll have a column so this would  be a column but now say for example um   items per order is six then i'll have six columns  one two three okay like that so inside each column   will have children okay all right so list view  is working as a column for us right it's putting   things on the top of each other just like  list view builder but here we are not using   listviewbuilder because we'll do some complex  calculation and data process list view builder   does create some problem on the rebuild ui so  that's why we'll go ahead with list view list view   compiles and render everything at one time  but listviewbuilder renders thing on demand   that means that if your item is hidden like below  this bottom bar they won't be rendered first   they would be rendered later but with the list  bewilder they're all rendered at a time well   they both have advantages and disadvantages for  us list people that would do the work anyway   so list view builder is going to draw  them one by one on the top of each other   but inside it will still have a column because  the small columns will have their own children   okay so here first definitely i'll go ahead  with the container okay and once again   over here as a child i would do column okay we  need container because we want to put kind of   bottom margin and things like that and  that's why column is very useful okay all right now inside column first we want to  show a date like that okay so we do children   now for now we do big text over here text  0 5 0 2 2 0 2 1 like that okay now for now   we'll have just information like this we'll go  ahead and save it and we'll see how it looks   okay so here we are and of course we can decorate  it more so here we do cross access alignment and   the cross access alignment dot start okay all  right now it starts like this and over here   we are inside this container so each  of the date is inside a container   so here we can actually set up bottom  margin so you do margin and agencies only let's see oh that's the bad part about this  editor sometimes it's not that smart once again   anyway so against us only and we'll  do bottom and here we do dimensions   the height 20 okay all right now we do have  a little bit a margin anyway i'll put it here   okay all right now we have this one and after  that actually we want to draw these images okay   now as i said that that should be in a row  okay so here we'll go ahead and do a row all right now within row we want to draw stuff  okay and horizontally all right and for that   reason well first thing we want to do actually  uh we want to use a special widget which is   called a wrap okay because the wrap lets you  to draw the same thing again and again uh uncertain direction of course it could  be horizontal it could be vertical   but in our case we'll use horizontal  direction okay so here we do direction   access dot horizontal okay now right after it  actually it takes children now here you could do   children now here hi there you can try again hi  there or not hit there we don't want to hit anyone   so now here let's go ahead and save  it and see the result okay all right   you see hi there hi there okay so that's what  it does it does draw things horizontally and   actually we want to draw our image like  this instead of this text we want image   now once again now these  images are coming from our   uh get history list from card  record right so it's coming from get history list so these are all dynamic  right so we can't really hard code like this   so we need to generate the children dynamically  and for that reason here we'll use list.generate   okay now it creates widgets on demand for  you because as you see it's the length   now it means we can play around with this  length okay we can do whatever we want   all right and over here we can also return  a function okay and we'll first return   like this and here we do i there now what is this  length well now length would be using this one   now not directly this one over here would be use  each of the item from it okay now last time we   saw that items per order this stores the number  of item each in each order right so in a list   so we'll read them one by one so for example if we  have this three over here um this if i equals zero   it refers to three if i equal one it refers to two  if i equal two it refers to three the third one   right so we'll get the value and that value is the  length all right now let's put this one over here   and we'll get uh now let's go ahead and  save it and see how it works all right   so yeah that's what we have right now  okay and uh actually this is based on my   um get history list because in my history  list actually i have a lot of history   and i did some of them for test purpose which  could be a little bit different than yours   but the overall situation is like this okay so  hopefully it makes sense now saying that it also   means that this is the first image in the first  order first image in the first second order first   image in the third order second image in the third  order right by this time it should make sense   anyway so now of course we don't  want to draw a text over here   neither the ch child so here first we'll go ahead  and draw uh we'll mention it within height for now   for now they're all hard coded but we'll  change them soon and here we do decoration   okay now box decoration now inside this image  decoration image and then image again then   network image and then uh we'll here mention  the image path so for our case constants dot   base url plus app const then upload url  plus now here is the interesting part   okay so how to get this image address so here  we remember we have this get card history list   so over here we'll loop through it okay now  once we look through what index to use so   that's very interesting so here we'll use list  counter okay and then we do dot img okay now   here interestingly well this list counter which is  this one over here now it starts with zero right   but we need to increase it and the question is  how we're going to increase it now over here   we increase it here okay because it  is going through a loop so the actual   outer loop is this one and this is the  inner loop just exactly we practiced in   few it's a few minutes early in our dark dark  pad right so this is the inner loop so over here   actually we can increase this list counter but  do it conditionally if list counter less than   get card history dot length then we will  go ahead and increase it okay all right we checked this one to prevent overflow okay  which also means that error during runtime   so we are checking it otherwise it may increase  more than this length and it will get us error   now over here we'll simply do minus one  why think about the first time it happens   first time it starts over here as zero  but now when it comes here it becomes   one but first time the index should  be zero right so we do minus one   so this so it keeps the balance hopefully it  makes sense okay now let's go ahead and save it   here we go our images are there  right and yeah it's already working okay now we also need to set up the property  here we do boxes fit properly into fit okay all right now we can do a bit  of our border radius do border radius   dot circular here dimensions dot  boiler i think we have the radius now we want radius but we don't have eight we have  fifteen so we can divide it by two so we'll get   seven point five which is pretty close to eight  so that's how we go all right okay so over here   now this date and this images they're too close  to each other so here we can do a size box okay   and we do height and dimensions dot height will  do 10 okay all right now it's looking better   but now there's this top space over here now it's  happening because the list view i'll cut this one okay now here i'll do media query   dot remove padding because list view has  a padding and if you want to remove that   you need to use this one okay now whatever  you cut just now put it here okay all right and we also need to mention that  the property which is called remove   top true then it will remove the top padding  okay now it's already looking better now if we   come over here inside this wrap now the container  itself they're too close to each other right and   that's easy to take care here you can just simply  go ahead and use margin so you do add in sets   okay dot only now here we'll only use the right  margin and here we do dimensions dot width   now here 10 by two so we can use five all right so yes it's already looking  amazing and much better okay now here's a problem   here i do have four images  and i have here three images now what will happen if you have one more  image definitely to cause overflow okay   so this is not what we want and as i said  earlier at the same time we want to show some   extra information over here so given our screen  size we can only show three images so we need   to do a bit of calculation that how we're going  to show three images okay now it would be here   okay because this is the  container that's showing images   now here there could be five items or six items  right so we do a conditional check on this one   well first i'll cut this one and then here i would  do actually you can take this or this it really   doesn't matter how take index because it's simpler  to use so if index is less than 2 less than or   equal to that means 0 1 2 that means three images  okay then we'll do this otherwise we'll just show   empty container okay well now right after this  you will see the images the four images the order   last image would be gone okay because we just  want to keep first three images so let's save it   now you see this is gone everything  else stays the same just that one was   different okay hopefully it makes sense  all right so now this is the first item   in our row which is this one now over here we want  to put stuff like this definitely okay all right now here we need another container let's go ahead and check it so here we do a  container and now let's take a look over here with a height like 80 right so we're  gonna go to pretty much like that but   if you see over here we do have  a bit of extra height because of   this and this so it's more than actually 80  but if we are smart actually we can also do   hard-coded height for example over here height  100 okay all right now it does create a little   bottom overflow so you can go ahead 120  that now the overflow should be gone okay   uh now here we are good okay so it  means that the parent container this one   okay is 120 but once again they're  hardcoded now later we'll change them   okay all right so well in the  column in the row section over here   so we can change stuff now here we  had this height a sorry container   so now over here say you want to do height  height 120 just like parent okay now you   want to have child so the child would be our  column now instead column we want to show this   information so here we do children and  definitely the first one is small text   and the text you will just write total  and then we are good okay all right   and then we want to show how many items we have  over here okay so that's what we want to do well for this one we'll use  big text here we'll have text   and where's this is coming from pretty  easy it's coming from this one dot i okay and to string so as we're looking  through it we can access this one   and we do access only once right so  we'll have no problem and let's see color have colors let's start let's see title color  maybe this one now let's save it and   take a look okay while we do have a bit of problem so we have this bottom overflow all right we'll take care of that  later now here first thing you see   this contents are too close to each other so  you can separate them let me close this so   here we do main axis alignment and main access  alignment dot space between so it will push   everything to the far apart okay now i'm inside  this container over here this is a column   now over here we can also use property for  main access alignment and we do main access access alignment dot well now space evenly let's go ahead and  check it okay now like this okay so   over here you also want to add  more text plus items okay all right so now here you have one item one item   three items and total four items but we can  only see three all right yeah okay cool now here you can also do more check actually on this  like how many it's based on whether it's one or more than one like that anyway so i'll  leave it up to you so now regarding this one   that was main access alignment now  we will take care of the cross axis   alignment and cross access alignment dot start okay so we'll start at the beginning over  here i think look at this one the color so   we need to take care of the color over here  i think we can use the same color as this one so i'll just copy and put it there okay  now it looks great well next part is   taking care of this one well for this one  we will go ahead and draw a container first   okay and let's go ahead and do it now container  itself will have kind of padding and margin   uh first go ahead and do a decoration  over here and then we'll do box decoration   okay and border radius border radius dot circular  on the dimensions dot radius well we want   radius of 5 so we don't have five but we  can divide it by three then we get it okay now over here we can also use color uh border  okay now that was border radius you see it does   have border so here we do border now we do border  dot all okay and we'll have border width blue is   one and it takes color we would use app colors dot  main color okay all right now of course we need to   put some content otherwise it won't be visible so  here we do child and for now we'll use small text text one more okay now let's go ahead and  save it and see the result   oh yeah well definitely we need to work more on  this now inside the container container itself   we want to use the padding inside of it okay so  let's go ahead and use padding so that they look   very different i mean sorry they will  have space on the left and right okay   so here we do as insets dot symmetric now  here we'll use horizontal uh dimensions dot say width 10 and we also use vertical  okay and we'll use height dimensions dot height well we want five we  don't have five so divided by two   okay but now it's already looking better okay all  right now here's the thing i think they should all   start from the left okay so from the right so  cross success alignment let's instead of doing   this one let's start from end  okay now it looks much better   and let's take a look at this one the text color  itself so here we want to use color app colors type colors dot main color okay all right   let's go ahead and check yes so that's pretty  much we wanted and it's already looking great all right now let's see what else and over here i  think we do have good space but over here we don't   have enough space so let's take care of why not  okay so most of all it's from here we don't have   enough space and how much space we have we can  go ahead and do a color and we'll see colors.red okay so it's not taking the  complete space over there   uh yes it is it is same as this one though  yeah uh yes we do have the similar space   over here i think we'll go ahead  with this one and for now that's it okay all right so now we need to  take care of this date over here okay well for showing date actually in general we  can think of like this so you can go ahead and   use get cards list get get card history list  and we can just simply do over here let's see   uh list counter i think that's what we can  do list counter and then we do time okay and make sure that it's not empty so if you  do that here well we do see time okay there   we see that now the problem here the there is  a problem with that approach as you see first   this is not the date format we want and second  a lot of unnecessary numbers we don't want to   this is something that we don't want uh but anyway  so for this reason we need to go ahead and install   a plugin let's come over here and install this  plugin with this version if you want to follow   along with me and that's let's do pop pub get  okay and we are good right after that over here first i'll just go ahead and remove this one now the reason is because we need to process  this date we can't really use it directly but   right now we need to process it inside this  for loop but inside this for loop we don't   have any space to write any dart code but  there is a way to do that inside within your widgets inside widgets and next to other  widgets you can do dart code and for that one   well we have in flutter this is called immediately  invoked function okay we can use that trick   now for that one you need to do like this first do  this one and then do this one one more and then do   this one and after that you will have like this  okay and then all you need to do put a comma   and once you do that one between these two  you need to return a widget okay now here   say for example you want to return a widget and  a text like that okay all right let's see here   we do have a little error okay let us take out  this one where is this error coming from though let me do ctrl z let's go back where we were okay we were here so i'll remove this one  and then i'll put what i copied just okay   i don't know what happened but anyway now it  works so yeah so now the this is this special   brackets these are called ie which  means immediately invoked function ief   now with this in dart we can do a lot of data  processing thing okay all right so here we do   data and data processing and then we can just  return that's the beauty of this thing okay   now anyway here we want to show the date right  all right so we can show the date in a date format   so we can use date format format function  now the date format we want is like this d mmdd y y y y and then we  want hh for hour and minute   and then a all right we need to import the library now we need to save this date format remember  it's not a string it returns i'm sorry it returns you a date format and will save it  in a variable and we'll call it output format   okay all right so we want something  like this okay now of course   i mean this is the format we want  and show over here now right here uh here we do another thing we'll take this format  and output a string okay so here we'll call it var   output update actually this string would be a date  now because this is an object i'll put it there   this object have a function called  format okay this is what we want to use   but now here interestingly if you hover  over on it it says that it takes a date   time object okay and then it returns string  well so this returns string that string we can   we'll be able to use over here right but now  this takes a date time object as you can see   so we have to create a datetime object using the  date we saw earlier okay the one we have in our   data storage using that one we have to  create a date time object and give it   to it and then it would work so for that one  first we need to go ahead and grab that one   okay so now to grab that you also need to  use date format once again now the format   that one has currently in our local storage so  that is year month and day and then after that   we have hh and mm and ss okay all right  now well if you don't believe me that   it's like that simply right over here you can  call get card history list and the list counter   okay yeah let's see and we need to  get the time object okay and this one so you see so this is year month date and  hour minute seconds so this is what we have   currently okay and that's why i wrote it there but  anyway so from here actually we need to parse it   okay now parse this one so we know that this  is the format there but you need to get it   and you need to get it using this parsing method  okay so once you get it it would return you date   time object and over here you can save it  so you do date time here we do parse date   because this is the format that's stored  but of course once we get it from here   we are wanting it in this format as well okay and  it is there as well so that they too have to match   okay so whatever you know the format is there  you use that format to take out from this list   and convert it to a date time object okay now if  you did date why we did date time object because   we want to pass it over here  okay now anyway one more step   over here uh we want to convert  this one to a string okay   and then create this date time object so here  we do var input date so here we do update the time dot parse one more time okay and now  whatever we got over here convert it to string   and apply to it okay all right now you see  this one gets you date time object okay so   this data object would be able to use here  okay so first line we got a datetime object and uh in second line okay using that date the  one we got using that one we get another date time   object and then we put it there now definitely  this output date we need to use over here now   instead of text we can use big text the one we  already have and we do text but now we don't need   this one we'll just remove this and put it there  okay all right now let's save it yes perfect so   here's the date we have and here it works okay  all right now let's go to other pages come back   and we still see okay now let's go ahead and add  an order and see how it works with us so this one   i'll add over here i'll try to add four items  so we know what's going on and i'll use this one and i want to add one more from here   okay let's complete the order we have  four items come over here now let's see   so yes we have total four items but we can only  see three now there's another problem actually   the problem is this one should be at the top the  one the latest order like this is the earliest   order right i just made it so it should be at  the top so next we'll see how to do that one   now we'll go ahead and take care of this uh date  issue that they should be at the top right this   one well it's pretty easy so all we have to  do we need to come at the top over here and   well i'll put it in a new line like this and  then well this is a list and the list has a   property called reversed we'll use that one but  once you do reversed it actually is not a list   it becomes iterable object iterable object  means you can't go through it index by index   okay in that case you have to access it using  keys but we want a list we don't want keys we want   index so you need to convert it to tool list all  right now after that let's save it okay now you   see the order reversed okay so now it's at the top  so now we can do go ahead and add one more item and actually let's add two okay all right let's  come over here let's check out let's go to over   here like okay so here we are so this is at the  top so while it's working out as we expected now   let's take care of some of the tiny issues that  we had early so now here we don't want hard coded   so here we want dynamic so we do height multiplied  by 10 okay now over here padding we did have 10   uh we do have 45 right uh anyway let's save it and  it's okay over here and we don't have any issues   okay uh and what else let's see 120 so  here we could do the same dimensions dot height well we can go ahead  with 30 and multiply it by 4   and over here we do have padding 45 top padding  so here we can do dimensions dot um let's see over here we do have a height 45  this one is okay all right and what else i think this place is a pretty  all fine and yeah okay so this one   so dimensions dot height well we  don't have 80 but we have 20 okay all right and over here we do the same yeah we're pretty good after this and all we need  to do we need to check it on a new device which   i'll do maybe say iphone 11 and just want to make  sure that it's still responsive if not then we'll do the necessary changes okay so let's let  it boot up all right here we are and uh   well this is a new phone so i don't  have any card history over here   so i'll add some of the stuff  and we'll see how it goes and i'll add more stuff to it let's come over here and well so  it's also great looking over here and   let's go to home page and let's see okay yeah  so we don't have any overflow issues uh you   should not have any overflow all right and yeah  so that's it well next we'll see how to click on   this and reorder our stuff okay so here we want  to click on this and go to a certain page i mean   the cart page let's simulate this one first  so here we are now here i'm going to add stuff   and uh we'll add more stuff i'll be here and i'll  come over here i'll make the order now the order   would be in this history card now as i click on  this it will take me to this page okay currently   here it doesn't okay well so this is what we  want to do and we can check out once again   we can also do more stuff over here  add more uh and different items we can   add to it okay now these two are coming  from card history so you have a special   message that you can't review but it this is added  just now so you can go back and see what happens   okay but for this kind of items you can't so  this is what we're going to do right now okay   and even you can add more stuff to it as you go  ahead and do more and more and then you'll come   over here and you can check out and once you check  out you come over here you see that you added this   one and just now you had four items but of course  you can go back one more time you can go back here   one more time it's fine okay but well now if you  go back here you see on the card you have these   two items but if you say for example you want  to have this 4 then you will have this 4 okay   like that sorry so if you're here then you can  have 2 so it's all up to you that how many items   you want okay so it resets everything so but this  sounds like that is going to a lot of work but it   is not i promise because we have done most of  the work for this so far uh so just rearranging   some data and on click we go back to cart page and  for cart itself we have done all the work so far   so it wouldn't take us a lot of time so let's go  ahead now here uh this is where we left last time   okay so i'll enlarge it now here this is this  item where this says one more okay so this is the   button that we are going to use okay now here this  is the button we have so i'll just uh let's see   okay one more so i'll put  it here and i'll cut it okay   let me do this one and save it and it's gone okay  so this is the button now here i'll definitely use   gesture detector to wrap it around  okay and here we'll have on tap event   okay and then um let's see i think i'm missing  semicolon over here and then we'll have here   child okay and we'll put what we had  early okay now it's back all right   uh now let me explain that how it's going  to work say i add more items to it and say even this too over here   now come over here check out now you come to  this page and you'll see that okay you have   orders like this so the thing we're going to look  for is the unique time uh and based on time for   example in our history card list we totally have  five five items right but they're grouped by this time over here right they're grouped by this time  so uh well now i think we can oh i think yes on   iphone you can do it the sliding anyway so they're  grouped by time over here so we have to find this   unique time okay and based on that we'll do a for  loop and we'll try to do a match if we match then   it means that we are on certain item once we click  okay for example right now we can go over here   okay and we can do our uh print  log over here we could do print   and we could do card say history list and  over here what we can print let me see so what do we have up there um well i  think we can print even stuff from here okay all right so we don't have to print this one  all right and uh let's see two string okay now i'm doing test okay just like that okay now let's  uh uh restart it and let's tap on this first one   so yeah doing test two so it means it  has two items that's what it's giving us   remember items per order now doing  test three okay so that's how uh we can   lock which one we are clicking but of course  we want to for now get this time not really   the number of items we have per order okay  that's not what we want because that's not   unique remember only time is unique so we are  going to once again time to know where we have   clicked okay well now if you see the dart  code previously that we have used over here   at the top so i'll let me  see i think i can collapse   some of this we don't need all of this we  can wrap this one and it will only keep this   the window is small so let me enlarge it so  now over here okay so we do have a method where   we have this one where it says cart order time  to list well while it did it saved how many   items per order okay well i think i want to rename  this i don't like this name so let's rename it so   here we'll rename it to cart items per order  just like this so here i'll take this one and   cart items per order so instead of  small i would do capital line now   it makes more sense okay because here  we are just getting how many items per   order right beautiful now remember  previously cart items per order over here   now this is a map where we had both this string  and end now string was the date the unique date   we put as value key over here and the value  was this int right so all we did later on we   returned a list of time over here i mean the  number of items that we had no really time the   number of items and we made it as a list and  saved it over here right so that's all we did   and we did it from this map now we  can get more information from this map   so earlier we are getting the value which was  int now we want to get the key right so if we   get the key that means those are the time that's  saved here in this map okay now if we can get the   time then later on we'd be able to use this time  over here to compare it with the original time and   then we'd be able to do more stuff okay so first  we'll copy this one over here and i'll put it here   now i'll rename it over here so cart  items per order and here i would say cart order time okay card order time to list  okay now over here instead of getting the value   we want to get the key and key is our time and  that's all we want let's see over here let's train   uh we do have okay now we need to change this one  because we are returning string okay now the error   should be gone so now with this we are able to  have the time okay now if we come over here and   that's a list right so here i can just put it over  here and i can use the same index uh let's see okay so first uh what i need to do i need  to declare a variable i'll call it var   and order order time so that would be a list  and i'll put it there and i get the list   because this is a function that returns a  list now over here i will use this one okay   now simply i can just call here order  time okay all right now let's uh   go ahead save it restart it and uh over here  click on this one so here order time is 1808   1808 that's six o'clock that means 18 right now  let's click on this one so 1202 which is 1202   so which also means that now we are able to get  our time perfect so now as we are getting the time   we can compare this time with our original  time in the cart history list which is uh   over here um this one get card history  list because this also has a time okay   so this is the time that we want to compare over  here and based on that we'll create a new map   because first right now we don't know which  one we are being clicked and this all this   information over here they are list so that's  another problem so two problem first problem   we didn't know where we are being tapped but  i think right now we can know that we are   being tapped over here but we don't know which one  being tapped so for that reason we need to compare   actually okay and based on that comparison we'll  make a map out of it and that would be pretty easy   and once we have the map we need to send this map  to this item over here this item is a map once we   can do that and we are done okay so that's not  a lot of work but you have to understand how it   works right now we don't have a map but this  one only takes a map why once again because   if you come over here see this one in this page  everything is coming from this items map right so   once we go from once we click on this  page and go a page like this we have to   return a map to this page so now our next  target is how to make a map all right so now we have this list of time that's available  over here and grouped uh and the time is   only for per order right okay great so  next one now we'll create a new map first   we do map and in this map we'll have  int and then we'll have cart model   okay and here we'll call it more order  and we'll initialize it to empty empty map okay now we need to import it now you may ask why  we are doing this one well once again because we   are over here okay so here we have items and items  is a map map of int and cart okay because we are   going to add and give value to it so the two  maps they have to have exactly the same type   okay so now this is the map now all we need to do  we need to extract information from card history   list and put inside of this one and before we  do that we need to compare with the time okay   because card history list has a lot of time we  know that over here each each row has a time right   all right so now we'll start over here and here  we do a comparison so first we do a for loop and   we'll start with int zay 0 and there is less than  get card history list dot length okay and z plus   plus i will come over here now here we do a check  if get cart history list i now it has an item over   here filled which is called time so you get that  time okay and we'll compare if this one is same   over here so this one because this also has a time  remember that right now here i'll use uh let's see   here we are using i as an index so we'll use that  one now this sorry over here this should be zay   coming from here this one and over here  this is i now this i index is once again   coming from here because this is the outer  loop and outer lip is dominating everything   so we are taking the index from here  outer loop do remember items per order   the length of this one which is this one   is the same as the length of this list or this  list okay so they have the exactly same amount of   length which means which means their index is  going to match okay you need to remember that one anyway so now we are over here now we  are checking on this so if they match we   are going to do something so which means that  certain time in this list is matching with the   list of this one okay so that means we are   on the right order and right item okay so in that  case we can take that one out from here and put   inside this one okay in this map all right so to  put inside a map what we could do uh well uh here   is the thing before we go ahead and put let me  print the log over here okay now here i would do   my order time is okay now here i would do order  time which is uh i over here i dot time okay or just simply this one and let's  see how it works okay my order is let's see because that's returning us list  list of time okay so each of them will have time   so i can say my order time is all right now let's  save it okay now click on this so my order time is   perfect because they have three items  and they were added on the same time   1202. now you click on this one now we get the  other two all right so that's how we verify that   our history list the items being clicked there  click on the right one okay then we can grab them   okay so now what you do here would  click uh add on this so we do more order   okay dot put if absent okay all right so now more  order as you see it takes an int as a key and   cart model as a function okay now here what do we  do we'll take just the key uh well we'll take the   product id over here or card id now here uh well  let's see before we when we go ahead and do it   let's see what id we are going to use  okay now here this time we'll print the id   the cart or product id is which is very important   now of course that's coming from get cart history  list because this one just has time and this has a   time plus everything else so here we do j now here  we do id okay to string and we are good all right now let's click on this one so here id two  three four and here i did three eight four   okay all right so uh over here this one and over  here this one all right now let's save it again now let's click on this so for eight two items and here  two four eight okay now let's see uh if we just uh print this one okay to string  okay let's go ahead and print this one and let's   see what happens now here well it says instance  of card model and right over here let's do   product okay now product might have id  inside okay let's go ahead and do it well   if it doesn't work like this we can just simply  do this one okay let's see had a null checker   okay now let's save it now let's click on  this so here product id is two three four   now let's click on this one product id is eight  four okay so you almost get the same thing   and let's try a bit of different approach this  time so here i'll comment this out and we'll come   over here and let's try like this print product  info is now here you can print the product info   and for this one now we need to do json in code  now here is the object now in our case the object   is coming from here this is the object so  each row represents the object in the list   okay i will print it all right now let's save  it so come over here now let's click on this one sorry i think this one okay so  here we do have product info   as you see now id2 and over here product  id is 2. now id4 product id is four   so which is over here i did three product id  is three so we're going to get unique id as   well so if you click on this one it's the same  thing so now the thing is that if you want to   encode here or print information then if  you use an object and use json encode so it   will help you to print a string okay all right so  whatever we click over here for each of them this   id is unique okay this one because this id if you  remember in the first part exactly coming from our   database and this is an id that's unique and  increment okay all right so anyway so now we   know that we can use underlying this id to have  as our maps key maps key because in the map key   has to be unique the value could repeat but key  has to be unique otherwise it will get error   so anyway now we'll remove  this section we don't need this   all we need to do we need to put in our map  so here we do more order dot put if absent   over here the key you can use anything you like so  you do get card history list i then here we do id   okay i'm sorry it's not isj right and let's see  uh over here we might need to well convert it no   it looks like we don't we just need this one okay  now here's the trick here you we want to send a   object because here cart model is an  object okay now just now we saw that   this is an object as well okay all right  now here uh there are a few steps for it   okay so i'll break it down over here this  is the line and uh i'm going to return   otherwise we'll get error so here what do we  do here we first do cart model okay this one   from jason but from json it wants json object  okay all right so here we can definitely use json   decode all right now it takes a source okay now  over here we would use json encode now it wants a   string over here okay oh sorry it's once an object  so this is our object that's what we put over   there so first uh this is an object so we convert  it to json decode which means more like a string   and once you have json decode which is actually  json object sorry j once i'm sorry i get a little   messed up so we have this object over here then  we give it to jason encode which makes json   object like this and then you have to use json  decode and from here it takes we have a method   which is called from jason okay now you may think  that why we just directly don't do it uh it's not   gonna work i mean you can try it okay it's just  not going to work and it it throws an error okay   now it might ask you to add a null checker but  we still have an error so json could decode json   and particular would solve the problem okay all  right so well with this each time the id is absent   we can go ahead and put in our map okay and we  know that id is unique so wherever you click each   time it would be there okay you click over here  it would be there all right so once that is done   the map would be filled with your product and  your card items like that okay now it's time   to set it to this card controller which is  this one to this one okay to this map items   now uh one thing we could do you can simply  go ahead and create a setter and set the   items okay and now that's what we'll do so  previously we had one for setting the storage   now we'll create another one setting the cart  map itself which is this one okay all right okay so here we'll create a new method   and we'll the method would be a setter so we'd  start with set the method name is set items   okay now it'll take map so definitely  end because we are giving it to map   so here is the cart model and  the name we can say is set items   the object names the one we'll receive and then  we'll just simply do like this and over here we'll   decide it set the items here like this okay first  we'll make sure that this is empty okay and then we do set items equal side  content items you call set items okay all right so once again we are doing this  because uh first make sure it's empty if it's   not then set it to empty empty items and then  you set whatever you're being sent from here   okay now with this after the loop is done we  can go ahead and set it okay so for that one   simply we use get dot find and over here we do  cart controller and here we would call set items   to this one okay so this is this new map that we  created this one so that's how you set items to   a map okay so this is a map this is a map so the  if their map you can just simply do equals okay   now with this we are done this section all right  now it'll just simply add to this items over here   but remember earlier we have seen that each time  we actually add item this method gets called and   this one checks if there is a duplicate id or not  and if not then just put in the map like that okay   but here and after that we set it to our  local cart list remember because this one   eventually calls this one and this one after that i think also calls this one and then we set it  to the local storage okay so we have to do the   same thing over here now for this one well i will  copy because over here this doesn't get cold it   only gets cold from here okay so i'll create  a new method over here and i'll call it void   add to cart list okay then over here i'll do this  one and simply i'll do update okay if necessary   so with this now we'll come over here and we do get dot uh find card controller card controller and here we do   uh add to cart list okay like that make  sure that we are calling this one yes all right so yes with this now  actually simply we can go ahead   and check it and we'll see that it works  okay all right now let's save our code all right now we'll do we'll simply just  click on this one okay now we'll come   to our card over here which is this one  yes we see these are the items that we had   over there once again this too right but now we  can go ahead and click this then this would be   removed and this would be added in the cart okay  now let's go ahead and check it come over here   yes three items in fact you can do the  stuff you want and they're still there okay   so there is no problem with that and you can  go ahead and do a checkout over here no problem   and we can do that and we did now we come  over here we will see that this this is the   new one that's been added the image order is  a bit different but it makes sense right okay   now you can do one more over here and we'll go  over there and obviously it's still there okay   now if you want you can even add items to  it say i want to add this one add to cart   and you can now we have four items  now actually we can add more to it   say i want to add this one this fish so i took  card let's come over here now this one we have   total five items you check out you come over here  and you see yes so total five items beautiful but   if you do one more and come over here uh sorry  so it's still there okay because we just added   anyway isn't it beautiful and this just  few lines of dart code but you have to   understand the logic how it works so all  we did here based on time we found our   orders and put it in a map and then we come  over here but of course now the problem is   you don't want to get stuck over here you  click on this actually what you want we want   it to take you to a new page okay the cart  page directly okay so once i click on this   it should take me actually here okay that's what  it should do but right now it's not doing it   anyway so let's check out and let's see here and  this is the item that we added just now beautiful   okay so but we can do it simply over here and we  already laid out the basic for this one as well   so here we do get dot find uh sorry  get dot to named route and route helper now here i think we need to import it  yes now here we do get cart page okay   now get cart page it takes uh it should  take parameter let's see get cart page   right now doing a route helper okay now let's  see get over here okay for now cart page doesn't   so what we'll do we'll go ahead and just to save  it okay now right now i would expect that after   clicking this one it will take me over here  and it did okay yes now we can go back and   let's see this one now i want to click on this  one yes it did and i do have five items and   i can do this interesting stuff over here but now  here's this problem let's click on this one yes   we get this error okay now the error is coming  because once i click it doesn't know where to go   because just now we are going back from card  history not like other pages now i need to   restart it to show that what's the problem okay  now i think uh yeah they're still here okay   now the problem is once i click on this i go that  page let's see now i want to view them but here it   doesn't have any idea that where we are coming  from but for example say i add it from here   and i come here and this is the last item i added  and this time it knows that where i came from okay   it knows that i came from here  because i clicked here and i went   there it knows that where i came from okay  but the problem is if you come over here and   now you click on this it doesn't  have any idea where we came from   now why it doesn't have any idea uh we need to  take a look at our cart page over here let's see   our pages cart page which is this one okay now if  we are on the cart page you'll see that we have   some conditional check over here okay so based on  that we were either going here or there okay so get popular from here you go to cart page blah  blah blah so once i click on this actually   i can go back to this get popular food page  which is here now get popular food page   uh popular product which is this one okay all  right so i can go back but right now we don't   have any notion that how it works from this  page if we come from history page it just   doesn't work so we need to add a little more  condition and then we'll see that how we go   ahead well the reason it doesn't work we have  to know it first uh well now if you come to   card history page over here and over here we were  converting this card model from jason or from this list we found an object and we converting it to  cart model okay and we put it over here in this   map okay but if you take a look at the cart  controller over here you see previously when we   created an object using cart model we also  explicitly created a product model okay as you   can see over here or over here okay well right now  we don't have this mechanism okay so we are just   converting to json and then decoding from json  and then we just go ahead and create an object   so over here we are not doing it now because we  are not doing it so if you want to click let's say   come over here and click any of this all it does  while it finds either popular food detail page or   let's see the other page is recommended for detail  so it it finds one of them and try to goes there   and that's okay the problem is when you are here   uh let's see our card okay we have constants  we don't need a cart page okay so of course   we go this page or this page from here right now  there's one problem i'm sorry about that so here   you see we we do have an uh product instance  that we look for okay now if it can find here   then it finds the index then we can go ahead all  right but now the problem is here because we are   not explicitly setting any product index so when  it comes over here this card page it tries to look   from this list over here this list but it can't  find it so it's always returned minus okay now   this page only works if you like add stuff and  go there like this but i don't want this page   to work for history page i mean this logic the  reason is because here you may have a lot of   orders and one day maybe 100 100 days later or six  months later user decides to go for one more okay   now by the time the that product certain product  might not be here at least in the app okay so   if i go ahead and try to look for a match in  the app definitely i can't okay now over here   the same thing is like i mean yes the  product is not in this app anymore i mean   over here but it's in the history list and history  list is saved in user device okay so anyway from   the device we make the order i mean based on the  device record not really from over here now the   product owner would get the message okay now after  that if the product is still there in the in the   restaurant then the product owner would send it  if it's not then they would manually talk with the   this person who made this order okay all right  so that's why we don't want to look for in this   list because it's coming from history and history  could be very old by the time the product might   not be there any anymore okay now we can go  ahead and check it but that would create a lot of   complexity in our app a lot of time in real world  if you order a product and the order doesn't exist   then the product owner would call you that just  cancel the order okay or cancel it from the back   back end so that's how it should work so hopefully  it makes sense so now here we don't want to look   for in the list and we also didn't apply this uh  product model explicitly over here so that's why   it's not going to work but now how to solve  this problem well it's pretty easy so here well now i'll just cut this one for now so there  is a bit of condition that we need to check   and even after that if we can't find the index  that means that actually it's from history page   okay so we have to do one more conditional  check over here if recommended product index is also less than zero that means that it's  filled over here remember over here and it's also   failing over here okay so in that case we don't  want the user to go to any kind of page okay   so if it could found then we'll go over here  otherwise we'll just simply show a message   over here okay that you need to do certain  things all right now let's see over here i   think we have this one okay i'll just  simply go ahead and copy this part and put it over here okay all right now here   it's a history product history product i can  we'll just simply write over here product review   is not available for history products okay  just like that as simple as this one okay all right so now let's go ahead and check  it now what we'll do we'll go over there   and i'll try to click on this and it would send  me is not a product review is not available for   history products okay now we won't have this crush  anymore okay but at the same time say for example   you added uh this one let's see yes now let's go  to our cart and this one would work okay but it   won't work for the history products all right  so hopefully it makes sense of course you can   remove this one and you can also remove you can  also remove all of them and just to check out   and now here we'll see that we have only one item  okay so hopefully this logic makes sense that why   we don't want to look for in the uh list over here  using the product one okay well so far so good   so we are pretty happy with this okay all right  well soon we'll be doing uh our personal profile   center but before that we also need to take care  a bit of other issues okay like for example if   you don't have any history over here we want to  show a message that we don't have any history okay   for example another problem is say for example if  you come over here we don't want to show you this   page we want to show a beautiful message that you  don't have anything in your cart okay once we are   done with this two sections here and here then  we'll go ahead and do our personal profile center   well when if we don't have any message over  here or first time when user downloads this one   here it would be empty and here it would be  empty as well so we want to show an image over   here and for this reason we'll come over here and  check out an image you should have the same image   and if you're following along with me  over here i will have this empty card   image this one so this is the image that we  want to show okay now the reason is because   in future here we'll check out and you'll  send a request to the server but if you have   empty card you don't want to show this  image right so first you'll show an image if   nothing is in the card and will also hide this  information okay all right so now for this one here we'll build a new directory and we'll call  it base okay now within this directory we'll have   some global components or reusable widgets that  would be using throughout our app not belong to   any kind of special pages it would belong to the  whole app okay so anyway here we'll call it no   data page dot dart okay all right so now over  here we'll build a stateless class we'll do stl   uh so we'll have stateless class and here we'll  call it no data page all right and over here first   thing we want to do we want to import some  of the depend libraries let's go ahead and   do it and over here we want to have two kinds of  parameter that the color would apply to it okay so   first one is final string the text we want to  show okay so it would be more like this if you   come over here so image should be here and the  text so we'll give image path and the text okay   so that way it would become reusable so here you  do text and now here we'll have another string   and here we'll call it img path okay after  that actually we need to apply this uh   parameters over here and here we do this one  uh required this text and over here for the   image path we can make it optional so here i  would do emg path and here we do assets image okay all right and you need to use this dot  okay now here if you take a look carefully   we want to put things in a column so here  we'll just simply return a column first   okay and it will have children okay now within  children we want to put the image first okay   now because we are going to image use the image  locally from the device so we use image dot asset   not image dot network okay now here the first  parameter we'll be using is this image path okay   all right and after that we need to give it  within height so here we do height and now this   time we'll get height a bit differently but it's  still dynamic so we'll get it from the context   because i have access to the context over here  so i can access the size of this device screen   okay and then here we do height and here we do  0.22 so i think it would get you around 150.   now here i'll just simply go ahead and  copy this one and here we do width and here   with okay so this will get pretty much like  a square size and after that we'll have a   bit of spacing below it so here we do sized box  sorry for the noise though so here we do height   and we can just simply copy this one okay  we'll put it right there and we'll have a   very little height i think that would be around  like 10 pixel things like that so here next will   show the text itself now the text is the  text that being passed from here all right   and here we need to apply style to it and this  time we'll be using a different style a bit of   different okay now font size itself here we'll  use uh uh well now media query of context okay   uh here we do size dot height multiplied by 0.0175  so very little font size and then we'll have a   color okay now color we'll use from thin context  then here it will have a color which is called   uh disable disable color okay yeah of course you  can get color just using colors dot whatever but   we can also get color like this so we're learning  new things over here like you can dynamically get   your height and width like this from the context  as well okay all right so now uh for this time   we'll come over to our cart page over here and  the cart page here we have this few sections um let's see yeah so we have a header which  is this one and this body position is over   here and the bottom bar right now i'll just  simply go ahead and cut this one over here   and here we'll use get builder and here  we'll have a card instant card controller and here would return what we just had  early okay but now before we go ahead   and return we need to do a conditional check  to do card controller dot get card i think   uh okay it can't recognize the object because here  i'm missing card controller okay now here we do   get items dot length and if it's greater than zero  then we do one thing otherwise we do something   different okay otherwise it will show no data  sorry for the noise there are many kids over here   but you guys are pushing me to record it as  much as as early as possible and i'm trying   to do that anyway so here your card is empty or  actually right next to me there is a dog and a kid   and there's some women and they are very noisy  anyway because i'm i'm working at office right now   so here this is what we have so get items gets  you the length of the items that's added in the   card right we know it if you don't know what it is  go back and check from card controller so now this   is what we want to see okay now just go ahead  and save it because currently the card is empty   now we do have overflow issue and we'll  take care of them now the first thing   because we are in the column right so while  over here column the default position is   top left okay so we need to change that  one so here we do main access alignment   main access alignment dot center okay now for  this one because it's a little more than the   width we had but we can solve it so here we do  cross access alignment cross access alignment   dot stretch so it will scratch it regardless  whatever you give to it okay okay now it can't   stress the text so that's the problem okay so  over here we can use a property which is called   text align i think it's called text align  dot center okay now it will put it in the   center so that's what we get perfect but  now if you come over here and add an item okay let's come to our cart all  that's gone now if you remove it   you see it immediately but now this is the problem  okay we also need to take care of this one well   for this one once again we need to come to cart  page and over here we do have this let's see   row okay so this is the row that's showing  this information so here once again um   we would uh cut it and let's see we  have a card controller object here so   here we do card controller dot get items  dot length okay so if it's greater than zero   then we'll show the text otherwise would  be empty container okay now here i think uh   somewhere let's see somewhere here somewhere  here okay i'm missing this one now the error   is gone now let's check it so that is gone as  well okay so perfect now if you go over here   or if you come from here say it is  the items but you remove all of them then it's gone okay perfect so it's  working and that's what you want   your user to see so this way the ape this  app is more safe the user can't really   do random actions over here the only  thing they can do go back to home page   okay things like that well there are a  lot of other things we need to take care   but here we do the same thing once again okay  we'll remove everything if there is nothing   then it will will show that your cart history  is empty okay so that's what we'd be doing next   i had to go ahead and restart my phone and i also  manually deleted all the history okay so i don't   have any history right over here so we'll follow  the same approach as cart page over here so we'll   come to cart history and over here we have these  two sections which is container and expanded okay   by the way if you want to uh remove this repo  so i would suggest put this one over here   okay but of course i already did that and then try  to go to the cart once once you do that okay add   thing to the cart okay and confirm this button and  that's supposed to show that's supposed to remove   it okay but during the remove you might encounter  uh null value so i would suggest after removing   uh restart your phone and then you should be good  to go like for me right now i don't have anything   over here okay cool so just do this make sure that  you can call this one and it should be called from   here anyway so now we'll come to card history  page over here and i'll cut this one and what   i'll do i'll go ahead and do first get builder  you know here i'll use a card controller instance   okay and then i have to return of course i have to  find the control controller first so let's find it   so we do card controller all right so now  we have it now here we do conditional check   card controller dot get history list the  length is greater than or zero if it is   then we show whatever we had otherwise we'll use  no data page this one now over here your history   or you didn't buy anything so far you  didn't buy anything so far now here   i want to show a different image so i'll use  the image path over here so i'll use assets   image empty box dot png you should have the  same one if you're following along with me   okay yeah and well i will make a break over  here because too much information now of   course you need to put this return statement  okay and now it should we are good now let's   restart do a hot reload now come over here and  we say this thing okay of course we need to   do uh repositioning well we'll do that soon  but now if you add some things like if you   come over here okay so it should be gone okay  but before that let's go ahead and reposition this one over here okay well first to reposition  it uh we'll wrap it around a widget and we'll   call it container okay and over here we'll give it  height okay now let's uh stay organized so that we   know what's going on okay all right so here this  is inside this and i think it wants a stack const   modifier now here well it is it said unnecessary  but if we put some stuff it won't be unnecessary   now we want to give it a height now here we  would use media query dot off context dot size   dot height okay all right so now let's save it  you have this overflow issue but we can certainly   take care of this we don't need to be so precise  about this position so you can just simply take uh   this amount of space and put it right  there okay now the error is gone okay   all right so because we are inside a container  so container is a height but actually we'll   make sure that it's pretty much centered in the  container itself okay all right now let's see if   we still need and it says replace its size box  and do that and see no problem and over here   added const okay very good all right okay  now it's great now if you come over here   all right uh i had to restart my app and add more  data for testing sorry about it now here is the   thing if you don't know how to remove this so  you can do like this you can come to a cart repo   and find this function add to cart list okay and  over here you add this section okay all right now   over here let's save your code command or  control s now after that you will come over here   and find okay anyone is okay add stuff and  once you click on this we know that this   function gets called and then we'll remove  everything and we don't we return so we're   not going to do anything else over here okay  all right so it did now what you'll do we'll   comment it out we don't need this code anymore now  save it now restart your app and it should be gone   okay so if you come over here yes that's gone  okay that's fine now let's go ahead and add some   information now here come here and the checkout  okay fine in future from here will automatically   go to other pages so for now it's a static  so now if you come over here you see this   okay now the problem is let's go ahead and  click on this one and we get some issues   an error and first error over here it's overflow  issue okay now it's pointing to this code over   here the one we just added and then if you go  down and it points to this one list counter okay   now the problem is because of this code the  one we added before well the code is okay   this is the function that's creating problem i  mean this special function sign which is called ie   immediately invoked so we can't really use  this one because as soon as the app starts   while this function gets called immediately  and it does cause issues with these things   so there are certain changes in the app  and this function gets called immediately   so in other places changes happens this gets  called immediately and this cause an issue okay   so i'll cut this one and i'll remove this okay so  we can't use this one so over here we'll create a   new function uh we'll call it time objects okay  so over here we'll take an index and then we'll   return a widget okay now we just if you return  the widget you have to write here widget okay   because big text is a widget okay and we  need to do more conditional check over here   so here we do if index less than get card  history list the one we have and it has to   be less than this then we go ahead and do this  thing okay this calculation otherwise we don't   well now in this case we have to copy this  one put it over here so we do initialization   and we do initialization with the date time dot  now okay and then convert it to string otherwise   we'll get error now over here we don't need this  one so now this so even if we don't fall in this   condition we'll have a default date okay now  we'll go ahead and call this one so we need to   call it from where let's see i think we were  where we were where we were i just forgot where we a little were top i think we were over here actually okay so we'll  call it from here and it needs an index   so this index is the list counter the one  we have been using to keep track of our uh global counter okay all right so here we  are checking this list counter which is   index over here is less than this one okay now  let's save it okay now let's come over here   okay now let's come over here let's come over here  click on this okay let's click on this now the   error is gone okay now you can reduce it you can  add more you can do stuff things like that okay   and come over here and you can go go back once  again all right great now even you can add stuff   to it okay now you can add more stuff all right  and let's keep adding make the order yes you go to   the order page okay all right so you can get one  more time no problem okay so this way that's all   the bug has been sold okay great so far we are  doing great so with this we are done with this   cart and cart history page things like that okay  well there are other tiny issues that we can take   care but now we will not so now we'll go ahead  and install back end you have to go ahead and   install our backend and for installing backhand  first you will come to this link over here   and go over there is my other tutorial and over  here you will learn how to install the back end   follow the bottom end youtube tutorial on  this page and that will work you step by step   how to install this back end okay so follow the  last tutorial on this page okay all right so after   this i'll assume that you're able to install the  backend on your own okay following the tutorial now after installing backend here we are and   if we go to the back end i mean  this is the front end of our website   for back end and we type in this one we see  laravel over here and we can access to back-end   back inside of this uh application by typing in  admin and if you're installing it on a server   on a domain just replace this one with uh your  domain name okay all right now over here you type   in admin for username and admin again for password  okay so this is admin and admin then log in and   once you log in you will have a page like this  you can learn more about the backend over here   and or you can close them okay now you can  come over here and open it close it and   there are some basic menus you can click on  them you can go through them and you can see   some of this information some of them are useful  some of them are not useful to you directly but   they are all useful actually like over here  it gives you the basic version that you are   using right now as the back end okay and of course  over here if you click on this you can definitely   go to uh the official website of this  backend package because i'm using a package   uh from here it might take a bit of time  so over here they have every documentation   but of course this is their github site okay  you can also get to their laravel docs admin   this section so over here you will have all this  uh documentation about this back end here we have   get started model grade and show grid but it  might be a bit slow so you need to wait and every   everything is well documented so if you have a  bit of idea about laravel so this learnable admin   panel would be super easy for you okay anyway so  don't forget to check out my other tutorial about   the back that i have created using this package of  course after installing it you need to customize   it okay anyway now we'll come over here and first  we see over here that we have food and popular   food and recommended food so this is the food  main food category and this is the sub category   and these two categories earlier we have  seen in our app in our app over here as popular and recommended food  okay this is where we have seen that   interestingly this back end is very useful you  can change the order as you want like this okay   whatever you do don't forget to save it okay all  right so you need to click over here and save it   okay all right now after installing it so  this becomes our url locally so now on our app   we have this uh to end points popular and  recommended so endpoints are actually um just like a certain item that you want to point to   so over here we are pointing this too but we  will learn more about endpoints very soon okay   now let's check out that whether this works or not  so we have this one so this would be popular uh   food and we should be recommend belong to this one  and this one actually you can know more about over   here like this is popular food recommend popular  food recommended food and this is exactly you see   over here okay so these are the popular  food as you can see from here okay yeah so anyway now we'll open up our postman and  previously we have used postman now we'll use   it to test the apis locally in our local server so  i created a new tab and over here i will type in   localhost and well i'll do localhost and  our eighth num port number is 8000 and then   i'll just copy i'll just paste what i copied from  here this one so this endpoint you can also access   from localhost if you set up it correctly and  then this is a get request so you can click send   so it means that uh would  be able to access our app   using this from this local host using this same  uri no because you should first try your app   and back in everything locally then you you'll  take it to the server or production server okay   so that's what we are doing so locally from  postman we can access them that means that   in our app if we set them up correctly  we'll be able to access them as well okay   now let's go to our app over here now so  previously if you downloaded the whole   well if you're following along with me  previously there was a different name   but now we are going to change this so here you  need to replace with this localhost so here you do http127 dot zero point zero one and port eight  eight thousand okay now you should either do this   uh tutorial with me on localhost or on your own  server and domain not using my server please don't   use my server because i'll shut it down because  too many people are using already and my server   is loaded and jammed okay so use local server  localhost or your own server our own domain okay anyway but the whole installation process  if you use it on your local server it's   pretty much should be the same as the one i  showed you before how to install laravel okay   anyway so now we'll restart our app and  we'll see that if we can access them from   localhost okay so over here this is our uh server url and endpoint so everything is  okay no error over here so it means we can   access them from here okay all right okay but  there's another way to prove that we can do much   more than this access from locally well what  to do well soon well here we see we do have   two categories okay one is popular another is  recommended food and which in the server over   here you can see the category name or in the  food category well soon we'll create a new food   category and we'll see how to access them from our  app okay now before we going to do that first we   have to understand a little bit about our backend  okay now i'll open up back-end code in vs code   so if you really want to run this locally or on  your server make sure that you have the correct   settings over here you should have this on but  if you are putting on a server you can write   the domain name over here and make sure to  set up database root and password things like   that correctly okay and everything else shouldn't  change over here now after that we'll close it and   after that actually we'll come over here in our  routes folder okay and here in the routes folder i   have api folder and then inside api folder i have  a i have another folder which is called v1 okay   so inside v1 folder we have this api.php which is  this one now over here if you normally if you just   install laravel you will have api.php inside the  router's folder directly i had one and i have   deleted that one before okay so i created a new  folder api and then inside it i have created v1   and then i have created api.php okay now if you do  changes like this and which you should if you make   an app like this the one we are building which  might have different a lot of apis and different   api version so that's why you should have this  level okay so once again this is other folder   inside api i'm not sure why vs code shows it like  this it should be actually down here but anyway   now if you do like this then you have to know  you have to come to this providers folder   and i think rod service providers over  here you do need to make a bit of change so over here inside this boot function you need  to comment out the old one which we don't need   and then you'll create this one okay now in future  if you want to create a different version for   api then you'll just come over here copy this  and change the version name over here like v2   and over here change it to v2 as well so this way  your app will have two versions of api uh because   if you want to upgrade so older api and newer api  so they are in different folders okay so you will   create another folder inside v1 and that would  you call it v3 or whatever you want it doesn't   really matter so once again if you change the  structure of your routes folder over here you must   come over here and change it now as i said once  again previously inside routes folder you will   see api.php directly without these two folders  in that case you should have these settings   this settings in that case you'll not have this  okay you have to know that and here once again   another thing uh well one more thing that i would  like to highlight uh the namespace thing which   is very important so here all the controllers are  in this namespace here nemsus means that the path   that's as simple as that okay so if you open up  app http and controllers you will see a lot of   controllers let's go ahead and do it so app http  and controllers so inside we have some controllers   of course you also have some subfolders  but for those subfolders you don't need   to mention your name space so that this  namespace you must follow this convention and   of course you don't need to mention it it's  already there once you install laravel okay   but this section is quite important because this  part is referenced from other controllers okay   we'll see it very soon anyway now i'll close  it now once you have this one over here   uh so now we just now we learned a little bit  about routes and the structure and the api   now inside this if you come over here it's a  lot of endpoints actually the routes are the end   points so like this is an endpoint popular means  popular fruit the one we saw early so this one   corresponds to this one over here okay all right  and this one corresponds to this one over here   so this is called endpoint that's  it so it may sound very superficial   or some something extraordinary thing but it is  not so now over here this popular is a endpoint   as well as it's a route okay now for now we'll  over here focus on this three or this section okay   so we don't want to focus on this one so i'll  collapse it so we'll just focus on this three   okay now as you see over here you also have  a namespace okay now actually this namespace   adds to the other one we have seen just  now uh let's open it up over app folders   and providers and this one okay all  right this one as well as this api okay   so i'll close others so now here we do have  this one so i'll just copy this one over here   and i'll come over here okay so what  happens let me tell you so once you have   this endpoint over here and the base url  so what happens actually when it comes to   this place over here let's say certainly  this one or this one it doesn't really matter   which one so what happens first over  here uh this gets first this gets this url right base url and then actually it  adds this one automatically of course   but of course when it adds it's not  like this it's more like this okay hopefully you understand it's more like this  okay so when it comes to the back end eventually   from flutter uh through our uh  client api so let me show you   um where is our client api api client i think  it should be somewhere here uh not here data api so here we do have a get request  right so whenever from here it   comes to the server and during the time when it  comes to the server actually it becomes like this   okay because this is an end point once again over  here we have endpoint this end point is this one   so this one also gets added okay so it's more  like this that's all so it's a long url but   of course we don't see that okay so when it  comes to back end over here it becomes more   like this one so what i'll do i'll copy this  one okay so over here it becomes like this i want you to understand that what's happening  so this long url okay so that also means that go   to this website go to this app folder then go  to http folders then go to controllers folder   then go to api folders then go to v one  folders and then if you have this one   go and edit this one find this and then find this  okay all right so up to this it's everything is a   folder okay from here of course this is also a  folder if you know how domain works in a server   so this is also a folder but anyway for now  we'll call this as domain and after that okay   from here actually things started to change  okay here you see we have namespace okay   so after this when it comes to the back end  because of this one namespace this is added   and then this section is added which is related to  this one okay so once that is done we pass up to   here up to here okay from the server from flutter  app up to here we all pass no problem smooth ride   so that's how server request comes over here once  again the base url is this one which has this   port or some if you have a real  domain which doesn't have a port   and then it comes to it adds this  one because of this namespace okay   and then we also have this api v1  which comes from this one over here   okay and after that we pass up to here and then it  finds products products is with prefix if you know   english what is prefix you would know what the  meaning so prefix products so it's add products   after this and then it says okay then find this  one okay all right so it finds this one that's   all and when it finds this one it tells you okay  i need to find a controller and a related method   which is attached so well this finds a controller  this one and then a method now where to find this   controller once again it finds the controller from  the namespace over we have seen there this one   as well as we also tell go over there okay so it  works in both ways and not just find this endpoint   it also finds the controller for you everything  okay all right so endpoint is here and after   finding endpoint we know that our controller  should be inside there and inside this and   if we open it up this is what exactly we'll see  so we'll come to base url then we'll come to app   then we'll come to http that's what exactly  we're following then we come to controllers   and then we say we come to api then we come to api  all right then we come to v1 well yes we do have   api v1 okay all right and then it says  that find products controller but of course   after this after this it first comes over  here okay so which is related to this one   okay and then it says find this so we find  this we find this point this it finds this   one okay that's all now this is a controller  where to find this controller based on this   and this okay so that's how it  works and over here we see that we do have api v1 inside this folder okay  if you see you can close it so it means the   file is gone so we see a product controller  okay and that's exactly what we are telling   over here okay hopefully it makes sense  well it's a lot of information to grasp   so this namespace is quite important this  map space tells you where the controllers are   and the controllers could be controllers could be  also subfolders so subfolders are mentioned using   this group thing the word group route group okay  so hopefully it makes sense uh once again i'll go   through it very quickly so this is everything what  we get from server okay and after getting this   actually this is so far this is no problem we get  this and this takes us up to here okay all right   and then it says find this one which is a prefix  okay and then the endpoint after prefix okay now   of course how to find this route folder over here  because everything is coming from route okay so   you don't need to worry about it laravel knows  it and that would be another long story which   we don't have time to explain remember every api  should be here and your end points are here and then and from end points you find the controller  of course the name is here so product controller   should be inside this one which once again you  mentioned earlier over here okay great and then it   says for this controller we have a method which  is called get popular okay so we need to find   this method now if you come over here we'll have  get popular products sorry get popular products   get popular products okay hopefully  it makes sense i'll close this one and   now i'll come over here there's  a lot of changes we don't need so just over here okay all right now and so anyway so that's how the  endpoint works so when it comes to endpoint uh so   over here it finds a food model so this is a model  now the models are over here in the models folder   over here okay so models  are like how you take data   and data to data relationship in the database okay  so that's what is defined over here and over here   we'll see that our table name is in the database  which is called foods okay and we have some   different methods over here and we'll talk about  them later but definitely if you come over here   and which is a product controller sorry i close  that early so in general for each controller you   should have a model and model defines you tells  you that where to find data and how to get data   it's pretty much like that like for example we do  have some information over here and some methods   okay now for now here from model we use this  method which is built in laravel method where   and it has an id id 2 and it takes the first 10 of  them get means get me take me take take something   so take first hand and get me those records  from the database okay and save them in a list   and once you do that you go through some process  what process as you see over here now while in   your backend information in back-end attacks there  might be a lot of http or html sorry html entities so get rid of them we don't want to  see any extra characters or unnecessary   sign or things like that okay so we use this  function to get rid of them anyway so over here   we doing this using a loop of course this is not a  laravel course so i'm not going to go into detail   and then we say okay return me data in this list  okay this is another array which is we call data   so return me all the data over here in this  variable okay and over here i have defined   some own fields or some variables this is  called associative array now we return it   as a json response and previously we've seen  that this is what is json response okay which is   more like a map anyway so that's what we get for  popular products and the same process happens for   our recommended products okay so hopefully it  makes sense actually this one we don't need we had   it early just for test so this is how recommended  product is accessed from our app over here   from flutter and it comes to the back end  this is exactly the same way it comes over and   then it finds the method which is get  recommended products which is over here uh okay   now if you see get popular products and get  recommended for they're exactly the same   the only difference is the food type okay  all right so we are right now we're not   going to open up our database table and  not going to see that we'll see that later   so first we'll see just the code so it takes  all the food information related to type id 2   and get us first 10 and then we go through the  4-h loop to take out some unnecessary information   okay and this is the two fields that we  don't need so we don't want to send it to our   api over here so we unset them which means i don't  need them and then i reorganize based on my needs   okay because i want to send some additional  information so i make a new array and that array   i send using json response method and that's all  the same things for get recommended products okay   all right anyway so just now earlier i said  that we will have more food type very soon   and this is what we are going to do so over  here we'll create a new food type okay and it's apparent category would be food and the  title should be say healthy drinks okay and drink   healthy and eat healthy it doesn't really matter  now we'll go ahead and submit it now we see that   we have a new category okay and usually it should  have id4 okay now over here we'll come to our   laravel app which is over here now i'll just  go ahead and copy this one and here i would say drinks uri okay i'll create a new endpoint  from our app and which should have related   change as well so over here i'll also have drinks  and everything else should stay the same and after   that i'll come over here in my api file and over  here i'll copy this one let's see ctrl c ctrl v   okay so do ctrl c over here and then ctrl  v now the end point name is drinks which is   this one okay now here i would say get drinks okay  now this is the method name inside this controller   and this controller could be found over here  inside once again app http controllers api v1 okay   all right now over here i'll save it first  okay and over here i'll come over here and i'll just create a new method and for that one  actually i'll copy one of the old one let's see   i'm sorry so this one okay over here i'll put  it at the end and for the name itself i'll call   it get drinks okay now over here the food id  or type id is a 4 which is this one if it's 5   here here you will put five and here as well  okay now we already created an endpoint okay now what we'll do we'll save it okay and after  saving this will try to access this endpoint   from our postman okay so instead of saying popular  here we'll call it drinks which is uh if you come   over here this one okay or this one the same  thing now it would be a get method so i'll hit   always get and send and we'll see what happens  so total size is 0 ide 5 offset 0 products 1   that's because we don't have any products for  that but that means that this endpoint works   ok it makes sense right but now here you can  well of course here is the number of items that's   found you can just say 10 over here save it  and you come over here and hit you'll see it   says 10. so it means that our endpoint works  but the only problem is it just can't find any   record okay sorry over here it should be four  because this two should be related okay anyway   so over here when it goes to the database there it  can find the type id but it can't find any related   records in the database okay so it should  make sense that how it works okay anyway   uh now what we'll do we'll go to our back end and  create some new records and food category base   for this one okay now if you come over here we  already created the food category okay now for   food itself over here we'll come over here and  now we'll add a new one we'll click to this one   okay and now let's see okay so  over here we'll say footages and food category should be healthy drinks  and price should be four location china   and this is some unnecessary fields and  we'll delete them soon okay we don't   need them and over here i'll i'll choose say  this one and over here you could write best   drinks okay now everything else is set up so if  you created the field just to go ahead and save   it i will see it at the bottom okay now we'll  go ahead and create a few more so here we say   real juice and categories  healthy drinks and the price for   location anywhere is okay now just have random  fields and i'll i'll choose the second one okay   best of best produce let's go ahead  and save it and here we are okay   all right so we are adding and as we are  adding as you see that we do have uh the   category is mentioned over here okay so that's  a good thing all right now how to go ahead and   access this thing in the uh laravel in our  flutter app now of course in our flutter app   for this two categories or endpoints we have  related controllers for this one we don't have   and we are not going to use a new one we  are not going to create a new one we will   old you will use an old one after  all we are just doing it for a test   well for this reason i will come to controllers  uh under sorry repo over here i'll pick this one   popular product wrapper over here instead of  calling popular product uri i'll just call   uh drinks uri everything else stays the  same okay so now i'll come over here   and i'll just replace it okay and that's all of  course if you have really new categories you need   to create new controllers okay otherwise you'll  mess up in your app but i'm getting the idea   so if you really have new control a new food  category you'll create a repository and create a   new controller and repeat the step okay anyway so  now i'll restart my app and we'll see how it goes yes this is what we uploaded and this  is what we see now beautiful isn't it so it just works okay of course we uploaded two  and we see two of them okay it's beautiful so   that's how i'll go ahead and create a  new category and show and if you have   like for now in our app we have two categories  if you really create three categories then   one category food item you can put here the  other one here the other one below down there it's up to you even you can use one of  this menu button over here for showing   some information okay but um that's up to you how  you're going to use this app but anyway you should   have no better idea how to create an endpoint  and how to load the data based on category so   i will do some further changes now we'll come to  back end over here now we just uploaded them right   it should be at the top but they are not so let's  go ahead and make some necessary change and this   time we are going to write some php code now over  here if you open this full uh explorer tab now   uh i'll close them i don't need them now for  now okay so over here i'll come over here and what i'll do i will come to this admin folder  the admin folder is actually responsible for   showing everything over here in the back end  okay so sorry let's come over here inside it   you still have controllers and this controllers  they follow the same level uh convention okay   now over here i do have a foods controller  okay now i'll close this now food controller   is the controller that's showing everything  over here when you see okay including editing   including sorry editing including adding a new  item everything happens through this page okay   and beautiful thing about this back end is that  it's so powerful you don't need to write any html   it's all uh php okay and if you know a little  bit laravel you know this is php and laravel okay anyway so now over here the first thing we want  to change uh for this one we want to change the   order okay now simply we'll come over here now  grid is an object that's created based on this   food model okay and this is the food model  actually we have seen before for our api   this is the same food model okay for api and  controller for api controllers and backend   controllers we use the same food model and that's  logical now based on this food model we create an   object and you can access each of the item in  your model using this object okay and you can   do a lot of stuff we'll see them soon the first  thing we want to do over here you have to do grid   and model i think it's model and then we'll  do latest this is a method then i'll save it   and after saving it i'll refresh the browser and  you see it changes okay it changed automatically   so the order changes okay now if you ever get  stuck that what are these things how they work   well i do have a tutorial based on these things  that how they work you can check out it below   from the link you can also come to their official  site and here like this grid which is this one   over here the same thing that i've used okay  so you can come over here and take a look   okay but do remember that each field over  here they're all coming from database okay   from a table anyway so now this section changed  very quickly i mean we did it right okay great now well if you come over here in our  app a few things you see in the app   this is the first which is the last second  one over here and the latest one which is   this one it's over here but it counts as  a second now the problem is say if i imp   i'll put a new one and over here create  a new food category or drinks category   okay delicious juice and category  is this one and for china for   for doesn't really matter and i will choose  the last one over here and really yummy juice   okay now over here a little bit different thing  i'll just go ahead and copy this one say a lot of   times now i'm doing this on there is a reason okay  i'll go ahead and submit it okay now i see this   one first thing uh well i don't see this thing in  my app right i can try to go ahead and reload it   but it's not reloading so now we'll see how to  go ahead and work on this reloading thing okay   if we can reload it will help us with a lot of  other things okay all right so now over here we'll come to our app which is this one  and this app the file which is called food   page body will come over here or let's see no  not this one so we'll open up main food page   okay over here we have this column so this column  uh is inside this scaffold so now i'll cut this   column okay and then i'll remove this section okay  here i'll use a flutter built-in widget which is   called riff refresh indicator okay as you can  see from the name that it refreshes your stuff   okay now as a child i'll put our column the one  i just had earlier i cut and now over here we   need to put a method okay on refresh it takes a  method that has return type of future of course   it doesn't return anything but the type has to  be future that's because you may need to wait   anyway so now we'll go ahead and put over here a  method but the method actually we created early   so what we'll do we'll go ahead and copy it  so we'll come to our splash folder over here   now i'll copy this method over here  load resources the whole method   i'll come over here and i'll first put it over  here copy this okay and after that i will come   over here and put this okay that's all now  i think uh yes okay we don't need this one okay now what's happening here uh well unfresh  takes a method that returns future type void now   our load resource is exactly the same one okay  now let's go ahead and save it okay of course   you won't see any changes but the good  news is no error okay now if you pull down   you see this arrow icon around arrow icon this  is the refresh indicator so once you pull down   it will talk to the server which  means it will come over here   then find this api client and then come over  here and then come over here i mean our back end   which is actually first it'll come to this api  file anyway you understand that how it works so   then it'll try to refresh automatically  isn't it beautiful yes so with this uh   refresh indicator which is a  built-in widget inside flatter   it's not a plug-in it solves a lot of problem  right it's beautiful and easy but yet we're   still stuck with stuck with another problem  so you see the the last one was this one right   but over here it's not the last one  of course this has nothing to do with   flatter this has to do with how you call your api  once again if you come over here and if you see over here i'll just say yummy  yummy yummy okay i'll uploa   i'll submit it okay now if i come over  here for now i don't see any change but when you pull it down it changes automatically  right and if you come over here pull it pull   down everything else stays the same nothing  changes okay but anyway but now we're stuck   with one problem the order now this has to  do with the api now this part is quite easy   and so what i will do i will come over here and  find our api folder sorry not api folder actually   api folder inside this http folder which is this  one uh the product controller okay now over here uh here we would do a little bit of change okay  here we need to tag a method which is called order   by and over here it takes parameters one is you  can pass anything in general it's created at or id   and the order type we want descending order which  means the latest one first okay now come over here   okay i'll now refresh it after refreshing  the api the changes i made would also be   reflected over here immediately yes that's  the beauty thing about laravel and the laravel   uh framework that you don't need to recompile  because laravel is interpreted uses interpreted   language which is php and among all the framework  i have used laravel is the best one regardless you   may use python node.js for web development laravel  is the best one i would say it's easy like same   thing if you do in python or in java or in any  other language you have to write a lot more code   anyway so well this section is really good and  after that we learned how to create a new api   and load it right so once again if  you want to create a new endpoint   for your category all you need to do you would  come over here make changes and call that   of course if you want you may need to create new  repositories and controllers all right so that was   a test purpose so of course we don't want to use  this anyway now we need to make some other changes   over here we also want to do the same  thing like order by the one we d over here so just copy this one and well this  is the test one which we don't need um   we'll put it over here which is recommended food  now over here we're good and we'll also put it   over here okay all right okay so you can change  the water you can also do asc which means the old   one first now let's go ahead and make sure we  are great yes all right that the order changes   uh here as well i think you can see  that right uh well that's wonderful so with this we are pretty much  done but before i wrap up   uh i'll do some changes so i'll come over here my api and i'll comment it out for now i don't  need this so save it and the same thing i'll   do over here okay all right and for my  product wrapper of course i need to go back   okay i'll save it after saving it i'll just  refresh my app and i'll think i'll see the   new changes okay beautiful so we got back  what we had early wonderful okay all right so   well with this we are pretty much done  and next we'll see how to work on this   personal profile page and we'll draw some flutter  ui over here and show our information and build   this uh page and the page that we are going to  build it should look like this okay and here we'll   have a scrollable section uh profile photo for  now it would be an icon in this information and   this information eventually would read all from  database but for now we'll put some static data   all right well now to go ahead and do that uh  first we need to create over here a folder uh   sorry that should be a folder so we'll call it  account all right and within it we'll create a new   file and we'll call it account.page. okay now over  here we'll create a stateless class and we'll call   it account page so st will create stateless class  for you all right now as you see well we'll have   f bar at the top so we need scaffold right so do  here scaffold okay now it has a property emperor   and we'll use ember now have bear has a title for  showing the title at the top so here we'll use   title but for title we'll use big text so this is  the package that we're going to use and over here   you need to use the text and for the text we'll  use a profile and we'll use a size for it and   for now we'll go ahead and use 24 okay now save  it of course nothing happens the reason is because   over here in our home page we need to change  this section right now this is what we see   and over here we're going to use account page  all right let's make sure you import it all right   always go ahead and save it but you might need  to restart your app for it to be able to work   and after that i think we should be good to go  let's hover over on it and we see this one great   now of course the amber itself has background  color that's what we'll use so here we'll use uh colors dot main color i think we need to import  it first let's do it okay here we do main color   okay and over here we can also use color for  this if we want so here we do colors.white   okay and let's save it and good all right so we're  done with the app bar and now we go ahead and need   to do this one this section now all of this would  be in a column okay so that's what we'll do now   so the column would be inside a body  so here we do b o d y uh let's say this   and say this b o d y now here we'll  have a column column will have children   and now for now this is an icon so here we  already have icon uh image which you see   this one sorry the icon widget so all we need  to do we need to go ahead and call this icon and   use this apply give this arguments or apply  the parameters to it so here we'll come over   here and here we'll call it app icon and this  one okay well here it should be icons.person   all right let's go ahead and save it okay  so it's there and we need more information   we can specify background color so do app  colors dot main color and then we also need   icon color so it would use icon color   uh colors dot white and then we'll use icon  size well icon size we want to use say 75   now and the size which is the background size  we'll use 150 and we say things like that okay   all right so that's so far so  good uh here we need to center it   so first uh we'll wrap it around i think  container widget and over here we do double dot finite now it will center itself automatically all  right now over here inside this well for the top   section actually we can use a bit of margin so  here we do margin okay and we'll do add inserts   dot only and here we'll use a top margin  that would be coming from dimensions   dimensions dot let's see do we need to import  it i think yes so dimensions are high 20   okay now it looks great okay now about  this regarding this size itself let's uh   come over here let's see what we have so far do  we have size any bigger size yes we do have 45 but we don't have 150 okay now well this  one is 50 right 15 so we can multiply it   by 10 then we get 115. so we'll come over here  so over here we do just simply copy this one   and then put it here we do  15 multiplied by 10 i think   it would still be the same here we do have 75 now  for over here we don't have anything like that 75   well but if we do uh add up this one then we get  75 right so here icon size will do dimensions   now i can go ahead and create 45 but  i don't 75 but i don't want to create   so i'll do just addition so dimensions uh  the height to 30 okay so that will get me   75 okay so makes sense hopefully i don't  want to go ahead and create 75 a new one   so whatever we have we can reuse them so that  that section is working pretty well okay now if you take a look over here these things  like each of them they are reusable right   so we need to create reusable components or  widgets so here i'll come over here inside   and over here i'll create a new file  and here i'll call it account widget   over here once again we'll have stateless class  and we'll call it account widget okay now let's   go ahead and import the library now what are here  well first thing uh for each of them we'll have an   icon widget which is this on app icon and the text  widget okay so that's what we want and we should   also have a left padding right so let's go ahead  and do the padding first so here to add inserts   um only now here we use dimensions die uh okay  we need to use left property and dimensions dimension start with okay we need to import the  library so here we do with 20 okay all right and   apart from that we also need top and bottom  so here with the top so dimensions start with   10 and bottom dimensions start with 10 okay so  this is the account widget that we're going to   build and now from account to page we'll call this  account widget and when we call we'll pass this   icon and the text but the text itself will also  pass in another widget which is big text this one   so we'll be passing two widgets to it okay so over  here we'll mention the widget's name so here we do uh let's see so app icon app icon  app icon and over here we will do   big text all right so we'll call it  great tags so this tool we need to import all right okay now over here we need to get  them here we do this dot f i can this dot   big text and now we need to make them required  because we are not going to make them optional remove this const all right okay so that's what we have here now this app icon and the text would be  in a row okay so let's go ahead and do   child with them so here we do row and  now we'll have children okay all right   now within children we'll use app icon  and text so here we do f icon and big text   okay all right that's all now for now it's  that's all i think it will also have a bit   of change later um so now our account widget is  ready for now and i think we also need a bit of   space between these two but we'll do it a little  later so let's go ahead and call this widget   here we'll call it account widget which is  this one and it takes two parameters as you see   all right so now app icon itself we can  pass this one will copy this one and   pass to it all right uh but now here we don't  want well the first one is okay background color   is okay and i have icon size is way too big so we  can't really pass this one so icon size will use i think size 25 and then the total   this this container i think we are going to use  50 okay so here let's see what we have height we have 10 multiplied five okay  now icon size would be half of this   so we do this one okay now the big text  itself over here we need a text widget   so which is big text okay over here we need to  pass a text text for now i'll use my name okay   all right with this we are pretty set up for  now and we'll save it and see how it goes uh   let's open our phone over here yes we are here  now in this part of this code may look a little   difficult for you guys because we are using  widgets inside widgets which is over here right   so we are passing two ejects and putting them in  a row so actually it shouldn't be that difficult   to understand it's just passing widgets like we  passed text widget okay now here we need to use uh   with otherwise they're too close to each other  now here we do all here we'll say dimensions dot with 20 and okay now it looks better now container itself  we can assign color to do colors dot white okay   yes now it looks much better and over here uh we  can also use a little bit of a border color okay   so for that one we are here so we need to use the  decoration and here we do box decoration and here   uh box shadow okay now box shadow it  takes list of box and shadows box shadow   now here we'll have first one is offset   and offset so we'll put the shadow at the bottom  so left and right would be zero and for the bottom   one we'll have positive one okay and then we'll  also have a color so we'll do the colors dot here gray with opacity 0.2 okay and now if you're going  to use decoration we need to move the color   inside the decoration otherwise we'll get error  okay now we also need to use a blur radius   okay now let's use two for now uh let's see okay all right i think that's okay and   if necessary we will change them later  okay and now we'll come to account page now   these two pages are too close these two widgets  are too close to each other so i'll just uh   come over here and put a text  to a size widget okay size box now here we do height and the dimensions height  30 okay yes now this text widget which is this   one i mean this account widget we can make it  reusable okay now to make it reusable here we need   another space so which will put over  here and over here we'll use 20. now   i'll do just to copy this  one few times and we'll see all right our stuffs are there yes so that's  what we wanted but of course right now it's   not scrollable in future soon we'll  see how to make it scrollable okay   looks really okay after this now a lot of you  might still be confused that what is this widget   so this is a text uh this is a widget and it  takes widget inside it as a parameters that's all   uh if you're more like if you're passing just a  text widget inside any other widget so it's like   that but it is widgets inside widget and of course  this widgets they also take parameters like that   so please make sense okay now let's go ahead  and change it so over here we we have this one   uh so we'll collapse all of them and  make a little comment about them so that   if we have a lot of stuff we know where to look  for them okay so over here the first one is uh   profile icon okay and this one is name   and this one should be telephone or phone and  this one should be email okay this one should be   address and this one should be for now messages  i think we need more but let's go ahead and take   care one by one so with this one now uh we need to  change the name phone so over here we'll open it   up and uh first we need to change the icon  icons to dot phone icon okay all right and we'll also use the background color and here  we'll use yellow color let's save it and okay   and for now we'll have a static name a static  number static phone number and we'll collapse that   now we'll go ahead and email and we'll  simply pass the icon over here okay and the color should be yellow color all  right and over here i'll just put in my   email address you can do  yours and over here we'll have address i'll do fill in your address and over  here we do location on let's see this one there's an icon we got and over here simply let's  go ahead and save it and see how it goes first now   for the address itself over here we want to use  a different color so yellow color once again and now over here for widget this one so we may try to use the one messages okay all right and color now we'll use a color that's different  than ours red accent right just like that okay all   right so now there is the problem that right now  it's not scrollable because if you want to scroll   uh it's not scrollable so we need to see how  to make it scrollable now we are inside this uh   column so only profile icon won't be scrollable  other part is scrollable okay well to make this   section scrollable including the name uh first  i will cut all of them okay now here i'll put   another column okay and insert column we'll  have children and we'll put all of them   okay and now we'll wrap this column around the  widget uh that's called single child scroll view single child scroll here now it should be inside  expanded widget otherwise it won't scroll so   here we do let's see object here expanded widget okay now let's go ahead and save  it and see how it's going so far   okay but it's still not scrollable and one  thing though uh let's see if we try to increase another widget from here we'll just copy  this one for now and put it right down there   okay let's check it okay so now it's  scrollable okay so that's how you'd   go ahead and scroll about it so if you have  more stuff you can just simply do this one okay all right so with this we are done with  this page uh but of course it's still not dynamic   which i will see how to get this information from  database now as we're done with this actually soon   uh we'll build a sign up page and  sign in page and once that is done   then we can get information from database  and we'll update that but definitely of   course we also need some buttons over  here that buttons would help you that   go ahead and fill in your address but that's  coming very later so our next step would be   build up a sign up page and regarding that we'll  also build models and necessary information well now we'll go ahead and build our sign up  page first so for that one i will come over here   and instead this pages folder i will create  another folder i'll call it auth folder   and inside this i'll create a new file and i'll  call it uh sign up page dot dart okay all right now over here this would be a stateless class  so sign up page well if you use get x actually   you can create pretty much all the pages as a  stateless okay because get x itself has state   anyway so while over here let's see we want to  return scaffold so let's go ahead and do it and   return scaffold and we'll have body b o d y i  think we need to import the material library yes   okay now over here we'll have a column and insert  column we'll have children and inside children   well first thing i want to have a container  and then inside the container i want to have a   circular letter so as a child i do that i  do circle over here now here we'll put our   apple logo inside it okay and we'll put  it as a background image over here so   we do background image and then we'll  read the image from our local device   so we'll not use network image so  the image path is ss image logo part1.png and if you want to know  what image is this one actually   i think it should be this one okay so  this is the image that we want to show   anyway so now we'll come over here  in our home page now for now we'll   for now we'll remove this and put our sign up page  here but in future of course we'll not put it here   it would be used for authentication okay but just  for now we'll put it here and that's all make   sure you go ahead and import the library otherwise  you'll get error okay now let's go ahead and save   it and you might need to restart your app this is  a big change so let's go ahead and restart our app and then come over here and we see things  like this okay all that's at the top and very   slow very small okay now that's because circle  letter okay now over here we'll use the radius   radius okay now we'll use radius 80 okay  now we'd see it's a lot bigger okay well   now we want to um let's see change the background  color because it's a png image and over here this   is white so we want to have white color over  here so we do background color colors.white okay   now let's save it okay now inside the circle  overture we do have a bit of color that's because   circle letter has a default color which is uh  gray but here we want to use white color so   if we do that colors dot white that gray color  would be overridden i think it is background color   yeah now let's save it now you see it's gone  okay all right now over here circle over itself   we want to center it well many different ways  to center it so here what we'll do we'll first   say wrap around inside a center widget and  we'll see if it works or not yes it does   now over here the problem is this top section  okay now for that one we want to put something   at the top now for that one here actually  something we can go ahead and use a size box okay   all right size box will use a height and  it will come from dimensions dimensions dot   well i think first we need to import it so here we do screen height which we already have  it and over here we want to put a little bit of   height at the top okay now  it came down all right uh   okay so that's looking good and now the  container itself let's give it a height   some height so it might be even  better so over here we do the same one and in this case it's 25 okay so it becomes the  the whole container become a little bigger okay   so it came down a little bit okay all  right and uh well so far this is okay   and next we'll go ahead and over here we'll draw  our text box okay all right now let's go ahead and   do it and for text box uh first we'll go ahead  and draw a container and text box will put it   as a child so it is a text field okay all right  and text field will have let's see a controller   and decoration this to if we use we can do a  lot of things okay now we'll go ahead and use   a controller but for that one first we need to  declare a controller so here we do first would   call it email controller okay so here we do text  editing controller so we created a controller   variable and the type is text editing controller  because we want to put text over here okay   now over here as a controller we'll  just go ahead and use this one all right   okay now the error should be gone okay now  well let's go ahead and save it and we see   things like that okay and you can already  type in okay like that okay no problem so that's it now we can go ahead and do the  decoration all right now over here i think that's   uh input decoration okay all right now it is a  few properties that we are going to use it is   five properties well first one is the hint  text okay and the second one is i think uh   prefix icon third one is uh focused  border and then we'll have also enabled   border and then we'll have border okay so these  are the few properties that we are going to use   okay all right so first over here we'll deal  with this hint text okay now for him text we   can directly call him text properly and over here  we'll first call it email okay all right so that's   done and after that we want to use the prefix  icon now for icon you do icons dot email okay all right and let's see okay and we can use the color  for this we use uh color   type colors dot now we need  to import the library first and then we do yellow okay all right and the site  itself will use default size and that's what we   get okay all right so far it's looking great okay  so that was our prefix icon okay all right okay   and now over here what you do would do uh focused  border when you focus on it like when the cursor   is there how it should be okay so over here we  do focused order focused okay we need this comma focused border okay now for focused  border with in input outline border in   uh or i think they call it outline input border  actually this one okay all right now it is border   property so first we do border radius for the  radius dot circular now over here we want to use   dimensions dot radius 30. okay  so that's what we want to use   and over here let's go ahead and save it yes  we already have the border okay great now we we also want to use border side because  we need to we can define the border uh this   width things like that so here we do border side  okay with 1.0 and then here we'll use color okay   and colors.white okay all right so it's pretty  much gone actually with this okay all right and   so next we'll go ahead and see how to use  enable border now for enable border first   we'll copy this section okay and here we write  enabled border enabled or i'll just paste that   and that's as simple as that one  okay so over here it's a enabled save it okay yeah so now if you come over  here and come over here so it's a focused one   and it's enabled one okay now  let's take this out save it   you see if you don't have enable  border you still have this line   and this is your focused border which you already  did once again if you come here and refresh it   so it's right now this is the enable border but we  want to put like this okay all right now it's gone okay uh now the the other one  is just border over here okay   so we'll use the border properly and  for that once again we'll copy this one we have to copy from here   and right now we'll just for that one we'll  just use a border so it's pretty much gone   okay all right well now this is inside this uh  text container right this is container so for   the container actually we can use decoration  property okay here we do box decoration okay now for box decoration we'll use uh first  over here with color and colors.white   and then we'll use the box shadow okay   all right this one and it will take a  list of shadows so here we do box shadow and here we do blur radius okay blur radius 10  spread radius say seven in general spread radius   is uh smaller than blur radius and which makes it  nice over here we do offset uh one one so you want   it both left to right top and bottom now over here  we do color so do colors dot gray with opacity 0.2   okay all right so that's what we have now  but uh that's looking a bit strange right   okay now here this reason is the margin so let's  take your margin over here so here we do a margin   now here we do edge inserts dot only  and they will do left dimensions dot uh height honey i think and right  dimensions dot height 20. okay   all right okay well this is already looking  great and let's see now our or uh container   should take effect of radius okay now over here  uh let's set up our border radius actually so okay so here we do border radius circular okay over here let's do dimensions  dot radius there okay now it looks much better front page okay now with this we  are done with the email section   but now we'll have email password phone  and name so we want to make it a dynamic   uh reusable widget okay so for this one i'll cut  this over here okay and i will come over here and inside this widget um i'll create a file  and i'll call it app text fill dot dart   okay now here we'll create a status  widget and we'll call it text field   okay and we need to import this dependencies and  over here i'll just paste what i copied early   and it will throw a lot of error and for this one  actually we can just simply copy this to over here   and put it there and all the errors should be  gone and then you also need this material library   okay so yeah but because we want to make it  reusable so some of these things like email   controller and hint text we should pass down  okay all right so to do that well that's why   we have error over here as you can see well now  first over here would do final uh text editing   controller text controller okay and then we'll  also have final uh string and text okay and then   there is also this icon over here we also want to  pass it down okay so here we do final icon data icon okay now over here we all need to do  pass this down text controller this dot hint   text this dot icon okay now over here we'll  just go ahead and add this required keyword okay great doing this this is gone the reason is because  you need to call this app text field from here   okay sign up page so we'll go ahead and do  it so over here we do a text field f text   field and it has two parameters as you can see  there it takes three over here text controller   okay now first one would be our email so we'll  pass your email controller and in text is   email and over here it will pass icon start  email okay i considered email all right now   let's go ahead and save it and we say this again  all right and here you can type anything okay   well that's great and now over here we want  to add a box over here so here we do size box and height dimensions dot   height 20 okay then we'll put a comma  and we also need to come over here okay all right now what do we do  and just go ahead and copy them put it three times all right so that's  what we see okay and now over here we   need to change them so the first one is a  password and over here you will have pass password sharp okay let's save it yes and the second one is no email so that should be  your phone or name actually so here we do person and we'll save it and the last one so last one  should be your phone over here would do phone okay all right so with this actually we  are pretty much ready with the signup page   okay it's great now just uh before  we go ahead we need to copy this   one another two times three times actually  now here it should be password controller   and here it should be a name controller  and here it should be phone controller   now okay so over here we'll put our  logo up logo so just some comments so   that you can find them easily now over  here your email and over here would do your password now because before we go ahead  and do password over here let's change it   from email controller to  password controller all right and then we'll come over here here we  do your name okay so we'll change it to name controller okay and this one over here your  phone and we need to change it to phone controller all right so well for now that's basically it so if you come  over here oh this is our profile but of course   here the sign-in page sign up page but  soon what we'll do we'll go ahead and   put our other information that we need for  example uh three over here you also need to   sign up things like that okay and three options  things like that well now we want to achieve this   result over here the one we see okay so this  is what we what we want to achieve uh and uh   so for this one uh what i'll do would be here  and first i'll do draw a container over here   because you see it is border so we need to go  ahead and do container to do container sorry   container okay now it will have width and  height so we do with and which should be from   our dimensions file dimensions dot screen width  this is what we'll do and get and we'll get half   of it and then we'll do height and once again  it'll be from dimensions and that screen height   okay and i'll take one thirtieth of it okay  so it would be pretty much like this and then   we want to have a box decoration on the decoration  because we want to have border so we'll have   decoration over here with the box decoration and  then definitely we'll go ahead with border border   radius okay and a border radius dot circular and  once again over here we do dimensions dot radius   30 which we already have and over here we'll  listen color and we'll do add colors dot our   main color okay all right so with  this we'll get something like this   and now what i'll do i'll uh open it and we'll  see it over here uh hold on uh i might have   done a bit of change so but don't worry  it has nothing to do with you guys   now okay i'm over here all right  okay so here we'll put a child and   child should be big text okay all right and  the text should be over here we'll say sign up   okay and i think we can also  set a size for it so we do   dimensions dot font size  20 plus font dimensions uh   front 20 by 2 which gets us 30 okay because we  don't have 30 but we can utilize it uh okay and   we can also okay so let's put it there and see how  it looks so so far that's what we see over here and let's let's go ahead and restart it one more  time and uh okay all right so that's what we see   now while it's too small i think the problem  is over here it should be screen height okay   all right all right now it should be better now  this one we need to put the text in the center   of this container so we just simply wrap it around  center widget because if you want to put any child   inside a container in the center then you should  wrap that child using center widget and that would   do the trick okay and now as always we'll set  up a color for this okay to do colors dot white   okay so it'll make sense all right so with this  we are pretty good and next we want to have a   text tag line over here okay now for the tech line  once again we'll use size box because we want to   have a bit of distance first and then we'll do  height dimensions dot height 10 okay all right   next would do a tagline over here but that  tire line would be clickable now that would   be a text well if you want to clickable text well  the one way to do using a container the other way   we can use rich text okay so let's learn  something new so rich text takes the text properly   and inside it it also takes another text widget  which is called text span okay now within it   we'll also need to have another text so the thing  happens here rich text takes a text and that text   takes a text span as a widget okay now within  it you have all right over here have an account   already okay just like this now we want it to  be clickable and so for that reason over here   we need to use a property  which is called recognizer okay   so it's more like gesture detector but this  is for text um well if you're coming from   web background you know that on a web  background you can click on a link using a href   things like that okay so now here this claim  this is this is a link in web application   right so over here we're doing the same thing  because we want to make the text clickable okay   so of course you don't use a link property  here you use a recognizer and recognizer takes   another package from well i'm it's not a package  it's a function or constructor from other package   it's called tab gesture detector recognizer  okay and we need to make an object out of it   and inside it there is a another function which is  called ontap as you see over here the first one so   that's a function so this is a function okay now  this function will return something now for now   just to return get back so what will happen  once we click on this text so let's just   let me save it okay and uh okay now text span  might have white color so we need to change the   color and if to do that we need to use a style  over here so we use a style and a text style   so text style and here we'll use a color  okay now the color because default is a   white color so we don't see it so here we'll  use colors.gray and we'll use the 500 okay   now we'll see it's there now the  text is too small so we can set our   size over here font size now we'll get it from  dimensions the dimensions dot to say font size   now we'll use a 20 okay and let's see  okay so that's what we have over here   so this is clickable but for now of course if you  click it it won't work okay because it's getting   back so you're not going back anywhere because  it doesn't have any previous page to go back   okay so but in future we'll see how it works  so don't worry about that one so all i did   over here i make i made this text clickable  using tap gesture recognizer okay all right   but of course if you want to get  this one you have to come inside   text span and that has to be inside rich text okay  so hopefully that's how it works now with this   this section is done and then we will go ahead and  put other stuff now there's this problem if i put   other stuff it will throw overflow issue but of  course once again in future the sign up page would   be a dependent page not over here so now i'll go  ahead to our main dot file main.dart file over   here and i'll comment this out and for now we'll  just focus on the sign up page so we want to set   the complete signup page we don't want to have  this one because in future when our app work   works correctly will not have any kind of bottom  below it okay it'll just be an independent page   anyway so instead of splash screen over here  uh okay let me comment it out as well and uh   right here home and over here i'll do sign up page  and that's all okay and make sure you import it   all right let's see if uh okay it wants  us to add a const modifier and let's do it   okay now let's save it okay now saving not  going to work so you need to restart your app   okay now here we are that's gone okay all right  now we can just simply focus on our uh app uh the   signup page over here and next we want to show  uh tag another line over here after a distance   okay so here would create a bit of distance and  here we do size box one more time okay all right so in this case we'll use screen height and  we'll get a very small proportion from the screen   so that would be the distance now  over here of course you can also do it   height no problem but for height we don't have  exactly that amount we can make it make it   work but this is more straightforward okay so  now over here we'll have another rich text uh   this time we'll not use this recognizer  we'll just use the text over here   okay and we'll remove this one we don't  need this and over here we'll say uh sign sign up using one of the following methods okay now let's save  it and you see this one all right so or we could say use one of the  following methods um let's see over here okay the font is it too big so we don't want to  get this font size so let's see we have smaller 16   so we'll go ahead with this one now it would put  in the center okay because just now it was too big   all right now let's see we are getting too  much information so here i would say tag line   and here we'd say sign up button okay now  over here we would say sign up options all right cool now we want to have three uh  buttons over here so for that one the three   buttons would be in a row so this time we'll  use wrap widget for that okay previously we   have used it and we know it texts children list of  children and will generate three children in a row   uh and we'll use lists to generate to do  that okay all right now we will create three   uh children and over here once again we'll  use circle over here to do that circle avatar   okay all right now over here inside we'll have  image now the images would be coming from here   and for that reason i'll declare a list of images  over here so here are just a bar sign up images   all right so here i'll create a list and  inside here i'll have teeth dot png f dot png   t means twitter app means facebook g means google  now in your asset folder they should be there okay   inside this one you should be able to find it i  think they're somewhere down like t i think there   should be f as well and f so you get the idea  anyway so now let's go ahead and work on this so   go to the bottom over here we'll have circle  avatar now here um we'll have child so no we don't   need child actually we need over here is a radius  so radius will use say 30. so in that case we can   use dimensions dot radius 30 okay now it has it  takes the background image that's what we'll use   and over here we'll use asset image  okay that's that image now the images uh   path mostly i mean they're in the assets folder  right and then inside image folder after that   now we want to make it dynamic so this part i  can of course write t dot png now the problem is   with this it will show three twitter but i want  to change this but dynamically so i'll take it   out and put it outside so that i can because we  have a list at the top so we can index through   it loop through it so here we do uh sign let's  say sign up images index all right now it works   but they're too close to each other so for that  reason although i'll wrap it around padding widget   and over here let's use this padding and it works  okay all right so while this page is already   looking much better okay well now everything  else is fine over here and uh now if you come   and try to type uh let's see so now here's the  problem okay now let's go ahead and toggle our   keyboard and to do that on mac you'd  do shift command k and if you put your cursor and select shift command k let's see yes  it should show up and it did show up but now here   we see this overflow issue okay so let's go ahead  and fix this one to fix this we need to wrap our   column around the single child scroll view and  that should be enough okay so all over here do   uh widget and here we do single child scroll  over here single child scroll view okay   all right here we can use the physics  property which is this one bouncing let's see   bouncing scroll physics okay now let's save it  now it's gone okay now if the keyword shows up   and you won't get any error and you can also  uh do like this move it up and down okay so   hopefully it works okay now if you if you're even  here typing and you click enter it would come down   automatically okay so here we do let's type in  something okay you might need to do continue   a 8 i think right now you need to use keyword  a dot com oh it does have funny sound though   okay all right now i'll shut this  keyboard down on mac command k   well so now if you want to hide the keyboard  you'd still do the same shift command k all   right now it's gone and here you can do one two  three four five six all the validation would do   later once we are done with our back end and  as well as billing models for those steps okay   then we'll do validation well now we'll go  ahead and see how to build our signup page   well before we go ahead and move on  actually let me change the icons that   we did over here i think we need to change  the icons as well so over here we do see that   we have different kind of icons but if you  come to this app text field which is over here   i don't think we change it so let's go ahead  and change it the icon okay so over here simply   we'll just use icon okay because we are passing  icon now let's save it uh yes okay so that's what   we wanted all right great now i'll i'll  close this app over here and i'll open   the other one the one i already built so this  is the signup page that we want to create   okay so well for this one we'll come to this  auth page over here and over here we'll create   a new file and we'll call it sign in page dot dart  okay and we're gonna be smart about it and what   we'll do we'll just go ahead and completely  copy all of it and put it over here okay   all right uh definitely we need to change the name  you want to call it the sign in page i'll copy   and paste over here definitely we donate  this section over here so we'll remove that   and it'll throw an error which is also  good because we can find it easily   and remove it so we don't need this section as  well now think about it what are the sections   we need so definitely we need this app logo  we need this your email and password okay   so rest this few fields we can just  simply go ahead and delete so i'll delete say up to this all right okay that's cool and now  over here we do have a bit of different layout but   you see that so this is the apple logo which will  have no problem now here we have this to text as   you see okay so we they are on the uh left so what  do you need to do uh well we need to go ahead and   create a container okay so here we'd call  it welcome section okay so over here we'll   create a container and uh container will have  margin because we want to left margin over here   so here we do engine sets only  and over here will do dimensions left die dimensions dot width 20. okay so here that's it and now  over here uh they are a column   right because they're on the top of each  other so here we do uh child and a column and here we'll have children and here will you do   now we want to print this text over here  which is hello so here simply do text   hello all right now this might have a very big  font which as you see from here so here i would   use the style for this and as i've assigned font  for it so here we do text style and over here we   do font size okay now let's see in our dimension  section we do have a font size but here we do have uh 16 20 and uh 26 but here we'll get it three  times which is 60 plus uh dimensions let's see okay by two so that will  get us around uh 70 and this is what we want   okay so this is simply what we want and over  here would have font weight and here we do font   weight dot bold okay so that's what we want yeah  okay so we didn't save it yet but we'll do it so   this section we are done and definitely we're  gonna keep this too no problem regarding this too   okay now over here we need to have a text okay so  uh for this one simply what i would do i'll just   say i'll remove this one because we can use this  whatever we have the text and over here we'll just   simply write sign into your account okay now  the thing is that this is a push to the left   right okay so now for this one i'll  i'll first over here we'll have a row   and inside it all have  children and i'll put it there   okay it'll work we need some adjustment so we'll  do that slowly now over here we need this distance and we do have a bit of distance i i would  say that and we'll take care of that later   and after that what do we need we need  a button where it says sign in okay   now i think i have removed that button so what  i'll do i'll go ahead and copy from here so this   is the button that we're looking for so i'll  go ahead and copy this and i'll put it say uh right right below it right below it  okay so here i'll just say sign in sign in and sign in okay and of course we need this one  and then we want to create uh this line over here   and uh let's see and after that actually we  need a bit of distance so i'll copy this one   and i'll put it over here okay all right now this  section will have one line and this part is not   clickable but this is clickable so rich text is  perfect for this now over here i do already have   a text so i'll change this one and here i'd say  don't now for showing this sign over here you need   to splash in this one and then t okay don't have  an account like that so that's as simple as that   okay and everything else stays the same over here  and now how about this one now this should be part   of this rich text and we should be as over here  children okay so what i will do right after this   inside this text pane we'll have children okay and  we'll have list of children but in our case it's   just only one which is this one okay now to  be able to do that what i will do i'll just   uh let's say copy this section and  put it here and then i need one more   bracket okay now over here i'll just simply  say create okay well with this this one   and this one should be one line and this is one  of the biggest advantage of using rich text okay   so if you do that then you need a text span and  insert text pane you will have another text span   as a child or part of the children and then the  children would align with the first text pane   on the same line okay all right now  well this is great and this is also   clickable and for this one here we do recognizer  okay now here we do tab gesture recognizer   okay all right and then we'll get  a function which is called on tap and it's just a one line function and now  over here we could do get to somewhere okay   all right now here from here we'll go go to sign  up page because we already have a sign up page   okay sign up page and that's as simple as that  one okay uh well this routing we can change it   later it doesn't really matter but this is  just for simulation but now we are done with   this section over here the one we see okay and one  more thing before i close this and go to our app   i think we also need a font weight over  here so do font weight and here we do   font weight dot bold okay now i will  close this one and i'll open up our app now over here in main instead of sign up we'll  call sign in okay all right sign in page and   you need to import it let's go ahead and do that  okay now let's save it and see how it looks okay   all right so this is what we have and this is  not exactly what we expected but close right   so we need to take care of some of the other  issues so we'll start from the top now if you   come to the top over here uh app logo and  welcome okay now here we do have one text   but we wanted the other one as well so  copy this one and put it right there and sorry i think i should put it outside okay and  let me see what was the text there that has signed   into your account okay so i'll open this and  i will change this one i'd say sign in to your   account okay now definitely we don't want so big  font size okay so that's what we want and i think   we also don't need this one for now okay and i'll  go ahead and save it and we see this one okay all   right now over here the color itself we can change  we'll do colors dot gray 500 okay all right now   they should be over here as we talked earlier so  we are inside column and we can use cross access   alignment because horizontally and we'll start  from start okay so they should all be here   well now this is happening because this  is happening because we don't have any   width for our container so we can give it a  bit of width let's give it away double that with uh double dot max finite and  let's see yes it works now okay   so without wait it'll just center it it doesn't  know how long we should extend and based on that   uh doing the layout okay all right so that's okay  and after that over here we'll just uh let's see   uh this one i'll copy this  and i'll put it right below it okay cool all right now we'll come over here the  rich text now we want it to be over there for this   one actually we can use expanded widget and inside  we'll have a blank container empty white container and it already worked as you see okay and um that's fine and actually now it's too close  so what we'll do over here we'll put a size   box uh box and over here we do with in dimensions  dot with 20 okay so now it would be better and   over here now definitely we don't want height  10 we want 20 okay which looks better so it's   already working great and what else uh next uh  okay this section over here signing is great   and don't have an account font size uh let's go  ahead with the 20 okay now over here is the same   20 okay and the color most probably would stick  to colors dot uh main black color okay which is   this one and we want to create a bit of spacing  space over here and it's great all right so now   what do we hope we click on this we should  go to sign up page okay and which we go yes   now if you do already have an account over  here you can go to sign in page as you see and   that's what i told you early that we can do like  this okay so it's already working that's great   and we do have uh interesting changes that we  need to make like if you create over if you let me   restore the app and let's see how it's going okay  well it's restarted and you can create over here   so it's from the left from the right side it shows  up and it goes back and shows up like this okay   now we're going to change this  one a little bit so over here   we can set up a transition property  and we do transitions dot fade okay now restart your app and this time you want to  click on create you see the effect is different   it's more like it's popping up from bottom and if you click over here i have already an  account so it does come here and it takes you   there okay have an account already right so  it's more animated if you see okay all right   great well next we'll see how to go ahead and  build uh our model for this one so that we can   receive data from our text field and then we'll  be able to send the data back to the server but of   course to do that we just not only need to build  model we also need to build our controllers our   repos and lots of other stuffs   all right so now we'll go ahead and understand  how this signup form validation authentication and   server responsive work and how they are connected  together okay all right so we'll come to this link   once again okay here we have uh all this uh basic  information that we need to understand about our   app now here today we'll take a look at a  post request but this would be actually our post request for   sign up okay and validation so anyway from ui  we'll have a form and inside the form uh uh well   not inside the form on the same page we'll do form  validation so we'll process the form data and that   would happen in the same signup form and after  that if the validation passes actually we'll send we'll go for uh auth controller and uh auth  controller would do a little bit further   data processing and then we'll go  to author apple from auth controller   and then author app would call api  client in the api client will have   post request okay uh the actual body of the post  request from here it will call the ipa client   but the actual body of the method is in api client  so far we don't have any post request we have   get method or get request and after that  api client would send the response to the server and where it will make the server endpoint  and last time we have seen what is endpoint   and server also do a bit of validation and then  after validation it would give us a response   now response could be two zero zero four one  four zero one four zero three or five hundred   that's also kind of status so within response  we'll have our status okay so either it's uh   success or failed and at the same time we'll  have we'll send code inside the response okay   is it 200 401 or 40403 or 500. so this is  called status so inside response will have   status status has a code and we'll on the  front end in flatter we'll check this uh   uh code is that whether it's a 200 or not if  it's 200 that means everything winds successfully   and we'll save it to the phone using local storage  otherwise it will send a message to the user   that something went wrong and will try to give a  message related messages what went wrong okay all   right so this is the basic structure but of course  in between we have a lot of other small details   that i didn't point it here but this float help  us actually what we should do first anyway so for   now we have done on the form so now we'll go ahead  and do the validation in the same signup page okay   all right so let's go ahead and do it so now we'll  go to our sign up page actually over here and sign   up page uh over here we have this four variables  and they are different kind of controllers uh but   of course they are being initialized from the  same controller and we are giving them value to   our text controller using each of these names  so we need to create a method and over here in   the method we'll grab this controllers and see  their value okay and of course that will trigger   the method would be triggered from here so first  thing we need to do we need to wrap it around   a gesture detector okay so out here do  option enter and we get gesture detector okay now here we would have ontap method and here  from here we'll call a method which is called   registration and inside the method we do our  first tab which is called validation okay so now   we'll come at the very bottom over here right  below scaffold uh so what i'll do i'm going to   go ahead and collapse this okay so right here i'll  write a method and the method type would be void   and method name is registration so inside this  registration method we'll do validation okay all   right now here first we'll grab all the variables  and their string okay so these variables the   one we already have over here okay so we'll grab  them and try to save in a variable okay grab this   this this four okay so here i'll declare a  name uh sorry variable and type is string   and here i'll call it name and name  would be from this name controller   and then we'll do text we'll just want to get  text because controller has other properties and   will stream any kind of white space okay all  right so now i will copy it four times okay   so here i would do phone here i  would do email here i would do   password okay so now here it would be  phone controller and here we'll have   email controller and here we'll have  password controller okay all right   now let's go ahead and call this one okay so that  we know that it's being used otherwise in gray   so just here all right and that's all  now we can let's see what's happening registration we are supposed to inside  this scaffold okay we are here and okay to move it to the top okay now anyway we're good let's uh come down over here so  here we'll start to do validation one by one   okay first we'll check the name okay so name is  empty or not okay because it's a string and string   has a string variable or string object actually so  it is a method which is called empty or property   actually as you can see hover over on it properly  which is good you can check on this okay all right   so if it is empty we'll send a message to the user  else if now if you have this phone number okay   and we'll see the phone number is empty or not  okay the same thing so here we do phone is empty   that one and then for email we'll first check  if it is empty or not so we do email is empty okay and then we need to do another check else  if this email is really email address or not now   get x package has a special method i think  it's called get utils and which has uh   property to check if it is email or not okay  so that's it so that's why i love get x package   okay so whether it's email or not so we do  validation over here and the send a message okay   and else if now check the password okay  now password is empty or not is empty okay if it is empty then we'll  send a message to the user   else if well now password is uh we'll  see if it is less than six or not okay   so password.length if it is less than six okay  so we have to have at least six uh characters   else would do the actual uh uh what is it post  request i mean from here we'll go ahead and call   controller method of course we'll create  a similar method like registration   in our auth controller okay now here we want  to show some messages to the user all right if   things go wrong if any of them all right now for  this one we need to create a custom message box   or custom message widget okay and to do  that we'll come over here in the base itself   over here we'll create a  new file and we'll say show custom message dot dart okay now over  here we'll create a custom message now over here we'll just simply  create a method and that's all   and we'll it'll be void type and the  method name would be show custom message   okay i think i want to call it show custom  snack bar because it would pop up as a sniper   yes so what i'll do i'll go ahead and rename  it and rename over here show custom sniper so there would be a pop-up message now over  here so this method would get called from here   so here we would give it some parameters so and  we'll receive them over here so the first one is   string and it is a message okay now others two are  optional so here the first one is type bull so is   error well in general the error is true because  we'll call this on only for validation so   default status is that it is error okay  and we'll need to set a title and the   string title over here is error okay like  that now this one we must send so that's why   uh it's not around this curly braces of course we  can put all of them in curly braces that's okay   too but with this it means that you don't need to  uh you must send this one okay and for this one   you don't need to use any name and for optional  parameters which are wrapped around curly braces   in general when you wrap your variables around  curly braces they are optional parameters so   you may send you may not send okay so you should  have a default value all right so now over here uh   this is what we have and inside it uh okay before  we go ahead inside let's import a package so here   we do import get once again this is from get get x  package and it is a method inside which is called   get smack bar okay now as you see it takes a  title and a message and we already have title   and message so this is the title and this is the  message okay after that we can actually use more   parameters inside it uh more properties and title  text now for title text we'll use big text okay   now inside it will use a text and actually  sorry and actual title would be sending so title   is given to it but it would show from here  okay now we need to go ahead and import it   and for this one we also want to set up a  color for our title so we'll do colors.white and let's go ahead and import it all right and then message   and for this one we'll just simply go ahead and  use a message and inside message will have message   now actually you can just go ahead and stop with  this too you don't need to write any of this   but when you have further properties like this you  continue to do them it means you are customizing   them without this this get get.snackbar  would perfectly work you don't need this but   you want to customize it okay so over here  we will style and here we do text style okay and color there should  be color for it and let's do   colors dot white okay all right let's see  uh it might want you to add a const modifier   let's see all right okay and we can also set  the color for general text so do let's see   here we are here we are okay right after  it color text and the colors dot white and then we'll do a snack position from where  it should show up this is what we do and snack   position snack position dot top from top  section and background color for the sniper   here use colors dot red accent okay because  this would be pretty much all error message   okay so that's why we need red color okay so with  this we are done with this custom show snack bar   and every time next we do validation any kind of  validation in the flutter framework inside our ui   we just call this one okay so that's why  we put it in the base directory right   so now we would be here so here's the thing  so first here would call show custom snack bar   i think we need to import it and the first one  is name okay so here we would say okay type in   your name okay that means it can't be empty type  in your name so that's the message and title is uh   uh name okay right so we'll just finish it there  and now we'll copy this one and put it here   type in your phone number phone number okay  now this is the same one type in your email address and here we say email now here let's say type in our  type in a valid email address so here we do valid email address valid email  address okay now here you do type in your password here we do a password okay now  here password can't be less than six okay so   password cannot be less than six characters  uh yes password okay so here we do password but but interestingly if you want to do more  validation actually you could go ahead and   use get utils it has a lot more features okay not  just emails you can even see it's whether it's a   number digit or special characters okay otherwise  we'll show over here for now we'll say perfect okay all 112. okay so this is what we have now so   after this actually we can go ahead and try  to do a simple validation but of course that's   just on the front end okay so i'll restart  our app and simulator which is over here and   i'll go ahead and create one and let's see if  you click on this and make sure that this is open   we'll see if we get here or not okay type in your  name okay all right so first one i type my name   okay type in your phone number so i did type in  your email address okay i'll just go ahead and   check type in your valid email address because  it knows that it's not an email address okay and   let's do a dot com and let's try it type in your  password okay so well of course some of this uh   suffix could be very long but a dot okay so now  here it's fine and over here here you could do   password one two three now it can't be less than  six characters so one two three four five six uh   just go ahead and check it all went well so so far  we are good so here we are hitting if things are   uh being typed okay all right so with this we are  good and next what we saw so after this we need to   go ahead and build this auth controller but now  here's one thing we are missing in this picture   that i didn't write so well there are a lot of  other small details that i didn't write so after   this validation one is done over here locally  we need to send all this information to auth   controller okay well how to send that well for  that one actually we need to go ahead and create   a new model because using this model will combine  all all of them in one object and that object will   send to auth controller and auth controller would  send to other repo so auth repo would convert it   to json and then it will send it to api client  and api client to send it to server because uh we can only send a json response and json  object to server so we need to convert it to   json one second but before that we need to   uh package all of our data into one object  okay put all of them into one object   and for this reason we need to go ahead and build  a model okay all right so for this one next we'll   go ahead and build a model and we'll come over  here inside model so here we do signup body   dot model sign up body model dot  dot so this would be purely dart   okay now over here we'll create  a class and we'll call it sign up body okay now here it will have some  fields the first one is definitely name   okay and then we'll have uh say phone and a  string will have email and the string will have   password okay so definitely these are the four  fields that we need to send okay now let's   go ahead and build the constructor so in the  constructor we'll use all of this that we need   let's see okay so here we do required  this dot name and required this dot phone required this dot email acquired this dot password  okay so with this uh once we send so so far   with this if we call it from here from here okay  then we'd be able to create an object okay and   there would be a sign up object and that object  will send to our auth controller so actually here   we can create an object and we'll see how it goes  okay so here we just simply call sign up body uh   sign up body this one okay and sign up body this  is object name and we'll create the object call it   by calling the constructor okay now over here we  need to pass this uh parameters let's see sign up okay yeah this one all right because we  need to pass all of them not the first one   this way it becomes more easier for us to know  what's happening so here we just simply send   the name this is the name phone email so that's  what we are sending directly from here okay   and uh they go to the corresponding field in sign  up body okay now after that we can go ahead and   print a message with the print signup body dot  to string okay all right now let's go ahead and save it and let's try to put some information  over here a dot a dot com and password one two   three four five six name ahmed and here just  a phone number okay let's see and insert some   instance of signup body okay perfect so now we  already created an object okay with this well now   after this actually we need to go ahead and create  our auth controller okay so we'll come over here   and inside this controllers will create a new  file and we'll call it autocontroller and auth   controller would have this registration method  okay and once again this would be pure dart class   so here we do class of controller we'll create  the class name and then we'll do extends   get x controller okay and we'll do implement  service service because we want to use a repo   so that's why we need to call service okay all  right so that's how mostly they work together   all right and after this we  also need to create a repo first   okay like as you see from here it calls rappo  so previously we have seen when we do this one   that inside each controllers  you should have a repo okay so we need to create and initialize this uh  repository so first go ahead and create   a repository so inside this uh let's see data  repository here we'll create auth repo okay so   we do auth repo dot dart okay all right now over  here we'll create a class and we'll call it author just like any other repo it doesn't extend  anything but it will take two variables one is api   client api client just like any other repos and  the object is api client okay and here we do final   and we also want to create a shared preference  object over here because once we get the token   from the server we want to save in our app inside  so we need shared preferences object okay so we'll   call it shared preferences shared preferences  okay now we'll go ahead and create the constructor   now here we do required this dot api client  and required this dot share preferences okay and for now we are good to go with this too  all right so now we have this api client uh which   uh sorry author f4 and auth controller now we need  to inject them in the dependencies okay all right   now of course over here the auth controller itself  would take this auth wrapper okay so here we'll   first create an instance of this final authrapo  why we are doing that because authorial will have   method we'll call that method from auth controller  okay so here we'll call it repo create an object   okay and we'll create a constructor for this  class author apple required this dot authorical all right and we don't need this okay cool so now  we'll go ahead find our dependency class and which   is here now we need to inject them in our app okay  when we load everything so we'll come over here   uh right after it and here we'll call uh  our auth wrapper okay so we do get dot lazy   lazy put now here we'll call uh let's see  what is it author upper right rifle okay and   it takes two objects one is api client and shared  preferences just like old time we do get dot find   okay and here the same thing it would find  the object automatically for the controller   okay all right and over here we do auth controller  let's go ahead and do that so get dot lazy   put and here would call auth controller  and we need to do get dot find now with this they would be loaded during the  loading time and they would be injected in our app   as dependency injection and at the same time we'll  create a constructor now this will definitely get   api client and shared preferences object and this  will have authrap object great and after this we   can go ahead in our auth controller which is this  one and create more classes sorry more methods   okay all right and here we want to create  some variables and the first one is bull   and we'll call it is loading so check if  it is loading or not just like all the time   when you loaded data from server  so the default value is false and   we want to also get it so we'll have  a get filled so here we do is loading is loading okay all right great now after that we'll go ahead and create a method  and method name is registration registration okay now as i said earlier and we saw early we  need to pass this this thing over here this object   to this method okay so here definitely it will  take signup body as an object and its parameters   sign up body sign up body okay so that's what it should take  all right and once we call this one we   immediately set it to true is loading equal  true because once we call it means data is   being loaded which means we are talking to  the server okay all right and now over here   we'll call the method the actual  registration method uh to the rapple okay   of course this is the body because just like  any other rep previously we have seen that we   always have a corresponding register corresponding  method in our wrapper okay just like if you see like say product controller it has a method  which is get popular product list and in the repo   we also have the same method right so  this is exactly what we're going to do   so so we want to create uh the repository function  of course just the name which will call to the api   client and that would be in our author apple but  authorized would also go ahead and call a function   in our api client so i think it's better first  go ahead and call the function in api client and   we'll call that from author apple and from  auth controller will called authrapo okay   so that's how it should work once again here we'll  have this post method the post method would get   called from author apple and auth controller would  call that related registration post method from   authrapo okay so let's come over here so for this  reason we'll go to our api client and actually create a method okay so post method now let's go  to our api client which is over here and just like   post get data we'll have here post data okay so  here we'll create the poster data and it will   get uri like this one so we'll do string uri and  over here but of course we are sending data to the   server so we need to get data as well so the data  type is dynamic because we can would reuse our   post data not just for sign up sign in for a lot  of other things so the data we are sending that's   a dynamic type and we'll call it body okay now  over here we'll actually call the http post client   or post method from here okay now we'll wrap it  around try clause uh syntax and here if things   go wrong we'll catch it okay and that should be as  e and for now simply just print e to string okay   all right now over here uh what do we want  to do we want to call this post method okay   now this post method would be coming from get req  get get x package we are not using http client   just like this one uh get method is coming  from get x package so over here it's the   same thing so we'll have post method and as  you see the first one actually so it takes   url body and a lot of other information including  headers if you come over here one more time   so anyway so here first url and body which  we already have url in our case should be uri   okay all right and body point to this one uri  point to that one okay and that's it and as well   as we also need to send headers okay now we'll  send headers and headers would be coming from our   variable that we created long ago which is this  one why we need to send headers because we are   telling the server hey i'll give you  some content and the type is json okay   so that's what it's telling the server and that's  why you need it and a lot of post requests in   future need authorization token so that's why  we'll send token as well but previously we have   just sent empty token or a token that doesn't  really matter okay to this random token but once   the user logs in we'll have a token and that's the  actual token we'll be using again and again a lot   of other requests okay so that's why we need to  send these two information in the header but of   course first time when we do registration the  token is invalid just a random token it doesn't   really matter you can send it as anything so this  is the information we send to we need to send to   the server using this post method okay uri body  body is the information that you want to send   so this information is coming from our form and  this is the data type you want to give to the   server like json data okay telling the server that  we are going to send you some json data as well as   a token but first time the token once again  invalid so now if you hover over on it you'll see   it sends a future response okay so that's  what it sends to us because we want to get a   response after submitting to the data either it  fails or successful so here we need to save the   data in a response object okay respon response  response okay yeah now this response once again   if you see over here um let's see come over  here actually so here it is future type okay   but my response doesn't have any future type so  here i'll await which means i'm gonna make it as   a future and over here we need to add async and  after that we want to return this response okay so wherever you see this future thing you  need to add a weight for that method okay   and for the caller function you you need to also  add this async anyway so after this we want to   return the response okay return response all  right but now this would uh over here because we   are returning we need to uh mention the return  type so the return type is response once again   but we need to wrap it around future because  we may need to wait for this response okay   future all right and let's see now over here um  over here we also need to send something okay   otherwise we'll get error because if things go  wrong you still need to tell flatter i mean to   our ui that things are wrong okay so from here we  also need to return so here we do return response   response okay now over here for now it does take  something so let's let me type in first status   e dot tostring okay so now here if things  go wrong we're just simply sending one which   doesn't really mean anything over here just  a random code and we are sending the actual uh response error to our validation or  form validation because remember over here   if things go wrong from here we'll also check  that okay so there is more validation to go so   and that checking would be either it's successful  in our api client or it it fails like that okay   so with this we are pretty much done with the  post method the basic post method all we did   here call this post method from get x package  and we send our url body and header information   all right now this response method is once  again coming from get x and that's why you   should love getting because it's so convenient  it gets you so many handy methods so well with   this we are good now we need to go ahead in our  auth repo and call it from author apple okay   alright so we'll come to our authrapo let's see  which is over here and over here we'll create   a method and we'll call it registration okay just  like we have in our controller the similar method   uh registration okay now over here  will once again pass the signup body   and we'll call it signup body okay now over  here uh we do have api client object so we'll   call api client and over here would send post  data this one okay now here we need to send uri   as well as the body now the uri should be  uh end point okay but we don't have the end   point yet so we need to go ahead in our app  constants over here and i'll copy one of them endpoints okay i'll post it there  and here i'll call it registration registration uri okay now  over here i think it should be   uh auth and over here we'll say register  okay that's as simple as that for now we will   not worry about this one okay we'll we'll  take care of that later how it works okay   all right now now uh if we come to author  apple we can just simply do app constants dot let's see i think we need to import it and  here we do register uri okay now this body now   this body is very interesting because as i said  that we need to send the data to the info server   and that server should receive json data but now  for now it is an object okay so it's not json   so when i send it here it has to be json okay so  sorry so all you need to do we need to convert it   to json okay now for this reason we need to come  to our uh signup body which is this one and over   here we need to create a method to convert data to  json object okay so or to json so over here we'll   create a method the the return type would be json  which is actually mapped we know that and data   data is dynamic the key is a string and the  value is dynamic and the method name is to json   all right now over here we'll first create  an object of map so here we do final map   string and dynamic here we'll call a  variable create a variable then make   and here we'll create a new map object  from it map string dynamic okay so here we need to return data okay  so whatever we get early from here   like let me tell you what's happening so  once you come over here create this object so   actually this one gets called which is  this one and if this gets called this   value is automatically assigned to them  okay now we can get those values okay   and using those values will create a json object  and return it okay and would put in this data   map object once again map and json they are very  similar actually i think they're same in flatter   so anyway so now over here you need to convert it  to um adjacent now json takes field field is the   uh key now here name is fname and over here  we'll send it to this dot name from from name   uh will which is this one take the value and save  it to fname and what is fname is our name which   is means first name here we'll have a phone number  because you know database will have a field which   is called phone number so that's why the name is  exactly same as in database and if we take a look   at our database actually let's uh take a look over  here if we see our users and if we see the columns let's see so show selected okay over here you  see well id we are not sending id id is created   automatically and fname is the name uh or just  first name you can add uh l name which is last   name phone number email and things like that okay  so these are the uh fields that are being related   directly one-on-one relationship over here okay  so they have to be exactly same because eventually   this is what you want to send to the server and  some will think hey fname or the name has to be   this one so they have to have same name okay   all right but over over here even though just a  name but in the database we have fname because   in future you can also create something called  lname which is last name fname means first name   anyway so the next one is data email okay so here  we do this dot email and here we do data password   and this dot pass word okay all right so now  with this we are done converting our object to   json okay all right so all we need to  do we need to come to this author apple   and over here we need to call sign up  body.json okay so with this the data would   be converted to json okay now if the data  is converted to json that also means that   we can send it to the server so from  here we are calling our api client   okay now arthropo this method should get  called from auth controller right yes so over here we'll call this one  okay so we'll call author apple dot register a registration and we're simply sending  the sign up body okay now we saw earlier that   author apple okay we can close this one  we don't need we don't need this either   so what's repo well now author actually should  send you a response okay so over here you need to   define the response type once again it's just  same as our post method future response response okay now over here we need to return  it and await and let's see add async   okay so once again api client would  return so that returned object is   saved in over here so we are returning  from here directly and the return type is   a response so over here in auth controller  we'll take it as a response as well so here whatever is returned we'll  save it to response object response   response response okay all right now here once  again i think we need to do a weight and a sync all right great and after that we need to check  our response type so here we do response response   status code so if it is 200 from the server  the one we get that means actually we have   done something great otherwise it's wrong error  and it failed okay so we want to handle that   all right if we get 200 that means uh everything  went smoothly successfully and that also means   the server has given us a token now the token  would be inside response response body and   we'll have a token uh once again if we come  over here we see that server endpoint server   do validation and then we'd get response response  would be our status actually status would combine   200 and our token okay if it is 200 then we'll  save it otherwise it will show error message   but for now this server endpoint and validation  will put it in the back burner and we'll see   this section a little later okay now we'll  come over here so from here we think that   everything went smoothly so we want to save the  token locally okay so here um we'll save it in our local uh storage which is uh our  shared preference and for that one   we would go ahead and create a method  first okay so we'd create a method in our   other wrapper which is this one so over here we'll  call a method and method type would be method name   is save user token and here token is a string and  what is token token is verification string from   server that tells you okay you are authenticated  so if user's information is found on the server   server sends you some secret id and you  should save it but of course when you first   do a registration there is nothing like that so  after first you do registration based on your   email id and password server will create a token  and now that token would be returned as a response   and the first time when you get the response from  the server you should save it locally next time   when you use you log in you should use that token  from your device and send it back to the server   and confirm with the server that there is a token  like this i'm sending you and can you find the   token if you can find that means the user is  authenticated so that's how the token works anyway so first time when you register we get a  token and token would be returned over here within   our response now we'll go ahead and save it so  here we'll just simply call the api client ap api   client dot token and we'll save it remember before  in our api client we have this token variable okay   so now would be able to save that okay and we also  said late which means we initialize it later okay   anyway so we would update this token variable from  here this is the actual token not the dummy token   and after that we'll call api clan dot update  header update header but of course this method   doesn't exist so we'll go ahead and create  one in our api client which is over here   now because uh we have updated our token so  we also need to update our header like this   one but now we'll do it in a method okay so  we'll call it void update header because we'll   call this section from outside of our api  client okay now over here we'll get the token   string token and what we'll do  we'll just simply go ahead and   hold this one okay so the header will be updated  automatically after the user uh right do the   registration so next time when user logs in the  information would be saved in the token okay   and especially the token okay so next time when  you do a post request the header is automated   there because you already updated it and in the  header we have the tokens updated token would be   sent with the post request after registration  during login or if you want to do like   update method a delete method like updating your  cart sending more orders things like that okay   so now over here we'll call it so here  we'll call api client dot update header   now here we are sending the token okay all right   all right so that's uh well now we  are saving it the token over here   okay over here as well as when we update it the  headers in the header section we are also saving   it but we also need to save it locally now for  that one here we need to save it to our local   storage okay now in the local storage if you let's  see okay let's go to this one over here we do have   a token right so we just want to update this token  so from here we just simply call return await and let's see share preference  share preference dot set string   and over here we want to  have this app constants dot token this one and the value is  token okay now with this uh let's see   so here first you save in this and as  always in the storage with the storage   the benefited it would be saved for a  long time because when you kill the app   this information would be all gone from  memory okay so we have to understand this one so hopefully it makes sense now after  this one would come to our auth controller   over here or just simply called authrapo and then  save token okay and we just simply pass the token   now of course we need to get that  token and where are we getting it from well we are getting it from this  response okay so every response   has a body so here we do response and within  it we'll have a body okay response object   has a lot of properties you see status code  status bytes has error headers is okay obs   reactive okay but we are going to use the body  body will have all the information in an array   and one of them should be token okay now we'll  save that but of course server would put things in   token okay this variable in the server side there  would be also a variable which is called token   server would generate the token and put that token  in a token variable and then it would put this   token variable inside a response object okay json  response and on flutter we can save it and get it   all right so status quo 200 we take the token  and we save it so first we call this user save   user token method it sets in the memory as well as  in the local storage in everywhere okay all right   okay so that's a saving token but  there is more things need to do   now what if if you fail and what if uh   well now over here this token is one response  from the server that we save so that means it's   the correct one okay and over here we also need to  know that there is a correct response so from here   we need to return a response okay so to return a  response uh while we would return two information   one is the token as well as our status code as a  true as a boolean okay now for that reason first   we need to go ahead and create a model and  in the model we'll save that this to object   so that we can use it later if you don't create  an object you have to use the scattered variables   i mean a lot of extra variables with the  model the benefit is you can save it globally   and then you call the model and you can use dot  operator to get the related field so that's what   will come over here which is models object models  folder sorry and over here we'll create response model okay uh we can just simply go ahead and create more  variables and save the information but that's   not the right way of doing just like what we did  over here with authrap we converted it to jason   you might have asked me hey you can also save  this information like this name name stuff   like that okay yeah and it would it still work  okay but that's not what you want to send okay   i mean we need a bit more modification because  if you create a lot of extra variables and   you do json in code and things like that and you  can send it but that's not the correct way of   doing so every time you have response or object  that you send and receive you should convert   them to an object things like that and of course  when it necessary you decode the object to json   anyway so we'll come over here and we'll create  a class and we'll call it response model okay and   here we'll have a property which is boolean and it  is a success and here we'll have another property   which is string property or fill they are the same  thing okay now here we'll create the constructor   now here we do this dot is a response and this  dot message all right like that so over here   now uh with this will create the object and  actually you can also do like this the the one   we did early okay now if you do this you need to  tag this required required okay just like we did   before required okay let's see uh so in that case  we also need to change the name things like that   okay and over here you need to change it  okay so this would be same as the one we   created earlier our response body object okay  so it's the same thing okay so now this one   and this one they're same okay but let's do  it differently so that we learn more things all right okay now over here now while we are  doing like this there's a reason why we are not   doing like this you can do it different way but  what's the reason let me tell you now over here   we want to return this one as i'm properly so  here we do string get message okay here message okay and this you do get is success sorry is success okay because we want to create a  public field now get is a public field so we need   to have a private variable in private variables  they start with underscore but if you have private   variables you can't use the curly braces okay so  that's why you have to do like this because we   want to use them outside of this model but for  this one we didn't use them anywhere we just   send information to it and that's all we don't  have any getter like this one okay so once again   the main reason we are doing like this because we  are creating private variables private variables   cannot be wrapped around curly braces okay well  that makes sense because we are going to call them   so now anyway we'll come over here now here is the  magic so now we'll use our response model object   christmas model to create an object and return  it okay so that's what it will do so over   here first we'll come over here and here we'll  instantiate light response model object response   model and response model okay now before we use  it we need to initialize it if this doesn't fall   in this condition it'll get fall in this  condition either it will get initialized and we'll initialize it based on our status response model okay so now we are going to create  the object so now here first one is boolean so   here we'll save it as a true means everything  worked correctly now here the string the string   is our this token so so with this in future we can  just create a resonance model object and we'll be   able to access them okay so yeah that's all and  if things went wrong we'll still come over here and we'll set it to false okay now here we'll just  simply set uh status text so server will give us a   text if things go wrong okay and we'll show the  text so that would be the our that would be our   error message okay and after the regardless of  what happens you want to set it to false it means   the post record has been done regardless return  us wrong thing or the right thing okay and right   after that you just want to return response model  okay response model this is the object so that   over here we can use it okay all right so now one  more thing we need to call do is update method   because our front end would be reactive which  means response and react and change so we need to   tell the front end hey there is a new change in  our app regardless error or the right way okay   now we'll come over here and take  it so we created this one and we   also created uh auth controller so over  here what do we do we'll go ahead and uh   create and auth controller instance  and then we'll call the method okay so   or the other way we could do we'll come  over here uh let's see which one we have   we do have a scaffold so we'll come over  here and find this off controller because   remember when we did the dependency loading  we already loaded uh loaded this one let's see okay we have already loaded it okay now if we  did then we can just simply go ahead and find   it so here we do var auth controller here we do  get dot find now here we do auth controller okay   yeah that's simply as simple as that one  and after that what we'll do would be   here in this method so we created the signup  object signup body now we do auth controller   dot register okay because it has a registration  method we'll call that one so that would call   a method in our repo which is this one  and from rapple we'll go ahead to our api   client post method okay which is this one and  then it will talk to the server and get us a   response response would be here returned and  if it does then i'll get a response from here   and that response would be returned in a response  model so what i could do over here so here i would   do then t h e and then and i'll grab the response  okay and i'll call it status and now over here   i'll do some interesting things so i'll check  this one if status okay if status is a success is a success let's see if it is is success because status is a response  model uh let's see our registration over here at   controller oh yes we didn't set up the  type of it so it is a feature type and   this type is response model okay feature means  we need to wait now we'll come over here sign up   and now over here if we hover over on it so now  status is object of response model and it has   is success property which is this one okay so if  it is success which means it's true perfect okay   all right so then what we can do we could do  actually print a message success registration okay all right all right else over here uh we'll  do custom message let's see here show custom   so custom sniper now here we could send a  message so here we just simply do status dot message okay so that is the wrong message the one  we get from the server okay all right so well with   this we are done with the front end and now we'll  go ahead and check how it looks like in back end   and after that we'll check our information in  poster postman and then we'll check it on our app now first we'll go ahead and take a look  at the back end and we'll see how it works   now if you come to the back end over here and  if you open it up this is what we did last time   and i'll remove that and last time we are doing  up to here actually now if you click over here   it will open up new sections and here we also have  uh more information so this is another group and   this first group was for uh products requests  and things like that okay so let's uh get products okay now here uh registration  and login okay so here i do have another   route group and it prefixed with auth and  namespace is auth so that means that uh inside   this folder i have another auth folder and inside  that auth folder i'll have a controller method   customer controller method uh controller actually  customer auth controller and then i'll have a   over here register endpoint now this endpoint  would be the end point that we created early   over here let's see where is it at constants  and this one okay so this would eventually   point to this one over here and we have added  extra name space over here and of course we   also have prefix so this namespace is telling you  that it should be in the auth folder okay so now   anyway i'll save it and i'll do command  b on mac to open up my explorer section   over here http controllers api v1 and auth and  inside out i do have customer auth controller   which is this one and then i'll find this register  method so i'll open it up and over here i do see   that we have login method and we'll see that later  now we have register method and over here we get   the information our request which also means  that we get over here uh this information okay   over here so we go through them and we do a  validation and over here after doing validation   if it fails then we return validation error  403 and if it passes then we go ahead and   create an object okay using models create  method and then we create a token and   using this create token method and then we  save it in token variable and we return it   and they're just a random string that we'll use  later actually so you can just skip this part you   can put anything over here random but in future  we'll see if we do phone verification or not okay   and we're also returning his phone verified zero  because we didn't really verify it if we verify   we'll verify it here and change it to one but  for now we are not doing any of this and sorry   and then we return 200 okay if we come if you  can come up to here definitely we can return   200 okay all right so now here a few things to  know that now if you know what is laravel and how   to create a record in database based on your model  so this is what we are doing every model has a   create method so you can create record in database  and you have to submit the related fields with the   information now these are the information coming  from here which is also from flyer front end   so we create and then create a token and save  it to the database we also save the token   to the database but here create to create  token method does it automatically for you   so you don't need to worry about it how it  works internally now i have created a tutorial   before how it works how to create token using  laravel passport laravel password is a package   so you can check out that tutorial i'll  put a link below in the video description   you should definitely check that out because a  lot of time creating token and authentication is   a big problem for a lot of beginner developers  so you should really learn that and over here   while this just create and gets  you the token and it also saves   now this is a random string just uh it doesn't  really matter but in our case we are saving   customer information so i wrote customer auth uh  a restaurant customer or things like that okay   once again don't forget to check out the video how  to create uh authentication using laravel password   but for you guys i've already done it so you don't  need to worry about it but you should learn it   because that's another really long tutorial  like two hours so you should check that out   um uh yes so so this is what will  happen if we can hit this end point okay   uh and if you do encounter error doing this you  can definitely come over here this is the link   and uh during my work i have encountered some  issues and i've listed there and how to solve   them i put it there so the first error i found  that was like jwt that is used for authentication   now laravel passport it uses this one internally  for creating token so that could be a problem and   if you do get error like this where it says that  client access or access client not found then you   need to ring run this command to activate laravel  password okay so this is the error i found when i   was doing it in local tests locally in my computer  on a different device because when you change your   device this password doesn't really work you have  to reactivate in every device anyway so uh yeah   that's it so now what we'll do we'll go ahead and  open up our postman over here and we'll create   a post request okay now this time we'll create  a post request and here it would be local host   8000 port and api version one and this is inside  auth folder and register folder okay now over here   we need to send some data or first what kind  of data we are sending because right now we are   doing the test on uh laravel sorry postman and we  need to mention our data type like here we do that   content type is application json so that's what  we need to mention so here we do here we write   content type um i think we should go to header  actually this one not this this content type and   here we'll set it to application json which which  means we are getting you json data now over here   in the body uh we'll use raw data which means pure  jason so over here we'll send a name name to ahmed   and over here we'll do email and  email say uh be at well just info at   stack.com i think i'm missing one quotation  over here and now over here uh phone   say one two three four five six seven eight  uh and then we can also do our password here password is one two three four five six all  right and let's see so here we do have uh headers   uh okay it's not transfer i think it should  be content type this one okay now it should be   colorful because in postman if you set  the content type to json the body section   the raw data becomes colorful which tells  you that this is correct okay now here if i   put it over here we get a failed validation  report which is a good news and bad news   good news is that we can hit our end point because  this is uh coming from here failed validation check if you don't if you really don't if you're  not sure that it's coming from here let's change   this message save it and hit it one more time  so it says that yeah so what we updated we   get so that means first thing that yes uh we  are able to hit our end point that's working   saying that that means that all these things over  here they're all correct okay all right so now   we get error now we don't know what errors  so definitely they're coming from here   so actually i have an error method that i created  uh let's see well i've created a file for error   handling so i'll put that file over here so that  file all it does it has a helper method it has   a method inside this class called helper class  error processor so you send all this information   over here and it loops through it so it's in  this class helper class and helper class is in   app central logic so if we open it up um we'll  see there is a folder central logic and inside   this we have helper and this helper class has a  method which is error processor is a static method   so you can access it globally and over  here we send everything what we get like   this whole validation and our object everything  send over here and we look through it and it   finds if that if we are missing something  or not okay so it should be in your uh package as well i just didn't use it before  so i'm going to use it now now i'll save it   and i'll hit end point again here's  a code the message fname is not given   yeah of course because here we are sending  name we are not sending fname because this is   the data that would be eventually saved to our  database now before we have seen our database   that in our database if we find the user  um let's say here id fname and email okay   all right so this is the record i created  early so don't worry about that one   so over here we need to send the correct field  okay uh so that's why it was causing error so   once again this is a beautiful message a  method that helps you to go through your   each of this field for validation okay anyway  so now we know that our problem was over here   with this one so what we'll do we'll  change it and hit it one more time   okay so which means that we get a token and  this one and this one okay which means that   if we get a token that means  our request has been successful   that also means that we are able to  successfully insert our information over here   so if you come over here and refresh it  you should see a new record well let's see nope we don't see that but  we are supposed to see that so not sure why let's refresh it   so let's try to send it one more time and  see what happens so email and phone is taken   now it could be the problem that this is  not getting updated so i'll close it and   i'll open it again one more time it should  work i think the record is there but because uh it might not update immediately my  mysql workbench so let's open it up it's not reopening though so let's see where it is where is our guy   bicycle workbench well if it doesn't work no  problem actually i want to finish this thing   so what i'll do i'll come over here because  our database is saved locally in our computer   so over here i will try to access our database and  we'll confirm that it is the record is there so   would in our terminal would type  in this one and it would ask you to   show you the uh let's see maybe i typed  in the wrong password uh oops sorry okay so here we can first write show databases  so it will show you all the databases   and we want to use shopping shopping db all right  so now here we can get everything like select everything from users okay all right so if we did that now  here we do see that uh we do have this one okay   so we created now my second workbench  maybe it uh slow or either i don't know   i just need to somehow restart it but if i'm  going to restart i need to shut down my computer   and which i don't want to okay so which means  that it's working and our password is saved there   it's also working we know it from here because it  says it's already been used so here we could do a   different thing so here i will come over here and  change the phone number to say random phone number and now over here instead of  doing this i would do a aaa now we'll see that it will return us a token right   and if it does we'll see it over here and we  would be able to see the user information over   here as well okay so let's go ahead and hit  the end point yes it worked we get a token   and first i would do clear method well on clear  doesn't work here so it doesn't matter so here   i'll get all the information once again now here  we would be able to see that okay this is the   new guy that we have registered so that means  that we can hit our endpoint from postman okay   right perfect now this is the time to hit the  endpoint from our app so here is our app and   first thing we'll do we'll uh over here uh  from within this post data over here we'll   print our information okay we'll see what  we get from here so here we do print body to string okay so whatever we get we'll  print that okay and uh at the same time   we'll see what response we get from here  so here we do print response dot to string   okay so that's what we'll do okay all right  now let's go ahead and first restart our app   okay now we'll go ahead and create a new  account over here so over here we'll do email a   dot a dot com password one two three four  five six name ahmed i think we need to change this password thing uh obscure text true  we'll do it later for number one two three four   five six okay let's see we know we already  have this phone number in our database i think   but anyway so here yes this is what we printed  over here and now the instance is this one   which is the response and then it says  registration success registration but   of course success registration is uh let's see  it is where it's coming from it's coming from   here now let's check our database so over  here oh well just now we created using a   at a.com and this phone number and if we see we  don't have a at a dot com we have a at aa.com   and okay this phone number is unique one two  three four five six because this is one two   three four five five six so great well if we  did that that also means that here we can um here we can do like this so this one one  more time and you'd be able to see what   we did just now yes this guy perfect  okay now let's hit it one more time uh and see what response we get okay   and here this one okay and error for beaten okay  so this is the correct one this time and of course   you don't want to show this custom message over  here actually you want to show the custom message   here okay so well this is something we got okay  so the message is forbidden which means that you can't really work on this but that means that  user has been taken but we need to work on that   message but the good news is we are successfully  able to register from our app right so that's   beautiful well a few few more things to take care  as you hit it you need to show a message that it's   working or loading okay things like that and we  also need to work on this obscure button okay ahead and restarted my workbench and then i  see these records they're all created there   so maybe it was stuck somewhere it didn't get  refreshed so we'll try it one more time and   we'll see how it goes so over here this time we  do aca.com and phone number is maybe a bit longer   sorry that's the password and over here just a  random phone number let's go ahead and sign up   all went perfect and that's all we get okay  now over here let's go ahead and try to   refresh it yes we see that uh this is  what we just created just now this one let me make sure confirm yes so this  is the guy and this is okay i think   this one yeah this one right so this is  the guy so that's how you work with uh   this mysql workbench so either do this  one it will show you all the records   or refresh okay but just now it was not  working anyway so you can also do mysql   query practice over here and this is what we  did just now in the comment line okay all right   well anyway so uh that's great uh so it means  our recordings uh our post request is working   and this is our basically first post request and  after that other post request would be pretty easy   i know it took us a lot of time but now here's  the thing each time you hit it you need to wait   but a lot of things are happening in the back  end so we need to set up a new variable which   actually we already did so this one is loading so  whatever it happens uh it comes here actually we   need to set it to loading false right so after  this thing so now we need to get this variable   using this field over here in signup  method so now for this one actually um   first what we'll do okay we'll collapse this one  now the scaffold over here inside this one okay   so we'll wrap this single child scroll  body using up controller actually okay   now for if we do that we need to remove it  from here because to restart my computer   because i was running out of space anyway so now  uh we'll cut this one over here and we'll wrap it   around get builder so here that's what we'll do  get builder and here we'll use auth controller   and then we'll have builder property and within  it will create auto controller instance from this controller okay and after that we'll just  simply return and do like this okay all right   and now the purpose of this one is that we become  reactive which means that once we click on this   this would be hidden now hidden  would be based on this condition   which is is loading when this method gets hit this  becomes true and if it becomes true we can show   our loading icon okay so that's what we want to do  and when it becomes false the icon would be gone   so for that reason right now over here we do  up controller controller dot is loading okay   all right so if it is false which  is the default state once again   well we don't need this so default it is  false as you can see so if it is false   then we show the form otherwise we show  circular progress indicator okay all right let's see okay now seeing that one we can actually  from here we can remove this and we can pass an up   controller to it auth controller auth controller  so we'll come to the method over here the place   where it's reporting error so here we'll pass  out controller okay and after this actually   you can just simply remove this we don't need this  one anymore okay all right let's save it okay and   we did that let's go ahead and do a test okay dot  com dot com password one two three four five six   and here name aaa and phone number one  two three four five six seven eight   doesn't matter our point here we want  to see the circular progress indicator   and uh looks like we don't see this yet  um now let's go ahead and come over here   take a look or it might be happening too fast  because we are in localhost okay all right so let's see over here okay so you're supposed to see this one and we can print a log from here actually if  we are getting this one or not so to do that   actually okay so here is the thing let's do it  like this so we will not put it here actually   we want to create a custom uh loader okay so  here we'll create a new class inside this and   we'll call it uh custom loader custom loader.dart  okay and over here we'll create a stateless class   and we'll call it custom loader okay over here  we'll have container and a container will have   pretty much uh height say 100 and widths with  say 100 now of course what we could do we   could go ahead and import our dimensions file  dimensions dot now we need to import it first okay now dimensions dot  height all 20 so divided by so and we want to get a square like so we'll  use the same width and height and after that   we'll have a decoration we'll do box  decoration and here border radius uh border   radius dot circular now here we would use uh  so this one divided by two which gets a half   okay and then we also use a color for this so  it is f colors dot main color okay all right   and we want to put everything in the center  so that's why here we do alignment alignment   dot center okay all right now we want to put a  child over here and child would be our circular   progress indicator and now inside it  it itself should be colors.white okay   all right and let's see what do we have here  color colors do i okay so this should be a child   not color sorry about that okay now we'll know  if this point hits or not so here just simply   we can call print and i'm using  the i'm printing loading state here we'll just simply find  get dot find controller   and from here all get is loading uh let's see dot is well i think we need to import some packages  first import get and now there is loading okay   so if it's hit here we'll see that it's uh true  we need to convert it to string okay otherwise we   do no way we nee we can know about it okay now  here we'll just simply call custom custom loader custom loader let's go ahead and import the  class yes look right now okay now if we hit it   and over here we'll see it's true okay  because over here let's see so over here uh well so it is true it will not fall to  this condition it will fall to this condition   let's add this and if it  falls to this condition will   print true on the console over here okay so  okay well now we should go ahead and hit it   and after this we should be able to see if we are  able to print this one or not okay let's go ahead   and do it and it looks like we still don't hit  our message well now there's a reason why because you need to call this update actually  two times first one right after this   okay so right after this one okay so we  know immediately that this state changed   because once you return from here it's  already false again so it always falls to this   first condition so that was the reason why  we couldn't see this see this so i'll save   it one more time so now let's hear well  once again the information is gone and here and let's say whatever you want okay now let's see  yes so we saw that one and over here we also see   that it's loading state is a true so that means  it's working so we can remove that one now okay   all right so we want to push it to the center  so here we'll wrap it around sender widget okay   all right now save it of course  this information is gone from here   okay now over here one two three four five  six seven here this one okay say whatever   all right so now let's see what happens  yes and because this has been already   registered in the back end now if we have  say d whatever now not now try it and see   what we see so yes it worked and registration  success and we can also come to back end and   here we don't have this one yet a at ada.com so  what we'll do just to refresh it and we'll say   ada.com okay so with this we also see this  information okay great well now after this we'll   go ahead and see how to log in okay so we've come  a long way and definitely we are really dangerous   and after that let's take care some of the issues  from back end that we are facing well first thing   we'll hide this two sections over here  which is password and remember token   because we don't need to see them and for  this one i will come to our user controller   controller and which lives inside app and means  inside controllers user controller this one   okay all right so over here definitely we  don't need this too so we'll just remove that   okay now if you come over here and refresh it  you'll see it's gone okay now in the issue this   time that is zero zero z we don't need that  one okay so now we need to import a different   uh i think uh what is a time method or a  part of this packages now here while you   can find it in their documentation as well  okay but i've already uh worked on this   so if you come over here there are a few links so  that might help you if you work with this back end   which this few things okay this this and this  one okay all right so over here i do have uh that i worked before a date format so for  this one uh what we could do either we could   use this option or this option so this is using a  controller or namespace okay so here first we'll   import this one okay now this belongs to back  and laravel anyway so i'll come over here and   find this user controller that model okay now  let's uh go ahead uh over here sorry not this one   okay so let's go ahead and find the model so we  know that models they're in the models directory   inside over here okay so so user model which  is this one okay now over here we'll simply use this one okay and then we also need  to say use date time format over here okay   and this should solve the problem okay all right  so let's go ahead and check yes now we'll come   over here and refresh it we see the format changed  okay now over here this email verified or not okay   now if you see our back end uh my mysql my sql  workbench okay so over here we have this table   right inside the schema so this is our shopping dv  table and over here we have this user a user has   columns which is this one now if you take  a look at timestamp but for now they're all   null because we are not really verifying so for  your information now we can take care of this a   little bit different way we can send yes no like  that okay so for this one we'll come to this user   controller over here and this is the related  uh field now of course if you watched my other   tutorial which i told you earlier you know that  grid is for showing the information in a grid   column based like that anyway so sorry now over  here using this eloquent which is uh actually   an eloquent but now here we create a model and  we pass the model object to this grid okay all   right so this is another point if you know what  is eloquent in uh larabel okay now over here uh   so using this elephant we created an a model  and use that model we create a grid object   and we use those uh use this grid object to access  each of the field in our database table okay   so these are the fields in our database  tool exactly okay uh all of them all right   uh anyway now of course you can also instead of  uh doing like this like this you can directly   access the field if you come over here in their  documentation like over here like this okay so   you can just simply do this uh many different ways  like over here describe is a field in the database   table but over here you can just simply go ahead  use describe instead of column describe okay   like release that created these are all  the filled in the database table but   using this great object that you could also access  them um as a method so let's go ahead and check it   so instead of saying column like this  i could do like this let's see grid okay and id that's all so id becomes a method  okay it's more like laravel it is variable larval   eloquent uh model where you have a relationship  and you can get to access the methods and fields   so let's save it and we'll see that if we come  over here the id is still there it doesn't change   but if you want to change the name of id over here  you can also define i think user id okay like that   so let's go ahead and save it  so now here you see user id   and i think that's more readable all  right so now we'll come over here and now uh what where i'm saying this thing so that  means that over here this email verified actually   we can also access like this so here we can access  it like a method so email verified add okay now   over here it has another method you can access  every uh field has a method in this back end   every field in the database so which is called  display and it takes a function anonymous function   and it takes a parameter okay now parameter you  can call it anything okay now then it returns   so here it means it should you should  return return something okay now over here   this verified this parameter points to the  value of this fill okay so for a certain row   if we are using this row over here or if we are  pointing at this row so email verified would point   this value over here which is this one  okay so this parameter points to uh   the certain value in a row okay so what happens  when you run create grid object so it goes through   a loop for all the records in the database one by  one so for all these records it goes one by one   okay so it runs in a loop even though yes we don't  see the loop okay so in a loop it goes row by row   so now for certain method it points to  the value okay if you use display function   so anyway now over here would see if verified  exist then we'll say yes otherwise we'll say no   now interestingly this is more like flatter  ternary operator which we have seen many   times ternary operator and laravel we still  have the same thing now so laravel is also   getting updated as the time does it's a beautiful  framework that i strongly suggest to learn laravel   there are a lot of out there golang is  also beautiful but not as easy as laravel   you can also learn node.js i think that's also  great anyway so now let's go ahead and save it   so if it's null then no if it's verified which  means there is a value then we'll say yes   okay and now let's go ahead and run it  over here refresh it so here it says   no no no okay now here's a bit of problem  uh because we have two nodes right okay   now that's because uh let's see let us come  over here because of this one okay so comment   this out we don't need this one now now let's go  ahead and check it verify that no but of course   verified add is it refers to a time so  here we can set a name for it verified very fine okay so instead of showing this filled  as a name now we are showing a custom name   okay because over here we are setting default  value to null null means it doesn't exist okay   so in that case we say no all right so now over  here let's refresh it uh i think i didn't save it   i need to save it now let's refresh it yes so  here they are not verified email okay so in   future we'll see we'll verify the email anyway  so that's how the back end work but once again   all these solutions actually you can come  here for this laravel admin package okay   they are all there basic usage column examples  they have tons of examples that you would   understand that how it works and they are all  english but of course they have a chinese version   and so i strongly suggest to use this one i do  use for a lot of my uh projects anyway so now   let's get over here now if you see in our admin  panel we are missing name that's because in our   database record the field is fname and over here  this is just name okay so that's why it's pointing   or it can't find so we'll just simply change to  fname okay and it would be able to get it okay all   right so now let's refresh it and here we go okay  all right so this was my name all the time that   i worked with anyway so now this is getting better  and better next we'll come to flutter section over   here and actually i want to make a bit of change  because the other day i showed it to my friend   and my friend has a bit of suggestion my friend  was saying that instead of 30 actually i can do   50 and it would look much better and actually i  think it would so let's go ahead and change them   all right uh so all of this turns to 15.  now you let's save it and i think it's   better and as well as over here instead of that  seven will have one three and one one okay now   let's save it i think it is better okay it's uh  good looking if you come over here it's the same   okay because we are using the same app text field  both for our sign up page and sign in page so i   think this is much better so if you're following  along i think you can change it to this one   okay now the other thing actually  we wanted to change early like this uh password field over here okay now it should be  obscured but which is not okay now over here we   are using a same custom widget for showing this  this or all the other text field right so there   is no way to directly set it uh because if you  want to set it you have to set inside this one so   text field has a property which is called obscure  text now if you put it to true what will happen   whatever you put that would be obscured okay like  you see they're all obscured so that's the problem   so now we need to handle this thing a bit smartly  so we need to set up a boolean over here okay   so that's what we'll do the final uh over here  we do uh bull is obscure is scared okay all right   now it will have a default value so over here  we'll set a default value is this dot is obscure obscure and here is obscure  so here we'll say false all   right so this is the default value  let's see what's going on over here   okay now it should solve the problem because  we defined as const but this is not const   so final is more like const so now over here we  have this value okay now we'll check about it so is obscure is obscure if it's true if it's true then we'll  set it to true otherwise we'll set it to false   okay now if it is false that means we'll show  the information okay now let's go ahead and check   it now here you see um yes so now they are not  obscured okay so how does it help us yes it does   so what do we need to do once again uh here this  is the ternary operator exactly the one we used   inside our larval okay so if you're familiar  with laravel flutter should be easy if you're   familiar with flutter laravel should be easy  as well okay so they work pretty much a lot of   time the idea is same actually but anyway so now  let's get back here so over here um when we uh   call this text widget from that place  actually we need to send this parameter okay   so now let's go ahead and find  uh i think over here we are doing   password okay right so over here we'll  just simply send a is ob secure okay so over here we'll say obscure  true all right let's see is obscure okay right now it would work now only for password  it is true that means it will set it to let's see   a a now here a a yes it's obscure but this is  not obscure okay so hopefully it makes sense   now if we come to our the other page which  is uh let's take a look uh pages over here   page and sign in page so over here we also have  password to do control f password i will try to   find it yes right over here all set is obscure  so here for this one we also set it to true now let's come over here we said email  and password so they're obscured all right   now it's looking better right  thing with this design okay   now well just now earlier we did a lot of  registration but it's time to log in okay   now for login actually we'd use pretty  much the same approach the one we used for   uh this uh signing sign up page okay or for  that one first what we need to do we need to   come over here and we'll just copy this one uh and  uh just change the end point okay so registration   so here it's a login uri okay now over here would  say login and of course in the back end we have   a related uh endpoint which we'll see later now  let's come over here and this is our sign-in page   so over here just like exactly what we  did for sign up page we'll do over here   now of course we don't need this to  so what we'll do we'll come to this uh   let's find our sign up page sign up pages  here and over here we have this method   so which is we call the registration now we'll  copy this one and put it right there right at   the top instead of registration we'll call it  login okay now over here we don't need this to   name controller and i think we need to import the  library first as well uh so for phone and email   we'll skip name and email we'll name and  phone we'll skip them okay and everything   else stays the same okay it saves us a lot  of time and over here this is the thing okay so of course we are not sending a signup body  because we just did it for sign up page but not   really for a sign-in page okay uh well for sign-in  page we'll do it a bit differently but definitely   we don't need any of this okay so we can get rid  of this one and over here instead of calling at   controller.registration we would call login okay  and over here we'll pass our string which is a   string email and string password okay oh  sorry we don't need to initialize it here   as an object we can just directly grab email  and password so these two are coming from here   now of course in authrapo in auth controller we  don't have any of this so first thing first i'll   find authraph over here and i'll create  a method that's called registration okay   so here we'll call registration uh sorry login i'm  sorry now here we do this uh so here we'll need to   grab this string email and stream password okay so  this is what we'll send from auth controller okay   now of course here we have a signup body  that converted things to json now if you   take a look at json uh well you cannot access  that because it doesn't have but json is more   like this because we have worked with jason pretty  much many times by this time now which is string   most of the time string is key  so in our case we are using email and then it will have a value and the value is  coming from this one okay and actually that makes   it assign a body because over here the post data  if you take a look post data all at once uh over   here a body and body which has a dynamic type okay  now it could be map or anything so anyway so over   here uh let's come to auth wrap over here now here  all we need to do tag the password field okay now   we could do here password the one who is sending  okay now of course if you want you can also create   a sign in body just like this one and do  exactly like that but it has only two fields so   we can skip this one anyway so now with this we  are done with this author report and the post   method doesn't change we are going to exactly  send the same we're going to exactly call it   the same post method and over here we need to use  it to login uri okay all right uh so that's great now over here save user token and  we want to create another field   another method actually and it would be future  type which actually i think i missed it last time   feature void which i didn't do let's see so we  needed bull because it returns bull at the end   okay future bull function string string which is  the type of set string anyway so now here we do   future void okay now we'll create a  method we'll call it save user number and password okay this is what you want to  save in your mobile mobile device or in your   application string password okay now  this is what we want to save over here   now let's do try class okay because  we do we might be doing a lot so here   if it goes wrong we would catch things  and here we'll have e as an error   simply we can say throw e okay through  error now here we'll save it to our   local storage okay now for this one we'll  simply copy this one first over here   okay and we'll copy it twice but we  need to create fields so here we'd say phone and here we say password now phone would use the number  to save and the password would use the   password to save now we are using a weight   okay all right but definitely we need to come  over here and create this two keys uh just like   we did for token so i'll copy it a few times two  times and over here we do phone and here we do password and for now they are empty nothing okay  so whatever we get with this that one will save   so as we do registration and if we can  successfully do register uh sorry as we   do login and if we can successfully  do login then i will go ahead and   save our user information okay now we'll  come to auth controller over here and   in auth controller we'll pretty  much have the same method let's see we'll come over here and we'll  put it there and in this case we don't need any of this let's  see how's the body what is here   uh okay it should be inside the class  am i doing something wrong let me see okay uh first we should have this one  this refers to this class end of this   end of this class and then i should put it  here okay now this is the method and over   here i don't need any of this and over here is the  same we don't need any of this okay we'll just say   void and we just remove this one now from here  we'll call it so here we'll call authrapo dots   user number and password and that's what we  send okay now with this uh from our device   from ui we'll be able to call this directly  when we need that okay uh anyway now in our   auth controller we also need a method which we'll  call the uh login okay all right so login method   and over here we'll have a string email and a string password okay  and over here the method is login   and over here we'll just simply pass email  and password and this is already we worked   so the login method is over here  if you see carefully okay this one   this is the login method which takes email  and password and then we convert it to json   so this is auto converting to json manually okay  anyway so over here we'll pass it we call it and   that's all we do so over here nothing else  change only these two things changes okay   all right uh because once we log in we  also need to save the user information okay   we save the user information first time i mean  user token actually that's what i'm talking   uh when the user sign up for the first  time we save it and after that user may   quit okay or log out so we'll remove  information and once the user login   so we'll also save the token but now  how does it work actually so when you   make a login request learnable framework in the  backend will try to find the token for this email   and a password if it finds it'll send you 200 okay  that means the token is correct because email is   unique for each user right so that's how laravel  would know that okay for this certain email and   password there is there is a token i mean if your  registration was successful then it would send us   the token back and then we can save the token just  uh that's what we are doing over here all right   okay so with this over here  login section is pretty much   done now we need to come over here and the arrow  should be gone okay all right so just like uh   for our signup page over here we need to do the  same thing over here we need to wrap it around   get builder so that's what we'll do get  builder over here we'll have auth controller   auth controller okay over here we'll have  builder and i create our controller object   and we'll just simply return  okay now over here uh just like   the old time we need to okay let's go ahead and  take care of this error first let's go to it   directly over here we have auth control oh it's  one it wants you to do return okay let's see an   error is gone okay but here we do have a method  which is called sign into or sign in okay so   yes so over here we need to wrap this one around  gesture detectors so that we can call login method   okay so that's what we'll do so just go ahead and  write gesture detector and over here we do untap   okay now over here we'll call login as we do  we'll pass the controller object okay all right   great and uh or let's see do we have any other  error or issues so over here we need to have this   return statement okay with this we are great  and so for doing good uh everything else   looks great okay now the only thing if it  logs in if you're if your login is successful   you can uh go somewhere okay so either go to the  front end or go somewhere so over here if login is   successful what we'll do to get the to named okay  now over here route to helper okay and i think   we need to import the library over here let's  do that and then get initial route which is our   home page okay all right if your login is  successful then you can do that all right   now let's see come to our back end over here now  for back and looks like uh we do have some of this email and things like that but what i'll  do okay i'll go ahead and remove them ah and let me remove this we don't need  this and you can ignore that as well   okay now we'll come to our app over here and first  thing we do let's refresh it okay and we'll sign   up with new information okay and okay now this  one we should do the same for sign up page okay all right so if we are successful uh okay let's go ahead and do it first over here  let's see how it goes okay a.a.com password is   one two three four five six name is a hmed and  phone number one two three four five six okay   let's go ahead and do sign up well it says  forbidden okay now we don't know why most probably   the user information still exists now i'll verify  it over here that whether it exists or not okay   we need to verify it that why it still exists even  after deleting it okay but definitely this is not   a problem with your post request this is a backend  problem okay so let's open up uh our postman um let's wait for it and over here okay i think this is what we had early  and over here we do for this one headers   content type and body okay well now we'll  just do what we did there phone number is   also one two three four five  six let's make sure that   yeah same now let's go ahead and make the  post request i think we don't need this okay   yeah now we see that okay so it exists  now the reason is because over here   if you come over here um i think uh this is  the table okay it's if not this one let's see okay it still stores the user id as  you can see over here okay so if you   refresh your database you have  to refresh for all of them okay so now over here uh let's try our app  first instead of uh this postman okay   now we'll click on this yes looks like it worked  okay but it didn't take us to anywhere right   but now using the same credential we should  be able to log in okay all right so we'll come   over here now we know that after logging  in we have saved user information because   from this auth controller we know that we have  saved this user token and things like that so   that means that if i go ahead and sign up now  i should be able to retrieve this token okay or even before signing up i should be able to  retrieve this token uh let's find a suitable place   uh to retrieve this token now over here  once i call this one actually over here   i'll try to get this token okay now uh for this  one actually we need to create a method uh where   we can get user token okay so in authrap over  here we'll create a method so let's go ahead and   create a method and uh method uh the return type  should be string and we'll get user token okay   get user token and over here would return from  shared preferences sharedpreferences.getstring now the key is if cons app consts let's see   not phone it should be token though all  right now if if it doesn't exist okay   then we'll return none okay all right now  let's see if we can use a weight and a sync yes now over here we have this get user so now  what we'll do because we just want to confirm   that we are retrieving the token okay so  when you hit the login method over here   now first i want to see in my device  i have or not but this is just for um   just purely for debugging test okay uh let's  see get user token that's all okay now over   here i can do print a method uh string first say  getting token okay all right so this is token for   our device and this should be from our uh back  end okay so now here we could also say print   back end token all right and then all  over here we'll just simply do print dot to string okay and if we get it actually we  need to print it so we need to wrap it around the   print method okay and make sure that  will convert it to string okay now   let's go ahead and reset restart it so  we know that if we restart the token or   local storage is still there right now over here  i'll do a a.com all right and the password was   one two three four five six and at the same  time if our login is successful we have seen   over here that we go to our home page okay and  tap on this but you'll see if i click on this   um yes it did print our token or this one as  an object and the backend information and the   token from back end okay this is the token from  our user device and our responding corresponding   information but now after clicking on it it didn't  move because if you come over here main page here   home page is our sign-in page so over here you  are already in sign-in page okay sorry the home   page so that's why it doesn't have any change uh  well okay we need to change it before that i think   i'm missing another part uh let's come down to  this section over here now over here actually we   should do this uh custom loader just like we did  for our signup page so here we do auth controller uh dot is loading okay if it's false then  we show this page otherwise we go ahead and   show our custom loader the one we created custom  loader okay all right let's go ahead and import it okay now   let's save it and click it one more time over here  and we'll see that our custom motor works as well yes you see that there was this loader now okay no  problem uh but definitely the sign is working but   this is not how you want to see it okay now what  do we want to do uh we need to move it from our   home page because this is already in home page so  uh i'll what i'll do i'll skip this one over here   and i'll just keep this too okay and previously  i had this uh word here const if you had it i   think you should remove it otherwise you will get  error because these are dynamic this is not scon   us const const work like this okay so this  could be const but this these are variables   okay so you can't use const otherwise  you'll get error okay uh let me remove that even though it's saying you should use const but   it's not always smart um anyway  so now let's go ahead and check it okay well now this is our normal pages  that are working but definitely this is not   our sign up page okay now here we could do one  thing instead of loading this uh signup page   over here we can load this sign-in page and  for that one we need to come our homepage our   home page and here instead of sign  up we import sign in let's import it   okay all right now let's go ahead and restart it  and you click on this it takes you sign in page   now here is the thing uh if we now go to our  sign-in page after logging in we don't want to go   to this home page because uh this is already part  of home page so it won't do anything so here we do   cart page okay uh get cart page okay because  the cart page is not part of this navigation   navigation items and the tabs are all part  of our home page so here i'll uh reload it   and now yeah i'll do a.a.com and we'll  see that it works and it will take us to a new page but here's one thing we can also do  some error like extra password information and   we'll see what happens so unauthorized okay so  it means that it's talking to the server it's   not letting you to go anywhere okay so because  you have this wrong password now unauthorized   is coming from laravel not from flutter a lot of  back-end remember we have used this uh alarmable   passport for maintaining our token so here let's  go ahead with the correct one yes now it means it   works okay if the authentication fall fails it  doesn't go anywhere otherwise it takes you to   that the page where you want to go but once  again this is not the ideal way of doing   so i'll get rid of this one uh okay so after  sign in yes we will usually go to initial page   but now this is not how we start so this  logic is so far okay okay and over here uh   come to our main page so here we don't want  to have any of this so we'll go back to our   usual uh the black uh white container okay  so child text oh history page history page okay all right now we'll save it you  might need to reload your phone to work it   okay so now how to load our sign-in page okay  now here's the thing we do have here you see   uh we'll have one card history page  now here if you come over here you   can increase things and add to the cart now  if you go to cart page over here before you   check out here is the thing you  have to check whether the user has   logged in or not okay so all we need to do  we need to go to our cart page over here okay and in the cart page uh well so let's  see once we tap on this button we say it's   tapped and added to the history right this is  the section where we do a check whether the   user has logged in or not if the user hasn't  logged in will ask the user to go to the uh sign-in page okay now here we  need to do a check we'll see if   user logged in okay if user logged in if  user has logged in but of course we don't   have a method like that we need to go ahead and  create one now once again in general for simple   authentication you'd use a token to do that  well with the token we can do much more complex   authentication but the one we're going to do  it works pretty much for simple app like ours   so uh you know we are using token just like  we saw the example if the token is found   we go to the pages or screen we want to go  if the token is not found in the database   then we just uh say unauthorized okay  so token is our friend over here now   over here we need to come to let's see sign  up model we don't need that home page we don't   need that main page we don't need that sign-in  page will still keep there splash controller   we don't need that author for yes we need  now let's come to auth repo over here now   over here we'll create a new method okay uh well  i'll just go ahead and simply copy this one um and over here will return bool okay  bull user logged in okay user logged logged in okay now here we don't want to  return a string okay we want to return a token   i mean token is also a string let's see what  happens here so we also don't need this i guess or a value of okay so not this one so we also need to  change because get string gets us a tr string so   over here we need to use contains key now this one  returns a bool okay now here we create a bull uh   a method that returns a bull boolean  type and with whether it's a true   or false boolean means true or false  right so now if it can find this token   okay then uh we'll say yes uh the user has logged  in okay contains key in the shared preferences now   let's get over here to our shared preference  contains key now here we do have a token   that is uh a default one but now in this case  we can't use this one because this is also   could be found okay uh and if it is found it will  return true but this is not the actual token so   we'll just save it so no now we'll keep it empty  empty if there is a token from the database we   saved it otherwise it would still be empty okay  now during login we remember that from uh auth   controller over here we have uh saved it right  so if we can save it would be there otherwise   it would be null anyway so now let me take out  this information we don't need them unnecessary   okay this will keep clean all right great  so now we created this mat method over here   uh author apple so we need to go ahead to our auth  controller and call the similar one uh so here   we'll just simply go ahead and call this method  and i'll just copy this one and come over here   and then of course we don't call this one would  called author apple dot user logged in okay   now from cart page we'll call this one okay now  to be able to call this one over here um i'll remo   we'll remove that one now so okay i think we can  keep that so here we'll create a conditional state   statement here we do get dot find we're going to  find out controller as controller and then i think   we need to import the library and now over here we  do uh user logged in okay now we need to do this   in if statement if user has logged in we do this  one okay all right else we go to somewhere else   and where we go we go to our homepage right now  sorry our yeah we go to our initial sign-in page   now over here we can just simply  go ahead and call the sign-in page   to sign in page get the two sign-in page  right but we don't want to do it like   this because we have a route uh class and  file over here so over here we'll create   a new section a new string i'll copy it and now  here would say sign in and here we'll have sign in okay all right and we'll  create over here similar one so get sign in okay sign in page okay now we need to create a get page method over  here i will do it right over here right after this   okay and over here uh sign in   page all right and let's see if we can do a  bit of animation if it works or not transition   uh transition transition dot fade okay all right  so that's it now after this uh let's save it   and uh okay we also need to change over  here because this is the sign-in page so   we want to call sign in okay now let's uh  come to our uh signing page and over here   that's everything is okay um cart page okay  so this is the place where you want to change   now in the user logged in so we'll add  to cart history otherwise we'll go to our initial sign-in page okay so here we do get to  named all right now over here you do route helper dot get initial okay all right so no not  initial that should be signing page okay   so if the user is logged in  you didn't go there all right   uh and uh let's come to our okay for now we  don't need app constraint we don't need this one   we don't need well we don't need this one as well  let's go ahead and check our main.dart and let's   make sure this is the correct settings make sure  that you remove const and we go to splash screen   and everything so what i'll do i'll save it okay  now over here i'll stop the app and i'll restart   everything because i have done some tests so  it might have saved some pre-recorded data   so what i'll do i'll go ahead and reinstall  everything okay so when you stop the app   hopefully it would reinstall everything okay to do  a new build okay and we are here on the card page all right so let's load it and now over here um so user logged in that's fine okay so we are getting ready there   yes fine now let's see okay we still have  some information anyway so it's added and now   uh let's see if we are where we are  going okay so let's click on this wow so for me i was logged in because i did  some tests so for you it should take you   to the sign-in page now what i'll do one more time  i'll go ahead and delete the app okay so every   information will be gone from here and well this  is the problem with local storage a lot of time   debugging becomes annoying sometimes so you need  to remove everything and sometimes you need to   remove the app if it doesn't work like that way  so let's reinstall it one more time hopefully   this time yes because the app is removed so  everything would be gone from here okay all right so let's wait for it okay we are done over here app is loading so  far is good okay cool now let's come over here   now let's add this thing now add to the cart let's  come over here now this time i'm sure that i'm not   logged in because it's reinstalled so it'll take  me to the sign up page okay sign in page all right   so that's working now from here you can also go  to your signup page if you don't have an account   but i already have an account so over here i'll  use this one hey.a.com now here the password was   one two three four five six now let's sign in yes  okay now if you go ahead and place this order the   order we had early okay it's still saved there  it'll okay the card is empty because you already   checked out right okay cool now of course you  can do more orders so let's go ahead and add   do remember this stage if it doesn't work  install your app and remove everything okay   uh and let's come over here let's do it  okay now let's check out okay perfect   now if you see our car history we have this thing  so it's working the user has logged in okay now if   user has logged in so here we do have an option  actually let's go to our profile page over here   account page actually so we want to change  this things here we do have our name this is   message and this is logout so this is our  account page and over here this one should be   messages let's save it yes it changed and  over here we should have log out so here we do log out and here uh we can also change the icon log out okay all right this one okay so if we  click on this button we should be able to log out   right but for logging out first we need to  our come to our auth rep over here and here   we need to create a new method okay so now this  method would clear everything from the storage   the information okay and then we can go ahead  and call this let's create a new method and   okay we'll call it over here we'll call it boo  clear shared ratio so we want to remove all the   data and after it's done we'll return true okay  now over here we'll use the shared preference   object and here we do remove okay remove okay  now here we do have constraints tab constants   dot token so remove the token over here and  we will repeat the step so here we do remove   once again now this time type constraints uh say  password or remove that one shared preference dot remove because once user logs out you  shouldn't keep any of this information   okay so here we do phone right okay but  i think we need to work on this section   because previously we thought we are going  to use we need to login using phone but right   now we are doing email so we need to change  over here but the logic is almost the same   all right so you remove and make sure  from api client dot token decided to empty   because that also stores now over here  there's api client dot update header   because in the header we also set a token so  remove all this information and then return okay   okay so now this is in uh author apple while  the same one should be in auth controller   so we'll just simply call bull clear  data pair shared data now here we do return author apple dot clear shared data  all right okay cool so now we'll come to   our account page over here so we need to wrap it  around we'll wrap this around gesture detector   so i'll cut this one and do a gesture detector  and here we do untap okay and it will take child   so here i'll just put this one and it'll get  cold okay now from here you need to call that   method okay so what i'll do i'll come over here  and to get the find and i'll find a controller okay so before that we need  to import this libraries   and also the gen x package let's  do it important package yet so let's come over here yeah so over here we'd  call clear shared data okay that's as simple as   that one okay all right now after clearing  it what it should do it should take you to   home page okay or we can also take you  to sign in page doesn't really matter so   for now okay before we clear we need to do a check  okay we do if we get dot find auth controller   okay that user logged in okay if user logged  in only in that case we do this otherwise   we don't want to okay only in  this case okay so otherwise   we do nothing actually because user didn't log  in okay so now here and then here we do get dot to uh i've named this one and here we do route helper get initial get initial and i also think that we need to clear our  card because this is just shared data this user   information like token and password  and for that reason would come to our   uh cart repo while we do have card controller  and this is a card wrap over here and here we'll   create a method clear card history okay all  right now definitely first we'll call this one   and then here we'll create a similar  statement like this but here we do   card history list okay all right save it and from  a cartridge rifle you will call it quite clear okay and we'll call the method from here dot clear card history okay  all right and after that   we might need to run update to let the ui know  that things had been updated okay all right so yeah so let's save it and  after that we come to account page   so before we go ahead and do  it here we could do find cart controller okay clear first we'll call  this clear method and then you can find cart controller clear card history okay well  we can do more fancy thing you can just   wait a little bit like a second you'll load  animation and things like that then go to   initial page but of course right now let's  go ahead and save it okay let's click log   out well now i think i'm already logged  out okay because the token is null but   here initial page is still the home page  because if you see the route helper over here   initial page is home page and home page has  four tabs so you don't see any change at all   but if you do want after uh let's come  over here cart page here you can go to uh get sign in page okay yeah  you can do that one if you   logged in and logged out okay after logging  out but of course uh this time we need to   let's see uh let's do everything yes we do have  some garbage from our previous test now anyway   let's come over here and now it will check  if we are logged in or not okay so we are not   logged in so it asks us to do this one and we  do password okay now we'll sign in yes and of   course we'll see that our information is still  there but it's okay now we can add more data   okay and we'll come over here let's see if we have  anything in our history we don't have history okay all right so first we'll come over  here and we'll check out okay all right   so let's go ahead and check out now we'll  have history right and you can add stuff to it now you check out one more time you come  over here and you see you have this okay   now we'll go to our center over here profile  center and now we'll log out and after logging out   we'll see okay this would be gone and even if  you add say right now these things you don't   need to go to for signing for checking out  but you see it's still there right but now   if you go out this information would be gone  and this information will be gonna go again   after logging out okay so let's do it all right  so now here well that's because if you come to our   uh card history page which is this one and over  here it gets data from card history and if you   click on this one this is the method and here  this is it this is what causing problem because   this is a global variable if you see so it's  still in the memory actually it's gone from   our local storage but we see it from memory so  what we could do we could come over here and um   right after this one we do card history  okay that's empty let's set it to empty   array or empty list now let's save it  okay now let's restart our app okay and it's gone but we need to simulate it  one more time okay now let's first log   out but if you log out now uh you won't see  anything only thing you can do here printout okay so here click on this yes you logged out  okay now you come over here oops sorry okay so now let's go ahead and do this thing and we can add more information let's  come over here like this it works   okay now let's go ahead and check out because  we logged out so let's go ahead and log in   we signed in okay now if we go to our cart and  let's check out yes and then if you see car   history it's there we can do one more check out  yes so we have two images uh two orders okay great   now i'll come over here this time i would  expect every record would be gone because   they should clear everything and it did after  clearing it would also take me to sign in page   okay all right so they confirm i added but i don't  want to check out so a lot of information is in   the local history and a lot of them are in the  local memory i mean in the memory of this app so   once i come over here i would see this history  and local memory information would be gone log   out okay perfect all right now here is one thing  you can only sign into your account which you can   a day.com then one two three four five six okay  log in now if you come here yes that's gone so   it's working and if you see over here we had the  temporary storage that's also gone okay perfect   okay well with this we are doing pretty good  next we'll see how to read this information from   database okay well uh to read this information  from database uh we need to see our database first   and how it looks like so first we'll go ahead  and check our user column our user table actually   this is our user table and it has this field name  phone number email status email verified password   order count and things like that so we're gonna  use uh some of them but not all of them for now   okay all right so definitely we'll see our  name and phone number and email address and   uh i think for now we'll also do order  account but this will have a default value   and we'll also take care of the id as well so  we'll put everything there well so now based   on this we first going to create a model okay all  right so i will come over here and over here like   inside our model so here we would create a  model and we'll call it user model dot dart okay so for now we don't need this so over  here we'll create a class and we'll call it   user model okay over here will some will have some fill  in id string well here we'll call it name   even though in the database it's fname so  here we'll call it name and string email uh well string phone on the int order  account okay order account like that   okay now once we have this one we need to go  ahead and create the constructor so that's what   we'll do use our mod user model and here uh we'll  use all of this let's go ahead and stay organized   okay so here i'll copy all of this and now  i'll put it there now here we do required   the okay this dot okay now  we'll copy all of this from here   and i'll put this one by one so that it becomes  quicker and i'm running out of time because we   can only upload 12 hours each time okay all  right so with this let's see what else we   need over here oh yes it's happening because  of this one you can't have this so remove that   and over here as well otherwise i would want  you to give it a default value now it's gone now here we'll create another uh  factory model uh factory user factory user model and here we'll create from json method  okay from json so once again there's a special   type of constructor where you can do a lot of  extra thing here you can't here you can initialize   or not initialize that's all and here the type is  dynamic now the object will call it json now this   one would be using as we got data from database  because from database we'll have json data i mean   uh json will get response json response from our  database right from our backend so that would be   in this variable and the data type would receive  this is the data type okay and this is the method   method data type and the variable name is json  okay and over here you need to do return factory   okay now here we do user model okay yeah  and that's all now here you need to return   now why this is special type of constructor  because you see here it's more like a function   before we return you can do whatever you  want okay but for now we don't need to   all right so here we have user model  now this is the json data we'll get   so we need to convert it json data to object  okay uh so here will be id and the json id   so this this would be coming from  database and here uh name json   fname because from database we are gonna get  fname uh once again let's see so this is what   we'll get database okay but in flutter app inside  we'll save it to name variable okay all right   and over here the email is the same thing here  we'll get uh email and here we'll get phone number so here we'll have phone and then order account json order account  okay now let's check our order count   order count is let's see let's check that  so this is order count this is int and this   order underscores count so here we need to do  count so when you convert from json to object   so for json the fields have to match  the field in your database okay   anyway so with this we are done working on  this user model okay now this is done but   this would be a get request from database okay  so we need to create a controller and a repo   so now we'll go ahead and do it okay  because after we come to let's see over here   uh once we come to this page once we  land to this page over here we'll check   if the user has logged in or not and if the user  logged in we'll make a get request to the database   now just like previous you have seen to  make any kind of get request you need   user rep you need a repo and a controller  just like we did for our products uh   like over here popular product that we made a  repo and a controller right so do the same thing   so first here we would create a repository  and here we would call it user repo dart so we'll create a class  and we'll call it user repo   and here we'll have a variable that will  pass from our dependency so that would be api   client just like other repos here we do api  client okay now here we'll have a constructor   user repo required this dot api  client okay now we need to import it all right okay now over here we'll have only  one method that we'll call it uh get user   info okay and then over here from api client  we'll use uh api client we'll use get data   okay because it's a get request so here we  use get data and we'll pass the uri now the   uri would be coming from our app constant class  so let's go ahead and create a constant in our   app constant class over here okay  now let's see uh so over here   user and auth endpoint so over here  we'll create a static const string user info okay now here our  endpoint would be api v1 customer info okay so we'll have an endpoint and  we'll see how it works in the back end anyway   so now over here and all it wants is app  constants dot user info okay that's what it   wants okay over here it will return data so we do  return and because we are talking the back end we   need to wait so we need this one then you need  async okay now over here this would be a future   response which also means waiting so here we do  future response because now over here the data   i want to return let's see response well i can  just simply go ahead and import gatex package   again package all right okay so with this we  are done with the rapple because uh get x has   get data we have seen in our api client and that  return response type okay future response type   so now it's great so now with  this we are done with our   uh repo and well let me see we'll go ahead  and close the card controller card history   card repo home page and uh also this one okay and  author will keep it because we need it soon now   we'll come over here and over here we'll create a  file and you'll call it user controller dot okay now this one let's see for convenience what i'll  do i'll go ahead and i think i'll copy from here okay and i'll come over here i'll paste it and  i need to put one more uh bracket and over here   first thing you want to do you need to import get  x package okay well that's first thing and over   here we don't want auth repo we'll call it user  controller okay now here it would be user repo   so here's the same thing user repo and over here  we'll just go ahead and change it okay now here it   would be user repo and let's go ahead and import  the package okay so it saves us time because i'm   really running out of time and everything else  stays the same okay so let's uh import imported now here this wouldn't be a registration method  it would be get user info and because the get   request so we are not passing anything and  let me replace everything else over here   this one user repo and user repo has a method  get user info all right so which would eventually   call this one and it has the uri right i think  i need to post here u r i okay get user info uri   um it's same thing over here uh okay let's  come over here yeah the error is gone   great all right now over here let's use and  replace author airport well actually we don't   need this one we can simply remove this one and  what else yeah so that stays the same pretty much let's see well here uh we are going to get  response over here so that's the response object   and that would have some information okay now that  information would be uh json response information   right so now over here of course this will this  time it will not have any token it will have the   information like this information say use a  name for number email including event status   things like that and order account okay so this  this is the information will have so once we get   it from the database we'll save it save where save  this in user model uh this one okay so we'll make   an object out of it from the json data we'll call  this one and we'll return it as an object okay   so we'll come over here and instead of this  one over here we'll first send successful   because it we successful i think i'm  going to do inspiring error replace it   successfully okay fine now because  we remember last time this takes a   string and a boolean so over here we are  doing this one and apart from this over   here we can save it in user model object well  for this one we first need to create a variable   which we'll call user model okay so here we'll  come over here and here we do light user model uh user model okay now we need to go ahead and  import it all right so whatever the data we got   we'll save it to the user model and once we save  it and we'll return it user model so that in our   front end we can use it okay so here we do this  one user model and we know this is a getter and   it would return user model okay all right so  now we'll save information in this variable so   this is what we'll do over here okay now  we'll do like this and here we do user model from json okay now from server we  get json data once again now the json data   in the response body okay response dot  body okay all right so we convert it to um json from json we convert it to an object  and then after that we save it to this variable   and once we do that in front end we can get it  like this okay so that's pretty simple as this and   if it is wrong okay then we'll see that uh over  here we have this error message or whatever   response we get okay so response body will  have this uh all the json response okay   it is a little bit different than auth controller  because in auth controller we just wanted to take   a one field from the json response okay that's  why it's a token just accessing one field   but in the controller we get everything from  it okay so that's why it makes sense all right   now before we go ahead actually we can test  that we can get user info uh from our database   okay and we can test it with postman but even  before that we need to go ahead and check our back   end okay now if you come over here this is our  back end and let's open up the explorer section   now over here um back-end api now in this section  well we have a lot of information but the most   important one we want this time is this one prefix  customer middle lawyer or api and among them first   we'll focus on this one okay so this is the end  point we want but do remember that this is guard   using a middleware which is called auth api middle  lawyer that means that once the user logs in   laravel backend knows what user has logged in  they know the user information you might have   100 different users okay they're logging in from  different devices and laravel would know everyone   okay so this is using this uh middle layer and  the middleware name is auth api so we already   guard that because we are going to do some  sensitive operation for example we want to get   user information update profile and  firebase token and a lot of things okay   now this is guard using this one it makes sure  that each user is traded differently and uniquely   and information doesn't match up this also goes  with security now this tells you that okay you   need to go ahead and find this endpoint and  we did which is related to this one over here   our constant so api view on customer info  so that's what we have so if you see api v1   and prefix is this customer and the endpoint is  info which eventually calls a controller which   is called customer controller now customer  controller by this time you should know that   it should be still inside this api  v1 let's go ahead and find it uh   so we don't need this section now  admin section central logic so api v1   and here we have this customer controller which  is this one okay not customer auth controller   all right so now over here you  have a method which is called info   now info come over here and we'll see  this method info and info does make a   request to the database for this user now  which user it knows based on this object   now this object somehow connects with uh laravel  password which has to do with authentication and   as well as this auth middle lawyer okay so it's  more complex process which we don't need to know   all you know once a user logs in when you make a  subsequent request and if you make those requests   through this middle layer laravel will make sure  that it's just getting those in some information   or related information to that user okay now  actually we don't need any of this actually we can   return just to get the user information and put  it in this object and return it okay yes all right   so that's what we will do and we'll save it but  do remember that because i'm already logged in so once you log in to the back end when you make  a request user token is also sent do remember   that earlier we have seen that when you in author  apple earth controller over here when you log in   your token has been saved okay and now the token  has been saved in your header as well okay so   next time after saving this token when you make  a request to the database the token is also sent   along with other information regardless it's a get  request or post request so the header is always   sent okay so that's what we have to know now  here's one thing so what i'll do i'll go ahead and   simulate this thing first in our uh well what  we'll do first we'll go ahead and log out so what you need to do you need to log in again  but if we log in actually we want to get the token   so here this is login method in our controller  so here we do my token is now here we'll just uh   print what do we get from here from this response  object okay now we'll print it now over here we'll   save it first and now here we do a dot a dot com  and here one two three four five six now we'll   sign in um oops i think i'm missing this m now  let's go ahead and do it and it printed this token   so now this is the token that is valid when user  is logged in okay now we'll come to our postman   over here and over here we'll do localhost and  8000 and then api v1 and then here we do customer   and here info okay all right so now here first  thing we need to do authorization over here we   need to send the bearer token and over here we'll  save it okay if you don't have it one just to put   the one you copied from here and at the same  time you need to send this header information it   should be accepted type and here we do application  json okay and uh let's see for body we don't need   because it's a get request so if this successful  what would happen uh would be able to see the   information some of this information in our uh  postman over here so let's make this request   yes and it worked you see it gave us some  information okay so that means that our   endpoint is working and when the user logged in  this api it does work okay that it works and it   printed some information okay so that that's  how it works now anyway so that means that   we should be able to make this get request  sorry get user information request from our   uh page where we have this account page okay so  from here we'll be able to make that request okay   well first we need to go ahead in our api client  over here and just now we saw that if we make a   get request we sometimes need to send the headers  as well as our some other information okay   so now what we'll do over here over here  we'll set some more information but first   thing we'll see if we can send the header so  here we do we'll send the headers as a string   and a string uh the type string  string and we'll call it headers okay all right but now this headers could be empty  sometimes okay not all the get request will have   okay so that's why we set it to empty now headers  over here as you see the value the this the key is   a string and the value is string as well and the  same over here okay so now as you send the headers   the token would be sent automatically okay  now over here you want to update this one   so over here you want to say headers and here  we do headers if header is empty it's nothing   we'll send from here well with this our  get data can send headers if necessary okay   all right next thing we need to do we  need to come over here in our account   page and inside this account page actually  we need to do a bit more uh checking okay so we'll come to this account page over here  and first over here we'll create a boolean   variable and we'll call it the user logged  in and here we'll do get dot find controller   and then here user logged in okay user  logged in and it will return boolean   so you can check this one user  if user has already logged in then we can go ahead and do get dot  find and over here we do user controller   user controller okay now here you  do let's see we need to import it   okay and here we do get user info okay that's  all all right now we'll come over here and uh   first thing we want to do okay anyway i'll cut  this one and then i'll wrap it around get builder   okay and here you do user controller user  controller okay and builder and user controller okay now here we'll just simply return  whatever it is okay all right and now over here   well even inside this we can do more check okay  now over here i'll cut this one one more time   and here we'll check whether the user has logged  in or not okay so i'll use this boolean variable   over here user logged in if it is true so then  i'll put this one otherwise i would do con   container and here we would do a child and we do  center then child then we do text and then here   we'll say you must login okay you must log in all  right for now we'll keep this one but future will   change it very soon okay so user has logged  in we'll fall back to this condition okay   but we must wait because if you see user has a  loading okay if it is a true that means it has   started it is false that means the condition has  returned okay now let's check it over here so i'll   come over here and here we do one more conditional  check okay now we do it inside this bracket okay   because you already have one question mark so here  you need to do user controller user controller   uh dot is loading is loading well if it is true  then show this one okay otherwise you would show   custom custom loader oh eight year yes that's  that's as simple as this one well so if you want   to mod if you want to put more information uh i  mean more conditional check inside one so you need   to use this brackets okay hopefully it makes sense  now of course here we can return like this because   is it too much all right so hopefully it makes  sense now we are almost ready uh next thing we   need to do we need to go to our dependencies  and uh let's see what do we what problem we have   uh why it's being cranky did i delete anything  just let me do a quick check uh user apple as   they're all being cranky okay let me go there  let's see if we have any problem over here or not nope we don't have any problem let me open it up  one more time uh let's check it would it say uh to okay now this is about this get data so over  here it says that ah right okay well now it's   being cranky because of this reason because here i  put them more parameters but with this it becomes   compulsory so we can make them optional so here  we'll put it like this and the arrow should be   gone let me remove that and now if you come  over here yeah all this error is gone okay   so when you wrap things around this curly braces  they become optional okay and what we'll do we'll   come over here in our dependency controller uh  let's see where it is helper class okay now here   we need to register two things one is our uh user  repo okay so just i'll put it right below it okay   so actually what i could do i can just go ahead  and copy this one and over here i'll put it as a   user repo and user repo just taking uh this api  client let's go ahead and import the library   and i'll put it right below it as well  okay now over here what we'll do uh   instead of auth controller here we'll say user  controller and here we do user repo okay now   let's import it yes everything should be good  now well after this we could go ahead and well after this we could go ahead and run our app  and let's see everything should work correctly   and we also worked on our let's see we don't need  this uh user product controller we don't need this   user controller of controller and constraints  and things like that so just focus on this one   yes so if the user is here  at the same time actually uh we just simply print a message over here  it's a user has logged in okay that's all okay   all right so if user has logged in  we'll fall back to this category okay   yes pretty much like that yeah okay cool  well after everything now we'll go ahead and   save our information here and let's  restart our app so it'll start from scratch   and if we come over here we know that we  are logged in now we'll come over here   and it says the user has logged in so it means  working uh well if it's working then what we'll do   here we do have some information that we  can change okay so i'll remove this one now   we do have some hard-coded name hardcore  information so here we'll change them   change using this one okay so we'll  use this one if the user has logged in   and then here we do user model and then  we can access name okay so i'll copy   up to this and over here we'll do that  this one dot phone okay and over here   sn email and i think uh well address is still  empty messages still empty yeah that's all   go ahead and save it and we'll do that and  looks like we do have our information over   here and let's go ahead and restart our app one  more time and let's see how it goes and okay we do   have error now this is happening because of this  one because we set it to load too early which you   copied from auth controller and we also don't need  this one over here we need this one at the bottom   now over here you need this so once we have 200  and then you can say is as loading called true   okay which means it has loaded successfully okay  all right and of course even if you save it now it   might react so let's go ahead and save it restart  it all right so i'm restarting my app over here   and after restarting i do have this thing okay  now let's take a look at the log over here   now if i am over here so it says you must  log in so once again i need to repeat and   yeah i'll add stuff quickly and i'll check out  and it asked me to sign in which i'll do a.a.com okay here one two three four five six sign  in okay it takes me to sign in page now if   you come over here and it does work  now if you log out and sign in again so let's see one two three four five six sign  in come over here and it works as well okay   now what if we go and create a new  account after logging out to create one csc.com over here password one  two three four five six name d1   phone number two three four five six let's sign  up yes well now after signing up it doesn't go   anywhere though so for this reason we need to  restart and we'll fix that soon don't worry   so now here i am now here if you see we do have  this problem and it says internal error and   if you look out at the top over here it says  that uh route is not defined now where is   this message coming from i think this is uh  coming from somewhere i put a log let's see   in our user repo not api client this is the get  data over here uh so this should be in let's see   almost probably from here because i put a log for  testing so test okay uh plus okay let's check it   yeah over here as you can see now of course this  is purely a debugging error message and it's   html format but flutter can print that okay cool  now here's telling you that you don't have this   route is not defined blah blah blah now in general  this happens if you have a problem with your   uh headers or your post or get requests  especially if your headers has some problem   and but if you go ahead and check it like over  here you'll not get any problem because here   actually we are sending the headers and this key  okay which is token but here actually we were   not um because you see that over here our user  wrapper uses api client okay now over here api   client we do have now previously we have saved the  token but not through this api client not in the   constructor okay because for each of the repo when  they get called and each time you visit a certain   controller or certain page and if that page  has related controller and repo then from   that repo the api client gets call and for  that api clients gets initialized so here's   the problem this token if you see there is  a token and this token updates the header   okay and after updating header now we are also  sending in our get request you see well if it is   empty then it will take it from here which is  also empty i mean it is empty then we'll send   it from here if it is not empty then we'll  send it from here because that's what the   double quotation means it means that if it is  empty do this if it is not empty do this one   anyway so over here when you do get request  which we did just now there was a get request   and we are supposed to send headers but no  headers send token right which is this one   eventually which is this one right so here  it says token now here this token is null   okay as you see so that's why it gets internal  error now it does work with when you do this   uh registration first time it works because  uh at that time first time registration   we don't need to send any uh token that's because  when you're registering server of course sorry   so server of course it doesn't need any token  because you're a new user so you don't have any   token but for the subsequent request for the same  user we need token but here we are sending a token   which is empty okay so here we have to work on the  token all right so now how to work with this one   now here first we need to come over here in our  api client we need to send share preferences   and here we do get dot find now if we  go over here which is this one over here   we also need require this dot shared preferences  but of course in that case we need to declare it   first we do here light shared preferences shared  preferences okay now we just simply put it there okay now why we are doing shared preferences  because we know that in our shared preferences   first time when you do a registration or first  time when user logs in we save a token right   now we can get that one get string okay  here we get it app constants and here   you do the token okay so this this is a  valid token why because this is coming on get   stream which is saved internally okay  because just now we had this one app   constants dot token so but it's not saved  internally which could be saved in the memory   but it gets lost when you uh walk through the app  okay so that that's what was causing the problem   now if you go ahead and rerun  it uh well let's restart okay now let's come over here yes the problem  solved and this is the user that we registered   just now okay and this is the related  information we got from our database okay   now let's work on this if we if you log out   um we want to go to the sign in page okay  because right now we are not going to the   sign-in page let me check this account page over  here and i think we have this option command f log out oh yeah it does take us  to the sign-in page let's go there   yes it takes us to the sign-in  page but now if you want to   create a new account after this we should also  go somewhere right okay so right now let's go to   this sign up page which is this one over here  so over here if we can successfully sign up   actually we'll go to a new page here when i would  say get dot off named over here route helper get initial which will take us  to the home page okay all right   now we load it now let's go ahead  and declare register another user okay and this time everything  should work as we expected and just random numbers let's sign up yes it  takes us to the home page which is beautiful   now if you come over here this user has no history  over here if you click on this yes this is what we   just adjusted okay and um registered so  isn't it beautiful yes so let's go ahead and open it with our this one and one two three four five six   all right so if we come over here we see that  this is the information well this is what we   see now and let me start it with my other  phone this is my other simulator this is   pro max now over here i'll go ahead and start  this one as well and it may take a bit of time and let me find this one so here it  is so i have two different simulator   but over here i didn't log in did i no i  didn't now here's one thing that we need to   change as well so for this one we need to  come to our um account page over here and   let me collapse this one first right over here  okay so right now it says that over here simply   we could go ahead and show a container okay now  container would be the child so let's go ahead and   do it and this container over here and inside  container will have width so here we will do   double dot max finite and here we do height now  for height itself uh we do dimensions so would   uh call back this file and here we do  height okay and we'll multiply that by   uh five so we'll get 100 and then we'll give  it a margin bit of margin over here okay so margin so here we do agencies only okay and  your left the dimensions the uh with 20 right   dimensions start with tiny okay all right  and after that we'll have decoration   and with the box decoration and image  an image decoration decoration image then i would do image asset image and  now here we do the image name is this one sign in to continue dot png so here we  do assets image assign into contact png   okay now that's what we'll have let's save it  and see the result uh yes it's way too small all right so now here we could do a bit of  different operation here we could do fit we do   box with dot cover okay now in that case the image height i  think we need to do a bit more all right all right okay all right so so  that's what we get and we do have   space everywhere now here we can also do  border radius so do border radius.circular dimensions dot radius 20. okay all  right now here we want to put this   let's see this one okay uh inside a column okay  so now i'll do control here i'll cut this one   and here i'll do column and the children okay   and the first one is this one so let's save  it all right now for column itself uh here you could do this one so let's go  ahead and set the property here main access alignment manager's alignment  dot center so let's put it in the center   okay and as a child we can put here right below it now for this one i'll  just copy this one okay now here will not   have any of these things just to remove this  one okay everything else would stay the same   now here we do have say just five and we'll  have a child over here child would be big text here with the text sign in okay sign and now here we do color colors  dot white okay now this will have a background   color um now this will have a color now the color  itself actually we need to set inside decoration   otherwise we'll get error you do have colors  dot main color let's remove this and let's see   all right now this one we can center inside it okay now here we can also assign the   uh size so here we want to do dimensions dot  font size let's see we do have 20 okay all right okay so with this it looks great but  now over here we need to wrap this one   around gesture detector that's what we'll  do so we get over here gesture detector   now here we'll have on tap okay now we do  get that named and here we do route helper   dot sign-in page okay so that's what we  want to do if the user is not logged in okay so if you click over here it will take you to  the sign-in page okay so let's click on this   yes it did all right now over here if you  come this time uh let's do a at a dot com   here we do one two three four five six let's sign  in okay we do get sign in okay and everything is   fine if you log out it takes you to the this page  okay all right okay now over here we were running   this one on this device because there are two  different devices okay all right now let's save it   okay now let's see log out sign in now here  i'll do csc.com your password one two three   four five six sign in yes we did okay all right  so now it does work okay well now another thing   you need to take care uh you should come  to a client over here sorry api client um this one you need to set it to the correct one  otherwise you will get error okay uh if if it is   not found then we set it to no uh mt token okay  otherwise you will get crush but this would be   always found once the user registered okay but for  a new device it would be empty so in that case for   any kind of get request you wanna set it to null  and after user logs in there would be this one   okay all right hopefully it makes sense well with  this we're pretty much done in this section and i   think next section will be more exciting because  in next section we'll take a look at firebase   thing and payment and we'll also do google  map and much more things to go so stay tuned