Flutter Firebase Master Class Tutorial Complete App | Backend Data Storage

ice in my veins i've been driving this train  years in this lane there's no stop in this   flame cause i came to the game and i changed  it to play how i like rearranged it to my   own domain yeah i got what it takes made lots of  mistakes taking shots skipping breaks feeling lost   feeling great popping off singing straight never  stop never changed all the squad here to play and   i've got something to say yeah i work hard each  and every day i get lost in the words i say i   don't push pods no i push play i won't stop till  i make a change i withdraw on the things i make i   turn flaws into flawless traits i build tall never  captain's face i won't stop till i hear him say oh six am and i'm up again i got tired  eyes need a cup of blend that's right   in the am that's my only friend no life just  the sun coming up on the horizon i lose track   of time yeah i move fast and climb a new  class divine yeah true passion shines and   i'm through passing time i choose stacking dimes  you snooze half the time while i move passing by   i work hard each and every day i get lost in the  words i say i don't push pause no i push play   i won't stop till i make a change i  withdraw on the things i make i turn   flaws into flawless traits i build tall never  captain's face i won't stop till i hear him say oh ice in my veins i've been driving this train  years in this lane there's no stop in this   flame cause i came to the game and i changed  it to play how i like rearranged it to my own   domain yeah i got what it takes made lots of  mistakes taking shots keeping breaks feeling   lost feeling great popping off singing straight  never stop never changed all the squad here to   play and i've got something to say yeah so  in our vs code we'll create a new project and we'll select the folder  then we'll give it a name and at the same time we'll run our project so here is our new project now we'll go ahead and  create a firebase project we'll give it a name then we'll continue so here we see that we can create ios android  and web project now here is my project   and this is the root folder and from here we'll  run a command but before that you must make sure   you have installed firebase cli if you don't know  how to install it come to this website over here   and choose your platform and based on that go  ahead and install i recommend using npm which   is using node.js first make sure that you have  installed node.js and then run this command over   here it will install firebase tools for you and  after that and run this command firebase logging   so it'll try to log in using your google account  so you have to give the permission to do that   and then you're pretty good to go now we'll  come back to our project over here here   we'll run flutter fire configure now it is bringing all the projects that we  have in our firebase now as you see over here   we have a project which is called study  app and this is what we have just created   and we'll hit enter and it's asking me whether  i'm going to create the project for android ios   mac and web well i'll just hit enter and it will  create firebase apps for all these four platforms and over here we'll enter yes and here we are done now if you open up your project folder and you  will see inside this android folder inside app   source you have this google services.json  previously you had to manually do it and   the same for ios so if we open up ios folder and  we go inside runner and over here we do see that   google services info.plist so everything happens  automatically now we're going to replace this code now in the terminal we'll run this command   to get a firebase core package so that we're  able to run it now let's import the dependency okay so we'll go ahead and run our app again  so everything is working as expected okay   so this time we want to do we want to upload  some json files or our data to the backend first   and then we'll read it from our app but definitely  will upload the data from app itself so for this   reason in our app we need to have some json  data so we'll upload the json data to flutter   firebase backend that's what we're going to  do now to be able to do that first we need   to upload our assets okay so now here i'm in  the terminal and here i'll do i'll make a new   folder inside my root folder as you see this is  my root folder so here i am and i do see that my   project structure like this and here i'll do  a new folder and i'll do amputators which will   create a new folder and the folder's name would  be assets okay now if we open our explorer over   here we do see that this is the assets folder  now inside this i want to load our asset now   i already have it and you should have them as  well from the link below so go ahead download   and after that you'll have these three files and  drag and drop them inside this assets folder okay   now here you do see that we have some json files  as well as icons inside icons we have icons that   has vj and images inside images photo we still  have images okay all right i'll close this   explorer project explorer now here at the same  time i'll go to pop spec yml file this one and   over here i'll make sure that my folder structure  is like this inside this assets so you also need   to be able to make sure they align like this  okay and especially this section dvd paper just   okay all right so this section you need to take  care uh you should have two slashes as you see   uh in a sense that because they should align the  way they are here so instead these assets we have   db folder and inside db folder we have this papers  folder okay all right so hopefully it makes sense   anyway uh so at the same time you need to  make sure that you install this get package   for state management which is quite important  because we are going to create a controller   and right after that i'm going to  close this and i'm also going to   um close the other file but at the same time  right now we need to create a folder and project   structure for uh having our controller so for  this reason what i'm going to do i'm going to come   inside this folder over here and then i'll create  a new folder and here i'll call it controllers   okay and then inside this controller  and here we'll call it question paper now inside this question paper folder will  create a new file and we'll call it data uploader   data loader. so here is this class and this is  the file and over here will create a controller   and the controller name would be definitely data  uploader so here we'll create a class and we'll   name it data uploader okay and then it will extend  the extends get x controller okay lx controller all right so make sure that  we have the dependencies so   so here we'll overwrite a default method  which is called on ready so we do overwrite now here the method name is on  ready so we do boyd on ready this one okay and here of course we need to call   super dot already now while we are  implementing this method the reason is because   as i said earlier that we want to upload  data to firebase banking but you just want to   upload data only once and we know that already  only get calls only once okay so that's why   over here we'll call a method okay of  course the method name would be upload data here we are going to create the body of this method okay so now inside this we want to go ahead and  upload data uh but before we go ahead and upload   it make sure that this gets called so here  we do print and i'll say data is uploading now this isn't this is a controller but we need  to call this controller from ui right so we need   to find a place but this controller in our  app lifetime only will get called once when   app stirs first time or it restores first time  it's pretty much when it starts and that would   be actually pretty much for admin this section not  for the common users what do you what do i mean by   that i'll i'll tell you later but anyway so now  here we'll come inside this folder and create a   new stateless class or we'll click create a dart  class and we'll call it data operator screen okay   data uploader screen dot dot  now here we will do st less so here we have this stateless class  and we'll call it data uploader screen now make sure that we have the dependencies  well here first we are going to go ahead and   return a scaffold and then inside this will have  body and inside it will have a center region   and then we'll have a child and  inside child i'll just have a text and we'll call it uploading okay and  over here definitely we are going to put   this semicolon all right  now we're going to save it okay i think we don't need this section over here  it's here and for now we will put const quick fix okay now then save it and everything is  smooth okay now so this is from where we   want to call this controller okay now to be  able to call this controller we know that   you have to inject the controller okay now once  again this controller data uploader just get   called only once so we can be easy with this and  for this reason we are going to call it from here   which i mean that we are going to inject it  over here so we'll call it like data uploader data uploader and we'll name it controller and over  here we do get output and inside this   will actually load the dependencies so  our dependency is data uploader itself our now with this our now with this our controller  will be injected and we'll be able to use it   now we need to call this view from our  main method so we'll come over here and   whatever we have pretty much over here we're  going to delete we don't need any of this   so we just left with this one and instead this  run it will have get material app get material add and we don't need this  options for now so we'll just   remove all of this and at the same time  i will set up a property which is called   home now for home we'll call the screen  data uploaded data uploader screen okay and of course we have  this error because we need to   import it so here we do command  dot and we'll see what we get   but it doesn't recognize so here we will import  it manually over here so we do import get this one okay all right and the  arrow should be gone as well   yeah okay but this this section doesn't  really matter the fireworks section yet   so even you can comment it out it  doesn't really matter right now so the only thing matters to us this uploader  class how can we call it but of course   over here inside this screen uploader so which is this one over here we have injected  it but we are not calling anything from it   we'll save it right now and we'll come to this  debug console section and we'll see the output   so we'll restart our app from the  screen and what we see what what do   we want to see over here we want to be able  to see this text message which is this one   data is uploading this is what we want to  see so here we're going to restart our app okay so data is uploading so which  means that this place this method is   getting cold once again inside this controller  we have this on ready method which gets only once   which gets called only once and if you  save it again you don't get cold okay   but of course if you try to restart your wrap  it would get cold restarting doesn't mean   hot remote so it restarts everything so anyway so  you get the idea so as we injected our controller   over here after being injected that text or that  method get called actually and we see the print   so from this we understand that if we want to  do some job like uh uploading file only once   or at the put up time of your app so this this  place should be the perfect place to load data   now let's go ahead and take a look what we have  here so all our data is inside this assets folder   so we need to read this essence folder and then  read all these uh items but some of them are svg   and some of them are json so our first priority  is reading this json data so that's what we want   to do now to be able to do that first we need  to upload this assets folder and its items from   it now to be able to do that in flutter you do  like this you do default uh let's see default asset bundle i think yes this  one yeah so default asset bundle   let's set the bundle okay so we just need to go  like this and inside this after this you have to   call off and you need to pass a context but here  we don't have any context this is a controller   but since we are using get x so we can  get the context from get x okay here we do   get x all right and now we might have an error  but i think it just wants to make sure that this   is not enough okay now so here we are passing  this context and then we can access the data now   this kind of asset folder you want to access using  something called asset manifest dot json okay   so if you do that one it would look for assets  folder but of course it has to be correspondent   what you have inside this pop stack the  ymo file because over here we have this assets as well okay so yeah but basically it will  point to the assets over here and then try to read   inside from it so if you want to  point this assets thing um from your   ui or controller you have to pass a context for  default sm bundle and then use a method called   load string this one okay and as you can see it  takes string so now inside this we are going to   pass a key now the key is in general is called  asset manifest.json so that's what we are going to   pass asset well now over here asset manifest dot  json all right right after this we need to save   this in a variable so we'll declare a variable  over here and we'll call it manifest content   first manifest content so here we are going to  save the data but because we are going to load   we want to do a weight now as you want to do  a white you want to do a quick fix over here   and you are the async modifier all right now so  it will be loading the assets and put it inside   this okay from the assets folder and then we  need to decode them so how to decode them so   here we can just simply do manifest dot uh sorry  json json.decode then we have to pass manifest   json.decode and manifest okay well that's great  because uh it auto generated for us now we need   to save this thing so because we are going to  read json files and json files are pretty much   like man so we need to declare a variable of map  time okay so that's why here we do final and we'll   have a map over here so in our json file that  could be string and then the value for dynamic and then we'll assign the variable name  we can just say manifest map okay many   press okay all right dynamic i have a type  over here okay and i guess we do need to import and here we do have error because  instead of encode it should be decoded   okay now the error is gone okay so now whatever  will load that will be inside this variable okay   great now if you take a look at this folder over  here inside this we have db folder and papers   and then inside this we have this json files but  inside this ss folder we also have icons folder   svg and ttf the this is the font we have in the  images so with this over here it's trying to read   everything inside this ss folder but we don't need  everything we just need this assets to be papers   and json so for this reason we need to tell fire  that uh which path you want or which items you   want or which format do you want so this is what  we need to tell our floor wrap and now to be able   to do that we need to get the keys in general keys  refers to the path uh in this case so here we do   manifest map dot keys now as you see we already  have keys and then based on case we can get a   method which is called where now inside this where  method will pass a variable which is called path and then you're going to grab this path and also   check the path that actually we have  so here we'll use arrow function sorry so now we'll take path and well and after  that we'll use the method that's called start   with okay this one and what path we want  we just want assets db and paper so that's   all we want we don't want other parts  okay because this is going to be in a loop   and what will happen over here it will  at least generate three parts over here   accept this path assets icon path and assets  images part but all we want to load is this part   because others we don't want to load we don't  want to load image we just want to load that json file path hopefully it makes sense  and then we also want to make sure that   the path doesn't contain anything else so  we'll just say contains this one over here and   we'll see if it contains what one it  contains just json files okay so that's   all we want and that's as simple as that and  after that we are going to convert it to a list   okay now why less because map when you run  this operation like the one you have over here using this map well it becomes a map but   that is not indexable which means you can't look  through it like the classic tradition always so we   want to convert this map to list which we do using  this one yes and with this we are able to load the   information json information from our  assets folder and that's the first step all right so with this what would  be able to do would be able to   load the path so the path would be loaded as  well as the file's name okay and well now we   can go ahead and print it but before we print it  we can save it to a variable and we'll call it   papers in assets okay so we're going to  print that and right here we'll do print   papers in essence this one okay all right and  then i'll hot instead of hot reload i'll restart   so and we'll see what happens here and as you  can see so these are the file path with their   file names okay so that's what we have here  in our assets folder excellent so with this   we are already able to upload uh  not on i mean able to read the files   path and the name okay so next we will see how to  loop through them and print information as well   this is the next step okay and while over here  would do a comment i would write it say let's say so here we do a comment file and print path that's  what we do here okay all next so next we want to   actually read the content because now we already  have the path so we'll be able to read the content   now as you see we have many files over  here so we need to do it in a loop okay   so for this reason we'll do four now we'll  define a bar and we'll call it paper in   papers in assets okay yeah so this one over here  it has length of four and we would run this in a   for loop okay so over here we would  do root bundle okay dot load string now we'll simply pass the path now each  part is contained in this paper variable   the one we did earlier okay so it will load the  file based on each of this path and definitely   we need to avoid because this is an asynchronous  operation and here we'll save it in a variable   so we'll call it uh we'll create a stream  type variable and we'll call it string paper   content okay and now here first we  are going to print them so it would do   string paper content once again you have  to restart your app so do command control   okay now as you see we are already able to read the content from the file so these are the  file now of course we can confirm that that our   json file is like this so to be able to do that  we can just simply open our control uh explorer   over here and say for example you want to see the  biology biology.json and this is what we see okay   beautiful and speaking of this one we have to see  the data structure here because now we are able to   load them and print them okay but this is also  not very organized when it comes to a back end   so we need to convert this data and for this  reason uh what are you gonna do we are going to   build models okay so that is the thing we are  going to do next because we need to read them   and based on the model fields we have to put them  and convert them in an object and after that we   would put them in a list okay now that list would  be somehow those information will send it to the   firebase backend so for this  reason we'll open our explorer   and inside this lib folder  we'll create a new folder and we'll call it models and inside this model  we'll create a new file and we'll call it question   paper model dot dart okay now one thing we  need to see that though the data structure   here the way it looks like now it is a little  bit complex here but one thing we understand that   inside it's wrapped inside this curly braces which  is adjacent format we also call it map in flatter   then we have this fields now these fields are  easily readable inside a model just we'll have   to create this field in the model as well now  here we have this questions here now questions   itself is a list okay as you can see here it's  a list and actually it's a long list i guess   the list up to here and then inside  this list we have maps actually few maps   okay now inside the map we have fields and  again list and inside the list we have this   maps again okay so would start building our  model based on this map first okay and as so   start from inside to outside so  that's what we are going to do   now here we see that answer is a list so inside  this list will have maps so first we'll create a   model for this map so this map will have two  fields one is identifier another is answer   let's go ahead and do it so of course we don't  need that so we'll close it and only thing we need   over here is this one for now model itself as our  main itself we can also close it now over here so   here we'll first create a class and we'll call it  answer now here of course if you saw it once again   carefully so here we'll have nested json or  nested map because this one is inside this list   this place it in that this map this map is inside  this list and this list is inside this large map   so it's nested it may look scary but trust me it  is easy so once you know where to start working   from and once you find the pattern so we found  a pattern here these are our patterns and we'll   just simply start with this one once we build this  one then we'll build this one then we'll nest this   model inside this model actually that's pretty  easy but a lot of the beginners might get scared   but it is not but anyway so here would create two  fields one is final uh type and string would be   we i just said that would be identifier and then  we'll have another one that is string as well and   we'll call it answer okay now we're  going to create a constructor for this   now it will have two fields it will take this  dot identifier and the desktop answer okay   all right now after that we will send data or this  this class will receive data over here as a map   so map is json as i said early so here we  need to create a method that takes json   okay so for this reason here i'll create a  new method and i'll call it from json okay   and then jason will take a map so here we  do map and the string and dynamic and then   the method name we'll just simply call it json  okay and after that we'll have this semicolon   so instead of using curly braces we could  do this colon and assign the value directly   okay so but i'll break a line over here and  i'll do it here so here i'll do identifier   is what we have and identify identify itself will  assign a value now that value would be coming from   json itself because this will contain value and  this value would be like for the first one this   is this case value which is a for the second one  this case value which is symbiosis symbiosis yes   right anyway so here we are now and here inside  we are going to have identifier identifier   okay and we will make sure that it is a  string okay and after that we'll have answer   and over here we do the same and we'll put  a comma so with this we are done with this   from json method now as this has been  built we can go ahead and save it the first   of course even if you save it nothing offensive  would happen so we are done with this model first   okay but in future we still need to work on this  a little bit like we have to build two json method   so what's happening here so this identifier is  coming from here and for answer itself okay we   need to change it to capital a because  here in the json we have capital a okay   so this two fields are passing we are passing as  if we call we call this one it would receive those   two fields and we'll get those values and with  this we make sure that we get a sorry we get a   string and then put it in this variable okay and  over here in this variable which will eventually   relate to this and create an object okay so  now we'll take a look at the next section now   next section is this one so we also have  to build a class and model for this one   now this one itself has id so we'll have a field  id and another field which is called question   and then we'll have answers but for answers we  already built it but you have to know that answers   would be in a list okay and we also have another  field which is called the correct answer okay so   that's what we're going to do well this is how we  manually make our model but this is not efficient   so there is a tool how to do that i know a lot  of you use dart data generator plug-in but i'm   not going to use that one i think uh that's not  very conventional so i'm going to go to a website so this website over here and i think  the way it outputs your model it's very   efficient it doesn't have a lot of garbage it's  easy to understand and read not like the dart   data generator okay anyway so what i'm going to  do i'm going to copy my json class or json from   my bbs code so here i am now this is our json so  i'm going to select all and copy this and simply   sorry about this and simply paste it here okay  and then it will just click over here you don't   have to write the name so generate dart okay  and that's what you it would do for you now   it's very readable but we still have to make tiny  changes but it still keeps the original idea so   first we'll start working with answers okay and  then that answer would be as a list in your class   question model and that question model would be  nested in your question paper model okay so the   idea still stays the same but anyway regarding  this i have a video so you can go ahead and   watch this how to work with nestor jason if you  don't understand so i'm going to copy this and   put it right over here so anyway i'll remove  all of this now here's the thing so some of   this uh we still need to tweak but it's still  very efficient so here definitely this is optional and same here and the first part  of the error is gone and for this one so now for question itself  we see that we have some   errors but we can easily take care of  these errors now definitely for this   one we're going to do quick fix and add  required and this is the same over here so we're going to do quick fix and add required  and for answers we're going to do the same thing   so we do quick fix at required now  this would be optional sorry about that uh this is the annoying thing about  vs code that it pops up from nowhere   i have to turn it off but anyway so over here  the problems are solved but uh in this section   we still see uh we have a bit of different  way of writing code so i'm going to erase this   and right here i'm going to  do answers and then do jason jason answers over here we'll cast it as a  list and then we'll get the map function out   of it we'll get e which refers to each of them  in a loop and then we're going to call answers from jason okay and then we'd convert it to list to list okay and what else over here we still  have a bit of problem and we'll take care of that   uh now this question this uh error is it's asking  you to initialize so that's why we have now this   way it doesn't get initialized immediately it  initialized later the values okay now to get rid   of this problem actually we can introduce the  colon over here now with the colon the values   get initialized before the constructor body  runs okay yeah now the error should be gone   it's gone now definitely we're gonna do the  same over here so just to simply remove this braces over here and put the column and with  this column the value inside this constructor   would get initialized first like this value  then it will run the constructor body okay and now over here now first  thing i'm going to change   change the name over here and capitalize  them it has been auto generated okay so i'm going to copy  this and post it paste it here   in the same here okay so some of these fills uh we  still need to make required so which i'll do now so if you are on mac uh you can just hit  command dot or for windows i think that   is ctrl dot for vs code to get this thing like  pop up some of you might already know this thing now this this should be optional because we might  not have questions for some of the models so   that's why it has this and right over here  we'll remove this we don't need like that and so the same error it would ask you  to initialize so what we're going to do   we're going to remove this and put  semicolon over here and this one   i think we can also cast it as a string to make  sure that it is a string so here are the string   image url now image url itself actually  should be optional so here we do this one and it's better this as a string now comes with this one questions okay and now  questions itself is a list okay so as you see   that it takes a list of questions this one the  one that we created early and at the same time   you remember this question takes a list of  answers which we created early so they're   all nested so that's why i said you should start  start working with the smallest one and then   go to the bigger one anyway so now i would  come over here and here we do questions   and i'm gonna go ahead for the last  one and then i'll have curly braces   jason questions i'm gonna cast it as a  list and then i'll i would invoke this map method mapmap okay and  then inside this i'm going to   pass questions from jason and then we'll have  this e and then we'll convert it to a list okay all right and uh let's see actually here we  want to do a bit of change the type dynamic if   you don't do that you might get error in future  so just to be safe so as map string diagnomic   okay and we are good to go so you see how it  works here uh so it goes through in a loop for   each of these questions and we take it as e and  then we pass it to this question model the e but   we cast it to dynamic a map we cast it to  dyna we cast it to map the reason why we do   that because as you see it takes a map here  okay so that's why we are costing all right   now our data could be complex so that's where we  are forcefully casting it over here but of course   here we are not doing the same as you can as you  see but if you want you can even cast it here as   map string dynamic okay if you want but here just  to be sure because here the data could be complex   because this is the biggest one outside one from  here and includes everything so i'm trying to   convert them all met so that's the point okay now  we do have another issue here and for this reason   right now we're just gonna skip this  okay yeah we will have to work on this   uh later but for now it's not necessary so now  with this you build a json uh you build a model   class okay for question paper okay so so far we  are able to load the data from our assets folder   and we are also able to print  them their path using this section   and then after that we're able to print out  the content for each of the json files okay   now this is the time we're going to go ahead and   add the data in the model the model that  we created and for this one to be able to   do first we need to create a list over here  so the list type should be question paper model this one okay and we'll call  a variable called question papers   and we'll create an empty list now right  after this we are going to add them   here we do question papers dot add this method  over here now inside this we want to send this as we look through it we want to send each of this  content now let's copy this and you come over here   and then here we do question paper  model from string okay and as you see   we put it here but we still get an error  okay so this is a value mismatch error now   this one is a string right but we don't want  to use a string we want to use from json   okay this one all right but now we want to  we get another problem so here it says that   argument string cannot be assigned  to parameter map string dynamic   now this one we know that it takes map which  is string and dynamic but this is a string so   we can't use it directly what do we need to do  we need to decode it we do json.decode this one so json.decode takes a string and convert  it to a map so i have tutorials on them you   can check that out okay with this the arrow  should be gone now after this we are able to   put information in our quiz papers and what  are we going to do we're going to print and see   how many items we have in our questions paper  so here we do print uh items number items number   and then we do question paper dot it's a list so  we should be able to do length but if it doesn't   work like this then we need to put a curly braces  inside this and then it should work question paper question papers dot length okay all right now  i'm going to run the app okay so here we see   that we have four items printed that's because  we have four json files one two three four but   we can also access them uh like using index so i  will go to the first index which is zero l which   would stand for biology and inside this biology  model uh well we can access the title or image   url or even description so let's go ahead and do  that so let's see if we can access them or not so let's close this yeah   so here we are in data uploader dot  operator id okay now let's do hot reload quad restart yeah so item is this  one as you can see over here okay   now as well as you can access other information  from it like the description let's go ahead   and see this one yeah description okay now  once again hot restart and you'll see this   is the description beautiful so with this we are  successfully able to access items from our model okay great so next section well  in next section we are going to   do firebase firestore now since we want to  upload our data to the cloud firestore so we   need to install a plugin for this so we're going  to go ahead to command line so we do command   shift p or control shift p then you use this  add dependency and look for cloud firestore okay   now i've already done it okay i've already done  it so i'm not going to add it again just simply   go ahead and search cloud firestore and hit enter  and you should be able to install it and then   go to popspec yml file and you will see that it is  there and here i have so this is the version that   i'm installing okay anyway so i'm going to  close this all right so now here we want to   get a firestore firebase firestore instance and  for this reason here we'll declare a variable   we'll call it firestore and over here we do  firebase firestore yeah but we want to get   an instance of this beautiful because we want to  send the data to the back end now we do have a lot   of data or json classes so we want to send them  all at once so for this reason we are going to   commit or do batch operations batch means  multiple so we are going to use multiple   of the this batch operation where it will upload  multiple data to the back end now here i will   create a variable and i will call it batch and  i have this instance firestores and from here   i'll get a function which is called batch so  it will return me an object for batch operation   all right now we want to create data to the  backend how to what kind of data and how we are   going to create it so let's take a look so here  is my firestore database and this is what we have   done just now i mean we have created an instance  of it so as we want to upload data it would be   like this as you see so for now we'll just  focus on this one quiz paper we can name it   anything it doesn't matter now quiz paper would  be inside collection and for quiz paper itself   will have documents okay now each document  would refer to the items each of the json file   so each document would refer to each of the  json file like biology.json file chemistry.json   file like that okay so collection would  contain document and at the same time   each document would contain collection and some  fields as you can see here okay and once again   collection will contain documents so here we  are so we have more documents over here but   now for each collection over here will have more  documents but each of this document refers to the   questions the one we have in our json file  okay so here we are inside biology.json   and inside that biology.json we have many  questions so these are the questions okay   so once again document contents collection  and field as you can see over here   so each time you click click on a collection  you go to a document and document will have   a lot of documents or objects and each of them  once again will have collection and duck fills   actually now collection is optional you don't have  to always have it because after that we don't want   to do anything we just want to get the answer and  that's all okay so this is how it's going to work so once again our four question paper would  be under this collection for question papers   okay so and it would refer to those four of  them so you can go ahead and check each of   them one by one by clicking on them so like  this is the chemistry one and i believe the   first one should be okay well it looks like  physics or whatever and well here it is math   again okay here is the biology okay so we  have those four questions paper over here one two three four you got it right anyway so now  each of them would refer to the fields inside this   json file so that's the idea so that's what we  want to create we want to create collection and   document but a lot of time this collection and  document those nodes we have to create manually   now for this first collection this is the name  but you can name it actually anything it doesn't   matter and this one you have to create manually  now after creating manually so those four files   would be uploaded over here and as it does  now you can name this collection anything okay   now these things would be reading from the  json file directly but now this one we don't   have in json file this name so we will give it  manually we'll i'll show you how to do that later   okay the same as this one this is also not in our  json file so this and this will give it manual and   then you are good to go even including this one  will also give it to manually so collection name   will give them manually most of the time okay but  the documents would be read automatically from our   file so this is the this is what you have to know  all right so now let's go ahead and work on this   uh programmatically creating uh data so that we  are able to store them in the firestore database now first we have to go ahead and create  collections as i said that we can create   collections manually to be able to do that we  would come to our this lib folder and right inside   this will create a new folder and here we'll call  it firebase yeah we'll call it firebase ref okay   so here we'll put our references now inside this  will create a new file and here we'll call it just   reference okay references dot dart now inside  this will create all the firebase and firestore   references okay now and actually we'd be creating  here collection references so for this reason here   we'll create a new variable and where we'll type  it with final and question paper question paper   paper rf reference okay now it would refer to the   instance and a collection well actually  at the end it is the collection   so over here we would do firestore fire fire  store dot collection and then we'll create here   call it question paper question paper okay go  ahead like this now you may wonder what is this   variable over here well we have to create this  instance okay of firestore so here we do final   and we'll call it firestore and then  it would be coming from firestore fire fi actually that should be i guess  firebase firestore i'm sorry about that   firebase firestore okay then would get instance  okay that's all now i guess we have to import the   library so let's go ahead and do that well it's  not recognizing like this so what we can do   we can come over here and i think we can just copy  it from here and we'll put it put it at the top   okay now the error is gone all right so now this  is an instance we created this instance and if we   somehow invoke this variable that would actually  go ahead and create this question paper collection   in our firebase in our firestore firebase backend  okay so now here we did that okay so of course   here we do have one file store reference but this  is the local reference that we created inside this   and this this reference actually pretty much would  be used only once but this reference would be   used throughout this app okay  so now we'll go ahead down there   uh actually okay here we're done for now okay now  we know that this is a list and in this list we   have our json files and those jsons  files are this json file as we know   okay so there's four json files you can ignore  that actually i can delete that i don't need   this so let's go ahead and delete this it is  confusing okay all right so i'll have this   four of this right and of course we earlier we  have seen that the properties from four of this we   can access like this okay access using the index  and the dot operator so now we'll look through it   and as we look through we'll access each of them  and then as we saw earlier just now that we can   we have to create fields in firebase cloud store  or cloud store firebase we have to create fields   and the document okay so first we'll go ahead  and create document and for each document we'll   create fields so anyway so we have to access this  uh json file from this list so here we'll go ahead   and create a loop over here and here we'll call it  create a ver type variable and we'll call it paper   and then we'll look through it okay and it's name  is we'll look through the question papers this one   okay now over here as we have this batch object so  it has a method okay we'll first create go go and   find a batch and then the method name is actually  set this one now as you see it takes document   now each document has data related to it okay  so if you click on the document it would show   you the data as we said earlier so first here  we have to get the document so what would be   the document the document would be each of the  json file like a biology chemistry and physics   from this this papers list right so now it would  be coming actually so it would be referring this   one over here paper so what we could do here  now we we know that we have a global reference   for firestore database so a firestore collection  actually so how can we access that one so here we'll simply call for i think what  was the variable actually this one okay   this one so we're going to simply call this one and then it has an object which is called  dock okay so we are going to call that one and   it does take a paper or actually what  i'm trying to say it does take a document   so we're going to send a document to it and  document should actually have an id so paper   dot id okay so this is how it's going to create  let's see quick fix i think we need to import it   otherwise we'll get an error okay yeah okay so  this refers to the collection and collection will   have document but documents should have an id so  we are assigning the id on our own based on this   paper variable once again this would be coming  from our json file let me go to this json file   let's open it so actually it will refer to this  one when i do paper.id so this would be the whole   the whole json file would be a document and it  should have an id and this is the id do remember   if you somehow try to change it it should this  id should be unique otherwise it will get error   okay great now here as i said earlier  that each collection will have document   and each document will have some fields  or data so here we are going to set them   now actually we'll set it through a map  or adjacent so that's that's what we do   whatever the whatever kind of whatever fields  we want we can do it here so first we do title   okay now here that would be paper to title this  one so actually the fields would be coming from   our uh file okay this one right so actually  the title image url descriptions time and uh   things like that will set over here  so that's what we're going to do   here we'll also do image url image url so it's  more like if you work with database after running   this command so it will have a table table  name should be the id and it will have this   fields inside inside it okay so these are the  fields and each field will contain information anyway so now here it would be  coming from paper dot image url yes okay let's see why we do have error over here well  now let us go ahead and check it what was there so it is image url so we should be able to access  it now let's go ahead and check it inside this   paper model actually what we have defined uh so  the model is actually here okay it is image url   okay but internally it takes this one  but we have to refer this image url   so anyway we're going to close this file now  we're going to come over here and let's uh close   the stormy uh this explorer as well so now here we  are okay so we have to do image url this one okay   all right and right after that we also have  to do description so here we do description   and paper description so let's keep all this  field small and then we'll have time seconds   seconds now this should be our paper dot time  seconds so this one i think this is what we   had early and the question count okay so this  is the end of fill that we are going to create   questions count which means how many questions  we had now here we would do paper dot questions   okay now if it is null because we know  that some questions some papers might   not have questions then we'll set it to zero  otherwise we'll set it to paper dot questions   dot length okay uh yeah that's what we're  going to send and let's see we do have an error   okay so it wants us to use this bang operator  most probably let's go we don't need that okay   now this is uh why we need this so once  again if i look for the file which was   this model over here and in this model we do see  that questions this list could be nullable as you   see over here so for this reason you have to check  whether it's null or not if it's null it means   there is no question if it's not null then we get  the length but at the same time you have to make   sure you use this bang operator otherwise you will  get this error so now say for example if we are   going to run this command and we should get uh for  our few documents and if for each of them we'll   see this operation or this fields being executed  well now we'll go ahead and create our firestore   database so here we are now here i'll i'm going to  my firebase backend uh the home page and this is   the app that we created earlier at the beginning  now here oh it's all pretty much empty over here   we don't have any database now i'll come to this  build section and i'll select firebase database then we're going to create one  database and we're gonna get over there and then we'll select this database where you are  well i'm in asia so i'm going to select somewhere   close to me you can select somewhere  close to you or your users and then uh let's work on this so it may take a few seconds  to get it done okay so here we are right now and   here we see that it says okay you can go ahead  and start your collection over here and then you   can give it a name like this say test right and  you can say one two three and test one value okay   all right it doesn't matter  you can write here anything now we're gonna save it here we do  see that it created a collection   and then under this collection we have a  document and document has a field but here   we can also do a collection again but this has  all been done manually we don't need to do that   so here we are going to delete the collection okay  so let's go ahead and do that and here it's asking   us to verify right here your collection name and  let's go ahead and remove it now it's all empty so here there are some rules that how to work  on this collection so here it did say that if   you have if you want to do read and write on your  document as you can see so you have to have this   rules where it says that so here we have these  rules and according to the rules it's not allowing   us read and write and it's trying to match  documents from the root directory uh well anyway   for now everything is empty over here so we are  going to go to this section so here is our loop   and right after this loop uh we can go ahead and  submit an operation we'll call it a white batch dot batch batch dot commit okay so with this it will  be submitting everything in our firebase database   and as well as create field related  to this id or using this id name   create documents actually and then for each  of the documents we'll have this fields there   okay now this is beautiful so i'm going to do  a restart over here and we'll see how it goes okay and we do have error over here and it says  that the caller doesn't have the permission to   execute the specific operation now it does happen  because here you need to give it rules okay now   let's come over here this rule  section so this rules actually   doesn't comply the way we are trying  to do so we need to change the rules   okay so the first one is definitely we're going to  change it to true okay and right over here we are   going to define actually what kind of collection  we are i mean what's the collection name we are   going to define over here so collection name  is question paper i guess papers uh our code   let's see we don't need this we can i guess  we can close this okay we also don't need this so collection name is question papers  okay uh i'll do s over here and let's see everything else okay good  so over here question papers question   paper papers okay now let's go ahead and  publish it and this time we'll see how it goes   so with this it has this read  and write permission and we are   also telling us hey i will have a question  paper collection so now that collection should   stay right here okay now let's go to our vs code  and let's hot restart and see how it goes okay   well this time we don't have any pop-up so  we're going to check on this and refresh it beautiful you see our data is already here  this is the collection name that we have   defined and these are the documents and as i said  earlier these documents names are coming from   our json files so that's how you  programmatically create them okay create um   a collection document and they're related  field isn't it beautiful and congratulations   congratulations for following with me  so far congratulations for being able   to create this one successfully and if you  do have any questions leave a comment below   but this is a beautiful thing you have done okay  so yes uh that's what actually i was talking   about so what went through the loop it took a  collection name and took all the files from the   our access folder all those json files and these  are the id of the jsons files and this is also the   name of our document and for each document we have  created these things it's beautiful go back to our   vs code and over here we'll start writing more  codes because this is still very incomplete we   want more things to write okay now right after  this for loop we'll create another for loop   and the variable type is ver and we'll call it  questions in paper dot questions okay and yes   uh yeah that's great and let's see what what  do we have here well we do have this paper oh i'm sorry we need to cut this and put it inside  this for loop okay because we want to be able to   access this one okay so in first part of the photo  it creates collection and related documents and in   second part we want to create the questions for  each of the documents okay and here we are saying   that it's not going to be null and then this  is what we have here uh well now you might get   confused so what's happening here so come again  so far we have created the document with the id   and their fields so this is the document id and  these are the related fields but we didn't create   this questions so let's go ahead and take a  look we don't have these questions we just   have this id name and the fields as you can  see so here we want to create a collection   of course we have to give it a name and  we'll give it a name from our program and   under this collection we'll have this this id  and another collection that would be another   actually so under this collection so we are going  to create a new collection over here as questions   okay now collections will have documents so  collections will have documents now the documents   id would be this one okay a documents field would  be that one and that document once again will have   another collection and that should be answers  and inside that collection we'll have fields   as this one answer and id like that pretty much  okay so let's go ahead and step by step uh we'll   see how it goes okay so here we are inside  this paper so first time say for example we   took the biology paper okay now we want to go  through it okay and that is biology document   now here as i said that i've created this  documents but now i'm going to create a   collection again now as usual if you want to  create collections so you should come over   here in our file because we have a dedicated  file over here for creating collections so   now what are you going to do we are going  to create a new document new collection   now the collection should be created  based on the previous document id so first   we have to send the document id and based on  that document id we'll create a collection   so here we'll create a variable we'll call  it document document reference reference um i guess yes and the type is document  reference and then here we'll create a   method and we'll call it question reference now  this one's going to take two parameters so both   of them are ids actually well so here we'll  call them required and the type is string and we'll pass it as paper id and then we'll  have another one required string question   id so that's what we want to send and after  right after that we'll return over here   now how to return previously we have created  this collection this is the parent collection   so right now we are going to create a sub  collection so you need to have the reference of   parent collection so this is the parent collection  and based on that we'll create sub collection now   the we know that parent collection has documents  and those documents have id the id is a paper id   the one will send over here and then okay i  got the document and then okay now go ahead   and create a collection and this collection name  is questions and that's as simple as that one   and after creating the collections okay we'll also  return a document so that would be question id and you're great now i guess i need to explain to  you what's happening here so this is the method   that we are going to call and we're going to pass  paper id and question id so as we call it we are   going to pass this one so this is the paper id or  the document id okay so we're going to pass that   one as well as we are going to pass a question  id now where is this question id coming from   now the question id would be based on  this one so here we can pass it like this   we'll pass something like this uh let's see we  would say paper id equal paper dot id and question id equal question paper dot question id  okay so that's how we are going to pass   because in our biology section as you see that  we do have this id okay so that's the idea of   course this is a soda code we don't need that so  we're going to pass this one to this reference   so we are passing the document id and then hey  create a new collection so over here we'll see   a new collection name that would be question and  then after that because we passed the question id   it's going to create a new document for this  collection hopefully it makes sense okay anyway   so this part we are good so we need to come over  here and remove this soda code we don't need this   here we are going to call question reference  question rf this one okay and we are going to pass   paper id now the first one is coming from paper  dot id and the second one is coming from question   dot id okay so this one is coming  from here so we are passing the parent   document id right now the document over here  the document id become the parent document id   and after that we are passing the question  id now question id is coming from here   as i said earlier which is referring this one  okay how will it make sense all right great   and after this actually we need to save it here  in a variable and we'll call it question path   okay now we're going to use this one to  set because we are going to create sub   collections and over here we are going to use a  method which is called set so we'll get it from   batch batch dot set now as you see it's  already refers to your some of these things   uh question path but i think we're going to go  ahead with the first one i would go ahead and   document end data now what is this return well  this returns a document right once again at   the end it returns a document okay so we have the  document so here we just simply pass the document okay now document will have fields so we  need to we need to pass them over here   and here the fields we want that is question and over here we'll set questions dot question so this question is coming from here and this  is the other question now this question is   actually this one okay and then we also have to  set the correct answer now we are not going to set   this one over here yet because that would be a  separate sub collection because right now this   is a collection and inside the collection we  have the document id and this documents field   and then after that we'll gonna create uh   another sub collection inside this document so  let's get over here uh sorry let's get over here   and okay great so we'll create another field and  we'll call it uh correct answer i guess correct answer and after that here we'll have question  the correct answer and i think we're good to go   and after that we are here now let's see okay  this is the four method this is the four method   and this is our another four method okay  great now let's go ahead and save it and uh okay we we did it we set it right and  after that we're going to commit this batch   operation now before we are going to create a  new one or replace this old information over   here we're going to delete that delete the old  one and here just go ahead and delete that okay   now we'll come to our vs code and we'll do hot  start or restart and now we'll come over here beautiful as you see it  already created a collection and here if you click on this we also see  this new documents so the new documents are   from our biology class but here it also  at the same time it created this fields   but this collection is empty which i said that  we are going to create soon now these are the   documents that we are having in our biology class  so this is a document okay in the questions list   uh this id is used as documents okay this id is  used as documents right beautiful so so far we are   doing excellent and we are learning a lot actually  now we'll come over here and we'll create the last   sub collection the last sub collection and for  this reason we need to come inside this one   the last sub collection will be answers right and  we know about it so here we do 4 and we'll create   a var and we'll create a variable answer and we'll  take it from question questions actually answer   field not correct answer answers so with this  it would be referring to this one like that okay   and then we'll do this okay once again first  we have to create a collection now we can do it   right over here actually batch.set and we  do question path now we're going to go back   to the very early one now here we're going to  use question question path refers to this one   okay now in fact this refers to this one okay  so we are getting the reference of this one   and for this one we are over here we are going to  create a new collection so that's why you have to   get the reference and then here we'll create a  collection the collection name would be answers   and based on that one we are going to create a  document so here we're going to create a document   and of course document name should be hence  the document name should be answer dot   identifier and right after that we need to pass  data otherwise we'll get error for your batch   set operation you need to pass a document and  then for those documents or for that document   related fields like that's what exactly we  did over here as well so we we set a doc   document over here or document path or id   and then we created fields and this is what we're  going to create now now here we're going to have identifier iden identifier and then we do answer dot identifier and then here  we'll have answers answers and answers dot answer   beautiful done now this one is referring to   one is this one actually and the other one is this  one now for each of them we are using this a as a   document name abcd okay because these are pretty  unique uh for inside this collection okay because   this is a small collection sub collection and  this abcd are all unique if you have the same   name or string you cannot do that because  document name has to be unique okay all right   beautiful so this is the last time that we are  going to create this and do this batch operation   um i don't see the last time we have to do  it one more time let's go ahead and save it   okay all right and now we'll come over here  so we're going to delete everything delete okay let's come to the first one over  here and let's do it to the collection and delete that beautiful now we're  going to come to vs code and hot start   no arrow that means everything  went smoothly do a refresh okay it didn't refresh beautiful so here is our  first set of document and here is our first sub   collection and then i have a document and for each  document i have a sub collection again and filled   and for each of them we have document again and  inside this we have this answers okay beautiful   we don't need to create because we stop here  so yeah i know it could be a little confusing   for beginners go ahead and check that out so the  idea is if you create a collection you should have   documents okay now for under these documents  if you want to create fields you can go ahead   and do that but creating a sub collection is  optional what i mean by that like here for   this document we didn't create a sub collection  we just have fields i will it makes sense but   for this document we created a sub collection  and fields as well okay the same goes for here   for this document we created a sub collection  and fields and this is the parent collection   beautiful so with this we have done pretty much  done and we have to do one more thing now right   now if you go ahead and see that once we upload  it try to upload it's always saying uploading   we need to change this state so we need to  trigger state change from here and change it back   once we are done with the batch comment  that's what we're going to do next   so as i said that we have to do it one more  time now first we are going to come to our   firebase dashboard over here  we're going to delete everything okay now it's all empty now this time the way we  are going to do it first we're going to create a   new file and okay right inside this will create  a new file and we'll call it loading status   dot dart okay over here we'll save some loading  status that as we load the file and what happens   before loading it after loading and directly okay  now here we're going to create an enum you know   is a list of values that you want to put it uh  like in order and they will have certain values   okay and the values comes one after another  and we'll call the enum name is loading status   now here inside this will declare some un untyped  variable but their type would be actually inum   okay and you group them together using a name but  their type is enough now here first i'll call it   loading and the second one i'll  call it completed third one i'll call it uh say error yeah like that so i'll  have three enum values over here now the way it   works in general the first one has a value of  zero second one has value of one and third one   has the value of two so if you have more values  they will have the values increased one after   another okay all right so now here would go to  our dart uploader file right inside over here and now we need to come over here and as we call  this function we want to make some changes   okay all right actually we do it before here  first we have to declare and get the inum value   the first one okay now we'll call it from  loading status this one and then we want to   get the first one the first one is loading okay  all right so and we want to save it to a variable   and we'll call we'll define it as  final and we'll call it loading status now you see the way we are doing over here it's  uh small letter and here this loading l is big   letter which is enum type okay you may ask why i  do like this actually i want to make this variable   observable obs because we are using flutter get x  so in get x when you tag obs inside right after a   variable that variable becomes observable they  also call it rx type as you can see over here   so you can do with obs obvious  means rx type observable or reactive   so now whatever if the value of this variable  changes flutter ui would know it and based on that   we can redraw or re-trigger something okay okay  great so now this variable become right now obs   type which is observable okay we got it  first one from loading status and we get the   first one and we save it here and it became  observable so now we would come inside this   variable over here this function over here and  here we would call loading status loading status equal actually this one okay now since it  becomes observable it has a property called value   okay so we'll use that one and inside value we are  putting this you know now do remember this has ha   this has a value of zero because this is the  first one okay now here we made loading status   observable loading status is  obvious type observable okay   all right so the way you'd understand this is  observable same as now this is observable so   whatever the value we have here it will be saved  in this value over here okay so here the value   0 is saved you could understand it like this  now anyway so once the batch operation is done   right after this will change the value  so here we do loading status dot value   so this one now would change the value because  it's been done so here we do loading status   now here we don't want to call loading anymore  we want to call it completed because this is   the second one if you check sorry come on so  this one yeah the second one is loading status   as you can see over here so the second one is  completed as you can see so the first one was   loading before we start uploading and uploading is  done now we are changing the status of this okay   all right now we need to come to our frontend code  and which is i think uh let's let's look for it   upload screen i guess yeah that uploader screen  this one so this is what we had early and this   is the place actually we want to change now  here because we want to use observable variable   and based on that variable value we want to  change from uploading to uploading completed   like that okay actually we're going to wrap  it around as widget okay so that would be obx but now i'm going to cut this one over here  and then i would do obx obx now inside this   it takes a single function or arrow function  but your function is complicated you can use   double braces okay now we are going to use this  one and i think we need one more bracket okay   now of course right now it is still not reactive  because we need to inside obx we need to check   the values the variables the loading and completed  that one okay so for this reason right over here   at the top we had this controller okay now  we're gonna take that controller that inside the   controller we defined a variable which is called  loading status so we get that one and we also   check the value okay now if the value is equal  to now let's check loading status dot completed not this one loading status  yes dot completed com completed so if it is true then we'll say well here we'll say  uploading completed so here we can   change it like this actually so let me come  over here and first here we'll say uploading   completed otherwise it's still being uploaded okay  now we do see an error over here now let's see the   quick fix okay so it's asking us to import this  so you're going to go ahead and import this okay   and we need to remove this const from here  and this is what is causing the problem   and we are good okay now right inside this so  let's go over it again one more time so we created   a new variable and the variable type is obs so it  will have value and for this value you can save   anything pretty much want so you want to save zero  or the first one when it completion is done data   uploading is done then we change the value for  this loading status okay so it becomes completed   anyway now we save it now as we come over  here we check that value for this one so   whether it's the first one or second one of  course here even though it looks completed   but the actually internally the value is  one okay because we change earlier one was   loading loading was zero now we change it to  completed which is one anyway and based on that   we do our stuff okay now here we could be a  little different slightly different then we do   dot dot dot okay all right so now i'm going to put  my simulator over here okay well of course it's   the current state and right over here i'm going  to restart everything and hopefully we want to see   uploading completed once the data is uploaded  in the back end so here i'm going to do this one   and we see that it changed it very quickly now  if we go to the back end now let's refresh it and everything went smoothly okay beautiful so  with this we are done with the first part uh it's   the first product first section because i'm going  to continue right over here okay anyway so next   we'll focus on the ui because now here we are able  to uh we are able to load the data to the back end   and this time our job would be to read them but as  well as of course we also have to work on the ui   all right first we are going to go ahead and build  ui and for this reason we are going to create a   new folder over here and we'll name it screens and  inside this will have another new folder and we'll   call it splash and right inside this will have a  new file and we'll call it splash screen dot dart now over here we're going to create a  stateless class and we'll call it splash screen   right and right inside this we are going to return  and we are going to return scaffold over here okay great and let's see i guess we're going to have to  import the material library and we're gonna do   that okay and right inside this we are going to  have body section and for body we'll have child   and inside this child sorry for body actually  we're going to have a container we don't need   child right now we just need a container okay  and right after this we are going to have a child   inside this and the child would be for showing an  image so here we are going to use image dot assets   this one and here we are going to use the path of  the image which is coming from our assets folder   and the image name is app splash logo dot png  now this should be coming from actually here   images apps logo.png okay great uh yeah with  this uh this would be our very basic simple   ui for splash screen now we need to find a way to  call this one okay remember this part of this code   we used for uploading some data to the back end of  firebase but we are not going to use that anymore   for this reason uh now we need to build new main  function so here we're going to do void main   and right inside this would call run  app and here we are going to call our   widget okay so now this widget name in  general we all call it my app we know   that this is the convention but you  can call it anything you want so this   in general is a stateless widget so that's what  we are going to do we are going to create my app   status widget now inside this widget we are  going to return material app material app okay and now we're going to return well we could  do a lot of things but here we are going to first   set up a property which is called home and  for home we are going to use a splash screen   because this is what we want to see okay and  what else right over here we are going to   return using this semicolon okay now let's save it  and we'll restart our saving would work actually   if you're going to see okay now  this is the one that we want to do   and this is what we have right now okay now this  is actually coming from my study app over here   okay uh so what i'm going to do i'm going  to run it so you know actually what i what   we should achieve now here i'll do it again so  this is the logo and then it would come over here   if you click it will go further inside once again  so we'll have a splash screen should stay here for   two seconds and then we'll have this but at  the same time if you notice that we do have   background which is linear background uh like  that they call it linear gradient actually so a   lot of things we need to do but anyway so first  thing we got to do is working on the position   okay so now for this reason we need  to come to splash screen over here uh inside this we're going to set  up within height so here we do with   200 and height 200. now with this  it it should look a little better   okay yeah better and smaller and we want to center  this one in the middle of the screen so we should find a way to center it in the middle of the  scroll screen now for this reason we can use   actually alignment property i think this one  and then alignment dot center would work you   save it it's beautiful okay so it just moved over  here now this is the first screen that we built   actually we need to build another screen now that  screen we call it introduction screen okay so drinking coffee so it might have the noise  of coffee but this is morning in china   so i need a coffee anyway you can ignore that   now inside this screen i'm going to create  another folder and here i'll call it introduction and right inside this we  are going to create another   new file and we'll call it introduction  dot dart okay so that's what we have   so here we'll create a new stateless  class and we'll call it app introduction screen okay and right inside this we are  going to return then we'll do a scaffold   and right over here we are going to do  body sections but let's do it over here   like this okay now we have body now inside this  body we're going to return a container first   because if you wrap around container it's easy  to work with alignment okay so whatever will   be in the container we want to align it to  the center so that's the idea say alignment   dot center okay great now of course we need child  because uh actually we are going to achieve this   result right anyway so we need child and inside  child will have a column and actually padding so   so first inside this container  we are going to use a child okay now for child itself we'll use  column and then we'll have children   children okay now right inside we're going to  have this icon the text and this button okay   now the first one is definitely an icon so here we do icon and that is a const actually and right inside it actually we  do icons dot star i construct star i think it should yeah this one and uh  what else we could also define the size   so go to its size and size say 65 little bigger  okay and for now do color and colors dot say ember   okay this is pretty much random right now  color we're going to change them very soon   okay so right inside this we are going to have a  text actually and that also be const so here we do   text and that would be a long text over here let's  say this is a study app you can use it as you want if you understand how it works you would be  able to scale it with this you will master   firebase back end and flutter front end okay so  that's what we want to have okay great and uh   let's see what else we need i'm sorry okay so there was it okay now we also need this button so for this  reason we are going to use a circle button   okay now we want to create a separate widget  for it because this might be reusable okay   now for this reason what we're going to  do we're going to create a new folder and   so this was our screens folder so right here we're  going to create a new folder for reusable widgets   so here the name is widgets and then inside this  we're going to create a new file and we'll call it f circle button okay dot dart and definitely  we are going to create a stateless class   stateless class and we'll call it f circle button okay now inside this this time instead of  returning anything else we are going to   return material material and i guess we need to  import the packages now here we define the shape   because we want to draw a circle and inside  this circle we'll have this thing so here we do   const circle border because we are going to  draw a circle so here we have this circle   border and actually let's see do we have any  error yes we do have an error and let's save it   uh actually this is the time we want  to go ahead and check it whether   it's working or how it's working now  definitely first thing here we need to call   app uh introduction screen i think yeah  that one okay now we're going to save it and the introduction is here okay for  now splash screen we don't need that so this is what we have and we also see a star  at the top okay yeah and now we did have this uh   circle button we we just did  that but we didn't draw it   okay so we need to call it from here we'll  call it sir app circle button app circle button this one okay and now let's save it  and of course we don't see the button yet okay   and well it's not as you see it's not visible the  reason is because we are not passing anything at   the child so here we do child and inside this  we are going to have say for example on tap because we want to be able to click on it so  definitely we're going to go ahead and do inkwell   with this we'll be able to click on this  thing now with untap so we're going to do   a child over here child for now say for  example icon i can start icons dot um arrow okay for now let's go ahead and put it and we  do see that this is the icon that showed up okay   all right and what else uh okay so uh this  is the basic structure that we have but   we want to create it as a reusable so there are  a few things that we need to take care we need to   take care of the child color on tap with okay so  these are the things we are going to pass from our   uh file or class over here so here we're going  to do like this so final now it child itself   actually we are going to send so not  really like this so that would be widget   okay and we'll call it child and  right after that we could do color color and that's optional so we may  send color we may not send color   and final with uh it should be double width and as well as on tip function so  for ontap function we need to do final   well now for the function itself you would do like  this because that would be a callback function so   we need to use void callback like this one  and the function name should be on tab okay   uh definitely we do have this error so we're  going to take care of them because we need to   pass the value inside this constructor so we  do required this dot child the child is the   only one i guess we really need so that's  why it's required and then this dot color   and then this dot on tap is also optional as you  can see over here and for the double itself we're   going to have a default value so here we do  with this dot width and a default value of 60   okay all right now of course if we save it  we'll get tons of errors because here we   are supposed to pass the values to it so the  first thing we want to pass is on tap event   and for now we are going to pass say okay  let's go ahead with null because we need   to set up routes before we do that we are  not ready yet and here we'll have child and child itself we are going  to send icon so const icon icons and here arrow forward forward this one actually and  then we do size size is 35. and   as i said that others are optional like color  so whatever color we have for natural widget   that that's the color will be used over here so we  are not overriding that one and here we'll save it   yeah and do we have any error no this time  looks like we don't have any error let's   go ahead and restart yeah so it did work right  so it's working over here uh but we do have to   make some other changes anyway so now we'll come  over here because it this is not what we want it's   getting stuck at the top so we need to  work on this alignment and let's see   so for column itself we can also  do the alignment so here we do main   excess alignment okay and main access alignment  dot center main access alignment dot center   let's save it it should come down yes it did all  right now we also want to put padding around it   so here i'm going to wrap it around a new widget  and let's see we're going to do padding okay   great and for padding itself uh we we just want  to left and right not the top and bottom so   here we are going to use symmetric okay  symmetric and that also means horizontal   and over here now we want to get it based on  width of the screen now for this reason we're   going to import a package first um that would  be coming from get package this one okay now   why we are using this because we want to get the  width and it's easy to get you can get it with   so whatever you get and do 20 percent of that  okay and let's see most really we can't use const   okay all right so now it looked much better  with this now we need to work on the distance   so just uh right over here we are going  to use size box and let's do height   height would do how much we can do 40 actually and  let's copy this and we'll put it right after this okay now it's looking better but i think  we do need to change these things over here   uh because inkwell just should take the child not  so much it's still hardcoded over here so whatever   child we had we're going to use that one okay now  it changed its direction okay all right now here   we see we do have two screens one is introduction  screens and another is uh well our other screen is   i guess what was that splash screen right okay  so the splash screen so we have this two screens   and now over here what we're doing we are  changing them manually but actually this   is not what we want to do uh we want to change  them using routing okay not manually now we're   going to use a routing so definitely we'll  use get routing the the one get x offers   okay uh well but it still refers to  this screen because here we are right   yeah now we need to do some changes for this  reason we're going to come over here and inside   this library we're going to create a new file  new folder actually and we'll call it routes okay   now inside this we are going to define our routes  file okay here we'll call it approach dot dart now here we'll have a class and we'll just  simply call it app routes and inside this   will have a static member let's save  it and how it should work uh let me   walk you through a little bit step-by-step  now here we'll we're going to remove this   actually remove all of it and inside this  we have a property which is called get pages   now that's a list actually it takes  a list of pages now inside this you   could do get page this one then after this  you have to have this name property i guess   name refers to this initial route name or route  name it doesn't have to be initial but in my case   the one i did just now that's called initial route  or home route or the first route for your app   and then we you have to do this page now for page  itself you can just return a widget now our widget   over here we could return as app introduction  screen app introduction okay introduction screen okay now if you save it uh what's  happening let's see the error   i guess i did miss something over here okay let's restart okay yeah it worked because  i do have a bit of changes over here so i needed   to restart or we could just simply use splash  screen over here okay all right let's save it   or we can just restart yeah so we could do  it like this this is one of the ways to go   but here we'll have a lot of other properties  so if you have tons of different pages   or screens you have to do it inside this  list but that doesn't look good so for   this reason we are going to move everything  move everything this section will cut this   and move it to here okay um well i think we  don't need this page so we're just going to   close this and we have app routes actually  over here this one okay so we want to put   it inside here which is we can call it anything  we want you can actually i would call it routes   and here whatever we had we put it here okay as a  list now we have this error the reason is because   you need to import this splash screen first and  as well as the get package otherwise you'll get it   error get error here so here we do get okay anyway  get the dart okay now the error should be gone now actually we don't want to create any instance  of this so we are going to define it over here as   a static function okay so here the static function  and it returns this list actually okay it returns   the list so here you do have to have a list  like this and the type of the list is get page   okay so if you don't know what is list and how  how they should work i have a tutorial for that   go ahead and check that and i strongly  recommend you to go ahead and check because uh   with this you'd do a lot more if  you understand map and list in   flutter or dart otherwise things get a little  complicated so here we can just simply call   f routes okay and i think we don't need  this double brackets abroad dot route um   yeah and all we need to do  we just need to import it okay with this we got more organized  okay of course nothing changed but   if you change over here to  introduction app introduction screen but we need to restart okay so it's working  but anyway so this is what we have now   we're gonna keep it like this okay so next what are you going to do uh next i  know we are supposed to look like this right yes   we will look like this very soon but the thing  we are doing over here is also very interesting   i guess so before we go ahead and do this  coloring i want to so i want to do this thing   so this jumping thing two seconds later you go to  this page also it is called navigation so that's   what we want to do the navigation thing okay  all right so let's go ahead and do that first   okay so now it's time to do more interesting  thing because we want to jump from one screen   to another screen and to be able to do  that we need to introduce something called   uh dependency bindings and things like that and it  may not relate directly where we're going to do it   but very soon you'll get it why we are going to  do it now here we are going to create a new folder   and here we'll call it bindings okay now inside  this will create a new file and we'll call it   initial bindings dot dart okay now here  at the top we're going to import get   package because we are going to use  dependency bindings from get package now here we're going to override  a method and that method name is dependencies okay now of course not really like  that first we are going to create a new class and   we'll call it initial bindings okay now it will  implement it will implement binding class which   is coming from get x okay now we get this error  and we do need to do a quick fix okay and here   well of course here it's not recognizing so we're  going to do it on our own so here we do override and we're going to call this method this method  is called dependencies i guess dependencies   yes okay yeah that's all so we need to override  this because uh this method is inside this   bindings class and we need to override it and  inside the body we have to put whatever we want to   do okay all right so what do you want to do for  of course dependencies this method inside this   you inject controllers okay and it might sound a  little bit confusing why we are doing navigation   in controllers uh well we'll get it very soon so  now let's save it and let's open this explorer   over here and inside this controller what do  we have here only one i guess data uploader and   now we're going to create a full a new  file and we'll call it auth controller dot dodge once again you might be confused that  what's going on here but don't get confused i'm   going to explain why why we are doing this  the reason okay so here we'll have class and   the class name will call it auth controller and  it will extend get x controller edx controller now at the top i guess we have to import  the package once again that should be get now over here we'll override a method and the method is unready so here we'll  call void on ready and we'll have to call   super dot already now if you hover over on it  you'll see that called one frame after on init   so this function gets called immediately as your  boots up that's the meaning right after all in it   and it's a perfect place to enter navigation  events like snagwar dialogues or a new route   so it is telling you if you want to go to a new  page right after your app boots up so this could   be a good place to do that okay so this is where  we have this controller but of course why it is   auth controller because later on we'll be using  this on this one for user authentication and   whether the user has logged in or not because this  is something you want to do once the app boots up   right after that immediately you want to check the  user status okay whether that user has logged in   or not so this also has to be done inside this  auth controller and that's why we did that okay   anyway so now here we're going to create a new  method now this is our own method and we'll call   the tag would be init void and we'll call it init  auth okay that's all and now right inside this   we are going to go to a new page okay yeah  because our splash screen is already there but   first we want to show the splash  screen and then this screen okay   so we want to go to a new page and for new  page uh let's go ahead and create a new method   and we'll call it void navigate to  introduction we'll call it introduction okay   now here we are going to use get package get x  to navigate so here we do get and off all named   this one because whatever the routes we had early  we want to get rid of that route now here we want   to go to a new route okay what is this route name  now simply i'll call it app or just introduction introduction and that's all okay now  we want to call it actually from here   so we'll call it navigate to navigate to introduction yeah so now this on this  any auth would be calling from here in it off okay   now you see how they are connected so it would be  called right after on in it then this would get   cold and eventually this would get called right  so that's what's happening now what it has to   do with bindings because this is a controller now  this controller this on it on ready method gives   you this this function that you can get call you  can call something immediately automatically if   you put it right inside this okay now because  this is a controller so you have to inject it   in the bindings okay now this initial bindings  actually gets injected or this bindings gets done   okay right before even you add boots up okay  so app knows what is happening so here that's   why we created the bindings so bindings inside  this bindings will call this controller which   gets injected actually and then inside our main  method we'll call this dependencies function okay   and hopefully everything would get injected when  our app is ready so here we're going to inject it   now to be able to inject it here we need to get  the put we know we use get that put to inject   controller and here we do auth controller  and we always want to keep it to this uh   memory so paramount end whatever happens  we want this one to stay in memory okay   all right so see the connection  and now here we are inside okay um   let me close this okay we are looking for file  that is main.dart actually this one yeah so right   here we want to inject okay inject this injection  this one we want to be able to call it from here   so here that's why we'll call it initial bindings  dot dependencies okay yeah and that's a function   okay great now as we are going to do that  actually we need to call another method   which is called widgets flutter binding this one  because it waits for all the bindings to be done   so here and ensure initialize to this otherwise  app wouldn't have the time or i wouldn't wait to   bind things and you will get errors let's save it  okay so what's happening here as our app starts up   we are injecting and binding everything  using this one okay and as it as it does after a certain time later it'll called on in it  owning it called sorry init auth and init auth   would call this one and then it would go to  this page okay but of course if we go ahead   and run it now it still won't work because  here we have this route and where is this   route and what is it pointing to we have  no idea so we need to point it to a screen   of course we will point it to what screen  will point it to introduction screen   so we'll look for here approach this file  and as we see we have this list over here   actually i want it to be like this okay  now right after this we'll have another   get page constructor and the name now here as  you see we could use introduction okay intruder   all right and then we'll have this page and this  page will call up app introductions f introduction let's see was it screen i guess that was  screen or page yeah okay and quick fix   we need to import it okay and we do see a bit  of error okay now that's because of this one   okay now the error is gone now it should  work okay everything has been done uh if   you get confused once again so here we have this  route now this route would be locked inside or   flutter would look for so where is this route  defined and what screen it points to so it   would point to this screen okay now how about  this one as we know and i have a video for it   if you have only slash it doesn't matter use  flutter get x or any kind of routine that slash   always refers to the first screen of your whole  app in this case this is the splash screen okay   so flatter would automatically find this one  but this kind of routing and naming flutter   doesn't care you have to tell it specifically  who's the route name and where should i go   and about just for the single slash flutter  knows how to find the related screen   uh with this one okay so flutter always look for  this one first anyway so now let's go ahead and   run it and let's see if we can run it successfully  so restart yeah it worked actually as you saw it   it worked but it happened very quickly okay and  we also see that our controller got initialized yeah so we saw the logo and it ran away  immediately anyway so now this is a bit   of problem because it happens too fast you  want to wait as you see if you hot hot reload   so the splash screen we want to wait there and  how do you do the waiting actually it's very easy   so we'll come inside this in it auth and here  we'll call a future okay so future dot delayed   future dot delight okay and right  inside this i'm going to do a duration   and here i'll do const duration and we do it in  terms of seconds so we'll wait two seconds okay   all right and uh i guess we need to introduce over  here async otherwise it won't work and yeah so now   once this function gets cold flutter would wait  here two seconds two seconds later this would get   cold but do remember the splash screen always  get cold first right so splash screen would be   there for two seconds and then this would be here  right okay let's save it okay now let's restart actually we also need a weight here we don't  have this await yeah and then we need this   okay now let's go ahead yes this is what i was  talking two seconds later you get there yeah   and this is beautiful we're going to work on our  ui continuously and to be able to do that first   inside this we are going to create a new folder  and here we'll call the folders name is configs   and inside this will create another new  folder and we'll call it themes okay   now inside the theme folder we're going to create  a new file and we'll call it app light thing dot   dart okay and at the same time we'll create a  new file and here we'll call it app dark theme dot dart because we're going to create this app  with the two things so that's why i will have this themes over here light theme and dark thing okay  first we'll work on light theme now this is going   to be a long work and it might take hours to get  done because we are going to have two themes and   each theme will have their own settings anyway  so first here we're going to create a color   const color and we're here we'll call it  primary color light so that's for light theme   okay and here we'll define the color  using color code so here we do ox ff3ac3cb and of course i guess we need to import the  libraries um okay well it did work okay and we   are going to create another color two colors and  why we are going to use two colors the reason is   uh we are going to do a linear gradient so that's  what we need two different colors okay all right   and well in this you so it does look like same  so here i'm going to change it primary light   color light and primary color light and over here  we are going to change it so ff and here we do f   8 5 1 187 yeah okay so we'll have this two  different colors and that's for app light theme   okay and for now we we're just going to save it  and it would be accessing them as global variables   so we'll be able to access it from anywhere  actually now we do the same over here   so here we do const color and here we do primary  dark color dark and here we do color and ox ff2e3 so that's what we want as a color and i  guess we need to import once again this one   okay so that's the first color and then we want a  second color once again because we are going to do   uh this linear gradient so i do have a tab over  here primary okay all right now here we do primary   color dark now here we do color ox ff 99  ac e1 so that's the color we want so now   here we see we have two different colors now  these are the first two files that we created   and now we we're going to create another file  inside this theme and we'll call it ui parameters   ui parameters dot dot now over here actually you  would be able to know what mode you are in whether   you're in dark mode or you're in light mode okay  now for this reason first we're going to create   a class and we'll call it ui parameters okay and  here inside this will have a static method okay   and here we're just going to check whether we are  in dark mode or in light mode and we'll call it   as dark mode because if it's dark will will return  true otherwise will return false and to be able to   do that we can pass build context from wherever we  call it and we'll create a variable named context   as if you don't have context you can't check  really whether you are in dark mode or light mode   but of course get x has a different way to do  that but i'm not going to use get x for that one   we're going to do it a bit differently so here  we can do a theme that off and we take the   context that's been passed from there and it has a  parameter property which is called brightness okay   and we're going to compare so brightness dot  dot and over here i guess we need to import let's see coppertino and should  it work and it looks like it's not   so let's go ahead and import material app  yes and over here we need to do this one   so capacity we don't need this one okay great  so now here we'll pass the context so if   current brightness is dark that is dark mode  if it is false of course that is not dark mode   that is light mode okay so that's what we are  going to check now this file we can close it   right now all we need to do pass a context  and call this method this is a static method   and then we know whatever we are so if it is true  if it returns true then we are in dark mode if   it returns false then we are in uh light mode  okay so i will close it sorry let's cancel this   let's save it and then let's close it okay so i'm  going to keep those two for now and here we also   need this one okay great now we need to create  another file and for this one let's see once again   right inside this we'll call a new one we'll call  it app colors dot dart so so far we have used this   uh app dark theme and apple light theme so we'll  get variables from them together and create color   combination okay so we'll take color from both one  and over here will create a bit of theme okay and   inside this i'm going to create a variable and  we'll call it main gradient light main gradient   light that'll be for our uh light mode and  here we are going to create a constructor   actually call it constructor and we'll call it  linear gradient this one actually and actually   we can go ahead with this okay now as you see it  takes colors okay now if we are going to create   gradient color we need to pass two colors  at least we need two colors to do that   okay so that's why in light mode over here  and dark mode we have two colors defined okay   now colors over here it could take a list okay   so if you hover over on it you'll see that  it takes begin color actually it's not   beginning color way to start rendering or to end  rendering and required is a list of colors okay   now over here we do begin now for begin with the  alignment dot top left and end is well alignment   dot bottom right okay bottom right this one  and then we need to send the colors to it   colors and it takes a list of colors all  definitely the first one is a primary   light color so primary light color light  this one and the second one is the primary   primary color like this one  okay now that would be for your linear gradient based on your theme color based  on your light theme color but anyway we're going   to copy this make sure at the top you import  material library otherwise it will get error okay   and uh here we just simply change the name here  we'll call it dark and definitely here primary   i guess we could do dart dark color we have  this option actually i forgot let's check it out   primary dark color like this one actually and okay  so the best way to figure out what we have here   primary dark color light and primary  color dark so let's come over here   so yeah we need to change it to dark okay  now and over here we'll copy the last one   and let's see what else what else  is going on so we're good over here let's see the error now we do have a quick fix over here and we  need to import it the arrow should be gone now   with this they are pretty similar okay whatever  we have here uh we have the same one over here   okay great all right and now we are  going to create a conditional check   so we need to check what mode we are  in well previously we set this but   we still need to check it one more  time from here so that would be   directly able to call it so here we'll create a  function and the function return type would be   a linear gradient and we'll call it main gray  the end over here and we'll pass context to   it and here's the context and after that over  here we're going to return either dark light   dark mode or light mode which means that main  gradient light or main gradient dark we're   going to return one of them based on a conditional  check so here we do ui parameters para raw meters   ui parameters and then here we'll call  is dark mode okay and we pass the context   if it is true if it is a true then while here we  are in dark mode so here we'll just simply return   main gradient dark otherwise we'll send main  gradient light okay so that's as simple as   that and we're going to save it okay great  so what's happening here so now we'll call   this on from our ui as you recall we'll pass the  context now the context over here now the context   over here and we pass it to this method  remember earlier this method would   check written true or false if it is true then  it means we're in dark mode otherwise we are   in light mode okay so this is the basic app color  setting which gives us the gradient color based on   your uh theme mode okay now  we're going to save this   and first would come over here and inside  this actually we are going to check   uh uh decoration okay now here we'll set box  decoration and it is a property gradient a   lot of time we use the color but this time we  are going to use gradient now all we need to   do is going to simply call this method over  here main gradient okay so here we do main   gradient this one and all we need to do pass  the context that's all as simple as that one   okay now let's go ahead and save it now  let's take a look at our app over here and   i think we need to restart it so over here and i'm  going to close this explorer now let's go ahead   and restart our app as you see it changed and it  changed over here as i mean it didn't change but   the splash screens changed and this is what we  expected now this approach is working now we   need to set it over here so we are going to find  the page where it says that introduction this one so right inside this over here once  again we're going to set up this   uh decoration and then box decoration  box decoration and we send a gradient   gradient and here we'll call main gradient and  we're passing the context let's save it and   it changed automatically okay beautiful so it's  working now this part is weird right this is weird   part and of course a lot of other things to change  but let's go ahead and check it splash screen   and here so it's working as we expected but  now we need to come over here and i think uh   it was inside this circle button  right yeah so we'll find this uh we'll find this so we're going to find this widget  so here it's ab circle button which is this one   and inside this we had   earlier these things so here we'll set up a  property which is called type and we can get this one material type dot transparency okay and  now let's save it yeah it looks much better now   and as well as i think there's another  property which is called the clip behavior   here we'll set clip dot hard edge this one okay  now with this we are done with the basic setup   but as you see we need to do more the the font  color and as well as this one i will go ahead   and work on this text icons and color uh that  means actually more work on the ui or theme   now to be able to do that first we are going  to install a font for our app so we'll look for   the font over here so command shift p or if  you're on windows that should be control shift p   to p most probably i need to select  this one and then okay google fonts   okay i think it found it and it's uh  installing okay and now running get pop   okay great i think it's done so let's go ahead and  check it in our file we can look for pop spec file   yml and here we do see that it has installed  the latest version okay great so now we'll   close this file we don't need this thing i will  open our explorer project explorer over here   now inside this lib folder we are going to create  well here we do have this i guess themes over here   okay great now inside this we are going to create  a new file and over here we'll call this sub theme   data mixing. okay all right now here i'm going to  introduce a class which is called mixing class or   instead of writing class in front of it we'll  write the word mixing okay mixing what is mixing   well that is something has to do object-oriented  programming and it also has to do with inheritance   so a class wants to inherit a certain class well  in a lot of programming languages one class can   inherit many other classes but in dart a class can  only inherit one class not multiple classes but   if you want your class to inherit multiple classes  then those other classes you can start with mixing   but anyway i have a complete video on this check  that out because it's a very broad topic anyway   so here i'll call this class name as sub theme  data and that's it okay and now inside this we   are going to go ahead and create a new function  and the function name is get text themes okay now   this function will be dealing with the text and  the themes of the text in our app and over here   we are going to use google fonts okay and the one  we just installed so here we'll call google fonts let's see yeah this one google falls and from  here actually get to it so it's called quick send   text theme quick quick send text name  this one okay and uh let's see okay   i guess we need this one okay now what are  you going to do i guess we need to import   it so if it's not here let's go ahead and now  it's not being imported so we have to import   it manually so here at the top i imported this  one and it should work okay all right so now uh   well let me remove this section from here  so we don't want it like this actually all right okay yeah that's it now inside this will  set up some of the properties but definitely would   start it with a text theme so inside this write  text theme text theme okay and as you can see   the first one actually takes couple of properties  now first one we would do is called body text one   body text one this one and for this one  we'll set up our text style over here   and for text style itself now uh we  are going to do a font weight first   font weight this one and here we'll set as  font weight and the first one we want is   w400 this one and and we'll go for the second  one i guess it wants us to use a const modifier   let's do it yeah now it's more readable now  this is one but annoying thing about vs code   i guess that it's uh the way it align things not  very readable i don't know about other guys but i   find it quite annoying sometimes right after this  we'll create another text style and that should be body text 2 okay body text 2 and text tab now  once again here we'll set up a font weight   and this time we're going to set up 400  but this is for text 2 as you can see   so first one was for text one body text  one and the second one is body text two all right okay so this is the first thing but   actually we are going to return  over here and we are going to return   text thing so whatever it does over here actually  it does return a theme for us so we just simply go   ahead and return this and if we do that actually  over here the type would do text theme text thing now once we have this method over here get  text themes this one we could call it from   anywhere we want or we can call it from  our theme settings now our themes will   have a lot of settings and this is just one  of them it's just one of them part of this uh text theme now over here we'll also define colors  this and that a lot of other properties now we'll   go ahead and define a property for icons okay now  of course we didn't use that yet but soon we're   going to use it once we are done with this icon  thing okay so here we do get icon theme this is a   method and inside this we are going to return and  would return a const here with the icon theme data   now inside this we're going to return color  and that should be our icon color actually   now here we'll define a variable okay let's call  it on surface text color yeah and then we define   a size for it but of course we don't have this  variable yet so we need to go ahead and define   this variable now where to define this variable  i think we have a file that is called app colors   do we have a file up colors we should have  okay let's check it i couldn't find it though   yeah this one actually now inside this at the top   we are going to define a const variable and the  type would be color and i will call it on surface surface text color okay and here we do  colors.white now this could become global   variable and which is good for us okay  let's save this and now come over here and all we need to do import it and we should be  good to go all right so here we are returning this   one as for setting the theme icon now we want our  icons to be white throughout the app so that's why   we did that now of course since this is a theme  you have to return something uh you have to   mention the return type so in this case the return  type is icon theme data icon theme data okay so   whatever it does return it also returns icon theme  data all right now let's go ahead and save it   well now it is uh we are done with this mixing  class for now for with these two properties or   those two functions we used so we'd be able  to call them and set in the root of our app   as a theme now how to do that and to be able to do  that you need to come to our file which is called   i guess let's see we'll first go ahead with this  one now over here we'll create a new class now it   may look like a lot of work uh for certain color  setup and ui but trust me it's not once you get   the hang of it you could reuse this files in a lot  of other projects as well as it becomes very easy   to maintain your app but you have to get the idea  that how it works now here we'll create the class   and class name is light theme so that gives you  the idea that we have to create another class for   dark theme but we'll do that later now here we use  with now here we created a class the class was sub   theme data so that's what we are importing and we  might have errors so all you need to do go ahead   and import it now if you define a class as mixing  class which is this one we did over here now you   have to if you want to use that class or inherit  some properties from that one you have to go ahead   with with rather than extends okay all right once  again for mixing check out the video down there   okay so yeah so this is a class now over here  we'll create a method and we'll call it build   light theme right there okay yeah so over here  this is a method and this method would return   a theme actually the overall theme for our light  theme what i mean by that over here we'll set   up everything over here and once we do that  and we can directly call it from our main dot   our get material app function get material at the  one inside our main.dart file over there okay so   this is the place where you do all the setup  but of course a lot of the setup properties   would be coming from like okay i'm going to close  this on this file and other files that we have   okay so we'll all put them together  okay so here we are going to first get   a property of theme that is called a light  here we do theme data uh light l i g ht   okay now i guess we need to import files  for this our packages let's see material   now this is for light theme but of course we are  getting an object for here so here we do final and the theme data the type is theme data  and the object name we create we can call it   anything you want we'll call it  system light thing now while we're   calling it system light theme the reason  is because uh this is the default property   and so this is what you see exactly right now over  here and that's coming from system directly okay   now what thing we could do right now we could go  ahead and just return it okay and if we do that   uh now we can come to our main file and  main.dart over here okay and inside this   actually we can just simply go ahead and  set that up so let's let's see what is there   so it is a light theme and then we get  this one okay so let's let's get over here   and set up the property theme and here we do light flame dot what's the name there once again it  build a light of it so i'm going to copy this one   and put it here okay and i  guess we need to import it okay now the error should be gone let's do a hot  start or restart obviously we don't have any error   and this is what we see now there is no change  inside this what's the reason do you know because   currently inside this we are using the default  light properties whatever the default thing is   there we are using that one okay so that's why  we don't have any changes but if you hover over   on it you'll see that a lot of places that you can  change it says this and that but we'll change it   as our way as we want okay now the first thing  we can go ahead and change over here we can uh   it is a function which is called copy with copy  with this one okay we're gonna use this one   copy with okay and inside this we are going to set  up some properties that we want to be different   not the default one okay now what is the first one  we can change right now okay we could do one for   our icon okay so here there's a property which  is called icon thing okay now remember just now   in this mixing class we have this icon get icon  theme and over here we said that icon color should   be white because we already defined it and then we  also said the size is 16. so now we could be smart   about it let's come over here so here we'll just  go ahead and call this one and that's it now if   our theme file which is this one so this is  the mother file of all theme files over here   actually i mean of course that's for light theme  now we're gonna save it and after saving restart   it and if we do that we'll see that this icon  should become white let's go ahead and do that okay well at least it took the effect not the  star itself we have to find out why the star   didn't take effect but yes so it also means  that the icons are working now i think this   is defined in introduction let's go go ahead  to the introduction class let's find it so   we do command p or control p and find f inter  intro reduction well looks like it's not here oh   introduction the name was introduction okay now  we do see that we have okay over here the icon   color right so you can just simply go ahead  and remove that we don't need this because   otherwise this would get overwritten okay now  it changed okay so beautiful so with this we   understand that now for light theme whatever  we want to set we can set inside this function   beautiful now what about the text remember just  now we had a class for the text itself over here   so we can use that one for text itself  okay so right below it i'll start a   new property over here and i'll  call it text theme text name   we get this one and the one we created which is  the function name get theme okay this one and   actually we can also change from it so here we  could do dot apply so inside this actually we're   going to set two colors one is body color and  there is display color display color this one   but we don't have them now so we're going to  set them at the top and reuse them over here here we can set up a color color name  we can say main text color like that   and we'll get it from rgb color so here we do  color dot from a rgb this one and here we set   255 the first channel the second channel third  channel and the fourth channel like that and all   you need to do copy this one and put it here and  put it here okay now let's go ahead and save it   okay and because we have installed a plugin so we  need to restart our app let's go ahead and do that and if it didn't work so we're going  to stop our app and then restart again okay so i'm going to restart my app now okay well  after restarting it is working and as you see that   it already changed over here the font size the  font at least changed okay so it's taking you back   now if you come over here uh we could do a bit of  change over here we can set up this some of the   text style over here manually because uh we don't  want to fix everything over here so part of the   thing could be fixed but not everything because as  soon as you write here everything gets pretty much   fixed because in different places we might want  different text size so that's that's why here we   are going to introduce style and we'll assign  our own style okay so here we do text style okay now inside this first thing we  want to do is font size font size and here we could set our  actually 18 okay let's save it and   after that over here we can also set the color   c l or color and here we could set up the color  on surface text color so which is actually white   let's save it and if it didn't take effect so we  can just simply go ahead and restart our app all   right so the problem was here why it didn't work  because it needed to be right below the text and   because i guess this is a named parameter so  you need to have it the one that is not the name   parameter so that's why it was having this error  now if we restart we see that it works over here   and okay so this is what we have and have the  property actually we can set at the same time   over here so that i guess text align now text  align dot center let's save it and we'll see that now everything is centered over here i think this  is much better looking so yes it's already working   now we want to set up our theme for dark mode now  to be able to do that we need to look for the file   that is app theme like this one have them dark this one so just like that   over here we are going to create a class  and the class name would be dark theme   and this time we're going to also use the mix  and the one we have created some theme data so let's import it first one okay now inside  this once again we are going to create a function   and we'll call it the type is the function return  thing data type and here we'll call it build   dark theme okay and just like last time okay well  let's let's need to import a lot of things okay   now here first we'll create an instance of the  dark data theme so it is theme data. okay now   let's instantiate an object so here we do theme  data and system dark theme system dark theme okay and right over here we just to simply return   system dark theme now let's save it now if  you if we come to our in the dart over here so we we have light theme so here  we can call it dark theme okay   dark theme and build dark theme over here build  dark theme over here and we're going to import it   okay and now let's save it and you see  it changed the theme already changed and   of course uh there are other things that we need  to check but it gives you idea that it is changing   and the way we want it it is working as well now  why this font like this the idea is uh we need to   set up the properties inside this right now it's  pretty empty nothing is there so just like last   time so here we're going to do copy with which  will have a lot of properties inside we can use   well the first one we could use  is icon theme so here i can theme   and we already have one so you'd  call it get icon theme data   because the data is over here in this file in  this mixing file and then text name okay text name   this one okay well first we will get whatever  we had and from that one we would use apply okay so inside this just like last one  here we'll apply a body color of the color   and the display color display color but we  don't have any of this so we're going to create this color over here so at the top we'll  just simply create them here we do const color   and we'll call it main text color main text color  dark okay and here we do colors dot white that's   all and simply we'll use main text color dark  and over here main text color that so both of   them they will have the same one okay and as you  see the font already changed because now it's   using the font the one we have defined here  so that's the beauty so you have the common   properties in a mixing file and then based on  those common properties you create your own theme   two different things now i guess we need to do  a little bit of refractoring over here with this   one main text color actual light because we want  to follow the same naming convention everywhere okay let's save it now if we do  go back to our main.dart file   um so we can change back what we had early  okay let's restart and see how it looks okay   yes now we'll change it back to the one we had  early okay and let's restart yes okay great okay   so right now we already have two things okay  now we want to create a controller and as the   app boots up they'll load these two things at  the same time and then we'll be able to toggle   between them right now what are we doing we're  toggling them manually but we want to toggle them   using more sophisticated way so  we're going to define a controller for this one we're going to go to our controller over here and inside this   inside this we're going to create a new  file and we'll call it themecontroller.dart okay now here we going to create a class  and name is theme controller other than   extends of course not base  controller and get x controller and at the top we are going to import get x  so here we do import get this one all right   now here once again we are going to use onit on  init okay this one and what is this well this is a   method that inside get x so  and last time we saw on ready   and this is the one called immediately after  is after the widget is allocated in the memory   so it means that when your app is in the memory  before even it boots up before user can say it   this method gets called okay just beautiful thing  so with this you can do some pre-initialization   okay so you might use this to initialize  things okay so whatever happens so first   we want to initialize our f theme color or app  theme before even you get data from the server   so your app should be looking good ready with  the color and look okay so that's why you want   to initialize your theme inside this oninit  method but of course you need to override this okay and here we are going to create a method and  the method name we initialize theme data any shia   lies same data okay of course we need to create  the body of this so here let's go ahead and do   that and we'll just simply go ahead and copy  it and put it here and then okay now then what   actually first we need to create two instances of  our theme date okay all right so here we do late   theme data and here we're gonna define private  variable we'll call it dark theme and another   one is i can't let same data and here we'll call  it write them in both cases we need to import them okay all right so we we have this two great now  here we'll initialize them how to initialize them   for the dark one here the dark theme because we  already created the theme right so here we do dark   theme this method that we have and build a dark  thing this one now let's go ahead and import it okay now we do the same for light theme so here we  do light theme but looks like we have a typo here   okay so now here we do a light thing now i guess vs code was smart enough to  read that automatically and it's beautiful okay great so with this as having the memory for  as the app gets loaded in the memory first time   our theme data would get initialized at the very  early stage of app booting okay it's it's great it   makes sure that everything's working fine now  over here we can set up two getters for this   themes over here the one we have of course they'll  return in data and here we do get and here we just   simply do dark theme okay and here will return  dark then okay all right and the same would do for   light theme and here to get and light once  again this is not a beginner's tutorial   on get x so i'm not going to explain too  much but you should look them up anyway so   it's a getter we are creating to get these five  private variables from anywhere else in our app   like them okay great so with this we are pretty  much done with this theme controller now we need   to look for a file where we have this initial  bindings this one now before when we go ahead and   show our auth controller as i said that we  have to do it much early so here we do a theme   controller okay same controller this one so this  is our theme controller which is get initialized   and now how to work with this  one now we need to come to   this file over here instead of writing like  this actually we can use it through our   get dot find method for get x get defined and over  here we would get them controller theme controller   and then we'll call the method whatever the method  we want to get okay now theme controller so here   we set up dark theme and a light theme so you can  just get them and you're good to go so this is the   field that actually we created as you see this one  this is getting dark thing but of course we can   switch it to light then but anyway let's change  it and uh theme controller not found okay let's uh   stop our app okay let's restart our app actually  from the beginning yeah it works now because we   have injected a new one new controller so you  should stop and rerun your app hot resolution   don't work now here we can also do a light theme  okay now let's save it and it works as you see   beautiful okay great now actual toggling from  using a switch button that would be actually   coming much later but we pretty much did all  the work for the theme the skeleton building   of this theme and theme controller for the whole  app look and feel we're almost done with the 60   percent of the work but we need to do more but  later now we'll focus on how to click on this   button and actually load data from firebase  so that's the place where we want to focus   that that part should be also be more interesting  a bit of complex but anyway if you have questions   leave a comment below so inside this lib folder  i'll create a new folder and i'll call it services   and inside this services folder i'll create  a new file and we'll call it firebase storage   service dart okay now over here we'll create  a class and class name is firebase storage   service this one and it will extend service now  what service it'll extend actually get a service   since we are using get x now  at the same time we need to   import the libraries so first we'll import the  get all right and then we are good to go now   right inside this will create a method because we  want to up get the image from the firebase now if   you want to get the image from the firebase you  have to pass the name the name should be string so that's what we are passing and over here  first we'll check if the name is empty or not   if the image name is null then we're  going to return null okay all right   now we need to go ahead and get a reference of  firebase storage but before that actually we   need to install the plugin so let's go ahead and  install the plugin so here we do firebase storage   let's see what we get and i think it got  one and trying to run it we need to wait   and it's getting it now and i guess we are done  if it's so then we'll go ahead and check our   pop spec file we'll see okay it's been installed  the latest version i guess so this has been done   now after this we'll get a reference from firebase  storage the reference type would be reference and   we'll create a getter and we'll return a variable  over here and we'll call it firebase storage   since we are doing a getter and then we  have to get firebase storage dot instance   instead instance dot rev   now of course we need to import the packages  let's see if it recognizes or not it doesn't so   if it doesn't we'll manually import it so here is  this package and its reference so now it's working   now here we'll get the image url because we  are giving the image name and based on that   image name we'll see if we have an image or not so  here we'd use a try clause and if things go wrong   we'll fall into exception so here we do  catch and right after this would just return return null okay now instead this try clause  will try to get the image url and how to get it   to get that first we created this storage over  here storage object okay so from this one we can   access child actually you can see child property  now child property it takes the path so we need to   give it a path now we need to give it the path  the path name is the folder path now the folder   path is the path that we created early so let's  see so this is the folder folder name is question   paper images so this one so we'll go ahead  and write that one here we do question paper   images okay but now that's the uh part of the  path but we need to do more so here we do another   child now here actually we'll apply the actual  image name okay now image name is coming from   here actually we are giving the imager name  okay now because this is inside a variable   and object so we need to use this one so  here we do img img name and then we do get   oh sorry not get so here we would do two  lower case so it convert it to lowercase   and then over here because all of our images  in png format so that's what we are doing   and right after this we'll return so over  here we will get the folder name and the   image name together and then we'll save  it to a variable and we'll call it url ref   and after that we can just return the download  path so this is our folder name and this is   the image name but firebase is more complex but  all you need to do you need to apply or give it   the folder name and image name and after that  you'll just return like this await url ref dot   get download url so this is the built-in function  inside firebase so we don't need to worry about   that one i mean firebase storage and of course  this is the actual path now we also need to save   it so i would call it img url save inside this  and then we'll just return okay return img url now here uh because we are using a weight so we  need to work on this async so we need to put here   a sync otherwise we'll get error as sync okay  now error should be gone now what what are we   returning here actually over here we are returning  a string as you see so we need to do a string   return but because this is a weight so we need to  wrap the string type inside a future so here we do   string but actually we can return it inside  we can wrap it around inside future object   and over here we do string but now the  string could be null because as you see   over here if we have error so we return  null otherwise we'll return the image url   now with this you are pretty much set up how  to load images from firebase but now this is   firebase storage now with this you are pretty much  set up how to load images from firebase storage   but now we need to go ahead and display them now  to be able to do that we need to create a new file   now inside the screens folder i'll  create a new folder and i'll call   it home okay now inside this home i'll  create a new file and we'll call it home   screen dot dart now here i'm going to create a  stateless class and we'll call it home screen   all right and right inside this will return a  scaffold okay we might need to import libraries okay now for the body itself what we'll do we'll  go ahead and return a list view okay list view   all right now we are going to return  this one list view that separated   so all right here we are and this is the place  this is the home screen where we want to show   our image but remember we are loading images  using a service which is called gettext service   and we are loading it over here and returning as  a stream but because this is a service so we need   to get this string this this string over here in  a controller but we don't have the controller so   now we'll go ahead and create a new controller so  we'll come inside this controller folder which we   have over here and inside this question paper  right inside this will create a new controller   and we'll call it quiz paper controller or  question paper controller question paper   controller dart okay and here we'll create a  new class and the class name is a question paper   controller this one and over here it  will extend get x get x controller   we're going to have to import it manually  so let's do that import get dart okay   all right and here we have a typo so let's fix  that so once again over here we'll override a   method and the method name is unready method  which we have seen before so here we'll do   unready so void on ready and we know it gets  called really actually immediately after   everything gets booted up now over here we need  to override super dot unready great now over here   we'll create a new method and the method name is  get all papers okay so here we do get all papers okay now here inside this first we'll create a  list of uh paper's name but we'll tag them as   image name so here we do list and here inside this  will have string type and here we do img name and   actually this name would be correlate to the files  that we have uploaded in the firebase okay so here   i'll declare a list and now each of them here  i'll have biology and then i'll have chemistry then i'll have math and then i'll have physics okay so this is the list of  string here but as image name   because these names are stored in the firebase  backend so yeah i'm sending this image i'll send   this image to the firebase backend now inside  this i'll have a try clause and once again   here i'll have a catch for catching an exception  now inside this over here i will just simply well   we can print something print e which means stands  for error but anyway now instead this try clause   will run a for loop okay so here we do 4 and i  could name the variable as a paper inside this   in img name or actually i would say img in mg  name that sounds better so we'll look through   whatever is here and now we'll call the method  that we have created over here as get image   but let me close this window we don't need that  so we'll call this method get image and at the   same time we'll pass the image name and image  name would be going from here in this for loop so here we do get dot find now because that's  also our controller which is get x service   so here we do firebase storage service this one  okay and then we'll do get image name now over   here inside this we need to pass this image name  so here each time as we look through each of the   image name would be saved in this variable  okay all right now here because this is an   asynchronous operation as you see it returns the  future so here we need to do a weight okay but now   we need to save this information every time we get  the complete path of image we are we need to save   it to a variable okay now here we'll declare a  list actually we could do it at the top over here   so here we do final all papers all paper images  like that okay now inside this will save string   type variable because we're returning a string  as the image path okay now here that would be a   list so our list would hold string type and it  is also obs type since we are get using get x   because uh this would be reactive so this list  would be reactive okay all right now as we do that   over here first we'll save it in a variable  and we'll just call it img url okay   all right and i guess we need to tag  async let's do that yes right over here   okay so we pass whatever the name is here  and we get that name in a loop one by one   and we pass it there and based on this  name it gets the complete image path   from firebase and then it returns to this  variable now as it does actually what we can   do we can add it to our uh list okay so the all  paper images is a list but here that's what we do   now here we need to make sure that this is  not empty because what it returns over here   this could return something like null okay  yeah like that so we are telling that okay   we won't get null all right so now with this this  variable this variable over here this would have   all this so this variable eventually have all  the image path it means that which means that   that would be as a string which also means that  if we can look through this one later we'll have   the complete image path name from the firebase  and we'll be able to view them now this is the   time to go ahead and call it so we'll call it from  here okay perfect and over here we can also define   something like this future void because we are  not returning anything all right now with this it   makes it nice okay so we are pretty much done over  here now would come to our home screen over here   and over here we need to make a lot of changes  while the first thing we want to do so we need   to get a reference of this controller over here  okay so this is the controller you want to get   a reference of this one so here what are you  going to do we cannot write here question   paper controller and here would say question  paper controller okay and we just simply do   get defined so it would return us the controller  and save the controller instance in this variable   great so right after this here we do well item  builder now item builder would take build context   and the context and over here we would do int  index okay and after that we're going to return   all right so that's part of one part of  it and over here we also have item count   so we'll use this one over here and we know that  using this we can refer to all i guess what we   have here let's see so all paper images which  is this one so we'll access that one from here and then we also do length so we get the length  now what about this one now this one the same as   build context the one we did early over here and  right inside this we can just simply return a   sized box sized box and here we do height say a  height equal we could do 20 all right and then   our error is gone now definitely inside this  we also need to return something uh before we   go ahead and return i think we need a const over  here otherwise it would be cranky okay great and   then we have to return all right so now we'll come  over here now inside this we are going to return   something now we are going to return a clip are  right okay now of course this will have a child okay all right that's vs code a little cranky all  the time now inside this we'll have sized box as a   child so we do some child sized box now for now we  are going to set height and width for it actually so here we do height 200   and with say 200 now after that we'll have a  child for it and let's go ahead and do child and now inside this we are going to use  fade image widget okay now fade image   the good part about it that if your image is  too large fade image widgets helps you to wait   and show something different of course i think we  have a type over here we need to do fade in image okay now it takes some properties well the  first property we could set over here as image   property and it will take a network image network  image we can see it over here network image now   inside this network image we need to send  the image url so we can access the image url   so here we do question paper controller dot  all papers images and then we just simply do   index over here now index would look through it  and take each of them and send it to this one okay all right now this is another option that  another property that we need to fill this is   called placeholder this one the placeholder  is to show the images from your asset folder   as the network images are being loaded first  it will show you something that's in your local folder otherwise your screen might be white  or empty so here we do asset image now our images   are coming from assets images folder and we know  that we have as app splash logo logo.png okay all   right now we're gonna save it and after saving it  let's see if we could run our app or not okay so so now we're going to run our app so i'll restart  everything from the scratch and looks like it   started all right so now i'll open up the terminal  to see if we have any error or not so here is our   debug console okay so far everything is great now  as i'm going to click on this i'm expecting to go   to a new page which page home screen page the one  that we built over here now let's click on this   and see what happens now it does look like that  it says that this controller has not been found   okay so which means that we didn't inject the  controller okay so we need to find a way to inject   it because we just created this controller  but we didn't inject it now what happened   over here if you see home screen we are trying to  use it over here but actually we didn't inject it   now to be able to inject it we can actually find  our routes file so let's see this one over here   now inside this after this so we  can use a property which is called   binding and inside this we can use  binding builder let's see binding builder bindings builder actually okay and right inside  this we could do like this so here we could do   get the put get that put and inside this would  do question paper controller and you are good   to go now let's save it actually we need to  do a semicolon over here now let's save it   okay okay so we restarted our app and this time  everything's went smoothly so now i'm going to   click on this and we'll see what happens now  of course we don't have any error now why we   don't see anything well to know why we don't see  anything let's find our home home screen over here   so what happens you have to know that uh this  question paper controller it loads images in   this one now this image is actually comes from  this firebase over here now this page only gets   called when you click on this link over here when  you click on this button the button we had already   this one so when you click on this then actually  this gets triggered okay and then it loads things   but it actually loads the thing but  after loading our ui doesn't know that   images are there it means images path are there  so we need to tell a way to the ui that hey   our images has been loaded so you go ahead and  display them now to be able to do that actually   we can simply wrap this list via builder using  obx okay so what i'm going to do i'm going to   uh so i'm going to cut it from here  so i'm going to cut it from here and first i'm going to use obx over here  and obx uh inside this i'm going to return   using a single fat arrow function and then  i'll put my list view inside this so with   this because obx is coming from get x so  right now my ui became reactive with this   so you i would know if there are any changes  in my variables okay now this this all papers   as you know that it is obs type okay  now i wrapped this widget around obx so my you i know okay this variable has changed  so let's see if we can redraw something on   the screen okay now this time we're gonna  go ahead and restart our app one more time   now here we are and we want to see if we  get images or not now here this is our first   logo that you have seen and these are the four  images that we had in our firebase backend so   let's go ahead and check with the firebase back  so these are the four images this is the biology   image the one we have and there's the first one  and over here we have this chemistry image uh   which is the second one so yeah congratulations  so we so far we have made a long way and did   everything smoothly and congratulations for that  one okay so that means now we know how to so now   we know how to load images from firebase and  display on your ui now this is our firebase app   over here and now here we see build now inside  this we are going to click on the storage   and we need to wait okay great now as you  see over here here it says that upload   and as well as there is an icon button so  first here we'll click on this icon button   now with this we'll be able to create a  folder over here so here we'll say question paper images okay so this is the folder that  we want to create so here we'll click add okay   great so the folder has been created now it's  time to upload images okay so we'll select this   now here we'll click on upload now from  here we'll select our images so we have   these four images so i'll select all of them  and click over here and they have been uploaded   that's all that's as simple as that one  now we can click on them you'd be able   to view your image but here it says that  loading preview image now you click on them   and you see that error loading preview well  you click over here it's the same thing here   it says that permission denied so we have to set  up permission to be able to view them okay so now   you need to go ahead and set up the rules to be  able to view them and for this reason we'll come   over here you see rules and over here we need to  set up rules okay so we're going to replace this   rules with the rules that i'm going to put over  here and after that we are going to publish it and that's it now let's come over here and  click on the folder and click on this start   uploading the images you might have to wait a  few minutes before you can be able to view them   so right now you go ahead and click  you might see this images are here   okay all right so yeah you might have to wait a  few minutes otherwise you'll get error here this   is this has to do with the permission and make  sure the rules are correct over here as well   especially whether it is set to true  or not okay so this is quite important   so now we'll go back to our flutter app and see  how to view these images from the app itself by   the way if you click on this image you'd be able  to view them from external link from your app or   website from anywhere so this is another beautiful  thing about it so we'll go back to our flutter   app and try to view them so inside this lib folder  i'll create a new folder and i'll call it services   and inside this services folder i'll create  a new file and we'll call it firebase storage   service dart okay now over here we'll create a  class and class name is firebase storage service   this one and it will extend service now what  service it will extend actually get a service   since we are using get x now  at the same time we need to   import the libraries so first we'll import the  get all right and then we are good to go now   right inside this will create a method because we  want to up get the image from the firebase now if   you want to get the image from the firebase you  have to pass the name the name should be string so that's what we are passing and over here  first we'll check if the name is empty or not   if the image name is null then we're  going to return null okay all right   now we need to go ahead and get a reference of  firebase storage but before that actually we   need to install the plugin so let's go ahead  and install the plugin so here we do firebase   storage let's see what do we get and i think  it got one and trying to run it we need to wait   and it's getting it now and i guess we are done  if it's so then we'll go ahead and check our   pop spec file we'll see okay it's been installed  the latest version i guess so this has been done   now after this we'll get a reference from firebase  storage the reference type would be reference and   we'll create a getter and we'll return a variable  over here and we'll call it firebase storage   since we are doing a getter and then we  have to get firebase storage dot instance   instead instance dot ref now of course we need to  import the packages let's see if it recognizes or   not it doesn't so if it doesn't we'll manually  import it so here is this uh package and its   reference so now it's working now here we'll get  the image url because we are giving the image name   and based on that image name we'll see if we have  an image or not so here we'll use a try clause   and if things go wrong we'll fall into exception  so here we do catch and right after this would   just return return null okay now instead this try  clause we'll try to get the image url and how to   get it to get that first we created this storage  over here storage object okay so from this one   we can access child actually you can see child  property now child property it takes the path   so we need to give it a path now we need to give  it the path the path name is the folder path now   the folder path is the path that we created early  so let's see so this is the folder folder name is   question paper images so this one so we'll go  ahead and write that one here we do question paper   images okay but now that's the uh part  of the path but we need to do more   so here we do another child now here  actually we'll apply the actual image name   okay now image name is coming from here actually  we are giving the image name okay now because this   is inside a variable and object so we need to use  this one so here we do img img name and then we do   get oh sorry not get so here we do two  lower case so it convert it to lowercase   and then over here because all of our image  is in png format so that's what we are doing   and right after this we'll return so over  here we will get the folder name and the   image name together and then we'll save  it to a variable and we'll call it url ref   and after that we can just return the download  path so this is our folder name and this is   the image name but firebase is more complex but  all you need to do you need to apply or give it   the folder name and image name and after that  you'll just return like this await url ref dot   get download url so this is the built-in function  inside firebase so we don't need to worry about   that one i mean virus storage and of course  this is the actual path now we also need to   save it so i would call it imgurl save inside this  and then we'll just return okay return img url now here uh because we are using a weight so  we need to work on this a sink so we need to   put here async otherwise we'll get error as sync  okay now error should be gone now what what are we   returning here actually over here we are returning  a string as you see so we need to do a string   return but because this is a weight so we need to  wrap the string type inside a future so here we do   string but actually we can return it inside  we can wrap it around inside future object   and over here we'll do string but now  the string could be null because as you   see over here if we have error so we return  null otherwise we'll return the image url   now with this you are pretty much set up how  to load images from firebase but now this is   firebase storage now with this you're pretty much  set up how to load images from firebase storage   but now we need to go ahead and display them  now to be able to do that we need to create a   new file now inside the screens folder  i'll create a new folder and i'll call it   home okay now inside this home i'll create a  new file and we'll call it home screen dot dart   now here i'm going to create a stateless  class and we'll call it home screen all right and right inside this will return a  scaffold okay we might need to import libraries   okay now for the body itself what we'll  do we'll go ahead and return a list view   okay list view all right now we are going  to return this one list view that separated   so all right here we are and this is the place  this is the home screen where we want to show   our image but remember we are loading images  using a service which is called getting service   and we are loading it over here  and returning as a string but   because this is a service so we need to get  this string this this string over here in a   controller but we don't have the controller so  now we'll go ahead and create a new controller   so we'll come inside this controller folder  which we have over here and inside this   question paper right inside this will create a new  controller and we'll call it quiz paper controller   or question paper controller question paper  controller dot dart okay and here we'll create a   new class and the class name is the question paper  controller this one and over here it will extend   get x get x controller we're going to have  to import it manually so let's do that   import get dart okay all right and here we have  a typo so let's fix that so once again over here   we'll override a method and the method name is  unready method which we have seen before so here   we'll do on ready so void on ready and we know  it gets called really actually immediately after   everything gets booted up now over here we need  to override super dot unready great now over here   we'll create a new method and the method name is  get all papers okay so here we do get all papers okay now here inside this first we'll create  a list of uh papers name but we'll tag them as   image name so here we do list and here inside this  will have string type and here we do img name and   actually this name would be correlate to the files  that we have uploaded in the firebase okay so here   i'll declare a list and now each of them here i  will have biology and then i'll have chemistry then i'll have math and then i'll have physics okay so this is the list of string here but  as image name because these names are stored   in the firebase backend so yeah i'm sending this  image i'll send this image to the firebase backend   now inside this i'll have a try clause  and once again here i'll have a catch   for catching an exception now inside this  over here we'll just simply well we can   print something print e which means stands for  error but anyway now instead this try clause   will run a for loop okay so here we do for and  i could name the variable as a paper inside this   in i'm gname or actually i would say img in mg  name that sounds better so we'll look through   whatever is here and now we'll call the method  that we have created over here as get image   but let me close this window we don't need that  so we'll call this method get image and at the   same time we'll pass the image name and image  name would be going from here in this for loop so here we do get defined now because that's also  our controller which is get x service so here we   do firebase storage service this one okay and then  we'll do get image name now over here inside this   we need to pass this image name so here each time  as we look through each of the image name would   be saved in this variable okay all right now  here because this is an asynchronous operation   as you see it returns the future so  here we need to do a wait okay but now   we need to save this information every time we get  the complete path of image we are we need to save   it to a variable okay now here we'll declare a  list actually we could do it at the top over here   so here we do final all papers all paper images  like that okay now inside this will save string   type variable because we are returning a string as  image path okay now here that would be a list so   our list would hold string type and it is also  obs type since we are get using get x because   uh this would be reactive so this list would  be reactive okay all right now as we do that   over here first we'll save it in a variable  and we'll just call it img url okay   all right and i guess we need to tag  async let's do that yes right over here   okay so we pass whatever the name is here  and we get that name in a loop one by one   and we pass it there and based on this  name it gets the complete image path from firebase and then it returns to this variable  now as it does actually what we can do we can   add it to our uh list okay so the all paper  images is a list but here that's what we do   now here we need to make sure that this is  not empty because what it returns over here   this could return something like null okay  yeah like that so we are telling that okay   we won't get null all right so now with  this this variable this variable over here   this would have all this so this variable  eventually have all the image path it means   that which means that that would be as a string  which also means that if we can look through this   one later we'll have the complete image path name  from the firebase and we'll be able to view them   now this is the time to go ahead and  call it so we'll call it from here   okay perfect and over here we can also define  something like this future void because we are   not returning anything all right now with this it  makes it nice okay so we are pretty much done over   here now would come to our home screen over here  so all right here we are and this is the place   this is the home screen where we want to show our  image but remember we are loading images using a   service which is called gettext service and we are  loading it over here and returning as a stream but   because this is a service so we need to get  this string this this string over here in a   controller but we don't have the controller so  now we'll go ahead and create a new controller   so we'll come inside this controller folder  which we have over here and inside this   question paper right inside this will create a new  controller and we'll call it quiz paper controller   or question paper controller question paper  controller dot dart okay and here we'll create   a new class and the class name is question paper  controller this one and over here it will extend   get x get x controller we're going to have  to import it manually so let's do that   import get dart okay all right and here we have  a typo so let's fix that so once again over here   we'll override a method and the method name is  unready method which we have seen before so here   we'll do unready so void on ready and we know  it gets called really actually immediately after   everything gets booted up now over here we need  to override super dot unready great now over here   we'll create a new method and the method name is  get all papers okay so here we do get all papers okay now here inside this first we'll create a  list of uh paper's name but we'll type them as   image name so here we do list and here inside this  will have string type and here we do img name and   actually this name would be correlate to the files  that we have uploaded in the firebase okay so here   i'll declare a list and now each of them here  i'll have biology and then i'll have chemistry then i'll have math and then i'll have physics okay so this is the list of string here but  as image name because these names are stored   in the firebase backend so yeah i'm sending this  image i'll send this image to the firebase backend   now inside this i'll have a try clause  and once again here i'll have a catch   for catching an exception now inside this  over here i will just simply well we can   print something print e which means stands for  error but anyway now instead this try clause   will run a for loop okay so here we do 4 and i  could name the variable as a paper inside this   in img name or actually i would say img in img  name that sounds better so we'll loop through   whatever is here and now we'll call the method  that we have created over here as get image   but let me close this window we don't need that  so we'll call this method get image and at the   same time we'll pass the image name and image  name would be going from here in this for loop so here we do get dot find now because that's also  our controller which is get x service so here we   do firebase storage service this one okay and then  we'll do get image name now over here inside this   we need to pass this image name so here each time  as we look through each of the image name would   be saved in this variable okay all right now  here because this is an asynchronous operation   as you see it returns the future so here we need  to do a weight okay but now we need to save this   information every time we get the complete path of  image we are we need to save it to a variable okay   now here we'll declare a list actually we  could do it at the top over here so here we do   final all papers all paper images like that okay  now inside this will save string type variable   because we're returning a string as the image path  okay now here that would be a list so our list   would hold string type and it is also obs  type since we are get using get x because   uh this would be reactive so this list would  be reactive okay all right now as we do that   over here first we'll save it in a variable  and we'll just call it img url okay   all right and i guess we need to tag  async let's do that yes right over here   okay so we pass whatever the name is here  and we get that name in a loop one by one   and we pass it there and based on this  name it gets the complete image path   from firebase and then it returns to this variable  now as it does actually what we can do we can   add it to our uh list okay so the all paper  images is a list but here that's what we do   now here we need to make sure that this is  not empty because what it returns over here   this could return something like null okay  yeah like that so we are telling that okay   we won't get null all right so now with  this this variable this variable over here   this would have all this so this variable  eventually have all the image path it means   that which means that that would be as a  string which also means that if we can look   through this one later we'll have the complete  image path name from the firebase and we'll be   able to view them now this is the time to go  ahead and call it so we'll call it from here   okay perfect and over here we can also define  something like this future void because we are   not returning anything all right now with this it  makes it nice okay so we are pretty much done over   here now would come to our home screen over here  and over here we need to make a lot of changes   while the first thing we want to do so we're going  to get a reference of this controller over here   okay so this is the controller we want to get a  reference of this one so here what are you going   to do we can write here question paper controller  and here would say question paper controller   okay and would just simply do get defined so  it would return us the controller and save the   control instance in this variable great so right  after this here we do well item builder now item   builder would take build context and context and  over here we would do int index okay and after   that we're going to return right so that's part  of one part of it and over here we also have item   count so we'll use this one over here and we know  that using this we can refer to all i guess what   we have here let's see so all paper images which  is this one so we'll access that one from here and then we also do length so we get the length  now what about this one now this one the same as   build context the one we did early over here and  right inside this we can just simply return a size   box sized box and here we do height say  a height equal we could do 20 all right   and then our error is gone now definitely inside  this we also need to return something uh before we   go ahead and return i think we need a const over  here otherwise it would be cranky okay great and   then we have to return all right so now we'll come  over here now inside this we are going to return   something now we are going to return a clip are  right okay now of course this will have a child okay all right that's vs code a little cranky all  the time now inside this will have sized box as   a child so we just child sized box now for now we  are going to set height and width for it actually so here we do height 200   and with say 200 now after that we'll have a  child for it and let's go ahead and do child and now inside this we are going to use  fade image widget okay now fade image   the good part about it that if your image is  too large fade image widgets helps you to wait   and show something different of course i think we  have a type over here we need to do fade in image   okay now it takes some properties well the  first property we could set over here as   image property and it will take a network image  network image we can see it over here network   image now inside this network image we need  to send the image url so we can access the   image url so here we do question paper controller  dot all papers images and then we just simply do   index over here now index would look through it  and take each of them and send it to this one okay all right now this is another option that  another property that we need to fill this is   called placeholder this one the placeholder is  to show the images from your asset folder as   the network images are being loaded first  it will show you something that's in your local folder otherwise your screen might be white  or empty so here we do asset image now our images   are coming from assets images folder and we know  that we have as app splash logo logo.png okay all   right now we're gonna save it and after saving it  let's see if we could run our app or not okay so so now we're going to run our app so i'll restart  everything from the scratch and looks like it   started all right so now i'll open up the terminal  to see if we have any error or not so here is our   debug console okay so far everything is great now  as i'm going to click on this i'm expecting to go   to a new page which page home screen page the  one that we built over here now let's click on   this and see what happens now it does look like  that it says that this controller has not been   found okay so which means that we didn't inject  the controller okay so we need to find a way to   inject it because we just created this controller  but we didn't inject it now what happened   over here if you see home screen we are trying to  use it over here but actually we didn't inject it   now to be able to inject it we can actually find  our routes file so let's see this one over here   now inside this after this so we  can use a property which is called   binding and inside this we can use  binding builder let's see binding builder bindings builder actually okay and  right inside this we could do like this   so here we could do get the put get that put and  inside this would do question paper controller and   you are good to go now let's save it actually we  need to do a semicolon over here now let's save it   okay okay so we restarted our app and this time  everything's went smoothly so now i'm going to   click on this and we'll see what happens now  of course we don't have any error now why we   don't see anything well to know why we don't see  anything let's find our home home screen over here   so what happens you have to know that this  question paper controller it loads images in   this one now this image is actually comes from  this firebase over here now this page only gets   called when you click on this link over here when  you click on this button the button we had earlier   this one so when you click on this then actually  this gets triggered okay and then it loads things   but it actually loads the thing but  after loading our ui doesn't know that   images are there it means images path are there  so we need to tell a way to the ui that hey   our images has been loaded so you go ahead and  display them now to be able to do that actually   we can simply wrap this list via builder  using obx okay so what i'm going to do   i'm going to so i'm going to cut it from  here so i'm going to cut it from here and first i'm going to use obx over here  and obx uh inside this i'm going to return   using a single fat arrow function and then i'll  put my list view inside this so with this because   obx is coming from get x so right now my ui  became reactive with this so you i would know   if there are any changes in my variables okay now  this this all papers you know that it is obs type   okay now i wrapped this widget around obx so  am i you i know okay this variable has changed   so let's see if we can redraw something on the  screen okay now this time we're gonna go ahead   and restart our app one more time now here we  are and we want to see if we get images or not   now here this is our first logo that you have  seen and these are the four images that we had   in our firebase backend so let's go ahead  and check with the firebase back so these   are the four images this is the biology image  the one we have and this is the first one   and over here we have this chemistry image uh  which is the second one so yeah congratulations   so we so far we have made a long way and did  everything smoothly and congratulations for   that one okay so that means now we know how to  so now we know how to load images from firebase   and display on your ui okay uh this time what  i'm going to do i'm going to do a little bit   of refractoring so this this one actually we don't  want to put it over here we're going to move it to   our reference file the one we created for firebase  reference inside this and i'm going to just put it   right below it most of all we need to import let's  see well if we can't import like that we'll just   cut this one from here and put it here right  below it the arrow should be gone let's save it   and i think over here we need to import the path  and we are good to go all right great but now this   is what we have achieved so far and that's a great  thing but the ui is a far more than that we have   a lot of work because along with this pictures  we also need to show our question paper name and   as we click on the question and paper title we  have to go to a new page so let's go ahead and   work on them all right so so far we have achieved  this result over here so we have shown the images   successfully as you can see the images over here  but of course they're they're not definitely in   the same order which doesn't matter so next what  you want to do we want to be able to read this   and as well as read the introduction for each  of the subjects so each subject they have basic   introduction which is shown next to their  image so after retrieving the image now we   want to retrieve the question paper which we have  uploaded long ago very early at this tutorial   would be we would want to achieve this  result but before that we have to know   that first we need to work on our controller  because the controller will get the data from the   firebase uh storage or firebase uh database and  then it will send this data to the ui so here   is our uh firebase controller so this is what it  looks like right now now we want to retrieve the   data but now we know that retrieving data that  comes from firebase is adjacent so we have to   first work on the model itself actually because  we want to be able to receive the data in the   model and then convert it to object and if we can  do that then it would be able to put the data in   a list over here in this controller and then  we'd be able to access that list from the ui   now for this reason we'll come to our model  over here uh i think here we have model   okay so here this is what we had early so  far now of course uh this is purely json   uh and this json was uh just  actually coming from our json file   but now the json would be coming from in  fact from the firebase database and how to   work with that one now definitely we'll  copy this one first over here and then we'll put it we want to remove  actually in fact this one so we want to   give it a new method name so we'll call  it snapshot so we know the data came from   firebase a lot of time the convention is to call  snapshot so that's what we'd be calling okay   now for this one i'm going to cut this one over  here and i'm going to wrap it around using uh   object object type so that is called document  snapshot document snap shot okay now inside this   we can put our map so whatever data comes from  whatever data comes from firebase so that's a type   of document snapshot let's see if we can import  it but looks like it's not recognizing so we have   to do it manually so we'll go at the top and right  before the class name we have to import reference   from cloud storage uh cloud file store actually  and the error is gone okay so now this two   actually pretty similar so we should be good with  that the only thing we want to remove is this one   okay because with this one all we need is just the  question title image url and description why let   me tell you so on this page actually we want to  show the title so this should be the title which   is this one or in this case it'd be this one  now we'll have also image url and this is the   description okay and things like that so so this  question itself is not very important over here   so in this part of this model we don't need  that so we can just keep it empty like this okay   now another thing we want to do we want  to introduce a new field which is called   question count so here we do like int and we'll  declare a variable which is called a question   question count and inside  this we'll keep it as required   this dot question count and the error is gone and  the same over here actually so here we do question   count actually directly we'll set it to zero it  doesn't really matter because we are going to   count them whatever we get from our firebase  cloud store now we also need to make a change over   here so here we do question count okay  and then we do like this but one thing   we have to know that um okay now here we'll  have a field which is called question count okay just like this and then we are good  now we're gonna go ahead and save it   okay now with this the basic model to get data  from firebase is done most important part is   this one so whatever map is there actually it is  wrapped around this document snapshot that's all   okay and everything else i guess stays the same  and we don't need to worry about anything but   here one thing though this jason might have  let's see the id itself not as a string   i think we would do like this json.id and i think  we also should remove this as string so whatever   the id is there actually we just grab that and  it doesn't really matter and hopefully that would   be also as a string format otherwise we might  get error and we can also remove these things   actually because uh whatever is returned i believe  that will be returned as a string so we don't need   to do these things over here we can remove all  of this now it looks much better and cleaner   okay but one thing though here i want to do is  as end casting otherwise i might get error which   i had previously so i'm going to save it right  now like this now i'm going to come over here   and inside this we have we have to introduce  a new variable over here first okay   now here we do final all papers and inside  this we'll store model question question paper model let's see question paper paper  model this one and would make it obs type   so whatever we are going to get from firebase  definitely will convert it to question paper model   using by calling this one over here  okay and we should be good to go   okay so previously we have loaded the images from  our firebase storage but now we want to load this   question paper so right inside this try clause at  the beginning so we'll make some changes so here   we are going to create a new object the object  name would be data and we'll call it query let's   see query paper query snapshot actually snapshot  now this is the object type of uh firebase   firebase cloud store and here we do string  dynamic and yes and the variable name is data   and after that we do a wait now of course this is  not this one and i think we have a reference file   so we need to go ahead and grab that reference  and let's look for the reference file itself   okay which is this one now over here you do see  that we have a reference object pointing to this   question paper so we get this object so we  have to get that one so we get that one and   then we'll just do g e t get so what it do it  would get us everything from our firebase storage   and let's import it and let's see if we  can import it manually if not i think uh   we've done it at the top over here this one so  just go ahead and put it down and the arrow should   be gone so we would get the data get the data from  this collection okay if this is our collection   and we are getting all the data from the  collection and then we'll save it to this data   now whatever the collection returns that also  has a type that is called query snapshot that's   why we created this map of corey snapshot and  after that we'll have to loop through it but   we'll look through it using the map function  so what we'll do over here we'll do data.docs   this is an object so this data should have an  object of course this is coming from firebase   so you can refer to firebase documents to know  more about it and then here we have this map   object now here inside this uh we'll access  each of the paper that's what we're doing   and then after that we'll here called question  paper model let's see question paper model this   method okay all right now instead this will simply  pass paper and whatever we get from that one will   convert it to list and we should be good to go now  if so this is going to return us a list list of   the question paper now we're going to save it in  a variable and we'll call it like say paper list   okay so that that is a variable but of course this  variable itself is a list because this returns a   list so what's happening here we are getting all  the collections so here is our question paper   right the question paper has well it is itself  a collection this collection has documents okay   and that's what we have grabbed over here so  this is a question paper reference once again   refer to this one and we call over here get so  it will get us all the documents inside this   collection and of course that returns us a map  and corey snapshot map type now we convert it to a   list so that we can look through them otherwise we  didn't need to that is one point why we convert it   to list because we want to look through it anyway  so we pass each of this paper from this list which   also means that we pass each of them so like this  one this one this one in a loop as we do it okay   so we create an object actually because this is  uh from snapshot this method returns an object   and as it does actually we want to save it to a  variable so here we'll call it all papers this one   and then here would call assign all i guess assign all this one okay and then we'll put this paper  list okay so that's how it works   so by the way so over here actually it would run  pretty much five times in a loop okay if you don't   know how map works that could be very confusing  so check out my map and list tutorial the one i   have so here it will run pretty much like this  four times because we have four documents okay   and once the running is done every all the  item would be saved over here and then we   save it in a variable uh or in the list the  list that we have declared at the top just now all right now if we as we as we did that now we  can get rid of one thing we don't need this one as   well as not this one anymore okay so here we'll  remove this one and instead of going like this   because remember this contains our four documents  okay so we'll replace that now here we'll call   them paper so each of them would be called paper  now we are going to we are taking each of them and   we so we we we take this one and this has four  documents now we take each of them and we are   accessing accessing what we want to access the  image name now here we could do simply just paper   dot title okay now remember if you  remember our file so each of this paper   uh each of this document has a title now  definitely this is once again coming from here   so it refers to actually this title over here  okay all right now after that actually here okay   this this part is fine now we want to assign a  value so what we'll do we do paper dot img url   or image url let's see this one image url equal  img url this one okay now based on the title name   actually we get the image name do you remember  so earlier we had the storage over here so this is a question paper image folder and over  here so we are passing this this name and then   as we pass this name it matches with any of them  and then at the end it returns the complete path   so actually the complete path is this one the one  you are able to see in the browser so pretty much   that should be the complete path because we  have many images so first we have to identify   which one we want to return or which image  path we want to return hopefully it makes sense   so we are passing the title based on that  title we return the complete image path okay and we assign each of this paper now  after that over here we do all papers assign all and then here we'll say paper list paper list  so it may look like that it is doing the double   work but if it has any older value it will  replace the older value with the new one so   there is no chance for duplication well my vs  code is not working well so i'm going to use   android studio if you are following along with  me vs code and then you're good to go no worries   now over here what are we going to do we are  going to the our home screen over here and   right over here now actually we want to import  uh install a new plugin actually for this home   page we want to install a plugin because we don't  want to use fade in image like that because this   is not memory efficient so i'm going to look  for a file which is called popspec.yml this one   uh actually not this one we got the wrong  one but anyway we'll look for one more time   pub spec dot ymo uh this one actually okay and of  course we can close this and over here make sure   that you install this plugin this is for cache to  network image so if your images are coming from   server and if they're big or if you have too  many users so you want to cache the image in   uh user's phone and that saves bandwidth  of your server it doesn't make unnecessary   requests to the server okay well now over here  we are going to replace that code replace this   section with cached network image now over  here cached network image saves bandwidth as   i said that and it takes image url so you have  to provide image url now this is coming from our   uh controller over here as we saw okay so now  this contains all the papers and as well as the   properties so we can access them so over here  we are accessing using index and the image url   then we also have a container over here now  this container is shown as the image loads   from the server uh there is a circular progress  bar okay and uh well you don't have to have this   one like this it's just a styling and of course  you have to have error widget if somehow the um   the your app fails to load images from the server  then this is the default fallback image okay   so that's how it works so i have a  dedicated tutor on that you can go   ahead and watch it anyway we're going  to run this and we'll see how it looks   so after running it let's see how it looks  over here yes it's trying to load and we see   like this but of course we have an error i guess  because this one we need to replace this over here   okay all right now let's go ahead and run it one  more time and hopefully would be good all right   so now let's go ahead and check it look at  this one uh looks like we need to restart   our app we don't know what happened okay let's  go ahead and do that and here is our app oh okay so what do you want now well now after  this actually we want to have a design like this   okay and we want to show image on the left and  then this text and then a little bit description   and things like this okay now as you see this  one is a very special widget because if you see   over here it's actually somehow overlapping  with the top one so here the whole widget   has to be inside a stack widget okay so that's  why we're going to go ahead and create a net   stack widget but before that we have to create  a new file we'll create a new dart file so   only this reason we are going to create a stack  widget but anyway so we'll open it up over here   and inside this will create a new file  and we'll call it the question card   dot dart okay all right now we are over here and  over here we're going to create a stateless class   and we'll call it question card okay now we need  to import the libraries the packages and over here   as i said that we are going to use a stack widget  okay because if we don't use the stack widget we   won't be able to uh make this kind of ui okay  now inside this we're going to have children   okay now instead the children first we're going  to have a row now the reason is why we're going   to have a row because this one and this sections  actually all are in a row but of course in the   row for the second children will have so the  second child will have a column widget okay   but it doesn't really matter for now okay  so over here we are going to use uh as our   cast image the one we had early actually so we we  can simply go ahead and pretty much copy all of it   so we're going to copy this one over  here and then we're going to put it right   inside this as children okay one of the child and  of course we need to import uh libraries which   it doesn't recognize somehow sometime so  we're going to take this one and put it here   okay and that should work as well as for this  one we also need to import it okay now this is   interesting so how to solve with this one okay now  we want to actually don't want to send an image   url actually we want to send a model question  model the model that we created okay because   do remember inside this actually we are saving  pretty much a model okay so we have four models   four question papers so we want to send each of  them from here to this question card okay now for   this reason now what we could do over here now we  can simply go ahead and remove this we don't need   this one anymore okay now we could go ahead and  call question card okay question card all right   but of course it doesn't take anything yet so over  here we are going to do like this here we do final   question card model okay now here we'll create a  variable and we'll call it model okay and that's   it and this would be a required one so inside this  we do require this dot model okay so this is what   we want and if we get it we can just simply remove  this one okay so each of the index whatever index   we get so that index for that index will have  a model and for that model we have will have an   image url okay now inside this we need to go ahead  and do it like this so we want to send a model and   what is this model now model itself is actually  coming from over here question controller and then   we do index okay all right and that should let's  see we do have a little bit of error over here so   we're going to get through it okay not like this  actually i'm sorry so here we'll have all papers   and then we'll have index okay all right now it  should work so as i said earlier so controllers   all papers contains model eventually eventually  inside this list we are saving model as you see   because it's coming from here question paper model  so we'll be able to access them using index so   as we have this object or statement actually  this statement over here actually it returns   us a model okay now that model we are sending  over here and now we know that our model has a   properties image url title description things  like that so we are going to access them like   this okay now let's go ahead and restart our app  and we'll see how it works whether it works or not   okay yeah uh yes it's working because it's loading  okay now our images are here and of course this   is what we want pretty much we want our images  to be there right okay on the left and it is   working great so we know that how it works all  right and right after this actually we want to   wrap this one around something well so for  the size but itself actually we want to wrap   it around the container widget okay so here we do  container and now continue itself we can give it a   color okay so we could do color now here we do  colors.red now let's go ahead and see how it looks   okay all right so this is our background color  but of course this is pretty ugly looking but   we'll fix it very soon and we want to actually  give it a border okay now clip right this one   should have a border so here we do border radius  and then uh we could do border radius border   border radius.circular and we'll apply 10 and  we'll see how it looks yes it looks like this   okay great now this container actually want to  replace it with colored box colored box because   colored box is more efficient than container  when it comes to just coloring something   because container it's a itself contains a lot  of properties but colored box only includes these   three properties which means that if you just  want to do a background color and then if you   use container you'll see that container has a lot  of properties actually let's hover over on this so   these are all unnecessary which makes compiling  and running slow okay so we want to fall back to   um color books because we don't need other  properties we just want to color it and that's all   now let's go ahead and save it but of course  we don't see any visual changes but when it   comes to running the app it would be very fast  okay but now this is not the color we want so   here we could set up our theme color okay  so here we do theme dot of context um   and then here we would do primary color and then  we would do with opacity say 0.2 okay well that's   what we want and now let's save it okay now that's  uh uh what do we have for now now if you come to   our app over here and here it's a light theme okay  this one now here we don't have a primary color so   inside this actually we can set up a primary color  okay now here primary color we could set like this   uh like this one okay you're right now let's save  it and most probably we need to restart our app   because this is a big change in the theme okay so this is what we have for now  okay so our this is our primary color   okay but of course this is  far from being much more perfect well along the way so that is the first  part that we did and now how about the size box   actually we don't want to get it like this okay  so here uh we want to do a little bit calculation   okay now we want to use get package to do that so  here we do get because get package has access to   the context and if we have access to the context  we know that we can get with right all right so   that's why we do that now here we would get like  0.015 percent okay and actually not really that   small and would also have height over here uh and  for height itself we'll do the same pretty much   okay so do get that width all right and  then multiply 0.15 and let's save it   and we'd say it's much smaller and because this is  what we want uh pretty much small like this okay   great and right after this actually we want  to set up a padding around this whole thing   now for this reason over here at the top we are  going to declare a const variable and we'll call   it double and the idea should be we assign  a value to it and that gets zero all right so we'll wrap this whole stack widget inside our  padding widget and then over here we're going to   replace this one okay with padding the padding  that we have created yeah now it's looking a   little bit better now we want to go ahead and  show this title and things like this okay now   we are inside this clip racked okay that's great  and right after this actually we want to create a   column widget okay and then we do children now the  reason why we wanted to column widget once again   because they're on the top of each other okay so  that's why we need column widget all right now the   first one should be text over here okay now how  do you get the text value we do model.title okay   so that should be our text value and let's  save it and see how it looks yes we see it   there and which is not looking good and for  this reason here we do constant size box and   here we do with like 12 and it should help  us and here we need this okay all right great   now right after this actually we want to create  another text widget okay so here we do model dot   description okay let's save it and this  is what we get but now this has this   overflow issue to get rid of this one we'll  wrap it around another widget which is called   expanded widget and hopefully it should help us  yes we see that it work now instead this column   we want to start everything from the beginning  so here for this reason we would do here we do   like this uh cross axis alignment and here  we do cross action element.start so we want   to start everything from the beginning okay and  which is already looking great now we want to   create a bit of distance between the title and  the description for this reason we want to wrap   it around a padding widget okay now while here  we just want to apply padding to only two sides   so here that's why we do only and here we do 10  now if you see that yes it's created a distance   and right after this here we'll have another  for bottom one okay so now yeah it's looking   good all right now for the row itself over here  we want everything to start from the top so for   this reason over here we would say cross access  alignment cross access element dot start okay   now everything should should be like this and  which is really looking great so now we need to   take care of the padding both on the left and  right side because if you see that it won't be   like this but anyway we need to set up some  padding on the both left and right side for   this reason we need to find our file over here and  we'll call it ui parameters this file now inside   this file actually at the top we want to set up  uh some variables okay so here we do const double   and mobile screen padding padding and here  25 so we'll have padding of 25 over here and   let's see we'll also set up another  one which we need card border radius   radius and here we do 10 okay right and right  after this actually we're going to take this   one and we're going to create getters over here  so here we do double dot get and here this one okay all right but we'll get error don't worry uh  we just need to remove this and we should be good   to go okay all right that's one way of doing  and i'll also get this one over here and then   do double get this one and then this one okay  all right and at the same time actually inside   this we can create a static method well static  property actually so you do static border radius   okay now here we do get and we'll get this on  card border radius so there'll be two ways to   access this so here we do border radius of course  we don't want to zero we want circular and then we   pass cardboard or radius okay if we just want a  radius like value 10 we'll call this one but uh   if you have circular border radius circular border  radius like this if you want circular border   radius then we can return this one okay so if you  want just 10 you return this if you want circular   border radius you return this how could it make  sense okay now here we do static edge inserts   edge in sets okay now here we do get now  we'll get this one okay and then here we do   const edge inserts all now inside  this we do mobile screen padding okay   so the idea is same if you just want 25 the value  25 you'll call this one but if you want all the   sides should have a certain edge in sets then  you'll call this one okay how will it make sense   now after this we'll come over here and then here  we'll set up set it like this so here would call   padding so and then we do ui parameters dot mobile  screen padding okay let's see if it works or not   okay yes so actually this is what we  wanted so in this case what we are having   okay let me close this we don't need this okay so we are having this one okay so it's it's uh  pretty much everywhere putting left and right   as you see even at the top so we have this uh  uh edge insets padding okay hopefully it makes   sense all right now we'll come back to this one  and i think there are a couple of other places   that where we need to change let's go go and take  a look at this one so we have done this section   okay and over here we are good as well   okay all right okay now we want to work on this  okay now for working on this actually we can apply   style to it so here that's why we do  style okay now here we do text style okay because the title is little strange and  this is not what we want right now i mean   title and description they're pretty similar  so we want it to have a different style okay   so now for this reason first we'll set up  color now inside this color we would do   ui parameters ui parameters we know that and then  we have is dark mode okay now speaking of this one   actually i'm going to go ahead there and i don't  we don't want to pass the context anymore because   we are using get x so this could be done  using get x directly so you don't have to pass   context to it now get x has this ability to  know it on its own so here we just do get dot   is dark okay uh of course i guess we need to  import the library at the top get i mean man   get x is beautiful it offers so many things okay  anyway so if it is in dark mode then we'll return   true otherwise it will return false and that's  all we want okay now of course uh right now   it might arise some of the issues because we need  to fix them so here we do we'll open our project   explorer and some places that we have worked  before where we needed to pass context like over   here as you see so we are not passing context  anymore and we also need to check over here uh ui parameters okay well now this is not the  thing though because this is a conditional   check which will take care later now here  this is the thing that i was talking about   and we can remove the context okay now it'll  raise issues in other places but we're going   to fix them so just to remove the context  because get x saves context globally so   and it keeps it keeps track of the context so  you don't need to worry about it okay and done   all right so now here we are coming here and then  we need to do a check whether we are in dark mode   or whatever mode or light mode okay so if  dark mode is true then we would do theme dot   off context over here and then here we do text  theme text then this one and then body text one   so it would be a little bit bigger right  and then for that one we get the color okay otherwise what do we do we do theme dot i'm sorry  of context and then we do our primary color okay   all right and let's see what's going on here okay  it needs to know that this body is not null okay   great and uh after this we're gonna set up  the font size so here we do font size 18 and   then we do font weight and font weight dot bold  okay now let's go ahead and save it and we'll   see immediately some changes okay now here's the  thing this could be a separate this should be in   a separated file actually because this style  we are going to use it again and again so what   i'm going to do i'm going to cut this one over  here and i'm going to open my project explorer and while right inside this theme over  here i'm going to create a new file   and we'll call it custom text styles dot dart  okay and then whatever we had earlier over here   we're just gonna simply return from it and we'll  return a text style so here we do text style   and then we're going to give it a  method method name so here we do card   titles actually pretty much it's about card  titles and all we need to do pass the context   and if we have the context then we return  what we had early and we are good to go   and import some of the libraries okay great  so from here we're going to call it so here   we'll call it card titles let's see this  one and all we do is just pass the context   and we call this one now this way this  section also looks cleaner and this card   also becomes this card title or title becomes  reusable okay now this should work across your different theme mode okay all right so we saved  it okay for now we can close this one we don't   need this now okay here we are done with this  title section and if you see over here at the   bottom we also have this uh icon as well as a text  things like that so we're going to work on them   and that's why we did this column right over here  right so inside this column we are going to have   more children but right now i think we can go  ahead with row so here right after this we do row now from here you understand the basic concept is  it has to be in a row right okay now another thing   we see that this should be a reusable widget  okay so we're going to make it as a widget   anyway so here we are going to have this one and  for this widget itself what do we want we want to   send the icon and the text itself okay and that's  all we want and to be able to do that actually we   should go ahead and create a new file for widget  itself so we're going to open our project explorer   and over here we'll create a new file now this  should be a widget so here we are going to do it   right inside this here we'll create a new file  and we'll call it icon and text well we'll call it   app icon text dot dart so here we're going  to create a stateless class and we want we   want to send this icon and as well as the  widget okay so here we do final icon icon okay i guess we need to import some of  the libraries and we'll also send widget   and widget will be sent as text over here now  inside this we do require this dot icon and   required this dot text if you don't know what  it is and how we built this kind of things   you should check out my other tutorial which  teaches you from beginners to advanced level   for ui okay but anyway now here going to return a  row as i said earlier that we need to return a row   now instead this will have children okay now  first one we want to use as icon and then we   want to have a sized box and for size box  here we're going to use a width with a 4   and right after this we're going  to use text text the one we send now if we are done with this so over here  now here we'll call app icon text now it takes the   icon now for icon itself first one we do now text  itself over here as you see it it shows how many   questions we have so this part is pretty dynamic  so that's why we're going to wrap it around   this interpolation i think they call it  and then over here we'll access the model   yeah and after that we'll have questions come to  this one okay but of course we cannot do it like   this because we are going to send a text widget  remember so here we're going to do this yeah great   and now we can save it and we'll see how  it looks and we do see that we have five   and as well as the icon here now the icon got some  problem icon is there but you don't say it now   the reason is because it's a dark mode and light  mode so here we can set a color based on the mode   okay so here we do get dot is  dark so if it is in dark mode then   we'll use colors.white otherwise  we would use theme color theme dot theme dot of context and then we'll use the  primary color okay and we do with opacity 0.1 now let's go ahead and save it so here we  see icon but of course that's very light   okay yeah here we see our icon and this one okay  now here we can tag a text actually so here we   could say five questions yeah let's see how it  looks yeah five questions so we have this icon in   text and the part of the text is dynamic over here  because we are in light mode so we see it as black   but we need to also take care for dark mode but  before we go ahead and do that actually we could   we should look for a file and the file  name should be let's see what we had early custom text style this one so this file now in  this file actually we are going to create a new   font size now for this one we just simply go  ahead and here we do detail text and here we do   text style and font size and font weight so we  want to have a better control and here we'll   have 12. okay now we would come over here okay  so now we want to apply style to this text over   here and for this reason we'll come over here and  then here we do style and we just created detail   text to remember and then we could do  copy copy with okay now inside this   uh would apply color now for color itself we can  just copy this one and we'll put it here i'm sorry we'll put it right here and then we'll hit enter  so our block of code is inside this and then i   think then we are done actually so let's go ahead  and save it and we see okay so it's like this but   it gives me the feeling that it's too light  so we're going to remove this opacity for now okay now it looks much cleaner and clearer as  well as okay so that was the first part of this   text icon and we also have this one over here  now for this is the time now to be able to work   with this uh we can simply go ahead and copy  this two sections or actually this section not   these two sections the whole icon over here app  icon text and we're going to put it right there   and let's see how it looks it is there but  here we could do a size box okay and here we do   with say 15 and i think it should give its enough  space between these two and it did now instead of   this one we can set up timer actually so timer is  an icon and that should look great yeah it changed   now the only thing we should work over here  is this one now here we actually want to   show the time now to be able to show  the time we need to work on our model   so let's find our model so our model name  is i think question paper model this one   now we do see that we have time and we also  see that time over here so which refers to   this variable now this variable is unique uh  this variable is everywhere in this model so we   all we need to do just refer to this one because  you remember so when you get data from server side   from firebase backend the value is saved over here  right so one thing we could do right here we can   just return the time like this okay so whatever  the time it is we divide it by 60 and then we   get minutes right so whatever the time it is we  divide it by 60 and then we get minutes okay so   this equation should help us okay now if this  this is a method so we can simply point to our   um let's see we don't need this one  so the files actually we don't need   okay so we'll get stuck we'll be here now  for this one we can just simply remove this   model actually we can remove all of it i  guess so here we'll just simply call model dot time minutes this one now let's save it and you  see it changed immediately beautiful okay now   one thing that i think i'm going to work here is  this one so i'm going to apply one so it's very   light so yeah okay great now you want to work like  this so each of the cards should have their border   and it should be a little bit different from the  background so how to work on this well now it   should be starting from this kind of background as  you see over here the background itself is color   okay so we need to work on this now to be  able to do that actually would come to our   project explorer and inside this widget over here  actually this is more like a widget we'll create   a new class and we'll call it content area dot  dart okay now over here we want to create a class   but before that we need to actually and then we'll  find our file which is called app colors uh yeah   this one and right inside this will create a new  scaffold color okay so here we do custom scaffold   color now we want to give a background color  background color like this which is different from   this background okay so this is custom  scaffold color and here we'll pass build   context and context and after that we are  going to return just simply color now first   we're going to check what we are so  here we do here parameters ui parameters dot is dark mode okay well if it is dark mode   then it would return one kind of color so here  we do color dot from argb and here we do 255 20   46 and 158 so pretty much like that yeah okay  all right it's not then would return a different   color once again const color dot from a rgb and  the first one is two five five second one is two   two one third one is two two one and pretty much  same two two one okay so that's what we return   but here so we are returning a color so we need to  do like this so this should be a custom scaffold   color which will also be returned as based on mode  okay now we'll come over here because over here   we are going to use it and here we'll create  a stateless class and we'll call it content   area and let's import the necessary libraries  but we don't want to return this actually we   want to return material material okay now what is  material i have a tutorial for that you can check   that out now over here definitely we want to do  border radius first and we do const border radius border radius dot circular this one  and then inside we just want top border   so here we do radius circular 20 now actually that  would refer to the top border like this okay great and for this reason actually we just want to  have vertical and then the arrow should be   gone we don't want everywhere okay great now it  has this clip behavior and we'll set it to clip   dot hard edge and then we are going  to use a type and the material type material type dot transparency   all right and then we'll use child uh cal  actually child and here we are going to return   inquijat now inquisit uh is better than containers  sometimes i'm going to explain soon next part   so bear with me with a better example so  here we do color now here we do custom scaffold color this one and all we are doing  passing the context okay and after that i think uh   we can also set up padding now for padding itself  actually we want to check if we want to be padding   or not which means if we want to add padding or  not so here we'll add it as bull so the one calls   this widget that one would be selling or applying  this content area adding information true or false   and we also want to send a widget to  it so here we do final widget and child okay great and after this we  want to do things like this   so required now for required we would only do  this dot child okay now add padding i guess we   don't want to do it required we want to do  it true so that you want but in that case   so this would be the default value okay but we can  pass anything we want now here we'll just check   add padding if it's add padding is true then okay  let's do something like like edge inserts only   over here and then here with the top and i think  we did like mobile screen padding ui parameters   mobile screen padding this one and i guess we  don't can't use const actually and we also have an   issue over here edge inserts well i think i'm  going to go ahead with this and set it to zero   so if we want to be apply padding  so this is the condition right   then go ahead and apply the padding otherwise  set the paddings to zero so this is the condition   and let's see okay now let's go ahead and check  it there and okay so here this mobile padding of   course returns edge insets but here it wants a  value but this is an object so that's why it's   not working now here we could do like this so  const double mobile screen padding then here i guess so let's see so here you could do get   and then here we can just simply return this  one and then we'll be returning value okay   now this is this should still work so in  this case we just don't want this okay   and this value alone should be because now it  become a global variable and which should work so let's remove that okay great yeah so well  it makes sense so if we want to edge inserts   we can access this one as an object this one has  an object otherwise we'll just access this one   okay all right and over here we're  going to do left again uh mobile actually i can just copy this one and put it here   and then would do right and this one okay so with  this actually we are pretty much ready to be used   and let's see i guess inside this we have to  put a child the child we are going to pass   in so he would do child child so this  is the child that we are going to pass so now let's come over here inside this scaffold  now we are going to wrap this one around a widget   and the widget name is content area the one we  just created okay and then now let's go ahead and   save it and see the result yes it already changed  a little bit and we can say it and over here so it   had applied padding as you see the default is  it true okay so that's why it becomes smaller   but actually in this case i guess we don't want  to send padding so for this reason we'll come   over here and do padding false actually we don't  want to apply padding but it become reusable but   of course we are not happy with the background  color the reason is let's check over here   and i guess actually i have used the wrong color  and i'm going to replace this with this color   now let's save it yes it looked much better  right now okay all right so while that's working   and still more work to do now with  the content actually we are done   now the next part we should focus on this one  over here now this padding we want to wrap it   around another widget and we'll call it container  and right inside this whole set of decoration   and we do box decoration and then over here  we do border radius okay here ui parameters card border radius okay so this is what  we want to do but of course we don't see   much changes the reason is it applied at the  top but we don't say it yet but we'll see it   soon and after this we want to set color  now over here we do theme dot off context   dot what color no actually we want to apply the  card color for each of them and now it looks   better as you see so we'll come to our app  light theme over here and here we'll set   up a color here we do const color and we'll  call it card color and then we do from rgb   from rgb now inside this will have two five five  two five four two five four and two five five   and this is the color we want and inside this  actually we need to change the color as well   so here it send card color okay now let's save it  uh i guess we have to restart our app now we are   over here images are loading okay now so this is  the color that we are talking uh yeah it's still a   little different but yeah now it works so now we  so this so this is the color that we're talking   about in a sense that we have better control on  the color because everything is set inside this   now you do see that now this section is pretty  much looking this section is pretty much looking   like this and this background itself is also  this background because here at the top we   have venue and items so yeah that's why we  don't say it exactly but you get the idea   that they're very similar right as you can see  from here very similar now we'll go ahead and   draw this one over here now to be able to do that  once again we need to come to our card section   remember earlier we had this row and after  this row we want to set up a position widget   so that we can set it over here okay  so here we'll create a position widget   and inside this we want to child as  a gesture detector gesture detector   and then over here we'll have another child  and this child would be a container container   and inside this will have another child and  for this one would use icon and icons dot   well now for now we're going  to use a random random icon say   this one but sooner would be replacing  this one and what else okay so now let's save it and let's see if  we can say definitely we don't say it   if we don't say it we could do one thing  over here we could just simply go ahead and   set a color for test actually that where  it is colors dot red and so that we know   where it is so it is here but this is not  where we want to set it so for this reason   here we can apply position so so bottom padding  so whatever we had we are applying at the bottom   and of course we are not applying padding  to it so remember this has a value of 10.   so that's what we are applying to it so it came  down a little bit beautiful but if you see this   original design we want things like this actually  okay but we are working on it uh there okay   now definitely here we could also do a  decoration okay and then we do box decoration   and then after this we can apply border to it so  we do uh before actually go ahead and apply border   let's use color and take a look so here we do  theme dot of context and then now we're going to   apply our primary color for this one and it  looks like this of course now if we take it out   so it looks much better i mean  it's whiter right now right okay   now let's come inside this and try to apply  padding to it okay and here we do const   all right and insert symmetric so  here we do vertical 12 and horizontal   20. now let's save it so it made it much bigger  and this is what actually we want as big as this   one but we see that it's still at the top so here  we could be clever so here we can apply minus to   it and it would put it down at the corner now it's  looking better and now inside this box decoration   definitely we can apply top we can apply  border radius border radius dot only   so here we need to set a border but i want the  border to be from here now i'm going to get from   here create a double get this one and then this  one once again but of course we can remove this   let's save it it should be working now now here we  can just simply call card border radius this one   okay and let's see okay but we need to wrap  it around actually border radius not really   like radius actually radius.circular and inside  this and let's save it yes so it's looking better   then we can also apply it to the bottom right over  here radius dot circular and pretty much what we   had early okay so now there is a bit of problem  actually we wanted to push it to this edge but   here it is at the edge but here it is not so let's  work on this okay here we need to work on this one   position and make this container down for this  reason we'll come over here and we'll set up a   property which is called click behavior well i  think i have to use small letter clip behavior   and then we'll set clip to none so with this  uh it would put it'll be pushed down and we'll   also see the complete section of this widget great  and right after this we need to work on the icon   so we'll use our own icon so let's go to pop  spec.yml file now over here right after this   assets you need to go ahead and have this format  for fonts itself here we define our own fonts and   font family so you can name it anything you  want and then we'll also use the font that   is called app icons.tff now you can find it in the  folder over here in the icons folder app items.tff   okay so we'll be using our own customized form  and for this reason actually we need to go   ahead and create a class a single tone class a  single term class responsible for showing icon   so here we'll call it app icons now here we are  going to create something that is called single   tone okay now what is single turn single tone  has only one instance throughout your app okay   so it makes your only one not the second one it  does it to have a lot of instances which is not   necessary so you have only one instance and you  can use them throughout in your app but of course   those properties that it should point  to they should not uh be changeable   now here i'm going to declare a property which is  called static const and then we can say font fam okay and after that over here we are going  to create a variable that actually we want   to return so here would call it icon data and  then so here we'll create our own icon data   and then inside this we'll send our icon  code so oxe 808 i think this is what we want   and then after that we'll create our font family  now here our font family is font fan the one we   created then we'll return and i guess we need to  import a package otherwise we'll get this error   now this is gone now with this this is our very  simple single term class where we have a private   constructor which also means that you can't create  an instance because the constructor is private as   you work with this like this this underscore okay  so this kind of format where you have a class name   and then you have your constructor is private  and of course you have some static properties   inside this so this is called singleton class  now as we created it so all we need to do we   need to go ahead and call this and then we  can call any of the properties using this   class name all right so we'll come over here our  question card and we know that inside this we have over here so we can just simply replace  this because our class name is app icon   app icons this one so this is a singleton class  and then we can refer to trophy outline okay and   that as simple as that one and if you save it  we'll see that it changes here let's save it   yes it did and this is what i was talking about  and this is what we wanted it's beautiful right   so over here we created our own single term class  but are there any other examples that we see in   flutter that that is singleton yes there  are tons of singleton example one of them   is firebase instance the one we create so let's  take a look at this instance over here we see   we have firebase firestore instance and that's  a single tone instance of firebase firestores   so there are a lot of instances in flutter app  you should explore them anyway it's not good   practice to use too many single tone classes  or singleton class instances in your app   because they are not good for unit test so you  need to take care of that one apart from that   it's really handy beautiful and keeps your  code simple okay great so now let's see   what we're going to do next okay so now  we're going to work on this top section   and with this menu this text and icon and the big  text like that well now as you see that it has to   be in a column format and part of it could be row  over here but basically it's a column format okay   anyway so this has been done inside this over  here so we need to do it inside this well one   thing to confirm that now this contain area is  showing this one right so we'll have two sections   so one section is this one and the section is this  one of course this is what we are going to use   and a draw right now but these two sections the  top and bottom sections actually they should be in   a column but we don't have any column yet okay so  we need to introduce column now to be able to do   that first i'm going to cut this one and i'll wrap  this on around the column so i would do column   then here we do children okay now inside the  children this is our first section okay now over   here we want to have this one okay now we might  have an error but we'll take care of that soon   now why this error because inside this column  we want to wrap this around another widget   which is called expanded widget okay so let's  go ahead and wrap it around expanded widget so here we do expanded yeah now let's go  ahead and save it yes it's there and now   inside this we are going to do another widget  now that widget is definitely also a column   because as you see over here this is in a  column format so now we do column over here   so how to draw this one so now  let's go ahead and draw it now   first we want to draw an icon okay here  we do icon i can start icons dot menu menu well whatever it is there we'll just draw one  and then we do color and then we do colors dot red   colors dot red okay we'll go ahead and save  it and we'll see if we have any changes or not   well it should be there at the top but we don't  say it now how to get rid of this problem now   to be able to get rid of this problem we can wrap  the big column inside a safe area so that we know   and we are able to view what's going on so here  we just do safe area okay now you'll see that   yeah it came down over here okay now at the  same time you'd see that it's looking more   like this so this is our color the one we had  and this is the color that we created over here   and this is the rest of the top but of  course we are still working on that one   but now you do see that this circular border it  already showed up right and of course we didn't   apply any border over here but this is not what  we want to do the icon because we want to have our   own custom icon and for this reason we'll look for  the file that is called f icon i think f i icons   let's see yeah this one so over  here we created a single tone class   so here we'll create another icon so here we do  static const icon data now here we'll call it   menu left and here we'll pass icon data  now here o x a 805 and the font family   okay now whatever we have created early so  we're going to use that one okay and with   this we are good now let's go ahead and save  it and right after this let's come over here   uh for now we don't need the card we're gonna  work on this so here we can just simply remove   this we don't need this one anymore so here we  do app icons dot menu left okay now with this   we'll see immediate changes so this is what i was  talking about okay now we're gonna move it on the   left side so for this reason we'll come inside  this column and here we do cross-examination   and then we do cross-access alignment.start but  at the same time we are going to take this one   and then we'll put it up there and now see now  the reason is uh because this column controls the   this one and the whole the bottom part so that's  why it went down there okay now we want to apply   a little bit of padding to this column to this  column so for this reason we'll wrap it around   padding widget and let's see we do have padding  yes we have padding now over here we do have   symmetric but we don't want to apply padding like  this we have a constant which is called mobile   screen padding this one so this one the one we  have defined early but in this case we need to   remove it okay now you see it's already looking  great but we'll change the color very soon   don't worry about that one now that was the first  section inside this menu inside this section over   here and which is looking more like this as as  you can see but it will change the color all right   now right after this we're gonna do we're  going to uh do a size box over here size box   and here we do height 10 okay and then as you  see that we need a row for this and this text   itself so here we'll introduce a row let's see  where we can put a const for now we do this   and now over here we'll have a row and then  we'll have children now inside this row as you   can see the first one once again should be an  icon let's see why it's being cranky over here   okay now you can't put const here so that's  why it's causing error but you can put here   and here okay great now instead  there's once again we want this icon   so let's go ahead and put it there but of course  this is not the icon we want we'll change it later   okay now right after this we want to do a text  over here now the text what should be the text   now for now we can say hello friend okay and then  we'll apply style to it so let's go ahead and do   that style now remember we created an object uh  with the detailed text which is this one actually   and then we do copy with this one and inside this  will change a lot of the things and for now we do   color over here and what is  the color remember we have a   variable that we created on surface color that's  all now on surface color i do guess that's white   yes so it only visible for now even if we put it  like this and as you can see that it's not visible   but one thing i mean the text is here actually  it's not visible so we need to change that one   but before that actually even after everything  we can we need to change the background color   for this one okay so now let's go ahead and  set a background color for scaffold and we'll   see how it looks so here we do background  color colors dot just a blue okay all right   okay so now it is applying the color no problem  okay and but we want to apply gradient color but   gradient color you won't be able to apply  over here because it just takes color so   the idea is we need to wrap this scaffold around a  container so we do it using a widget so here we do   container container okay all right now i'm going  to save it and let's restart and see how it goes yeah okay great so but of course we're going to  remove this if we remove this it'll come back   to white now over here we would do decoration and  box decoration and then we know decoration takes   gradient so here we do main gradient this is  the function that we have created early now   we can just simply go ahead and see this but  now we see it doesn't work now that's because   that's inside this uh scaffold okay now if you  remove this and if you try to do color like this   i'm sorry color so you do colors.blue and  you might see that it still doesn't work   because once something is inside the scaffold the  scaffold section takes the background color itself   whatever the scaffold has default so it won't  be affected by the outside color or container   so what to do in this case so in  this case we can just simply remove   the scaffold now to be able to do that we can just  cut this one over here and then we remove this   and then we put it here and now let's save  it yes we do see that it's taking effect   okay but of course we we have this underline now  that's because the we are not inside scaffold if   you're not in such scaffold and try to draw then  you will have underlines so in your app you should   have at least one scaffold if you have no scaffold  you get this yellow underline okay now of course   we can uh apply scaffold for this one the widget  we have over here hello friend but we'll do it   later when we work okay so but you get the idea  why we get this because we don't have any scaffold   in our app because in your app you should have  at least one scheduled now instead of this color   we can use decoration and box decoration okay now  let's save it now it looks beautiful and this is   exactly what we are working like this over here so  it's getting more and more close to this one now   by saying this one we can also remove this color  red which we don't need over here we can save it   and then this one we can save it as well okay  all right great okay so now this is the time   to make more changes well the first change we  want to do is this icon itself because we don't   want to have icon like this we will create a new  icon and we'll call it peace but we don't have   the icon so we'll just simply go ahead and copy  this one over here and put it here and instead of   5 we're going to do it 6 and here we'll  call it piss okay now let's save it and   come over here and we'll see that it did  change okay all right now what else we could do   okay now we see that there is a distance over  here at the top and at the bottom but we are too   close so now here we're going to wrap it around  a padding widget and we'll just simply call it   padding and then we'll apply symmetrical vertical  padding to it so here we do const uh add insects   symmetric and here we do vertical like 10 and  now let's see yes so there is a bit of distance   great now at the same time if you take a  look over here over here we have paddings   and we have paddings as well so we need to apply  padding now that padding actually goes for this   section over here the expanded widget okay now  we'll wrap this wrap this widget around another   padding object okay and instead of all would do  symmetrical over here symmetrical and here we do   horizontal now let's apply it padding of eight  beautiful so as you're working you see that's   looking much more similar with this one next we'll  see how to do this text over here now to be able   to do that we can just simply come inside this  one and right after this padding over here we   could do add the text over here and we'll say what  do you want to learn today all right so that one   and right after that we are going to apply  style to it now we do see that we have at the   top let me open it up this padding and over here  we have this one little text let's go ahead and   check it so this one text style font size now  we're going to create a new one uh let's see   font color now it does look a bit of strange  because of uh we are missing other elements but   we'll fix that now over here we would create  a new one and we'll call it header text okay header text okay now over here we'll have a  bigger size so here our size would be say 22   and then we also want to apply font  weight to it so here we do font weight 700 uh 700 and then here what do you do  uh we can also set a color for this so   it's a on surface color text this one so  that's what we want to apply okay once   again we do have some issues because  we don't have scaffold for that one   and once we are done with this we'll take care  of that one so now here we do style and header   text okay all right now let's go ahead and save  it yeah that's what we see now okay and it's   getting better the next we'll see how to take  care of this yellow lines below there alaikum   so here we'll take a look how to remove  these yellow underlines over here   now you have to know one reason why the  yellow underlines are here for the first time   that's because your app is missing a scaffold or  a material widget now there are two ways to solve   this you can wrap your main container or the main  widget of your f in inside scaffold or material   widget now in our case we are going to wrap this  container which is our main container in our app   we're going to wrap this around scaffold so here  we do scaffold and then we do body and put our   main container which is this one and after  that we'll see that the error has gone now   this is what we are looking for okay so this is  the usual look so if you miss scaffold or in the   root of your app then you might get that yellow  underline so hopefully it makes sense thank you   hello everyone assalamualaikum now we'll take  a look how to achieve this effect over here   now as you see i have a drawer zoom here so you  click on this button so it zooms out or zooms in   so this is the effect that we are going to achieve  now we'll do that on this app right now this app   doesn't work like this so we have to do it on  this app so if i click on this nothing happens   okay now here one thing we have to know  that over here this is the view so this is   the scaffold that is showing this whole view  over here so as we want to click on this one   we want to have this effect right so we want to  move the view to the right and make it smaller   and as you click we'll come back now to be able  to do that first we need to go ahead and install   our plugin so let's find our pop spec.yml file  so here we'll look for spec dot yml file this one   and then here actually i have already installed  this plugin so just go ahead and install the   plugin over here the one i have and click over  here get pop and you should be good to go all   right so once you have done that one now inside  this inside this widget i have this container   over here now we want to wrap this container  around a widget that we set is called now or   zoom that widget is called zoom drawer so what i'm  going to do over here i'm going to wrap it around   or i'm going to cut this one over here and then  we i'm going to import zoom drawer this one like   this one okay all right now we need to return over  here and it takes few information okay all right   now if you hover over on it let's see what  it's asking us to do it says that okay   so here we need to have a menu screen what is  menu screen menu screen is this one over here   so as you click on this so you see the  menu so this should be your menu screen   now over here what are you going to do we're  going to remove this and for now i'm going   to put a text over here and i'll say hi there and  then over here we do color uh we do style actually   style text style and for now we just  put in random colors so we do this one   right okay and we do see that we need more  parameters now here it wants us to put main screen   what is our main screen main screen is the  container section the one we just cut so we're   going to put it over here now with this looks like  we're almost ready but anyway now let's go ahead   and save it and see how it looks okay so this is  our app over here we're going to click on this   and let's click over here well nothing happens  because we are not toggling on a button so we   have to able to be toggle on this button as  we click it will take out the zoom drawer   and pull it to the right so we need to our we  need our button to be able to work on this okay   so now there is a button that i have in this  container inside this container because remember   this whole container is showing everything on  this screen over here now this icon over here   app icons many left so this one is showing  this button over here the one you see so this is the button that we see so we want  to make this button clickable now for this one   you can wrap it around any kind of widget so in  my case i'm going to wrap it around widget that   i have created so it's called f circle button  now this could be gesture detector or ink wall we   know that this button takes a tap event so that's  what we are doing over here so now we need to pass   an event to it that as we click on this something  should happen now what should happen actually we   want to toggle this button now to be able to  toggle this button we need to come over here   and we need to find our controllers okay now  inside these controllers what we're going to do   we are going to create a new file over here  and we are we'll call it zoom drawer controller   dot dart okay all right great now inside  this we are going to create a class   and we'll call it zoom drawer  controller and extends here get x controller so because we are using get  x so we'll extend get x controller now inside   this here we'll create a method and method name  could be actually anything and we'll call it   toggle drawer because we want to call this  function as we click on a button okay so   that's what we are doing over here now over  here inside this controller first we need to   instantiate a zoom drawer controller now let's  go ahead and do that so here we do final zoom drawer controller now here actually i want to  create i want to get an instance from the plugin   the plugin that we have installed just now so for  this reason first i'll change the name of this   class and now over here because the plugin gives  us a controller the controller name itself is zoom   drawer controller why i did that because otherwise  i'm afraid this name would conflict with the name   we had earlier here now the names are very  separated so if you hover over on it you see   that it's coming from our plugin flutter zoom  drawer so this is the plugin all right okay now   as we have the instance over here now here we'll  call the instance zoom drawer controller then it   is a method the method name is called toggle okay  and then it calls another method which is called   a call and that's all we need to do and after that  we need to call update and we should be good to go   now we should come over here inside this home  screen now over here this is our button now   this is our button so if you click on this you  know that it takes on tab event so this is my   function over here it could be anything but  over here inside this i'm using this on tap   event so this is a function this is a callback  function right and we are passing it to this one   now what are we going to do we are going to come  over here and pass the event so now here we want   to pass on tap on tap method now what we could  do we could do it right after here over here   on tab now we want to call this method the drawer that we created the controller that we  created now to be able to do that first we need to   use get view okay because if we can use get view  now then using get view i'll be able to access the   instance i would be able to access  the methods or properties of this   controller over here without directly creating  directly creating any instance of this one   so that's why my class over  here home screen this one   simply can do get view so over here we do get view  okay and inside this will inject the controller or   the get view type it's not injecting actually the  get view type is my zoom drawer controller okay   so it it extends this class over here okay now  as we have done it now we'll come over here now we do controller dot toggle okay so as you can  see so this is the beauty beautiful thing about this get x get view so if your class that extends  get view with the certain controller type then   if you have any instance of that controller  you can access them simply using the controller   keyword which also means that you don't  need to directly create an any instance   okay now right after this you're going to  save it over here and looks like we do have   an issue and let's see what's going  on okay so we can restart over here okay and looks like it should work this time  now we come over here and it says that my   drawer zoom controller cannot be found to solve  this issue we need to come at the top over here   now over here we do see that we have zoom  controller so i'm going to cut this one now over   here and then we'll return a get builder now get  builder once again we'll take my drawer controller   my drawer zoom controller and then after that we  can simply return builder and then we'll return   whatever we had earlier so do return my drawer  controller okay all right now we do like this you   know we still have the error because actually  zoom drawer we should have it should have an   instance of controller so here we do controller  and then we want to access whatever we had zoom   drawer controller now this is the instance that  we have created early inside this okay so now it's   inside get builder which also means that inside  this get builder we can use or we can access the   properties all the methods just like  this now let's go ahead and restart it i'll click on this and we still have error now the  last part we have to do which is called injecting   and so far we have done everything but we haven't  injected it so what do we do we'll go ahead   and look for our cl app file which is called  app routes and i think this is the file that   we want and right inside this we need to  inject it okay now here we do get output and then over here we do my drawer zoom controller okay and we are good to go let's  save it and this time we won't have any error   okay let's restart everything and we'll see  how it goes okay and then we click over here   and we see it just jumped away beautiful  which means that it's already working okay   all right now we don't know how to get it back  because we don't have any button but of course   if you looks like if you drag this it comes up  okay and this is not what we want to do but yeah   it is beautiful it's already working now there are  some other parameters that we can set over here   so the first one is called border radius so  let's go ahead and set up the border radius   we do 50 and let's save it now let's click on this  yes you see that it changed over here all right or   looks like it's just a dragging okay all right  so next we do show shadow show shadow over here   and we'll do it as a true and it would make  it beautiful let's go ahead and do it but   the shadow is not clear over here because our over  here most really no coloring or things like that   but anyway and after that would use angle  because you have to use zero zero angle   now let's save it and this time we see  that it works much better just like this   all right okay great wonderful and style now here  we do drawer style dot default style it does have   a lot of styles that you can use okay all right  this is the default style and what else okay and   we do have this menu screen over here now we could  do actually a background color over here so here   we do background color and the colors dot white so  we'll go ahead with this one and then with opacity   and we'll would say 0.5 let's save it and this  time okay hopefully the color change a little bit   and after that slide with okay now you  want to mention how much you want to   slide inside the screen right now it's going  too much so here we do media query of context   and then over here we just size that width  now over here we want to slide to 60 percent   of the width okay all right so now  it's a little bit bigger but of course   you could also go 40 percent and you will  see it looks like this okay it's up to your   preference that how much you want to slide  to beautiful and so far it's working well okay now what is the other part that we  want to do okay we want to work on this   background now zooming is working  but how to work on the background   now over here actually we want to replace our  background this is the many screen okay so this   is where we want to work now to be able to do  that we would come to our screens over here now over here inside this home  i'm going to create another screen and i'll call it many screen screen dot  dart okay all right now definitely first   we'll go ahead and create a status  class and we'll call it menu screen   and let us import the packages the one we need  all right now over here we are going to do with   and what is the width we do as much as possible  so we do max finite over here and right after   that we do decoration we know we already  have decoration so here we do box decoration   and then we'll simply do gradient and then  we'll pass main gradient main gradient   all right now we can just  simply go ahead and replace   this text over here which is actually not  working at all but here we do many screen okay all right all we need to do we need  to import it i think i have a title now   it worked somehow i had a type over here  and that's why it didn't work okay great and now let's go ahead and save  it and see how it looks like now it's already looking great  actually if you see that over here   i do see the background okay wonderful now  you can click on this and you can go back   now right after this actually we want to set  up a button for this one over here like as we   click on this we want to be able to see a button  certain button and we'll click on the button and   we'll see that it goes back okay now for this  reason we'll come over here and set up a button   all right uh but before that actually we do have  some of the tiny settings that we need to go ahead   so let's go ahead and do that okay now first thing  we're going to do is a child over here now for   child we want to set up a special theme over  here now let's see what's going on uh we need   to improve the library let's go ahead and do  that again autoboy and we need child again   otherwise we'll have tons of issues what else and  child and data now over here actually for data   itself we need to use some theme data now let's go  ahead and do that and inside this will use a text   button thing because we'll have text  over here and for that reason we are   setting up the text okay now here we do  text button theme data actually this one   and inside this will apply style and here  we do text button this one and style from   and inside this we do primary primary and  the color should be on surface text color   so we're setting up the text color for this page  the one we are going to create right now and   right after this we're going to actually create  a safe area and then over here once again we'll   have char and inside this will have a stack widget  now why stack widget if you take a look actually   there should be a lot of overlapping now if we see  the earlier design over here okay it goes back so so it does somehow overlap onto each other  like this one so we want it to be a certain   fixed position so that's why we need a stack  reject so regardless wherever it goes it is   always there okay so it's overlapping with  the background because it would be in a   fixed position so for this reason over here  we would use position widget okay all right   now inside this position widget we'll use the  widget called now if you take a look over here so   this one this one would be using as a widget okay  but now flutter has a default widget for this one   you don't need to create it and this  is called a back button so that's what   we are going to use inside this position  widget okay it's called back back button okay all right great so as you did it you see  android studio automatically recognized it okay   great and up to that inside this you can set  up a color so in our case we do colors.white it   doesn't really matter we want our button back back  button to have white color and then we want to use   unprecedent but of course this is not necessary  but you can go ahead and do that so in our case   we are going to use for now we'll just simply go  ahead and do print over here and we'll say you are   tapped now since we're going to return over  here and this part doesn't actually support   cons so we'll remove that one first okay now the  error is gone now let's go ahead and run our app   okay so this is our app over here now let's click  on this and now let's click on this one and we do   see that this is our app button over here but  this is not where the button we want okay so   we need to change the position for this one so  for this reason over here we are going to set up   top and right so top zero   and right zero and let's go ahead and save it now  it works okay so it is always there as you see okay now this is looking weird because it is too much  to the left okay now for this reason i actually   want to set up a ui padding now if you come over  here inside this container it does take padding   so here we'll apply padding and here we do ui  parameters dot screen i guess that's the mobile   screen padding okay so now if you click on this  of course it doesn't work you can't go back if you   click on this one you can go back now of course  we still need to work on this length over here and   for this reason instead of 40 actually if you do  60 that would suit it much better as you see okay   now once again the button doesn't work because  we don't have any on tap event for that one   so over here this stateless widget  actually wants to access the method of   this controller gatex controller over here which  is called my zoom controller so it wants to access   this method over here as a property and how can  we do that now one of the ways to do it once again   you can do it instantiate a controller object and  then using that object and dot operator you can   access this one but this time we do it differently  so for this reason over here we're going to remove   this one and then we do get view and inside  the get view actually we use the type of the   class or controller which is my zoom drawer  controller this one is get view actually well   if you click on this you will see that get view  extend stateless class so previously over here   with stateless class and we just replaced  that class using get view so get we internally   replace this class and at the same time it  also takes a class type as its parameter or   type as you can see over here and if you come at  the top it says that come at the top you will see   that it says get view is a great way of quickly  accessing your controller without having to call   this one so if we use get v we don't need to use  get.find because if you are using get x for a long   time you know that you have to use get defined  to access your controller and its instance or   method so yes yes get view is a great way to  optimize your code and codes readability and   as you have this one because get view extend this  controller right now so you can access the methods   or properties inside this class over here so now  we are going to access it and how we're going to   do that over here we do controller as you see you  can access controller directly and then if you   look for toggle toggle drawer actually as you see  it's right there okay so this is how you access it   now you just simply return like this let's go  ahead and save it okay now okay we make sure that   it is here okay this is the method and we need  to restart our app to be able to work on this so now let's click on this and now click on this  one and click on this it should go back okay so   that's how you use get view without directly  creating an instance and access the method   for that controller using this controller keyword  hopefully it makes sense so far we have done great   job doing this one okay now if you're going to  take a look at our original design over here we   have much more than that and over here actually we  have this uh google account name this is actually   coming from google account your github source code  contact web email so a lot of these things that we   have to do okay now for this reason first we need  to go ahead and set up this information cut in our   controller because controller will talk to  the google server and then based on that we'll   get information and if we get information  then we'll show our information over here   like that or otherwise we'll say hey log in first  like that of course we'll be able to sign out if   we want so now to be able to do that first we need  to come to our zoom drawer controller right over   here and inside this actually want to create some  methods well just now we have done this one method   but actually we want to do more than that now  here we'll have a method which is called sign out   now of course this method would call a  firebase method eventually or firebase   google method actually for signing out but  we don't have that mechanism yet we do that   the same as we'll also have sign in method okay  now the same here so we'll call this function   like from here as you click on a button so this  function would get called like that okay and as   we saw earlier that we also want to show our  like github account google source uh source   code account or contact me or email so we need to  set up all these things okay now here we do void   github or i would say a website if you don't have  github so that could be your website all right   okay and then over here we would do email  so let's go ahead and do that now you want   to send email to your uh you want your client to  send you email so here we do this url object uri now over here actually we need to return now  as you see this actually comes from dark core   so it is a built-in function in flutter so  you can directly use it now inside this over   here actually you could do scheme and for  scheme here we'll use male 2 if you used   sending email from a website  actually this is pretty much the same   and over here you want to send email to this one  okay and that's all that's as simple as that one   all right and then after that actually we want to  if someone clicks on this actually we want to open   a web browser okay like that because of course our  app doesn't have any system directly send email so   it will it will open email client from our mobile  app okay or from our mobile device so that's what   we want to do now for this reason right after it  over here we do like this we'll create a method   and we'll call it launch okay now of course the  method doesn't have body and we need to pass   an object to it that object is coming from here  so here we do final uri and we'll call it email   launch ui like that okay so this object is going  to return something this method then we'll save it   over here and the type is uri now we'll give this  method this type but of course we don't have this   method so now we'll go ahead and create one and  over here we do launch now here it takes a string   so here so eventually so this becomes a  string actually now over here we're going to   so we want to launch uh the email client  from here but how to do that actually for   this reason we need to install a plugin so  let's go to prospect.yml file and right after   this actually create install this plugin now here  you need to see that i also install firebase auth   which you need to do because we are going  to use it very soon after that go ahead and   install this plugin okay and then do get  pub and you're good to go it would install of course you might see an error it's okay  because our file has some problems in in this   one over here okay all right uh close this one  we don't need this one okay great so hopefully   it's been installed so now we'll come over here  so now we'll wrap it around this if statement and   i will put it right here after that we're going  to do something now what do you do here we want   to throw an error and here would say couldn't  launch url okay now here you say you could not   launch url also the you are all just  inside now what what we could do over   here now over here actually we need to do a  weight a weight yes and if you did a weight   uh and then inside this actually you need to sign  this url because this is the url that it should   try to launch and what else so over  here we have this and we need to actually we need to have a sink over here a sink  and then we need to return a future future void   now over here we'll set it to false now if you  hover over on it you will see what it says over   here well it says that if you set the url or if  it is set to false the url is opened in a default   browser of the phone so we are going to open  this email client in the default browser okay   although it makes sense so that's  why you set it to false over here   now of course we want to pass a string to  it so that's why we'll convert it to string   and the arrow should be gone okay now this is  the basic setup for uh this menus over here but   of course this is still in the controller and  we have one more steps to do actually i think   i will do it right over here now that's called  unready method so here we also want to do on ready so we could do some initialization like  this okay all right so now here we need   to do the initialization what do you  want to do of course you want to get the   user from the firebase so we want to know if the  firebase user has been there or not okay so that's   what we want to do now these are all this to do  that we have to do very soon uh we just put the   skeleton over here so we need to work here here  here here and this has been done okay and now   next we need to go to our auth controller actually  the auth controller be actually be responsible for   getting the user from the firebase and over here  they should just interact with this this menu   button over here okay so now we'll go to off auth  controller so look for the file auth controller   controller and yes we have this one so this is the  one we are talking about all right so now at the   top over here we'll create some variables okay so  here we'll create firebase auth variable firebase   firebase off and we'll call it off okay now it  needs some initialization we'll do it later so   we do light over here and after that here we'll  create a user and the variable type is the final   and it would be actually coming from rxn now over  here we'll have user but of course uh not like   this okay let me do it like this so here we'll  have rxn and the type is user and that's all we   want now we need to put it in a variable so here  we do final user okay all right now if you want to   get firebase users like if you hover over on it  actually this is this class user is coming from   firebase and if you're using getx you need to  put it in rx type okay all right so that's the   according to the document and i think this is also  null safety that's why you have to do it in rx rxn   type okay right after this we're gonna create a  user stream because we want to see if the user has   logged in or not with the stream okay so that's  what we do because the stream will tell us whether   user is connected or not connected with our  app well now definitely the name should be auth   state changes because whatever the changes will  be saving in this variable over here and it will   be actually stream type and in the stream we want  to pass user because we just want to see the user   information whether user has logged in or not and  over here we'll do light okay now we'll come and   set this one over here and inside this will create  and firebase auth instance actually so here we do   firebase auth instance and we know that this is  a single tone and i have a single tone tutorial   you can check on that one no problem all right  now we also want to save changes to this one   so with this we first got the firebase instance  and we'll get a lot more information from there   and whatever the changes of the user whether  user is connected or not we'll save it here   so here we'll save it like this but you  have to get the user actually from off well i mean user changes you have to get  from auth or the either is logged in or not   okay all right so this is the firebase instance  uh we want to get it and saved it over here and   after that we also get user changed or not we save  it to this variable that's as simple as that one   okay and then we check whether user  is there or not so that's why we do   auth changes and then we do a listen okay lis  listen so we could listen to the user changes   now over here there's this event now inside this  event actually you can pass your user object which   is uh coming from firebase so here we directly the  user and user okay now of course user may be there   or maybe not there so that's why you do this  with this null checker which would say that it is   it could be null so if it is null okay  the follower will take care of that one   so now if we have the user so we'll save  the user to the user value so user.value   now we'll save our user okay all right so we  know that as ad puts up it immediately calls this   method in its method right because it's inside  this on ready now at that moment we connect with   the firebase and check the user status okay if  the user is logged in of course we get the value   for the user if there is no user of course nothing  happens over here so that's as simple as this one   okay so next after that we need to work on the   uh google sign-in method okay well to be able to  work on google sign-in method first we need to   come over here and install this plugin google  sign in plugin and get do get.pop and get pop   you you should be good to go and hopefully  it has installed okay now we'll come over   here all right now here we'll create a method  which is called sign in with google okay sign sign in with google and this doesn't  take anything now inside this method   actually we want to create google sign in  object so first here we do google sign in   okay and i think we should have the library  okay the package is there great so we get   this method and it returns us an object  and we'll be able to use that object to   send credentials to firebase because with this  one we get information from google and as we get   the google information then we send it to  the firebase all right so here we do final google sign in and then here we'll create  a private variable and we'll call it   google sign in okay all right great now after  that here we're gonna do this try close method   because we are going to talk to the server and  if there are errors so that would be caught in   this try close so it is recommended as you talk  in the with the server each time you should use   try catch close okay and that makes your  life very simple and it helps you to   identify the error okay so here we'll  catch exception so we do on exception   this one and then here we do catch and we'll  send an object error object and then remember   we have this f logger we built before so you do  app logger dot e and then we'll send the error   okay great so if we get error from google or  firebase that would be caught over here okay   so now here as we have this object so google has  a method this object has a method which is called   sign in so as you can see over here so we'll try  to sign in with the google okay and if we could   then we'll save it to a variable but now that  variable is called google sign-in account google sign okay this one google sign-in account okay   and here okay so it'll try to get your  account from google okay and then that's   why you have to do await and if you do  this away then you have to have a sync so get the google sign-in object and then call the  sign-in method and we we see if there is user or   not okay and after that we'll check this account  object the one that we created so here we do   account and we'll see if it is null or not if it  is not null okay all right so if it is not null   we want to get some information from google okay  now how to get that so here we do account then it   has an object which is called authentication so we  want to get authentication object and then we'll   save it in a variable and we'll call it anything  of account like that okay it doesn't really matter and after that from this object we'll get  our id and token okay now that id is special   to google so it's called token id and access id  so those two information we want to get it okay   now here we have an object which  is called google auth provider   google auth provider this one and then  here we'll request this credentials   using this object so what are you requesting  so we are saying hey we need this object first   one is id token this one this is what we want so  here we do auth account and then get id id token not sure why it is not recognizing uh no worries  so let's go ahead and do the other one so here we   do access token and here we do author account  this one and then here we do access token   access token now we have this arrow that's because  we need to put a weight over here await and that   should solve the error okay great and of course  you want to save this credential in a variable so   we'll call it final thread and show okay all right  now what we did over here we got a sign in object   and after that we got a sign in method and based  on that we get authentication from google it   means google say hey there is an account for this  email id and blah blah blah and if we can get that   then we get the credential like token different  kind of token that firebase needs now after that   we can send this token to firebase okay here we  do await off dot sign in with sign in with email   and password or sign in with credential actually  i think this is better and here we do credential   okay so you don't need to type in the password so  google will provide everything for you okay great   all right so yes uh that should do the trick  for now and uh but of course this is just   the controller yet but we don't have the ui for  this so we also need to work on the ui but another   thing we need to do we also need to save the user  information if the user has logged in so here we   do save user and user and here we'll just send the  account so whatever the account will be created   okay and what is this method now well of course  we don't have this method we're going to create   one so here we'll create a save user and then  here we have this on google sign-in account this   object we're going to put it here and we'll  call it account once again and after that   here we'll send this information to the firebase  so firebase in our database will save which user   has logged in which user has not logged in or how  many users are there so here is our firebase store   and actually what we want to do we want  to create another collection over here   that would be user collection the number  of users we have now for this reason first   we need to come over here i'm going to click  on authentication and we need to get started and it will take a few seconds and we want  to sign in method so that should be google   sign in method and would enable this one and  i guess you also need to set up your admin   email account as well as the project name  now here we just simply call it study   app okay and i guess that's it now after  that we're gonna save it okay we'll   uh well it did say that download this one but i  don't think we need this so skip this one and i   guess yeah that's pretty much it for now we don't  have any user because we don't have anything so   we can skip this part and we also also don't have  any settings okay all right so but what do we want   here we want there should be a user collection  section right so now we need to come over so we   need to come over here and then we'll look for  the file and that file says reference reference dart okay now i guess this is the one  that we need over here the third one   so this is where we have reference  okay now here we want to create   a firebase user reference our  collection actually so here we do user   reference and then we do fires  firestore collection and then here we do   users okay so we're going to create a collection  that is named user great now we would come over   here in our auth controller yeah right inside  this here definitely we could do user rf okay and then we'll access the document okay doc  doc and inside this will have account.email   okay and after that we'll set our email okay now  here it takes a map so here we have information   like this when you want to set things in the  firebase actually that takes a map of course this   is based on the email so based on this we want to  set information in the back end of firebase now   here we want to send email so we'll create a field  as email and where is this email coming from email   account.email okay all right then we also want to  have name and where is this coming from once again   account.there is an object which is called  display name and after that we have a profile   pic and then here we'll have account dot photo  url this one again with this we are good to go   so all you need to do now we need to go ahead  and call this on so it will take care of this   as it calls it should create a collection for  user reference and then it would set email   and as it says it will set this different kind  of information over here in the fields section   of the document okay all right now well that's  great but now we need to find a way to call this   method which is called sign in with google well  now how to go ahead and do the login let me show   you so this is my original app and over here  what's gonna happen if you tap on any of them   then it would ask you to log in and it will show  you a dialog button okay so let's click on this   so we'll have a dialog button like this again  if you click ok then it will take you to a page   like this so this is what we want to achieve  okay all right now to be able to do that first   we need to go ahead and create a new widget  okay and that will be showing the dialog okay   now for this reason we'll come inside this and  it said this widget will create a new folder   but well i'm not sure why it doesn't  show me the new folder creation   but it's okay with me so i'm going to use  so i'm going to use a terminal to do that   okay so here is my terminal and over here i'm  going to use over here so i'll go inside lib   and then here i would see i would go inside  widgets folder and container i'll create a   new widget folder i'll call it dialogs okay all  right and then over here i'm going to open here   inside this widget let's see we do have a  dialog folder now inside this i'll create a   new file now what's the file name um we can call  it pretty much anything so i'll call it dialog widget dot dart okay all right now over here actually  we want to create a new class and the class name   we'll call it dialogues okay and inside this  first we want to create a single tone class   okay so this class actually we want to use it  as a singleton class so that's why first we'll   go ahead and create a private constructor  which would be referred using a variable   you can call it anything it doesn't matter i'll  call it singleton and then i'll use the class name dallas. now here would use a private  constructor name which is called   internal i think you can call it anything  but this is just a convention okay all right   and right after this here we do dialogue  downloads dot slash internal okay in terms   okay and right after this actually the error  should be gone and then we have to create a   factory constructor so here we do factory factory  constructor and dialogues well previously we saw   how to create single-tail classes but that  was very simple and this is actually how   you create singleton classes okay and then  you have to return over here a single term   and you are good to go all right okay so we  created a private constructor and then we   are returning that constructor instance using  a factory method just like this okay all right   and right after that we are going to create a  widget so the widget that will pop up and we would   call this widget from the ui okay now here we do  widget and then over here we'll do like question   start dialog okay and we'll call it question start  dialog okay and over here actually we're going   to pass a callback function and we have to have a  callback function so the type is void callback and   we'll name it on tap okay all right as we are  doing require we need to wrap it around the   second braces over here and then simply here we  do but of course this is more like a return type   so we have to return something now here what  are you going to return we are going to return   alert dialog this one okay all right and then  the arrow should be gone and of course since   it's a single turn class so method we can uh  the the uh the type should be static type okay   now over here alert dialog has content so now  here we do content and then we'll do column okay   all right and then inside this actually you can  do whatever you want to do so here we do children   because we have seen earlier that we want to show  content like this so how to do that so of course   we need a column for this one and we did that  and then inside this will have children as a text   over here we will say hi okay after that we do  a little bit of styling and then here we do text   style okay now inside this we will do font size  so font size is 25 and then we do font weight   so let's see phone two eight font weight dot bold  okay great and i think that's it that should be   the first text and the second text is over here  so here you do please log in before you start   please log in before you start okay and  that's all now we might need to wrap it around   const modifier so the error should be  gone okay now that's one part of this   alert dialog and our dialog has  another part which is called action so here we're going to do the action  sections now it takes list of children   as a widget now here because we want to do a  button so here that's why we do text button   because we want to be able to click on it like as  you saw we want to be able to click on it right   now here we'll have our untapped event which  will pass to it and the child over here simply   say yes okay all right or  confirm okay confirm is better i'm sorry okay confirm all right so with this  we have done and right before this   we can add this const modifier so now we just  built our simple uh singleton class as well as a   widget for showing the alert dialog so what is the  next section next we'll find our auth controller   controller over here and right after this  actually we are going to create a new method   and we'll call it show login alert dial log okay all right and that's all  and from here we're going to call it   but we are going to call it wrap it around using  get dialog now this is coming from get x uh okay   now inside this as you see it takes a widget okay  so we need to call this widget now how do you   call this we just remember we just created a  singleton class so here we do dialog okay this one   yes and then right after this we just simply call  the method okay so question start dialog okay   that's it and right inside this actually  you want to create your own tab event   now here we'll have method  like this okay what do we want oh all right make sure okay yes so here we  can just simply return the semicolon now here   actually inside this over here we want to if the  user clicks we want to get that back which means   we want to go back i mean whatever the page is  there which means whatever the background page   this one we don't want to show it anymore  so that would be gone and then we want to   navigate to login page okay so here navigate to  navigate to login page so we need to create this   method or route we don't have it yet but we  have to do that okay and let's see what else   well and right after this i think we need  to have another property which is called   barrier dismissable and we'll set it to false  okay and now with this we are good and after   that what we have to do we need to go to our quiz  question controller over here so here we'll find   a question controller question paper controller  okay right here below it will create a method   to call actually this one show a large dialog  okay so we are going to call this one and we'll   call this one from our question paper controller  this one okay now over here we'll create a method   and the method name should be navigate to  questions okay it would be white time and   we'll call it navigate to questions okay and  what will take well it'll take a required model   required uh question paper model okay this one  and we'll call it paper it doesn't really matter   you can call it anything and it will also  pass a goal and we'll say try again well   now this would be as a false  that this is the default value   okay and then we'll return like this okay  now inside this first we'll go ahead and find   auth controller so here we do auth control and  then we'll create a private variable of controller   and then we'll just simply find the controller so  we do get defined okay all right now what we'll do   we'll go ahead in this method actually in this  controller so we'll go ahead and create a new   method and the method should be well the method  name should be is logged okay so we'll check   whether the user has logged in or not and it would  do it using bull and we'll call it is logged okay   is logged in and then how to know whether the  user has logged in so you you can use this one   or auth controller uh firebase auth instance  and here we have an object which is called   current user we'll say current user is  null or not i think here is the problem it should be like this yeah so we are doing a  conditional check so if this is true it means   user has logged in if this is false it means user  has not logged in okay now we'll come over here   and inside this will do this conditional check so  here we do auth controller what controller the one   we just created and then we'll call the instance  that just we created okay it's logged in okay if   it is logged in or not we'll check it and at the  same time we want to check try again well if you   want to try a few more times or not okay all right  and if the user has not logged in then this is the   place where we show our dialog the dialog that  we created so here we do auth controller dot show login lr dialog so that's what all we want to do  okay all right and then over here of course we   have to create some route because we want to go to  different place so if we try again and then after   trying again we would hide our current page and  then we'll go to a new page okay so in that case   we do get dot off name but we don't have the  route yet here but this is what we want to do   okay so i'll comment it like this comment out  and then else over here we'll also have pretty   much the same but here we do get the two named  okay all right to name and once again the same   all right but of course you could use pretty  much same one because i'm trying again   so i want to remove everything what i had early  but it is something that it's all up to you   actually you could use both of them the same  but with this it will remove the controller uh   well i mean the stack not really controller  the stack itself remove it so with this it   will remove the page or ui from the stack okay and  with this the ui still should be in the stack or   in the memory okay so this is how it should  make difference but now anyway so this the   time we'll go ahead and check on this one so now  we're ready and we can just simply go ahead and   call this one okay now where to call it from  uh remember we have a question paper card   let's go ahead and find the file and we'll  search for it so we do question paper uh let's see and the model not the controller question card  okay this one right so this is what we want okay   so now i would come at the top over here and  over here we do see that we have a padding   okay now let's see what what's going to happen  over here actually so let's click on this   and of course none of them are clickable but we  want each of them to be clickable each of them   now if we want to make it clickable  let's wrap it around a widget okay   and we'll wrap it around inkwell  because with this we could make it   a clickable widget okay now here of course  in qual has on tap event okay now here simply   we'll just return like this uh say would  print over here and we do like this model dot uh we wanna print some  information in the model itself okay   all right so we'll just print this one okay so  let's save it and we have worked so much and   now we're gonna restart it from the scratch and  we'll see how it goes and i will click over here   now definitely so far everything is great you  know the image has been loaded so i click on this   and yes i see that the physics has been clicked  i click on chemistry chemistry biology biology   so we are correcting on the right place  we are clicking on the right place okay   of course this is not what we want uh what do you  want so we want to be able to click on this and   check whether user has logged in or not okay yeah  so how to do that well that's actually pretty easy   now as you see question paper controller over  here i have this method so all i need to do   we need to go ahead and call it okay now  previously we have seen that we can use uh   like get view to do that so over here  instead of stateless class we'll use get   view okay now inside this will call the controller  type which is question paper question paper control well let's see if we have the  correct name well now here we do see   that it is quiz paper controller so i thought  it was question paper controller but anyway so   we'll come over here and replace this okay all  right and i guess we need to import the library   let's do it and then we are good to go why we do  that because over here actually we want to access   the method the method that we have  here the one we just defined this one   okay cool so now over here we do controller  okay and then we'll call navigate to navigate   to questions and inside this all you need  to do you need to provide your model okay   all right now what we're doing like this  because if you come over here click on this you'll see that it takes question paper model  and of course this is the default value is   there so we don't need to provide it all the  time but anyway so now if you see over here   uh we'll see uh what happens but of course  one thing we could do because we we know that   this should get clicked over here  so here we cannot print again   to make sure okay all right so here we do paper  title t-i-t-l-e okay all right and we do see that we have a bit of arrow here great   and now here we'll say that title  is okay let's go ahead and save it i guess we need to rebuild it i will let's click over here now everything  is ready now i'm going to click on this and   we'll see what happens of course yeah the title  is physics and open dialogue and we have this   pretty much ugly thing and then we can over here  click on this so we can click confirm okay but   it was supposed to take us to a new page as  we confirm as we click on confirm it should   take us to somewhere for logging it's not doing  that but first we need to take care of this ui   that's not what we want right well now to be able  to work on this uh we need to work on the dialog   file the one we created so look for it and look  for dialog over here and i think this is what we   want and actually inside this column we can set  up main exercise and main exercise dot min okay   all right and we also want to set it at  the beginning so here we do cross-sections   alignment processes alignment dot start okay  all right so here we're gonna go ahead and work on this and we'll click on this and this is  what we see beautiful okay it's pretty beautiful   okay now we want to do we want to go to the login  page yes i said we would work on this don't worry   we will but now that should happen step by step  so here we want to after clicking on them we want   to go to the login page okay so let's work on that  one well now i'm going to go to the login page and   if we click on this confirm button it should take  us to a page like this so that's what we should   be doing right now to work out on this layout as  well okay now to be able to do that we need to   come to our terminal over here and let's see where  we are so that's pwd so we want to step back one   so inside here we are inside lib folder okay and  inside lib folder we need to go inside screen so   we do city dot screens and over here we'll  create a new folder and we'll do empty there and the folder name should be login okay  so that's what we want to do now after this   we're gonna close this window all right and then we'll open it and we'll come over here  and inside the screens we're seeing a login   screen now over here we'll create a new file and  we'll call it login screen dot dart okay all right so over here first we're going to create a  stateless class all right and we'll definitely   call it login screen but definitely very soon  we're going to replace this with get view okay now   over here we don't want container we want scaffold  first and inside this we're going to return a body   body and for body itself we'll have a container  actually okay all right now the reason we are   using container because we want to give  it a decoration color where you can do   background decoration with the gradient okay so  here we do decoration and a box decoration and   here we do gradient and then we know that we have  a function which is called main gradient okay so   this is what we want to apply over here that  is the basic login screen that we have created   and over here actually we want to create a route  name so here we do static const and we'll do   a route name over here and we'll call it route  name and here we'll call it login and we should   be good to go okay and right after this we need to  come to this auth controller and over here we'll   we'll see actually this is what we wanted to do  okay so we want to say navigate to login page of   course going to create this method we don't have  this method so over here with the capital letter   and then i'm going to copy this i'm going to  put it here and then we're going to return   now of course uh this is going to be a void method   for type so here we define it and  that should be small letter navigate that's great now right inside this we do  forward to our route over here so here we do   two named okay this one and then  we'll just simply call our uh   route name so what's our route name it is called loginscreen.routername and then we are good to  go now why we were able to access this because   if you come over here and you see  that this is a static variable   so static variable could be accessed  using the class name directly okay   so from auth controller you're just going to  the login screen and that as simple as that one   okay now it happens during the confirmation of  the dialog right so using this one and here it   happens because of the arm tap event that we are  creating now we're gonna click on this and we'll   see what happens now we click over here and now we  are here of course it's acting like this i see but   this is not with what we expected now the reason  is because we didn't set up the app routes inside   the get pages so you need to look for the file  which is called app routes and we'll come over   here and we'll just go ahead and define a route  right after it and i guess okay we could define   right after this home screen over here now here  we do get page and then here we do like name now   definitely we can change the name and this  is all what we should do so here we do login screen dot route name because this is  what we have already and then right after   this here we just do page and then here  we do login screen okay login login screen   yeah okay and you should be good to go and that's  all okay yeah now let's go ahead and check it one   more time so let's restart everything from the  scratch and we click on this trying to log in now   let's click on this and this is what we expected  because in our login screen we don't have this   uh logo like the one we had early okay  all right right okay now right after this   inside this container we can set up a child  over here and definitely that should be a   column as i said earlier that this is everything  in column format okay but of course we don't have   any content so it became white over here but  don't worry we'll take care of that one soon and inside this actually want to use image  image dot assets this one and we know that   we have an image over here that's  our logos assets dot images and here logo dot png but of course we need to  put it inside the children tag otherwise   we'll get errors so that's a list now let's  save it yeah we see that it is at the top   but now as we are doing this one here we  could do a setup here with the alignment and okay and also not much change  and it did change not really okay well don't worry it'll take effect later  because we have more things to do but   by this time now here we could do with say 200 and  the height 200. okay yeah we don't want it so big   like the old one like the one we have early and  over here actually we can set another property   which is called main axis alignment that will  be vertical alignment for us then we do center   okay now it becomes much better and right after  this i actually want to set up a text over here   okay and here we do this is  a study app you can use it as you want you have the full access to   all the materials in this course in this  course so let's just random text over there   and then after that return like this and hopefully  we need this const over here let's add it and we see this is what we have okay great but  we're going to change it soon but the first thing   we want to change is top and bottom we want to   keep some distance and for this reason we'll  wrap it around padding widget and over here   we'll do symmetrical dot symmetrical and  vertical over here let's say set up 60 okay and we do see a bit of issue though okay  we are missing comma okay now it looks   better okay now we need to take care of this  color and for this reason here we do style and here we do text style let's see okay great  and color and we have a surface color on surface   text color this one and font  weight we do font weight dot fold this on and it should work like this and  it did actually but now it's too much the left   and right and for this reason actually we can  set up a padding for this container over here   so you would do padding now for padding itself  once again add incess dot symmetric and now this   time we would apply horizontal padding and  we would do it for 30. okay now of course   here for the text itself we can also set  up text align properly so text align dot   center okay now it looks beautiful as well  as i guess somewhere we need a const modifier   okay great so now it's looking already like  this but of course here i made the look a   little smaller and i think which is beautiful  okay okay now the next part is going to be pretty   interesting because now we are going to work  on the google icon itself so for this reason   right after this padding over here  so we are going to do a widget and here we do gesture  detector and here we do on tap   and then here we'll have child okay now one  thing you need to know if you look at this   one well there are a few different ways to do that  but for now we're going to do it with stack widget   because this google is going to actually overlap  with this one so this is in the middle okay as   it's in the middle then actually it was supposed  to take the whole space but we're gonna position   it in the middle horizontally outside  vertically in the middle with this icon   okay so that's why over here we're going to do  with a stack widget first okay so here we do stack   and then children and here we do position okay  all right and right after positioned over here   we want to show the google image okay  well now that we want to show it as an   asset but this time actually instead of using  because if you see if you come over here and if you take a look you might see that you might see over here we do have and google icon  svj okay of course you can't view it over here   but this is svj okay so this is what we want  to show over here now for this reason we need   to install our plugin we're going to install a  plugin because we want to show that svg image so   here we'll look for this prospector yml file and  right after this right below it we are going to do   flutter svj and let's go ahead and get it and you  should be done after this okay i think it already   got it no problem now inside this over here we  want to well get the reference so here we go svj   picture this one then we do asset because  we're going to read it from our asset   and inside this we just simply do  assets dot icons dot google dot svj all right so this is what we're  going to do let's put it right here okay now let's going to save it and we see that  okay this is our google image and this beautiful okay now that was the first position that's the  first child inside this stack yet and we want   to do another text over here and that's why here  we do text like this and we'll say sign in with   google okay that's what i'm  going to say and of course we   want to apply a little bit of style  to it so here we do text style and here we do color then we do theme dot  off context dot primary color this is   the primary color that we had and then we  also want to use font-weight onto it.gold okay well now this is what we  have and this is not what we want   i mean that that looks okay but i mean of course  not i can't really present it to someone but   anyway so now over here we want to set up our  position because right now they're overlapping   right so let's fix the position over there  so we do top zero bottom zero and over here we do left zero okay now let's  do it ah yeah so right now it's   pretty much in the middle and that's all actually  we wanted but uh now the button itself is   strange over here because gesture detector but  actually we want to create a custom button and   then we'll be able to work more better and we will  be also able to give it a background color but   right now we can't give it so let's go ahead and  create a button so we'll open up our explorer   and right inside this uh right into this  widget actually here we're going to create a   new folder while i think we have to create  it from here let's go to cd dot widgets well all right and i'm going to close it and open it  so let's see now as you open it as you see that   we have a file folder over here so we can create  a new file and we'll call it main button dot dart let's close it and over here we're going  to create a class and we'll call it   main button because this would be a  reusable button and we're going to use it   to auto app so that would be a stateless widget  and we'll call it main button all right and let's   import libraries now ask ourselves  what do you want with this passion   definitely want to give it a button name  so here we'll call it title actually and uh   let's see what else is going on  okay we'll take care of that later   and then we also want to pass an on tap event so  here we would call a void callback this one and   then we'll name it on tab you can name it anything  actually and then we'll also want to have a button   boolean okay and we'll call it enabled enabled  we'll use it we'll see why we use that later   then we'll have widget well sometimes we may send  the widget we might not send the widget okay all   right and the last one is color okay now it will  have an optional color if we don't pass any color   so we'll use the default color okay now of course  here we do have a bit of issues so let's help   take care of them now the title itself is not  always required so here we do this the title   and then it's the values empty the default one and  the other one is required this dot on tab because   we always need that and then this dot enable  this is a boolean so we'll set it to true and   then what else we have this the child that is an  optional this dot color this is optional as well so whenever you have this one you can you you  don't need to use the required keyword you can   just go without that and others like you can  set them optional on your own but you have   to give it a default value and this is the only  one that we require now as you see like this so   we want a button that would  be used throughout in our app   and this is definitely be in a size so it will  have a certain height okay so we're going to   use size box definitely and because we want to  be able to click on this so we will also want   an equal in this widget and yeah pretty much  like that the first i'm going to replace this   and over here we are going to use material  okay now instead this we're going to use child   and as i said that we need a certain size for  that okay all right so here we do height so 55 now let's see why we have this error so we need  to import the package okay now we'll have child   and as a child will have inkwell okay now inside  this inkwell we are going to have untap event   let's do it now as you see our we have this enable  button okay so we're going to check on that one   so if enabled equal false it means  actually i don't have any on tap event   otherwise you use whatever has been given so given  from here so we are judging based on this one so   that means whether our button would be actually  clickable in a sense that it would do something   if it is false it will not do anything if it is  not false then it would do something okay and   right after this we are going to set up child over  here but we know that we might have child right so   we're going to do a double check if we have child  then use this use the child if we don't have child   then we are going to use a text widget over  here and inside this lab title again we can   also set up style for that and here we  do text style and here we do font weight   and font weight dot bone okay all right and then  here we do color and the color is on surface   color okay like this one and we're gonna use  a const modifier over here and at the same   time we want to set it to the center so let's  wrap it around center now that's part of it   okay now we could go ahead and try to use this  and see what happens so far we have used this gesture detector actually we can just simply  go ahead and replace it with main button the   one we created and that should still  work so let's go ahead and restart it   okay yeah so that's what we have over here and  it looks like it's already working but it's still   messed up pretty much with this layout  over here but we'll take care of that now we'll go over here and set up some properties  for this okay so let's go ahead and click on this now inside this actually so we have this ink  well and we have this child as well over here   now what i did wrong over here so i was supposed  to wrap this around center widget not really this child so since like seems like it  doesn't wrap it so i'm going to pull it back   and in this for this reason i'm going to cut this  one and then i'm going to use center widget itself   okay now over here i'm going to use a child okay  all right and this case i'm going to put it back   okay now i'm going to push it back so that will  look organized and what else we have we do see   that we might have a bit of an issue here  that's ink called that size box and then we   also need one for material box and it's working  and maybe we need a const over here okay great   all right now what about this child over  here actually we want to this child to   be wrapped around uh patty with it so  we're going to wrap it around padding okay great now here we see we have  eight but we can go ahead and do 10   all right and now it messed up again but we  can take care of this one so here instead of   padding we can sorry with the padding itself we  can wrap it around and a container widget okay   now after this we can give it a width okay and  then here we do double the max finite m a x and e   okay now it become bigger and  now we can push it to the middle okay but before we do that actually we have  another thing to take care over here it's called   decoration okay now we want to do a box decoration  and inside this we want to do border radius okay   all right so here we do border circular now over  here it's a pretty much first rule set of 15 and   we'll see how it goes and then we'll use the  color and so we know that we have color if the   color is not given then we'll use our theme color  name context dot card colors that's what we want   to use let's go ahead and save it okay almost  really we need to restore it and we'll do that now let's check it okay now looks like this  border decoration which was supposed to take   effect it didn't as well as the color itself  because we are not giving any color over here   so in that case we are supposed to show the card  color but it's not taking effect one thing you   could do though over here there is a type let's  go ahead and set it up it's called material type   material type dot transparency now it's  working so it was blocking the changes   okay now this button already looks good now  we need to find a way to put it in middle   now to be able to work with this and that  should be pretty easy so would come over here   and wrap this one around center widget  and we should be good to go i guess   uh yeah so it's already working and this is  what we actually expected and it's pretty fine   okay so now what else if you click on this  let's see of course it's not clickable now   this is the time where we want to go ahead and  call this auth controller okay because remember we actually we don't need any of this right  now we can close them and this one this one   well we'll keep this and alt control now instead the auth controller as you see we so here we have this sign-in method actually so  this is the method that we want to call from here   now if we're going to do this we need to remove  this and we'll replace this with get view okay   and then here we do auth controller okay great  if you really don't know how it works because if   you come over here you see that gut view extends  stateless class or status widget actually and it   has an instance which we get from this variable  which refers to get instance so whatever you pass   over here internally actually it finds for you  because this is the type so over here if you find   auth controller if you provide auth controller so  here it does get instance dot find out controller   so it's a little more convenient okay yeah so over  here we are giving this the type so this means t   so these are t so auth controller auth controller  so it's pretty much same as get dot find okay   yeah anyway i'm going to close this and now  over here we are going to do controller dot   sign in with google okay so that's what we will  have after this we can go ahead and try to log   in with google but i do guess that we'll have some  error because uh there are a few other settings   that we didn't set up but anyway i will go ahead  and check it that how it goes now here we are   and here we are and we're going to click on this  and it takes us to this page now hopefully we want   to be able to log in with google okay yes and at  the same time we do see that it says that he's   missing google info plist not found the client id  was not found and there are some other issues that   we need to take care because that's the settings  that has to do with google and as we are trying to   log in as you click on this button and you click  on this and it crashes or we have bad things that   goes on over here and here we do have some error  or exceptions of course uh each time the error   could be a little bit different but i'm going to  run this app and at the same time let me show you   how to solve this problem now whatever earlier  problem we had since we clicked on this button to   run our app now that happens due to this file over  here and inside this actually we need to put up   put some values over here so i'm going to  paste some values over here now this one   over here actually this is an array okay  and inside array we have this dictionary   and then the bundle type roll editor bundle url  schemes and most importantly this section okay   now what is this where is this  coming from this is quite important   now to be able to know where this is coming from  well we have to open our folder over here and   inside this you will see that okay no not this one  i'm sorry this is in in this info peer list okay   now over here you'll see that we have reversed  client id so you need to copy this one okay   and you need to put it here so i'm going to close  this and we're going to replace this value with   the one the one we have in google info list  okay all right so whatever id you have here   reverse client id you need  to put it here okay all right   okay anyway so our app has started and we'll  restart it one more time okay and we'll see how   it goes and now of course before that we'll  open up our firebase backend so now here   as we click what do we do we are expecting to  see that first we'll have a collection of user   and then we'll have new users in our  uh authentication this section okay   so two changes will happen once again  over here we'll have user's collection   and we'll see that logged in user will have data  over here okay so now i'm going to click on this   and this time i'm going to click on this one  and this is what it is asking me to log in and   then i'll click confirm and then once again over  here while we see that our i'm gonna again and   work on that later doesn't matter now click  on this and looks like it still crashes   okay i'm going to build it one more  time and over here i'm going to put this   key actually for each array there should  be a key so i was missing this key and while the xcode building is running okay so  as it's running would wait and i'll give you   some of the tips that once you if you encounter  more errors how to solve with this one but now   definitely one thing though now you need to make  sure that you have this google service info.plist   you have it well sometimes they could cause error  and uh okay so i'm going to restart our app and   we'll see how it goes okay now uh speaking of this  one this file you have to get it from here uh so   you have to come to project settings and okay  let's do project overview over here now for ios   you need to come over here and you can download  it from here as well there's a lot of time the   one that is auto generated with the firebase cli  it might not be complete or it could be broken so   you need to download it here and then  you can open any of these files in xcode   and if you do that and after that downloaded  file the one you have downloaded from here   uh once you open it in xcode like it's being  opened so you have to drag and drop over here   inside this folder i've already done it so  it's here so you have to whatever you download   you have to drag and drop inside this folder and  you should be good to go okay so a lot of time   uh downloading and putting it back there  it works okay otherwise it could be a   little bit cranky okay all right so  now here we are we are on iphone 11   okay and now we'll see how it goes so just now  over here we missed this key okay for every   value there should be a key now array has a lot  of values as well but just now we forgot the key   now we'll see how it goes so we'll click  on this and confirm login and now looks   like it's also back over here just now we had  this error or the issue now click on this and   which means that it's working because it says that  google.com wants to sign in so now we'll continue   and then of course over here it's asking me to  type in my email address i'm not sure why it's   doing that but i'll do that it was supposed to  automatically know it anyway so i'll do that and then i'll continue with this and  it's asking me to type in my password okay and then i'll continue okay well it is sending me a verification message  on my mobile and i'll confirm it there you might   not do it you might not need this step because  uh maybe i have changed my ip of my internet so   that's why it's asking me to do that so i'm doing  the verification on my mobile and hopefully it   should work now okay all right actually it logged  in right now because we are not redirecting it to   anywhere after logging it that's why we don't see  now whether we have logged in or not we can verify   it and how do you do that we need to come to this  back end the first thing you check over here and   you see so this is the email that i've just logged  in and now if you come over here to this firebase   and you see we have a new collection and  the document is this email id and we have   this three fields okay so these are the three  fills that actually we have added before okay   now i'm going to close this one and i'm going to  also close this window the the project explorer anyway okay great now actually what we want to  do now if we go back and restart our app we are   still logged in and this time if you see that  this log over here now if i clock click it again   nothing happens do you know why nothing happens  because right now we fall inside this condition   because we are already logged in even here we  can actually print a log so here it's a logged in   okay logged in because we know that we  have logged in okay so let's save it and   click on this and we'll see that logged  in okay so it doesn't redirect us to   this alert page because we are logged  in now that's a little bit weird okay   anyway uh we need to work on this we are  logged in actually we are supposed to   show information over here and that's what we  are going to do now now to be able to do that   we need to find our menu screen so we'll call  for many screen and this one and we have this   position widget of course this is over here now  right after this actually we're going to create   a new column okay now here first  would do go ahead with column widget then we do children and after that  actually we are going to access   our controller over here now as you  see zoom view zoom drawer controller   this one over here we have this uh  different kind of methods that we can use   here actually previously we created this one  so inside this we want to check if the width   whether the user exists or not for this  reason at the top actually we need to   create this variable which is called user okay  now right after this of course make sure that   your firebase auth is important and right after  this over here we are going to do user dot value okay this one and then we do get defined okay and  then inside this here we'll inject our controller   and here we do auth controller and then here we  do get and here we want to call get user okay all   right now i know that this method doesn't exist  so we'll come over here and we do have this thing   so here simply we can just return a  method that returns our current user   okay so right after this right after they sign in  with google so here this should be our method so   user method we are referring to the current user  and then we are getting the value for the user   and save it to this value and we just return it  so this one returns the use user object okay now   once again where is this coming from this is the  firebase auth control firebase auth instance the   one we created and then we also created an user  object okay so whatever we get from firebase as   a current user we assign it to this user over  here as a value okay now if we come to our   uh let's see over here now the error should  be gone okay now as soon as my zoom drawer   controller is ready we also get this user okay now  if we can get the user now inside let's see inside   this menu screen would be able to access the  user okay so for it makes sense because because   here you see that we extend my zoom drawer  controller okay so we can access the values   so how to do that well definitely here we want  to use obx okay and then after this we want to   access this user so here we do controller  dot user dot value if it is null then we do   one thing okay if it is null then we use size  box which means it's empty okay sized box okay all right so otherwise we use a different  condition and what is the different condition   otherwise we want to show the user okay and how to  show the user and here we do controller controller   dirty user dot value okay we'll make sure it's not  null and then we'll display the user name okay now   if in case it is null the value doesn't  exist then we just show an empty string okay   so that's all we do all right right after this  we could do a style over here okay now style   is style and here we do text style and then  inside this we're gonna do font weight and font weight dot w okay we can use 900  all right and font size we can use   18 and over here color is on surface color on  surface color that is text and right inside this   gonna use const modifier okay so what's happening  here well this is our obx first we check if we   have user or not if the user is null it means  there is no value which means user hasn't   logged in we just saw over here at sized box okay  otherwise we show the username but if the username   something goes wrong with the username we just  show the empty string over here okay and that's it   now let's save it and we see how  it goes and over here we need to restart it and let let's work on this all  right so this is my google username as you see   and it's wonderful so which means it's working but  right now the currently the position is not good   so for this reason i'm going to wrap it  around a padding widget okay all right   so this is our padding widget over here we  don't want to do like this and we want to just now if you see this one the original app if  you log in well okay we didn't log in over here   so i want to log in and let's do that  and once again we'll log in over here okay now we should say this one and then we  should be able to say this kind of things okay   but for now we still don't see that but don't  worry and we're gonna work on this one first   these things okay now for this one to be  able to work we want to actually create uh   here we'll create a new class and we'll call  it stateless class and here we'll call it   drawer button okay drawer button all right so  which only belongs to this this class over here   okay we are never going to reuse it it'll be only  here okay so that's why we do that okay now over   here of course we don't want to return a container  so here actually we want to return text button   dot icon okay button dot icon you want to put  icons over here okay that's all we want to do   now here inside this definitely will have  unpressed event okay and for now it's null and   then after that here we'll have icon okay now what  icon so whatever the icon we pass because it is   just for this class but it is still reusable so we  need to pass a certain icon okay all right and uh   of course we don't have this icon object so  that's why it's throwing error but it will   solve itself and then over here we want to set  a label okay now for the label itself we want to   send it we want to set it as a text and then  we'll have label okay now of course we need to   set up this values otherwise we'll get error  so over here at the top we'll do icon data icon okay because this is the  one that we created just now   and the error should be gone okay final string label okay now over here uh we also want to pass this on  tap event okay so that's why here we do word   void callback over here all right and here  we do unpressed okay all right so here   we put this one and then we're good to go and  now label we don't want to do this okay we wanna   correct it right and right after this so here  what are the things we need here when you require   this dot icon required this dot label and this  dot unpressed okay all right now the error is gone   so this would be our reusable widget just only  for this class so we need to pass icon label   and this unpressed event okay that's what we  need to do now how do we go ahead and call them   now right after this obx over here we are going  to create new widget using the one that we just   created so now inside this we are going to pass  our icon now okay first one we want to send as   our website so icon dot so for now just send  this on and over here we are going to send a   website okay this one and at the same time  actually we can also push or send our unpressed   event what should happen now over here we are  going to call to our controller class get the   instance from it and i think we have this website  method okay now of course uh let's go ahead and   check it well for now it's empty but don't worry  we'll take care of that one okay and then we also   have email and uh what else yeah pretty much just  this too okay so that's the first icon button and   then we're going to save it and we see that yes  it is there okay and it's already looking great   all right but now we want to create a space  of distance over here a little bit distant   so here what we're going to do we're going to  use a spacer okay and then we'll set flex to one and we'll save it okay now it starts from the  bottom okay and we don't have any problem with   that one now we are going to copy this and  then we are going to put it right below it   right over here so here we do facebook  and then here we'll change it to   facebook but we don't have any facebook method  but don't worry we'll and right after this we   are going to come over here and do a ctrl v and  over here actually we want to do a little bit   different one and here we do email okay and then  here we also do email okay all right e mail okay   all right and right after this here instead  of this one you can get email okay very great   now let's go ahead and save it and we see that  our email is here but actually this is not how   we want to put it now for this reason we're going  to wrap it around a padding widget over here okay   and we just want to apply padding we just want  to apply padding on the left so we do add in sets only and here we do left and here we do 25 okay  now let's see how it goes so it comes a little   bit inside this and which we should which it  should look better okay so that's your email   all right and last one right after  this actually we are going to create   so we're going to copy this one over here and  right after this we're going to put this one   but this time our icon is logout okay logged  out i think this one should work and here we say   log out okay now of course we don't have  any log out method so we'll go to this over here i mean in this controller zoom drawer  controller and we want to create a logout method   the logon method should be actually first in  this auth controller and then we'll call it from   zoom drawer controller okay now right  after this over here after this save user   it will create a method sign out  and then over here we will use   app logger okay and then we just want to  do this one so here we say sign out okay   all right and then after that we'll use try clause  catch and over here because we are signing out   from firebase so here we do on fire on  firebase exception i guess on firebase   exception actually this one okay and then we would  catch the error after this here we do uploader   okay and then we'll print out error if we have  any error okay all right and that should be e   and then we are good to go now to be able to  log out here we would simply do auth dot sign   up method now this sign out is a built-in method  that's provided inside uh firebase automatically   okay now we need to set this on and over here we  also want to return a future void okay all right   because it may wait as it returns so that's why we  are make sure that it's the future now after this   here you could do simply get a fine  and then off controller and then   you just simply call sign out okay great now if  sign out is done now over here instead of this one   you can call sign out method okay great all right  now what happened to this website over here now it   looks like pretty empty but it should not be that  empty so here we could do launch and here http www.devicetech.com you can put your own website  if you have one and then you should be good to go   all right now we don't have any facebook method so  i'm going to copy this one and just assembly for   fun i'll put it here facebook so you can  put here facebook or anything you like   it doesn't really matter now here we had  a facebook so we'll call it with facebook   so this is a logo method and let's see how it  goes okay so here this is our logo method okay   now right before logger method here we want  to create a spacer so here we do spacer   and here we do flex four okay and now let's  see how it looks okay so they all goes up at   the top okay now this is a different one all right  okay great now we should make sure that it works   as we log out okay all right so we have to work on  that so let's go ahead and log out but uh before   that let's make sure to restart everything from  the scratch now here here we are okay now let's   go ahead and call this logout method but looks  like it's not working and we need to know why   so here we have this logout and this one over  here and which eventually calls the signup method   now the signup method is not working because of  this one because we are returning like this all   we need to do to just send this event directly  the book is why because we are already returning   once here actually so that was the problem  so now let's go ahead and sign out and   yes it did sign out okay and as you can see that  here we have sign out and then we also see hi   now that a high could be probably that i have  printed something somewhere okay like here okay so   it already signed out all right now of course we  need to restart our app to be able to really know   whether what happened of course we can change the  situation now if you see we don't have our name   okay anything like that of course we also need to  change this section over here but you get the idea   now if you do sign out it will take you to the if  you try to log in again it'll take you to the sign   out page okay uh but now a sign-in page i'm sorry  but here one thing we could do actually though we   want to navigate to the after signing out you want  to navigate to home page okay navigate to i think   now we don't have any home page so here  we'll create a method and we'll call it   navigate to home page okay now of course we don't  have this method so i'm going to copy this one   just like this over here so now okay  we had too much of it okay all right all right so here we do get that off all get  off all named okay and then here we could do app home screen i think and then we have  well now if we do look for home screen   we'll see that we don't have any string over  there so here on screen and actually at the top   we should have a static method for the  home route itself okay so here we do static okay now let's come to the login page so we can  just simply copy this one and then okay we can   close this and we come over to the home screen  and just copy this one and then here we say   home okay but now of course we need to make sure  that we are aligned with our app routes over here   okay this one here we do have home okay so we  can directly use home now in that case over here   we could just do home screen dot route name okay  so it will take us to the home screen hopefully   it makes sense because this variable is already  defined here as static so we can just go ahead and   grab it now after this yeah it should work okay  so now let's go ahead and check it one more time   all right now of course we are not logged in   okay and then we click on this and we'll be able  to log in all right so we'll go and log and uh   we're great okay now here is this problem  after logging in actually you want to you also   want to go to the home screen right not this  screen okay so let's check our login page so here we do have this auth controller over here  right after saving it actually here we could do   navigate to home screen right okay uh anyway  so let's restore it and we'll check it one   more time and hopefully we should be good with  that and we know that we already logged in so   we'll log out now here we are now if we click  on this button we are not logged in anymore   now if we click on this it would ask us  to confirm we confirmed that we log in   and then after that hopefully we'll see that we go  back to our home screen okay beautiful all right   now of course we are logged in so we don't see  anything but this menu it works okay beautiful   we've done a lot actually we covered how to upload  files to virus backend and how to read data from   firebase and how to save user data on firebase  and how to save all the data firebase as well   and we have seen how to log in logout as well as  actually we also worked the theme but i know that   we didn't work on this dark theme which we'll do  in second part anyway so if you like the tutorial   don't forget to share with your friends and  also don't forget to contribute to me on patreon   motivate me on patreon or buy me a coffee which is  very motivating for me anyway so if you have any   questions so you can leave your questions in our  group i have a dedicated group for this okay thank   you so much anyway i will cover rest of the thing  like clicking on this going to a new page and then   submitting the paper because we are going to  do a question paper yes no like that so we   have to submit the answer to the backend and then  we'll save user data on the backend as well we'll   also save user record okay so a lot of things  we need to do in part two thank you so much you

Channel: dbestech

Views: 136,131

Keywords: flutter firebase app tutorial, flutter firebase tutorial, flutter firebase 2022 tutorial, flutter study app, flutter quiz app, flutter tutorial, flutter advanced tutorial, firebase store data per user, firebase android and ios tutorial, firebase tutorial, firestore batch commit, Flutter Firestore batch update

Id: ZSVnIphlGKI

Length: 457min 52sec (27472 seconds)

Published: Thu Aug 11 2022