Flutter Master Class Travel App | Flutter 3.13.0 for Beginners to Advanced | iOS & Android Cubit

so foreign hello everyone assalamualaikum well in this part  of this series first we'll learn how to build a   custom castle slider okay well now to do that  first we have to understand how we are going to   build it so you see you will have pictures like  this and the images will have dots like this   okay well of course i don't have the  images yet here i only have the first   one but don't worry i'll take care of them  later so now here we want to have these dots   and we also want to have this text and we'll  be able to slide through them and the dot would   show the corresponding slide like that okay  so that's one thing we need to know and second   other thing that we need to  know the layout of this page   so the layout of this page is like this so this  whole page while it will have a background image   so actually background image will be moving all  right well apart from that other layout stays the   same well now this section over here this would  be a row and in the row we'll have children and so   the first child would be a column and this would  be our second child and that would be a column   as well okay so first we'll have a background  image and background image will have row as a   child and within that row will have children so  the first child would be this column and second   child would be this column okay so anyway now to  do that first what we'll do we'll come over here   and create a new folder and we'll call it pages  and within it we want to save our dart classes   or files now within it we'll call create a new  file and we'll call it welcome page dot dart   okay well this page would be our custom slider  or custom carousel slider okay all right   so just now we talked about it now this slider  would be a stateful class so we'll do stful   and within this would be able to build a boiler  template of this class now the class name would   be welcome page because our custom castle slider  would be shown as a welcome page of course you can   use it anywhere you want if you understand  how it works the principle is same anyway   so now here within it we need to import some of  the classes that's what we'll do first okay now   over here we don't want to use container first we  want to return a scaffold because within it we'll   use other sections like body and other properties  okay all right now scaffold should return a body   so we'll use the body property now here because we  want to create a slider so now they should slide   like this and to do that we can use one customized  one one function in flutter or constructor that's   called page view builder that's what we'd be  using so here we'll call the page view dot builder   this one okay now over here i'll close this so  now any kind of builder in flutter if you know   any kind of builder that takes two  parameters so first one is the context   so we'll have the default context so that what it  means for and in this case the second parameter   for this builder is index okay yeah so that's  what we're going to do and that's what we wrote   so pageview.builder would help us to slide okay  that's the main purpose of this constructor or   widget okay because of this we'll be able to slide  hopefully it makes sense okay and we also want to   specify the scroll direction because i think in  default it scrolls left and right but we want it   to scroll up and down of course you can scroll  left and right but your images has to be a bit   different in this case so anyway now here i  would do scroll direction scroll direction oh sorry so here over here i'll do i'll use  the property called scroll direction and   access dot vertical okay all right and for  now we'll use the three images for ours   carousel slider so we do item count three   all right over here so you are returning you  want to return a function because of this one   so page builder should return a function  so that's what we are going to do   or actually a widget it should return a widget or  a function that returns the widget so that's what   we're going to do over here now first thing  we want to return over here is a container   okay so your return statement so we need this one  now think about this container so this container   should hold these images and everything else  inside of this okay so the container should   have maximum width and height because we want it  to occupy the whole screen okay well now to do   that we can use the width as the maximum width  so in flatter we can use max finite it will   take maximum width for the screen and the same  for height okay so do double dot max infinite   okay well we are almost done i mean with the  first part like showing the images okay now here   uh what do we want to do here we want to show  the image while within container if you want to   show the image you need box decoration that's  what it will do okay and a box decoration has   image property and it takes the decoration image  properly and then within it one second image   now here we do acid image to show the image now  the images are where well now the images if you   downloaded the code from the link so you should  have images in your img folder okay while these   three images okay but we want to define them at  the top first okay go over here okay we don't   want to read directly from the asset folder but  from here as a list so declare here list images okay so like this so we'll make image list and  within the list will mention the image names   so let's go ahead and do it welcome one.png okay well to be quick i'll just copy paste them so now here welcome to and welcome three okay so we have this image list over here  now here we can look through this list   okay how to do that so we can just put plus and  images now because page view builder has index and   it will run three times it'll run from index 0 to  2. so we can specify the index over here so we'll   do index okay now the error should be gone and in  fact here you can also do images.length so image   is the list so dot length would give us the actual  length okay all right so well so far so good   now what we could do we could come over here  and now instead of container we can return   as the home our welcome page okay now we need to  import it i think it's auto imported at the top   as you can see all right okay cool so now this is  the time go ahead and run it well it's starting all right our image is over here it showed  up well now what we could do here well now   we want image to take the whole screen both width  and height but for this property for this one we   can use another property within decoration image  that's called fit okay and we do box fit dot cover using this one it will cover the whole screen   okay now in fact your slider is ready as you  can see right it's a beautiful slider but yet   very simple well the next thing we see we want  to see how to put those dots as well as the   text on the slider okay so that's what we want to  do and we said that those texts and dots would be   children of this container or part of this image  so this is more like a background image now   well if it's a background image so it can have  child because this is in the background image so   within container we'll define here child okay  now within child we'll have another container   well using container is the benefit is you can  specify margin and padding so that's what i like   about container it's pretty useful okay so first  we want to put our text over here okay all right   so now it should have certain distance from the  top and the left side okay so for this one we can   do margin and the const edge inserts only on the  top 150 so top 150 so left 20 and right 20 for now   okay all right so next we want to define a  row over here as a child of this container   so we do draw row text children we know that so within it now here we'll have   a column so first column would show the text we  saw earlier over here okay so here we do column okay and once again column takes children okay all right now the first  thing if you saw excuse me so if you saw we'll have this  text right we'll have this text   so now we want to make a reusable text so that  we'll be able to use everywhere in our app   so we want to represent our text as a widget okay  so here i'll go ahead and create a new folder   and i'll call it widgets and within it here  i'll create a file we'll call it text.dart   okay and well now here you see we have pretty  much three types of text very bold little bold   and ordinary text also this is for ordinary  text well the first one is for the bold   so here i'm going to create another  file and we'll call it uh app large   dot dart okay so first we want to work with  this this extra large or bold text so first   here we want to create a stateless class so  you do a stateless this one and we'll call it   app large text and now we need to have some  parameters the file or the class will call this   one it will pass down some default parameters or  some parameters to it and we want to receive them   what are they well first one definitely the  text size okay all right so we do int size   and then what else the text itself so final   string text and what else uh we also want  a color okay all right well so we do color final color color uh well for now they're good  enough and now here instead of returning a   container you want to return a text and you also  need this cappuccino library or package all right   now here within the text itself we want to use  the text the one we passed down from another class   and i think we need to remove this and put  this field over here now error should be   gone but of course we also need to put  other fields uh properly like require okay and we also need one  for size so we do this dot   size and it would ask you to put a required qr  in front of it and the error should be gone now   so so far we're pretty good so now we'll receive  color for it so here we want to do text style   so you do style text style now here the  text style definitely the first one is say color so color is whatever color you pass down  this color over here and font size so well now   whatever the size you pass okay now for font size  actually we can also use our default one say size   is 30. so this is a default one now here we need  to remove this one because it's a default one okay   it is already given so it's not required okay now  here for the color actually we can also change   this one so if the color is given we'll use that  color otherwise we'll do colors dot black if color   is not given we'll use a black color okay all  right of course uh maybe we need to change the   style here because it's not int it's a double  the size okay now the error is gone okay well   that's it and what else we also want it to be bold  okay so let's go ahead and do it so we do font font weight font weight bold so for large x app  text f large text will have bold okay all right   so now it already became reusable so what we could  do we can just come over here and call this app   large text so here we do app large  text you'll see it's already there   now we want to use the first one you see it hops  shows you the parameter okay so only required   one is the text this one so what you can do  you can pass here trips okay now it could be   very beautiful now let's go ahead and take a look  yeah it's there beautiful so because it's reusable   so just as a demonstration purpose you can use it  again and again now here you can say disk cover and within it you can also use say color  okay so you can do colors dot say red   all right oh it's there well so it's reusable  but we don't want to use it this one now   okay so so far so good with the app large text  but as you can see in this slider we also want   another text like this so what i'm planning over  here this two text will be pretty much using the   same widget so we'll use build only one widget for  them and we'll reuse okay yeah so how to do that so here this is our app text now actually we  can copy all of them from here and we'll make   a slight difference instead of calling app  larger text here we'll call la f text okay all right now of course here  the default size we don't want   30 we want it to be 16. okay  we don't want it that big   okay and the default color is well we can have  a different kind of default color so black 54 this one a bit different okay so that's  it and we also don't want it to be bold   so we'll take it out now because we already built  one so this one becomes also easier okay now we   can use this one over here so here we do app text  okay this one now here the text will pass mountain   and over here we also want a size for it for this  one the default size is 16 if you come over here   but from the picture you can see they  have the same size so here we'll do say 30   okay and the color is bit different okay  but we already have a default color this one   so we'll use the default color now let's go ahead  and run it and see our application yeah it's there   okay now here we want to align them over here so  how to do that so over here we'll call it uh cross   access alignment this property so you do cross  access alignment dot start so now it'll align them   the beautiful thing about this is that now you can  use this one this one over here for this as well so this text they are all reusable now we'll be  using the same class we created for this one now   one thing you see that it has from here it's not  going there it's cutting off it's going to the   next line so because of this one we need to create  a container and within container we'll use this   text app text okay so here we do container and now why we are using container because  we want to specifically mention the width   because if it's more than 250 we want to fall back  to a next line okay apart from that everything   else should stay the fine now here we'll have this  child and our child would be text what text this   app text that we created early okay now here it  takes parameter argument actually so the first   one is a text we know that if you hover over  on it so we have this text so here we'll say mountain hikes give you an incredible  sense of freedom along with endurance endurance test okay perfect so what you could do you could go ahead and  check it out right away oh it's there pretty much   well it's already looking like the way we  want but of course we need to work on it more   and here we want to have the color and  we want to use app colors dot text color   well now app colors this file need to import it and we do text color 2. now what is  this app color where is this coming from   actually it's coming from here colors so text  color 2. so it's in your downloaded folder   so go ahead and check it anyway so now it's there  so now let's save it okay so the color changed a   little bit now here we also want to change the  text size so you do size say 14 okay so it's   much smaller but now the slider if you see they  have a bit of distance so that's what we want   to do now and it's pretty easy so over here we'll  do size box okay and we can do say height say 20. now there you see well it's beautiful right so our  slider is already working if you take a look but of course you can also change this text along  with the slider that would be pretty easy if you   want to do that you can declare another list of  text over here different kind of text if you want   for the headline for the small lines okay and you  can change them as you want how to change it it's   pretty easy just here like this over here okay  over here you can just go through the index like   if you have text a list say a list called  text if you declare a text over here say list   text so here you'll have some text based on uh  whatever text you want so over here we'll do   each of them you can access them like text index  like this text index okay and just to remove this   part and you should be good to go but we don't  want to do that now okay so we'll skip this part   yeah so the slider is already  there and it's pretty good okay yes   next we'll see how to create this button okay well  now for this button we also want this button to be   reusable okay all right well because of that  one now over here we'll come over here and   create a button now we just we not only want this  a reusable bottle we also want it to be responsive   okay so that's why i will call  it responsive button dot dart so to do that first i'll create a stateless  class over here and i'll call it responsive   button okay now over here we need to import  some of the default packages or libraries   and we should be good to go now here think about  it so this button what do you want well now we   want this button to be responsive in a sense  that the same button we want to use here and here   now as you see while their background color stays  the same so we are happy with the background color   as well as uh this icon doesn't change so this  icon is fixed background color is fixed only not   fixed thing is this one and the size okay  you see the height is fixed so what do you   want to pass to it well you want to pass a boolean  variable to know if it is a longer or shorter okay   and at the same time if it's shorter how short  it is so you want to pass the width of it okay   well if it's not shorter if it's longer actually  it's taking all the available space okay so we   want to pass two things the width and a boolean  variable to know whether it's going to be a short one or a long one okay so that's what  we want with this now over here what we'll do   here we'll create a variable  we'll call it bull is responsive okay and now here we also want to pass  uh width okay so we'll call it double   width all right now of course we need  to initialize over here let's see now let's see well now we also want this to be optional okay you   may pass it or you may not pass  it okay all right and uh here let's see is responsive this dot is responsive so the default value is false okay and we are get  good to go with this all right so now here what   do you want okay the first one we want to have  okay for now we want to have a width all right   okay and say the width whatever the width  you pass use that one okay and height but   now height we want pretty fixed height so 60  okay and within it we'll also show this image   and this text together but sometimes just  the text sometimes image and text together   if they're together so it's more like  say in a row okay in a row property   so here we'll have a child within the child  we'll have row and it'll take children   okay now as you can see from the both buttons  image is a must one so image is always there   so i'll use image dot asset this one and within  it will pass the image so what is the image   over here we have well we have an image which is  called button one so that's what we want to use okay so here what do you want to do so here we  want to create the button name button 1 dot png   and we should be good to go all right okay and uh  yeah so that's pretty much it okay for the button   now of course as you can see it will  have some border okay so here we can   create border we could do decoration we do box  decoration now here we'll have border radius   and border radius dot circular say 10 for now okay  and it will have a background color so we'll use   app colors dot main color okay once again this  is coming from our color class over here okay   all right now with this uh we have a  pretty interesting button so what we   could do we could go ahead and check it run it  all right and we want to see how it looks like   so we'll put the button right below it and  uh now if you see over here there is a bit   of distance so first we want to create a distance  so we'll just copy paste this one put it over here   and we'll have it extra height over  here now we'll call it the button   app large buttons or large text sorry  responsible buttons responsive buttons okay now over here even if we don't  pass anything let's see what happens   okay well it's there okay so the button already  showed up that's pretty good and comforting so now   here the well now we didn't pass any width  over here but actually we can pass it with   so now let's go ahead and pass a  width over here and see say with 120 now let's go ahead and check it now it's  a bit bigger right larger but now here the   problem is it's not centered so we want it to be  centered okay so now over here we can change it   so we could do the main access alignment  main access alignment dot center okay now it's centered okay well now we'll  see how to draw these dots uh how to draw this   three dots okay all right as we said earlier  that we need the two columns in the row okay   well look at this now we already have the first  column this column is showing this one so you   want the other column over here okay all right so  now we'll do that so we'll have column for dots okay now within it we'll use children okay  and well now we are not going to use this   list operator over here to put children we'll  use actually another uh convenient function the   function that shipped out of the box in flutter  automatically for you like this one okay let's   do generator it's very useful so here we want  to have three dots okay and now for each dot   we want to return a container okay so that's all  we want all right so we do return container but   actually i don't like to like this i like this way  because i can have a new line so i'll do container and we need to have semicolon because we  are returning now look at the picture so   this picture over here if you see the dots well  they have certain border okay yeah and the length   wow so that's what we need first we want to  assign them width okay say for example width is 8   now if you look at the picture you see its  height is changing based on the slide so we   need to have a height but dynamic height right  but anyway so for now we'll say put height   25 just let's go ahead with  this and see the result and then   we want to have a decoration because we want  to have border okay so we do border radius and we'll have border radius eight okay and we  also need color so do color and we use app colors   colors dot main color we saw early now over here  we'll go ahead and run it okay so it's there right well now we want to push it to the end over here  so now once again we can use this row property and   we can use a property called main access alignment  and main access alignment dot space between   so it will try to create all empty space  between these two columns or these two widgets okay now it looks perfect of course  here is this 20 because of this one   all right yeah so now our dots are there but  as you see it's not dynamic so first thing   we want we want it to be dynamic change  the color and also change its position   well now because of this one we all get 25 height  for our container but we want to be dynamic   so as we slide over we wanted to change the height  okay and the current slide should be longer height   how to do that now here we can use one of the  properties that we already have so like item   builder because of item builder keeps tracks  of the index whatever the index we go through   we can compare this index within this  loop okay so in that case actually   we can change the name index slider or index dots  okay now over here we'll do a check so index equal   index dot so this this index is for the dots and  this index is for the slider and if they are equal   then we'll use 25 otherwise we'll use just eight okay so it looks like it's  already working as you see   but now they're too close to each other all  in that case we can apply margin quickly do bottom margin say eight all  right well i guess it is too much so two is okay now the other thing we need to do we need  to change the color and if we do the color   actually we can just like using this one we can  still use this condition using itinerary operator   so index index dots if they're equal we'll use  the main color otherwise we'll use a different   color so we'll get from app colors dot main  color with opacity okay we want to use a bit   with opacity so if they are not equal they will  have a little bit different color as you see now   so pretty pretty good right so with  this we are pretty much done with our uh   custom slider okay all right well next we'll see  how to use how to build this page okay this one well this page has this bottom navigation part so  we'll focus on building this bottom negation part   and after building that we'll build this page  anyway so bottom navigation bar should include   this one four items so these four items they  should have their related routes or four pages   so once you click on them it will take you each  of the page okay all right so to build this button   navigation bar first we need this list of routes  or list of pages okay so that's what we need   well now to do that first we'll go ahead  and create a new file but now this new file   i'll put it in a new folder so here within  this pages file i'll create a new folder   and over here i'll call it nav say nav pages okay  now within map pages first i'll build a file dart   file i'll call it main page okay main page dot  dart all right so what is this this one would do   well actually this main page.dart file it would  hold everything in this screen as you can see   so it would also it also means that it would hold  this four items on the bottom navigation bar okay   so this page would hold everything  and once you click on each of the item   it will take us to a new page based on the click  from this page will go to new pages all right so   now saying that so this is also our main page for  displaying everything as well as this page okay   so this button or this item means this page so  now what do we need to do we need to go ahead   and create this four pages so we'll simply go  ahead and create them very quickly so what do   we do would come over here and create new file  so the other file i'll call it bar item.dart   well the name is coming from here it's a bar item  search item or search page and my page okay all   right uh well i think uh we could refactor the  name here it's a bar item page okay all right now   over here i'll declare other two pages or files  dart files so one is the search page dot dart and   the other one is uh uh my page dot dart okay cool  now here within it we'll just simply have some   very simple content to show based on the click  okay all right so what we'll do now we'll go   ahead and create some stateless class over here  okay well for search one i'll write here search   page okay now within it we need to import  some of the libraries and then here within it   say i'll return a child as a text okay and here  i'll write search page okay now over here i want   to center it so i'll wrap it around and the center  widget okay now we are pretty good with this the   world i'll just copy this part so we're done for  search page now we'll go to my page and here we do   stateless class and we'll just copy paste what  we did early now over here we need to import this   class this library over here and over here  we'll call it my page okay all right um   and we also need to put it down there okay now the  error should be gone and here we need to have this   return statement all right so if you  want to reorganize your code you can   do option command l on mac okay anyway so that's  it now we will also go ahead and create a very   quick uh stateless class for this one we'll call  it bar item page okay now over here we'll copy   the content oh sorry uh the content from my page  over here okay but of course here first we want to   change the name we'll call it my page now we'll  come over here and copy paste this one so instead   of search page over here we'll write bar item  page now we need to import other libraries   okay we are pretty good so our navigation bar  over here would need four pages well three of   them are already done and this page is also  our main page so now we'd go ahead and work on   uh this page as well as this bottom navigation  bar okay now as i said bottom navigation   bar would be over here in this file so  here we'll create a say stateful class   okay now here we'll call this  name as main page okay all right   now over here instead of returning a container we  want to return a scaffold because we want to have   a body and within the body we'll have this section  and scaffold has another property that's called   bottom navigation bar for that property we'll  attach this one this four section somehow okay   all right now first we'll  go ahead and work with the bottom navigation bar item property okay bottom  navigation bar this one so what i will do i'll go   ahead and close this make it bigger okay now  over here definitely if you hover over on it   you'll see that it says that it  should take uh over here a widget okay   and the widget we should use that is called  bottom navigation bar okay so the bottom bottom navigation bar this one okay  now over here if you hover over on it   you will see it takes a list of items okay  that's the first thing we want to take care   list of items so what is this list of item  so now this list of items should contain   things okay yeah so these four items it  should contain these four items all right yeah   so now here what do we do we'll go ahead and  create this list so simply just call here items   okay as you can see it takes a list okay so  now of course it should take the list but   where is this list coming from okay and what  are the things we should put in the list but   as you can see if you hover over on  it it says bottom navigation bar item   so the list type should be bottom navigation  bar item right so that's what we should have   so now here we'll just simply write here bottom  navigation uh bar item okay this one right   so now it does take an icon all right now the  first one we want to take this icon okay this icon   but now we do have a similar icon over  here so that's what we'll use icons icons dot apps okay the first one okay and it should take another  uh property that's called a title and simply we'll   call it uh home okay and title takes a text  so we'll just go ahead and simply call it home   all right and now yes we are good so here we  put a comma now i'll copy this one three times okay now here we'll change the name here we'll  call it bar and here we'll call it search   and here we'll call it my okay   now we'll also need to change the icons  over here definitely we'll call it bar chart okay uh i think bar chart   sharp this one now for search we can  simply use an icon that's called search okay and for me or my page here we  use an icon this is called person okay   so while now with this uh four  children in the item list we are done   well do remember well anywhere you can you see  in flutter pretty much that has the word bar like   tab bar navigation bar or tab bar view they  should take a list of children this is a common   property in flat earth wherever a widget has a  bar it takes most of the time a list of items   well as i said so they take list of children now  each children is clickable that also means that   once you click on them this bar item should take  you a certain page okay so that's what happens   here so for each of the bar item we'll have  a related page where we can navigate to like   if we click on the first one we should go to this  page which will show this one for second one we'll   go to a second page third one for third page like  that okay so we need to create them pages in a   list but already actually we created them as you  see these four pages like bar item search bar item   and my page okay all right so now what we need  to do we will need to go ahead and create them   create a list and put this classes in the list  okay so that's what we'll do so here we do list   and i'll call it here pages okay now it should  take four rounds or pages related to this one okay   well no the first one will do it  little later it's a second one   it's called uh bar item page okay all right  the third one is over here search page and the fourth one is our my page right okay now we need to import the related packet  libraries for this okay done we have three so last   one is for this one this one is for this one and  bottom bar is for this one now this one is very   special because this would be our default page  but of course we need to go ahead and create the   page we didn't do it yet so for the whole app this  is main page so that's why i wrote here main page   but the content should be coming from another  route or another page for this icon so we need   to go ahead and create that as well so that  one will call it home page okay so what we'll   do we'll go ahead and create a file over here and  we'll call it homepage. okay now over here we'll   create a stateful class and we'll call it home  page all right now simply over here right now   we'll just return say a container for now so  that you get the idea okay and now over here i   will import the related packages and libraries  okay so well this one would be responsible for   showing all of them over here related to  this button anyway so now come over here so here we'll just simply write home page okay and we need to import it all right okay so  so far so good now what you could do we could go   ahead and run it and see the result what happens  because we have four pages all right and related   to those four pages we have these bar items but  one last thing before we go ahead and do it we   need to attach this list okay attach this list  over here in the body section of scaffold okay   so now here we write body okay now body takes a  widget in flatter within scaffold okay so now here   i want to pass this first page remember this home  page is also a widget okay so class is widget   in flatter most of the time so now here simply  i'll return this one i can return it like this   pages zero so pages is a list it will find the  first item first item is this one and within it   will return a container okay all right so now  what we can do we could go ahead and run it okay of course now over here uh within  our main file for now instead of   returning welcome page over  here we'll return main page okay once we are done with the whole app we'll connect  all of them together but for now we want to go to   this page directly all right  now let's go ahead and check it   okay now over here we don't have any error  but if we come to our main page look at this so we do have everything now here our bottom  navigation bar is visible as you can see   it's over here okay and now if you see slightly  we also do have the colors over here so it's   visible all right well if you see now these  colors the label and icons they are not visible   so we can change the color and to do that first  what you could do we do show selected item color   or let's see selected item color okay so selected  item color for now we do colors dot black okay   54 so now if you save it so the first one  is selected you can see now for at the same   time for unselected item we also have  a color and this one will use gray okay   all right and we can use gray with opacity  0.5 so okay so now there is a big difference   all right now we don't want to show this  names over here like as you can see so we   want to get rid of the names so here we do  show selected labels false okay and show unselected and selected label both set to false  now the name is gone all right okay so far so good   and now there is this line over here we can also  get rid of that one we do elevation zero okay   but now we'll work on the tap event okay well for  that one first we need to define a tab function   because if you come over here and hover over on it  you see it has a tab on tab function okay so first   we need to create a function outside of this build  method okay we'll do that over here you would call   on void avoid on tab the function name is on  tab and now over here well ontab should have uh   index it should receive an index from the caller  function of this all right so what we'll do here   we need to check uh well now bottom navigation  bar it takes an index as well okay so if you   come over here you see current index zero okay all  right so now over here we'll set the current index   okay well one thing though well current  index is zero actually that means you find   this page so you can go ahead and run it and check  it now of course no change but now if we change   the current index to 2 it will come over here  okay all right so you see this is the default   one unselected one all right yeah so it found  my search page this one over here all right yeah   anyway so now what we'll do uh so we need  to have a certain index saved over here   and pass that index to this place as well of  course we also need to pass this untap event   okay so here we can define another variable  and we'll call it end current index equals zero the default one  it could be anything you want   now over here we'll do set state function  and we didn't set state we would have   current index value from this one okay so this  one once we clicked a certain thing over here so that index would be passed down to this  one then we save it okay to this variable   and after that actually here we can pass   this one all the naming looks same but you can  name them anything it doesn't really matter so next we need to do we need to bind this ontap  event with this on top event okay so here we know   that it takes on top event and here we just  simply call on tap okay so now what is this   index so whenever you click on any of this okay  so that index is sent down to it directly that   means send down to this one and this one later on  sends to this one back okay that's how it works okay so now we'll be able to click  them as you see now they are clickable okay all right now here as you see you want to set a certain background color to it   but if we do that it won't work okay so  let's go ahead and check it so over here   we can set background color do  background color say colors.red but if you see if there is no change now that's  because button navigation has a property which is   called type and it takes a value bottom navigation  bar type and actually it takes the uh this one   shifting which is the default one actually okay  well because of this thing it shifts if you click   on them as you see it shifts left to right like  that okay now because of this one the default   background color is still there so we can override  it here we can override by typing fixed okay as you see now they won't change i mean they don't  shift left and right okay so you need to write   this one if you want to set certain background  color anyway in our case we'll set it white   okay now the background color is white as you  can see it's different from the screen color okay but now we want our screen color and  background color should have the same color   i mean bottom navigation background  color and screen color so here we'll   set up the background color we'll do colors colors dot white okay yeah now it looks much  better but now there is another problem so if   you try to click down there at the bottom it shows  an error okay now because your label is gone but   well it's just invisible but it's still there so  when you click on this it creates this problem   so to get rid of that problem what you can do you  can do unselected font size zero so when it's zero   actually it's not clickable because the size is  not there selected and unselected all set to zero okay now as you see there is no error if you  try to click at the bottom okay so now uh the   error is called okay uh well now here there's  another problem though so we're setting the   current index but we are not changing over here  okay we also need to change the index over here   so we'll do current index okay now let's go ahead  now you can see actually you can see the pages   all right so once you change the index over  here so we need to change index here here this   few places and also pass down the tapped  index to this one now with this actually   we are done with our bottom navigation  bar building simple and beautiful   next we'll see how to show this page for the  home page of our bottom navigation bar it means   for this one we go ahead and start the page start  building the page let's look at the page structure   okay so this is the page we are going to build so  as you can see from here it's pretty much all in   column and row layout okay so this would be a big  column and within the column we'll have row this   one so this would be all part of rows and then  we'll have page view builder or list view builder   and then once again we'll have these things and  we already built this one and we already actually   done pretty much all the work for this page for  example we already know how to display the text   this text over here okay so this page would be  pretty quick to build anyway well now to do that   first we have to go to our home page over here  so this is the home page okay so over here we   want to start building it okay now instead of  returning a container we will return a scaffold   okay so we do scaffold okay now within it  we'll return well we'll have body right so   within body we'll have column okay as i  said hurry now column will have children   okay now within the children we'll  have over here you see this icon okay   and this one both of this all right so here  we could do one thing we could actually do   a little bit padding and then put them these  two in a row okay or we could do row first okay so first we'll do a container and  within container we'll have child   and within child will have row  and now we'll have children okay now within these children we want  to show this icon and this guy okay   now how to do that so here we can just simply go  ahead and call icon icons and we'll use the menu   icon that's shipped out of the shipped in flutter  box default okay i mean the sdk and then we'll do   size 30 and color would do colors dot black over  here okay all right so well now with this that's   it now let's go ahead and build it  so it's it's right there at the top   okay now we'll take care of that soon so just  now as i said this container over here this one   so here we could do a little bit padding we'll  do cons edge inserts only and say top 7t and it's the left 20 okay i will say it's here but  this effect could be done with also safe area   view but personally i don't like i like to go  ahead with this uh so it's the preference okay   it looks like our page is working there anyway so  now that's the first thing we did now what do we   want to do we want to show this this guy over here  but now for this one we'll simply have a container   so we do container and say width  50 and height 50 and we'll have   so here decoration because we are  going to border so box decoration   and then border radius and border radius that  circular say 10 we are good and we'll have   color within it so we'll do colors.gray and with  opacity 0.5 now let's go ahead and run our machine   while now it's too close to each other right  so definitely because we are within row so   we can use expanded widget over here so the  expanded widget and we'll use empty container   okay let's see now let's go ahead and  save it uh looks like we have an error   okay now we pushed it down to this very left side  right well so for this one actually this container   itself what you could do you can arrange a  margin over here okay or even padding so go   ahead with margin this is only and we do write  say 20 all right now it's looking much better   okay well that's the first step we did now  we'll go we'll go ahead and do this one   so this would be within the let's see so we  have this column so within the column we have   so this is the first uh container this  is showing this part which is this one   right okay but of course we can replace this  part with an icon it doesn't matter though   but you get the idea so now over here so  we want to show this section but as you see   we have a space over here so what we'll  do we'll go ahead and create a size box and height say well say 40 okay all  right now we want to use this one   this text but earlier we already have worked  on this so we have this widgets over here   so app large text so we can  just go ahead and call that one   so it called app large text now this is the  beautiful thing about reusable widgets okay   yeah so once you create one you can use it again  and again so we'll write the text to discover   okay now let's go ahead and see our app over  here okay now of course it's in the middle   but it really doesn't matter so we can take care  of it from here we could do cross-access alignment   which is this axis and we do cross access  alignment dot start okay it comes over here   all right okay well now one of the thing that we  do have over here so if it's like this so well no   it puts it here right here right so what we could  do we could go ahead and create a container and   within container we'll have say margin okay so  const as insets only and would do left over here   20 okay because we already have this one so now  we can just simply go ahead and put at large text   and it should fix that problem okay so now it's  looking much better okay so next we'll see how   to go ahead and show this one but once again now  this section we also need a size box over here   okay like this one and this one as you can see  empty space so we'll wrap it around size box   so let's do it this one so over here we can write  here discover text so menu text like that okay   all right now here we'll use 30 okay now after  that what we'll do we'll go ahead and create this   tab bar okay so here would write tab bar well we  learned earlier that in other tutorials in flutter   if you have any kind of bar or tab bar well they  should take children okay and the children should   be as in the list okay so that's what we're going  to do now this would be our tab bar and this would   be our tab bar view now we how we could do them we  can actually uh put this one within one container   and put this on within another container  so we'll have two containers okay all right   so now let's go ahead and take care of this  one so here first would declare a container   and within container we'll have child and  say child will be tab bar okay this one all right but just now we learned that tab bar  should have children right children should be as   list or in the list if you can see over here so  record this tab so this tabs takes children okay   now over here we do tabs and that's it  okay now over here what we could do we can   put our tabs this tabs over here like this text  are the tabs okay so here we would wrap it around   tab constructor so do text and the first one is  a places tab tag text second one is inspiration   and tab text the third one is emotions  all right okay well so far so good okay   well now related to this three just  like we saw earlier in the bottom   navigation bar we should have three tab  bar view okay so once you click on them   so the tab bar we would showed up the  corresponding tab bar view they would show up okay   just like bottom navigation bar actually they're  pretty the idea is pretty similar so if you click   on button navigation bar item they should show you  item or pages the same thing here you default is   this one and if you click on others they should  also show you new items okay so that's what we're   going to do now for this one here what we'll  do we'll go ahead and create another container   okay now container should have child and  our child should be as a tab bar view okay   so here would write child tab bar view okay now  within it as you see hover over on it so you   need an argument which is called children right so  that's it you just go ahead and write it and write   like children okay now to be quick very quickly  here while i will have text and i'll say hi text there text by all right so once you click  on each of them they should show you this text   okay all right so that's the basic structure that  we already built for our app okay now of course   if you try to go ahead and run it i'll say there  would be an error do you know what error you'll   get okay so no tab bar controller so what does  it mean it means that we have to define a tab   bar controller for it okay well to do that you  need to come over here and over here you need to   implement this thing which is called with  ticker let's see uh ticker provider state mixing   because tabber view they have their own state and  you can access those state if you have this class   implemented in your stateful class which is  this one okay you need that one because tabber   controller takes this inc as a parameter okay so  that's why you need them now we'll come over here   and declare here tab bar let's see tab  controller actually it's called tab controller   and here we do tab controller  and now here tab controller so here we'll use the first one okay  because it is a parameters as you can see   so that's what we want to use now we will  have three tabbers so here we'll write   length three and this inc is in general this  okay i'll now vsync is this over here but   it's showing you error that's because you  just want to refer to a context so we'll   refer to this context why this is important  because every time you click on the button or the bar it gets rebuild so it needs the  context and v-sync refers to this context okay   now let's come over here and it has a property  it's called controller as you can see here   so here we do controller and tab controller  we already have it now here the same thing   controller tab controller okay  now let's go ahead and run it okay and it looks like we have a lot of other  issues well we have this arrow that's because our   tabber view all they need certain width and height  but we didn't provide that so that's why it's   getting us error so over here we'll write height  say 300 and with say double dot max infinite so   all the available width will take okay now let's  go ahead and run this time now the error is gone   yeah it's already working right but of  course we need to take care of many things   come over here okay cool so without within  height it doesn't know what to display and   how much to display okay so that's the problem  okay well now so far so good and definitely we   need to take care a lot of properties over  here and that's what we'll do let's go ahead   and change the color first because they are not  very visible okay so change label label color okay and we do colors dot um black this one  okay so these are the labels now they're visible   okay and next we'll do unselected label color  because this one and this one we want to have   a bit of different color they're almost  very different but almost different but we   want to specify it more so you do unselected  label color and here we do colors dot gray   uh yeah now they're more obvious all right and  now let's do now we want to put them over here   over here okay i mean a line like this now it's  tricky you need to set a few properties for that   it doesn't work directly like just like using one  property so here first one you need to definitely   put this call is a scrollable true yeah so it  did put a little bit but not exactly i want   okay so now this is one problem and this  problem actually to override this one   we need to wrap this around a container or a  widget actually this is called align widget okay align this one and within it we'll use the  alignment property so alignment alignment center left okay so it'll put everything to the left okay well that's still not working because there  are other settings that we need to take care   now here it they do have a bit of padding   so we need to get rid of that padding so first  we'll get rid of all the paddings okay all right   so let's see over here level padding const  edge this is only left zero right to zero   okay now here you see they're all together but now  let's say you don't have this one okay it still   works but it pushed back so first using this one  we put everything on the left okay and then using   this one we control the space so that means that  so we need to use both of them but now if you see   you take care take out of this one it'll work  a bit differently once again okay now if you   if you just put this one it won't work alone okay  or if you just put this on let's see how it works   okay no response so so a lot of them they work  together not just one setting so it could be   painful if you don't know so this all of them they  should work together but now of course it means   life to zero it means that we can put it directly  on the left so here we can put 20 let's see   so left side they all will have 20. okay  now what if you put 20 for the right side   okay now the space is much better  okay and now indicator size so   let's see indicator size  could be same as level size or   there's a property it's called indicator  size indicator size and we'll use a tab bar indicator size label so now it's same as the label size okay  that's another property that we can take care   but now definitely what we want we want it to be  say like this the one over here okay dot no really   uh a line there okay well to work on this we  need to actually specify our custom decoration   painter you might think that you can just directly  draw a circle over here no you can't the problem   is that here if you see a property which is called  indicator now if you hover over on it it it wants   to take decoration widget okay so if you just  go ahead and directly use container or other   kind of box decoration method it won't work so you  have to implement over here a class that extends   decoration and will return a value from that class  so that also means we are returning a decoration   so that's what we need to do now well to do that  we need to declare a new class okay so that's what   we'll do we'll do class circle tab bar or tab  indicator okay and it should extend decoration okay this one as soon as you do that uh let's  see indicator we're gonna hover over on it   it's in missing one overriding property so this  one so every time you extend decoration you must   implement create box painter okay you must do  that otherwise you'll get error and here it   should solve the error now within it we want to  return something okay so we want to return this   circle over here okay so how to do that now  we want to draw a customized circle and here   you can only draw a customized circle otherwise it  won't work okay so here we want to return a circle   but to do that you need to implement another  class okay and this class will called circle and extends box painter all right sorry it should be  out of this class not inside   this class okay all right now while we are doing  that uh you see it says it returns a box painter   so first we extend a decoration that's why  we need this method but now here it says   that this method should return box painter so  we have a new class here and from this class   we want to return a box painter all right now we  have another problem it says it's missing another   overriding property of paint that's what we also  need over here okay otherwise we'll get an error   so it's very interesting and a tricky so because  once again this only takes decoration widget   so that's why we want to create a decoration  widget and in return decoration widget has a   method that's called create box painter we must  override it and once you override it want to   return something what it returns it returns a  box painter so we go ahead and create another   box painter class okay or a class that extends box  painter and over here you could you should return   a paint or you should override a paint method  okay so that's how it works okay so what we'll   do so now look at this one to this class we want  to pass color and radius okay that's all we want   so once we call it from here we can pass  the color and the radius okay so we do final   color color okay and now here we do double radius  because we want to return we want to use this too   and pass it down to our other classes okay  and we'll get them from the color function   but now of course it's saying you need to   use lit modifier or things like that but  we also need to create the constructor   so here is our constructor so you do required  this dot color and required this dot radius okay now the error should be gone now as is as  we know that this should return a box painter   okay and this class is returning box  painter so we can call this class over here okay so we do through this one so return  this one and we can pass this color   because we use this color to paint in this  method and now here we'll have radius radius   okay now of course if you hover over on it  it will ask you that it's not defined main   parameter over here so that's what we need to  do over here as well so we'll just go ahead and   directly copy this part to this part okay  and now over here we'll also copy this one   and put it here and we'll just change the name okay yes now the error should be gone now look at this paint method this  paint method is very interesting   this paint method actually should draw this circle  okay now what we could do we could go ahead and   use this canvas and it will have a draw method  inside so you do canvas.draw circle i think this   one okay now the first one is offset so we can  use this offset whatever the offset is given okay it's a default offset once we click on   the screen we get that one okay now here it says  it takes a paint object okay well it takes a paint   object so we need to create our own paint object  and that's what we'll do so here we do paint paint called would say here paint  we'll use the paint constructor   to create the paint object okay now paint out that  has some underlying properties that we can use   it is color property so for this color property we  use the color that we passed down and for hardware   acceleration we can specify is anti-alias it's a  true so we'll use a harder acceleration for this   and we just change it to this underscore  so now they become the same paint object   okay so hopefully it makes sense what is happening  here so we'll call this class and we'll pass down   the radius and color and it will come down to  this one and over here using this paint method we   are going to draw it draw our circles now we'll  go ahead and use it so we'll call it from here   okay we'll call circle tab indicator here we'll  use color say colors so now for this color we'll   use our app color app colors dot main color  and radius here we'll use four okay all right   now let's go ahead and run it see the result okay  so well our tab bar is there but it's at the top   okay now we need to work on the position well to  work on the position we need to come to this paint   object or paint method over here and you see so it  has this uh image configuration object and offset   object okay we need to work both of them together  so currently wherever you tap you it's taking that   place and putting at the beginning okay so we  can calculate the position and change it okay   well the first thing here we'll create a new  offset object for it so do final offset say circle circle offset okay now here we use offset  constructor now we can count x y so we need to   change the xy well first this configuration object  this one using this one we can access wherever it   taps that area okay and its width and height so  here we'll use size because he's in size actually   wherever you tap on it can take that area size  okay and as well as its width so whatever i tap   so i'll have access to that width okay now as i  have access to this width i can divide it by two   okay so it'll put me in the middle so if i  tap over here now i'll come back to this place   because i divided by two whatever i tap i get the  width and divided by two that's how it works okay   and now here say uh well for height so it's more  like the x part and for y part let's set zero and   see the result okay and we do have a bit of  problem over here let's see okay you need to   add a null checker uh and what else now here  we can add these two opposites together okay   the other one is circle upset okay now  let's go ahead and run it and see the result   so it looks like it's working so it's in the  middle right now wherever you tap right now we   need to push it down to this one now remember the  coordinate system is like this wherever you tap   is the zero zero okay or like this it's a  zero zero so this x coordinate this is y   coordinate so right now here on the x  coordinate we are in the middle right   okay so pretty much in the middle not exactly  but we can optimize that more okay so all you   need to do whatever radius you get you need to  do minus 2 with that okay so minus radius 2. so now it's exactly in the middle of x  coordinate but anyway so now for y so   it goes down it increases okay so for this one  zero zero is over here it goes down it increases   so now we need to come over here  and from the configuration object   we need to get the size and width from it we  already have the width now we'll get a height   okay now here uh let's see we also need to add  a null checker let's go ahead and run it so if   it's zero zero and this total selected area the  total selected area the height is maybe this   so now i'm putting down this height from zero  plus this one okay you see it it went down   okay yeah of course we can minus the radius  a little bit so it'll put it a little up okay now it's perfect okay so what's happening here once again wherever  you click it gets that area and it starts from   zero for y direction zero for x direction x  direction and y direction and you also get the   total width and height and we minus that okay to  get our desired position hopefully it makes sense   anyway so this is the paint object or paint  method you can paint things and personally i   like it very much anyway so we are done with this  one right now the next thing we want to do is   draw this one well to draw this all we need to  do we need to come to our container over here   and we didn't container for the first one we'll  have another container and definitely we need to   use box decoration okay so would be quick so we do  say with in this case we don't want the complete   width maybe just to say 200 and height is same as  the parent height which is this one and decoration now which image we want to use we want to use  the image uh hopefully this one the first image so we'll call it mountain.jpeg make sure that we don't  have any error mountain.jpg   or for now we'll show just one static  image but later part of this tutorial   will get all this image from our network  request okay all right let's go ahead and run it okay our image is there and  we all only have one image   as you can see all right so now here some of the  properties so let's take care of it quickly so fit well it take it took the whole space but it  would be good if we have if we are able to put   more images here okay then it will take it exact  within height okay so don't worry we'll take care   of it right now so here we want to scroll through  different images for this this place button okay   yeah so now what you could do here we could  wrap it around uh a list view builder okay   so here i'll do and wrap it around a widget and  we'll call it list view builder this one okay   all right now of course it says we need  to add a item over here which is this one and actually within it what  we could do we could return it   okay so here we do return okay well  if you get code gets like this ugly   you can get rid of like this you could say option  command l on mac okay let's try it one more time option command l okay now it's getting better okay  so our container is within this list view builder okay now how many items we want for now  say item count within listviewbuilder   we want three items okay so item count the three okay now let's go ahead and run it and see the  result so our items are here but right now they're   horizontal or sorry vertical but we want them  to be horizontal okay so let's do it so here   we can change the axis we can do  scroll direction access dot horizontal okay now it's looking much better okay while other properties  we could take care of its uh   say left and right thing but for for  the parent container which is this one   this part here we can assign margin to it or  padding so you do padding const at inserts only so left 20. okay now it's better but within  each container over here we can provide a margin   so it goes takes extra side out  of this box so here we do margin   const edge this is only and we do write say 10. so or 15 pixels like that it's looking  better and we can also provide a top margin   could be say 10 okay yes and at the  same time we can scroll through them   okay so it's working in future in this tutorial  we'll see how to do different things over here   but for now it's working we know it right  and we also load the images dynamically   well the next thing we want to take  care of this this these few things okay   all right well so over here we are done  with this tab uh tab bar and tab bar view okay well what is the next thing we want to do  we would take care of this one okay well to do   that uh first thing first while here it's in a row  section right so here we do row okay and children now over here this one we already  worked so that's called app large text   up large text over here and we'll put explore or okay now let's save it so it's down  there but now they have the same text size   but you see they don't have  a really same text size   so we know that we can pass parameters like size  which is font size so here we do size say 22 okay uh yeah now it's better and at the same time  we can use a bit of distance so here we'll put it   like this okay all right but of course we need  to take care of this thing over here this uh   the padding so to do that we'll wrap it around  another widget so the command option container   now while this container we could do margin just only so we do left say 20  and right 20. okay we do write 20   because in future we also need 20 pixels over  here okay now we want to show the small text   but we already worked on it so this is  called app text this component app text   okay so it takes as you can see from here  it takes size and text and many other things   so here i will write see all  and we can specify the color   so here color and we use colors from  our app colors dot say text color   all right and let's go ahead and run it and  save it see the result yeah it's like this   uh but now we can take care of the space over here  so one way we could do it is main access alignment   main access alignment space between  okay now it's looking perfect okay great so next we'll take care of  this thing well to do this   uh definitely we need a listviewbuilder  horizontal list viewbuilder and at the   same time within listviewbuilder builder will have  column okay so here maybe we'll have four columns   each column will show this one and then this  one and the next column so the column would be   listviewbuilder's child or will return column  from it okay so now let's go ahead and do it so here definitely we need a size box and in this  case we'll use 20 all right now of course we need   this padding over here or margin okay so we'll  use a container to do that and so we do margin and   const edge inserts only and this time only say  left 20 okay now the child would be list view builder this one and any kind of builder  that takes a function that function   has two properties or two  parameters it takes sorry and another one is the first one is  context other one is index most of the time   okay now here we want to return something  as i said we want to return a column   okay column will have children okay   so now here of course we need the semicolon  now children each of them will have you see if we have we'll have four four four children  right and each of the children would be a column   so over here we can mention the   item count item count for now we'll mention it  four but in future we'll read them dynamically   okay all right now over here within it  look at this one so this is border okay   well now we want to read this and show it well it  should have border so we'll use container and box   decoration property okay all right to do that  i think we can let's see borrow some container   property i guess pretty much from here so we'll  just copy this one and over here we'll paste it   but it's not good looking so do option command  l on mac to purify it okay and we have an error okay now it's pretty uh but one thing let's take  a look so each of them we don't want with 80 uh   sorry 200 we want it 80 okay all right and for  now i think we just need this left margin okay   so we can get rid of this one sorry right margin  so do write margin 50 and well circular radius 20   is okay and background color white because you  need a color and everything else looks good   but now how about the images well for now just  go ahead and use this image and see the result okay of course we have an error let's  see where this error is coming from   well even if i don't see there i know but do you  guys know where is this error well unbound uh this   viewport which doesn't have any height so  now if you come to the parent over here   the parent doesn't have any width and height so this container has but listviewbuilder pattern  doesn't have so every time if you have a list be a   builder it's a parent should have within height  otherwise you'll get error so here we'll use   height say 120 and with say double dot max  infinitive okay let's go ahead and run it   and the error should be gone okay uh yes and we  do have a bit of padding issues over here now   because of this one bottom uh navigation bar  well now few ways we can get rid of this one   uh either we can change this one to 100 and  see not really good and let's see what else okay there is another reason why it's  happening and i forgot about this so the   scroll direction because now it's coming down  from there so that's why it's showing like this   so here we can change the scroll direction   okay access dot horizontal okay let's run it okay  now it's looking better okay yeah and let's see   instead of so much height over here maybe  let's do 10 okay because we also want to   show the text over here okay what text  this text okay it's coming from there well now if you look at this one  so this is the first container   is showing this one so we want to show  this text over here so we can have actually   another container okay all right so  over here container and we'll have child and simply we'll use app text for this one and for  now we'll just say kayaking for now and let's see   we do have an error so sorry so this text is this one  we forgot about that and say color we'll use app colors dot text color second color oh let's run it okay  so while it's there pretty much well it didn't   work well that could be reason could be this one  so let's see yeah so if you remove that it works   how can you prove it say for example you can do  red just a random text so it's in the middle you   see but now we still need this left margin so for  that one actually we can wrap it around a widget   container widget and within it we can put  margin over here so you do const as inserts so we do write 20 okay now it's working all right and maybe we could  do say 30. okay perfect whatever the text you put   it would be in the center okay it doesn't matter  well now we want to show different images for this   and these images are already in your project  file over here like billowing hiking kayaking   snorkeling okay and we also want to show  different text for each of them well for   now in this app we'll read them statically which  also means that we'll bind them over here okay   i mean we'll declare them over  here so we'll create a new variable   and we'll call it say for  example images list images okay or instead of list we can use a map okay  we'll call it images and we'll save them   in key pair value so the key would be our  images okay and the values would be the text   now the images as you see from here so we can  just type in them so we could call them ballooning   png and the value is ballooning okay and we'll use capital letter so if you don't know what is map check out my  other tutorial in the description i have a list a   video link for that anyway so now our images list  is ready so we can go ahead and read them okay   and show over here now for this one we need to come to this place and  this is where we show the images now images all are in img folder so that's  img folders all stays there now over here   we need to access our map like images now we want  to access the key and as i said that our images   map has key and value so keys are the images so i  would access that one and now here there's another   property called element at index so we'll use  that one now where is this index coming from   this index is coming from this list to be builder  because our list view has four items our map   also has four items so that means this index  would correspond it'll it won't be wrong okay   yes so we use this one now same one we would  use over here okay but instead of keys this   time would go ahead with values okay now  let's go ahead and run it see the result   perfect so our images are there our text  are also there okay all right now we want   to put a little bit of distance there okay so  now let's go ahead and create this distance uh here we do say size box and height say five five pixel okay now we do have this overflow issues now we  have too much empty space at the top so actually   we can optimize that one so we don't need so  much empty space so if you come at the top   let's find it okay over here well definitely we  have this size box which is 40 i think over here   so instead of that we could do 30 okay and over  here also the same instead of 30 let's do 20   all right yeah so that's one way we solved  it but the major issue over here at the top   uh within this container didn't get  solved so here we could do 120 now okay   and as we did that one in the container itself  uh we can also increase this one a little bit   okay oh it's perfect amazing we are done  with this one with this page so so far we   have built our welcome page this bottom  navigation bar and this is the main page   next we'll see how to build this one  okay so this would be a detail page   now if you take a look you see that this image  and this menus they are overlapping right   so we need to take care of this issue how  to do that so definitely this is overlapping   issues so we need to use stack widget stack  and position widget together okay all right   so now we'll go ahead and declare a new  page within it and we'll call it detail page detail page dot dart okay so it's over here well personally i think this home page which is  this one it shouldn't belong there with nap pages   because it's actually one of the biggest pages  we have so what i'll do i'll take it out and   put it here refactor it but now let's go ahead  and run our app make sure that it auto imported   every settings yes it did okay uh sometimes  you need to take care of this things if you uh   change your auto importation as well as over here  okay so it looks like it did automatically for us   now we'll come to our detail page here we'll  build a stateful class okay and we'll call it   detail page okay well the first thing  definitely you want to return a scaffold okay and it will have body within it within  body you want to return a stack widget okay   okay now stack widget should have actually  width and height otherwise it will get error   so that's why we'll do we'll wrap it around  container widget now this container widget   for this one we'll use double max infinite  width and height is the same thing okay so stack widget parent widget  or stack widget should have   uh with an height coming from its parent  widget otherwise it will get error   okay now what we'll do we'll come over here in our  main pi well this main file so right now we just   want to work on this page alone and once we're  done with this we'll import the data from network   and combine all of them together using qubit  anyway so now here we'll come to detail page and we need to import it let's go ahead and do  it now let's run it so what happens of course   nothing is there and we also don't have any  error great because it's empty nothing is there okay now if you look at it carefully   so here they're positioned over here so what we  do would go ahead and declare a position widget so here within it we'll have   uh these two things now they could be  in a row okay all right so we'll do row   row should be should have children and at the same  time here the first icon so we do icon now well   this would be clickable so we want it to  be icon button instead of another icon okay   so over here for now unpressed event is  empty now icon itself will use icon icons dot menu okay now let's go ahead and run it to see what  happens it's at the top but we are using position   widget so we can define it within left and  right properties so left 20 and the top say 70. so it came down to this place  and we are happy with this   okay and for now we also need to set  the color so we do color over here and uh well definitely we want to show a  different color we want to have it white   because most of our images that would be coming  from background they'll have blue background okay   so we'll take care of it a little later once we  show the image okay all right so that's done but   if you want you can continue to put this icon over  here but i couldn't find this icon but you could   put any icon you want but you understand the logic  why i've done raw okay now we'll go ahead and show this image okay now once again this  image is also within position widget   now it will have container and left and right things so we  do left zero and the right to zero   now over here container should have  uh width so we do with over here   and a double dot max infinite we want to  get the complete width and the height we   want to specify is a 300 and now over here  for image therefore we'll go ahead with the   same inside decoration okay so the box decoration  and image decoration uh decoration image and now here once again  another image property and here this one but instead of image  asset would use acid image okay all right now let's go ahead  and run it and see the result okay well now because they are all  positioned right well but other thing   is that the image property so here we  would want to do box fit properly right sorry it should be inside this one box fit dot say go ahead with cover and see the result all right and but now our icon has  gone that's because this one is overlapping   that one overlapping this one so we want  to put the image first and then the icon okay now icon is here but now we want  a white icon instead of black one okay so here we can specify this icon color so color colors dot white okay well it's too much  to the top so let's do 50. okay we are good now   all right so of course uh you can play around this   value if you are not happy with the  image position so you could also do fit with see the result okay  it doesn't really change a lot   so let's fit height let's go ahead and see  yeah like that so we'd rather go ahead with   fit with our cover okay all right  now you can also do container   or contain so they match they pretty much have the  same result as with fit height so we'll do cover   okay perfect well next we want we want to work on  this one okay i think we could slightly go ahead a   bit of higher width with this image okay all right  now here we want to have this result actually   this kind of curved result okay now for this  one once again we'll use another position to   eject let's go ahead and declare a position  widget that's what it would do positioned and the child is once again the container okay  well now as you see well we want to put a carved   container over here a little bit carved okay  so to do that we need to specify top position   so we did top 330 because previously we have seen  our total image over here container height is 350   so we do a little bit up at the top so this is 350  and 320 is here maybe somewhere here or 330 okay   all right now for container over here we need  width and height so here we do with say double   dot well now for this width actually because we  are within position widget inside so we need to   get the hang of media query okay so do media query  dot of context dot size dot say for example uh width okay now this is what we want and for  height okay so for now say height is say   500 all right and we also want to use um what is  it is called color so you do colors.red just for   debugging purpose okay let's go ahead and try  to check it out so it's there and seeing that   by saying that we means we also need decoration  because we want carb decoration or curve over here   just like the design as you see okay so the border  radius and border radius and now here we do only   so here we do laptop and radius dot what is it  circular and we do 20 left top right top so radius   that circular 20 and we need to move the color  inside this decoration otherwise we'll get an   error now let's see the result okay so yeah this  is the curve that we wanted maybe we want 30. okay so you get the idea now over here that's  what we have instead of red we want to use   white so as we know that it's already working  okay and i think we can go a little bit up over   here as you can see this white space  that showed up it doesn't look good   so we can do 20 okay now it's much better okay  now here if you see this content so these are all   column layout okay pretty much column well  of course this could be row within column   but column column column column so these  are all column so here we'll use a child so go ahead and declare child and  within child we'll have column okay well now this one over here so but now there's another thing that we could also  take here uh oh we'll do it a little later okay   i'll show you a little later why anyway so now  go ahead and do this text but now as you see   these two texts are in a in a row format right so  that's why we declare row here and we do children   now over here we can use our app large text okay  tap large text and here we just say yes so you say   might for now we are using this one but in future  i will read them from database as i said early   and now here this dollar sign 250. okay  now let's go ahead and see what happens   okay yeah and we want to create space between  them okay so here we'll use the property   main access alignment for row main access  is this one so domain access alignment dot   space between so it will push them to the  edge now they're too much to the end right   so that's what i wanted to tell you early  so here let's see if we can assign margin   or padding actually it doesn't really matter  so we do padding here const edge inserts only   here's the left 20 right 20 okay and at the  same time we could also do top say top 30. oh it's looking much better  more like this one okay now   the color is too black we can also take care of  this color over here so you can do color colors dot black 54 okay and here for  this one we use the color sorry color app colors dot uh text color i think this one okay or we can also use the  main color for this main color okay all right but i think it's a little too gray  so here black with opacity maybe 0.8 yeah it works   much better okay so that is so far so good with  this section now we'll go ahead and do it do them   very quickly so now you want to show this this  one and once again that's inside this column and here you want to have size box so size  box here say height 10 pixels and now you   want to have this one so this is also in a  row this map icon and the address so we do   row here and we do children here and the first  one is this icon so here with the icon itunes   uh um i think what is it i think it's a location  let's see uh it's looking for the icon um yeah   i think the first one uh we'll go ahead  with the first one or let's see location   sorry hello occasion well not really the first  one um second one all right and we could use   color okay so app colors that main color or  apps main color and then i think that's it okay   and would go ahead with this one now for this one  we can use app text second one and the text is u   s a california we'll keep it for now this one and  color say app colors dot text color our main text   color not this one maybe the first one i don't  remember anyways just go ahead and check it   uh while it's there and maybe we can  use a bit of uh sized box over here so i'll copy this put it here and we do with  and instead of this we'll do five let's see   yeah it's looking good okay now we want  this stars over here and once again   before we go ahead with the stars we also  need to create the size box the distance   so it is almost the double the distance over  here so we do 20. now here for the stars itself   here we'll use wrap object okay  wrap widget now it takes children   now in children we'll use list dot generate  this one and we want to use five stars and here we want to return something so we'll return  say icon okay and here you can do icons dot let's see stars this one okay all right now let's go ahead and  save it and see the result okay we have this   icon right now now this icon is here so we can  take care of this property as well so here we do   a cross-access alignment cross-access alignment  dot start the problem should be solved now the   color is we don't want this color we want a  different color star color so you need app colors   dot star color okay all right now if you  see this design we have this blank star over   here and the text okay so this star and this  text there in a row so here i'll cut this one   and here i would do row i'll do children  and the first one is the wrap one and   second one is this text over here  so you could use app text this one   okay and in this case the text is 4.0 once again  this is static now soon we'll load them from the   server okay now here we do uh color so here  we would have app colors dot say text color um let's go ahead text color 2 and see the result okay yeah this is what we  wanted and now here's size   box say we do a bit of width  over here and the 10 pixels okay now another thing if you see this one  over here this is blank empty star right   so how to take care of this one actually we  can put a condition over here okay for now uh say we create a new variable at the top over here i'll create a new  variable and we'll call it say in   uh gotten stars okay well for now  we'll have it say three all right now we check it over here okay i think we  could do this check over here for the color   so here say gotten stars less than five if it's true then we'll use this  uh app color which is text i mean which is this   star color otherwise we'll use a different color  for the last one okay so for this one uh we'd use   text color to this one okay all  right now let's go ahead and see well okay well of course it's not working because  gotten star is a three right three is always   less than five so that's why it doesn't work  so here we need to change this one index okay   if number of index is greater than  god and star will use star colors   otherwise we'll use this text color okay well now  we can do the opposite actually so check here say   index is less than gotten stars i  mean the current index i'm sorry okay now it's working but of  course we can set it to four yeah it's working so once again in future we'll  read them dynamically so the idea is here so if   the current index is less than garden stars then  we use the star color when it is four then golden   star and indexed are this condition is not applied  so we use this color okay all right perfect now   if you come over here look at this one i  will go ahead and do this one and this one   so uh once again let's see we're in this row  over here and we'll use size box and this time   a little more extra height okay and now app text  up large text and over here we'll use people and we could use color colors  dot black with opacity 0.8 okay now the font size is too big for this one   so we could pass a size variable over  here say yeah it's better okay next one we'll use uh this text number of people  so you use app text and the text is number number of people in your group  your group okay and color   is uh have colors dot main text color i  think this one okay let's go ahead and see okay perfect and i think we also need a bit  of space over here so we do sized box height   five and we're good okay well the  next one is this widgets over here   okay and once again what  we'll do we'll use this uh   wrap function that we used early okay and i  like it it's amazing it saves you a lot of time   instead of for loop you can use this one  that list generate over here we need five and return our container okay all right now here uh just set up your  width and height say with 60 height   60 and well this part is very interesting so here we'll have border radius as sorry decoration box decoration and  here we do border radius say border radius 15 and the color colors dot or you could use app color  the button background color   okay let's go ahead and see the  result well it's there over there now what you could do we could go  ahead and create a margin for it okay but now we don't want to create margin over  here why not because if you see this style   these buttons and this button they're almost  similar and they should be reusable okay so   you want to create a reusable button but we  already did that so all we need to do we need   to cut this one and put it in a new file and that  would be a new widget so over here we'll call it   we will create a new file and we'll call it app  buttons now here we'll create a stateless class   and what we just did over there  we'll just put it over here   and of course we need to import some of the  libraries okay and here we'll call it um buttons okay and let's import this one as well  okay so now let's purify our code yes okay but one thing though because we  want to create a reusable button   all right uh well now here we could go ahead  and call it we can just call it a buttons and you'd still see the same result yeah but now we want to create a reusable button   okay so and what should it have as you can  see here it'll have background color icon text   things like that so we'll define all of them so  here definitely you want color okay so do final   color color so this color would be either the text  color or icon color now over here you also want   background color okay so you do color background  color okay what else you also want size okay so or we'll do double size so it's they're more  like square right yes so that's one thing   you also want a border color so you do final color border color okay all right so all it's asking you to  implement all of them just go ahead and do that okay and now it's asking you  to add the required keyword   okay well now these are all required not optional okay and it's saying that remove this one well now for size we do the same thing this dot  size okay all right so these are the things that   our caller function should pass it to  right yes so now if you come over here   now of course it will show an error and if you  hover over on it it's a add record argument color   but let's see come over here so yeah one one of  the thing is color so i'll just go ahead and do it   color right but now there's a problem so we  have color background color and border color so   i'll just check delete that and try it  again now here if you hover over on this   one now if you import it they all should be  auto imported for you the properties okay now we can change them we can  use the size say 50 and color well this should be our  text color okay well for now here say colors dot white or black okay all  right now the background color for this one   app colors dot button background color  uh now the border color for this button   forget about this one first think about this  one the border color and background color are   same right okay so we use this one okay now  all we need to do we need to come over here   and use this thing so size is the size and  width is also size because they are square now this color so this is the background color  right so this background color now it also takes   border color right so the border border  all border dot all now it takes color so   this is the border color we'll use over here  or right here and we also can use width and   we'll use with 1.0 this is the fixed one okay  so now let's go ahead and run it yes uh i think   we have a slight error over here let's see what  is this error though expected uh okay over here okay now somehow let's say change here to  colors.red let's make sure if everything is   working yes it is working right perfect okay so  our button is already working and now this is it okay but now if you come back to  this section over here you see our button should also contain a  child either as a text or an icon   right and we also want to be able to pass it  so here now text or icon they are optional   okay whatever we pass that should be shown so  we'll come over here so we'll define here string   text because this text is optional it  could be either text or an icon okay   now for icon is the same thing icon data icon okay  we have to use one of them now of course over here   you need to implement them so you do this  dot text this dot icon okay all right so but how to know that whether  you're passing icon or text   so we need to pass a boolean over  here okay so here we'll pass is icon in general we'll pass false if we want to use  a text okay now you need to come over here   here bull is icon all right now over here this  is required or this is not required because   in general we might just pass a false  value okay so it's not always required   so it would be the default value is  false okay um so we do this dot is icon false all right yeah   okay well now that's getting interesting  so here after that we'll have child okay okay so either we are using icon  or text okay now if is icon false if it's false then definitely we are going to  use a text okay so here we can use app text   and the text is whatever the  text that is being passed down from here okay now we might  have an error uh let's see okay now the error is gone because it's optional  over here so you should use a null checker if   whether you're passing it or not okay so if it's  uh false is icon that means we're passing text   otherwise what we'll do we will use  icon over here okay so now the icon is   whatever the icon we pass okay all right and now the color also changes so  icon color should be the color whatever we   pass as you can see here okay all  right the same for the text color now the text color is very interesting   because it does change based on  reaction okay so now over here say color all right for now just go ahead with  colors.black and we'll change it very soon and you need to import this library okay now the magic time let's come over  here even if we don't pass icon okay   now over here you can just go ahead  and do it but it will throw an error   because we are not passing anything anymore over  here but we said the icon color icon and text   well they're optional as  you declare them over here   this text and this icon right so they should  have default value uh for now say for text hi okay now let's go ahead and run it  and check it so it's there right yeah   well one of the problem with this is that it's  not centered so wrap it around center reject   and same for this one center widget now let's  go ahead and run it now it's all centered   now because i didn't pass any text it's using  the default value so i can pass a text over here okay so what is the text i want to pass  i want to pass the text this numbers the   index okay so you do text index to  string because index is an integer   now it will use the value that  we pass okay perfect uh well now   you can't really pass a zero so what we'll do  simply we'll just come over here and we'll do   index plus one okay now let's go ahead and do it  okay perfect so it's working but now if you see   it has some spacing so we need to take care of  that one to do that well our button is already   reusable okay we can prove it say if you don't  want to use this text you want to pass an icon   okay so here we could do icon and we can  pass an icon over here so you do icons dot say icons dot can we pass anything   say favorite okay now if we pass icon we also  need to set the value is icon and to set it to   true otherwise we'll get an error because we  are passing an icon default value is for text okay so it's working so our button is  completely reusable hopefully it makes sense well whatever we do but we need the space  over here as you see it has some extra margin   okay now this one we can  wrap it around a container okay and here we do margin and say cons  and inserts only and right margin say 10.   now let's run it it's working perfect but  of course we don't want icon over here okay and we want text over here right  so you do index plus one to a string okay perfect well of course we also need to take  care of this distance over here now it's pretty   easy so just go ahead copy and come to this end  and copy paste instead of five you want to do 10. okay well it's already looking better okay  next we'll see how to click on each of them   and select certain one well now we'll  see how to work on the selected index i   mean we want to select them and change the  background color and text color like this   so to do that we need to come over here and  well we want to be able to click on them   to do that first we need to wrap it  around widget and here we'll use inkwell okay this one and it takes on tap event okay now over here so once we click on this we would click on certain  index so that index uh we can save somewhere and   we need to save it using set state so that we can   trigger rebuild i'll first we need to go ahead  and declare a variable let's do int selected index say like selected index well default will  do minus -1 which also means actually not   selected any of them anyway so once we click on  them we'll save the index to the selected index okay all right but now because we want to   retrigger uh build so we need to  set it set it around the set state   okay now go ahead save it make sure no error of  course nothing will happen yet because we are   not changing anything but now here in the check  one thing if certain index is selected over here   we want to change the color now we could  do a check over here if selected index so over here we'll use this was this one as  our condition so if here if index whatever   the index it is if it's equal to selected  one okay then we want to change the color   well if it's selected if this condition is true  then we would colors.white for the text or for the   icon it doesn't really matter otherwise we'll use  black now this one we'll use the same condition   for background and border colors okay well it's if  it's selected then the background color we want it   to be black okay colors dot black otherwise  it's the background color which is this one   the same over here border color if it's  selected we want the border color to be black   otherwise it should be the color is the background  color we used early let's go ahead and check it   but default it's not selected but now if you do it  as you see it changes right so now using this we   are only selecting one button at a time but now we  do have a problem here so like selected index the   color now that is the text color if the index is  same as the selected index we want it to be white   but now we don't see the white we see black  now if you come to the button over here   up buttons over here let's see so here we already  have a fixed color so we need to change it okay   we need to use the color the one we are passing  over here which is this one so let's change it let's save it okay as you see it already  changed so let's change it perfect   so it's also working so now we'll come back to  our detail page over here so this part is done   so to select on the one index just to save it  based on that index do a rebuild okay all right so right now we'll take a look at this one and  also it has some distance over here so we need   to change it so copy this one over here and put it  right here and we'll do maybe 20 for now and let's   see what happens and now we can use our app large  text upload text and over here we do description and we can also set the color with the color  colors dot black with opacity 0.8 and size 20. so it's there perfect now we also  need to use our app text for this one   now wow let's try it so what do you do just use  f text okay now it takes a text so the text is now here we can also set our color to do  app colors dot say main text color okay so here are showing up perfect but now   here we can set up this sized box a  little bit so instead of 20 we'll do 10.   okay now it's good perfect next we need to see  how we're going to use this two options over here   well now this is a reusable button we already  created this butter earlier so we can go ahead   and create this but now if you look take a look  at this layout well definitely this is a rollout   right so we want to roll all right that's one  thing but this should be fixed at the bottom so   what we should do we should also use it within  position widget okay all right so here for   now we only have two position widget so we'll  create our third position widget over here okay position widget and here we'll have our child now  within child we'll have row okay all right now position widget well we'll  do that later for now just a bottom zero   now over here we'll have children and  within children we can use our app buttons   okay which we did early are buttons so over  here these are the parameters we must supply   all right well size in this case is  60 and color we do have colors dot   say wow text color 2 i guess and background color  do colors.white now the border color that colors   the text color too all right now let's  go ahead and check it see the result   oh well it's there and definitely we don't want it  like this so it's up there 10 20 i think it's good   now do left so we do left 20 as well okay  now this way they're all aligned to the same   uh distance okay but here of course  we don't want a text we want an icon   so here we know that we can set the  boolean is icon okay true and if we do that   we also need to pass the icon so icons dot fave   or favorite this one now let's save it and see the  result okay perfect but i think our text color is   not really this is the color we want uh  maybe we want color one instead of two okay well now it's much closer so the  button is there now the next button   we want to draw is this one this one over here okay well actually  we already created this button   which is also over here this response button  okay so we'll reuse this button over here well now to reuse this button  we need to set up some extra   condition conditional check over here because  earlier we saw in this section we used it   okay anyway so now let's go  ahead and try to call this button   so we'll call it app responsive buttons  response or response button let's see button this one so now if you hover over on it so  we have few properties that we can   set up now this time we want it to responsive so  we'd set is responsive true okay is responsive true and let's see i think all right well if it's responsive true then well  we also want to use this condition over here okay   well now here we want to wrap  this around with another widget   okay and that widget is called flexible okay all right now let's go ahead  and run it and check what happens   okay definitely we have some errors well after  flexible we still have error now a few ways to   take care of this one uh first we'll come  over here and we'll set another constraint   we just go right so now you come over here and  as you see it works okay pretty much like that   so if you have flexible widget but flexibles  widgets parent widget should have constrain   and then flexible widget will take all the  available space in the parent widget and   of course we need to take care of the  space over here size box with say 20 okay yeah like that all right but now here's  another problem we also want to show the text   okay so like as in the design we're going to  show the text so here we'll go ahead and do app text okay so text is a book trip now and color colors.white okay all right now let's save it well  it's there but now i want it to be   pushed back to the left and right side so that's  why we can also use center widget sorry space   between but if you do that do remember this  is a reusable button we'll lose this property   for this one okay we still want to keep  this so here we can set up condition   over here so the condition we could set  based on is responsive if it's responsive   true then we do main access alignment dot space  between otherwise we'll do main access alignment   center okay and it should solve the problem  let's go ahead and check it and you see it did   now another problem is this it pushed  too far to this end actually it did too   but this is an image remember the image has  background a little bit of background okay   yeah i mean sorry the image  is a little bit left and right   properly or like margin or padding so that's what  causing the problem well to get rid of this one here of course one thing we need to do first  before we get rid of this one we also need   to check this one over here as well if it's a  responsive then we'll show the text otherwise it's   your empty container okay all right now definitely  we can come over here and set it to false   okay and let's see okay well if you set it to  false well it it still takes the whole space   so how to solve this problem over here so here  let's come over here if is responsive true true and we'll do let's see double dot max infinite  otherwise it's same as width   okay so but the default value is false now the  other problem is we're also not passing here   default width okay so we can have a  default width over here okay say 120. okay now it works because it's the  default width so here it is false so   is going to use this default width over  here now if we set it to true let's see okay it works but now we come back  to our earlier problem which we was   early like it's too much to this left side  and there is extra padding with this image   so now here we can this one we can wrap it  around a container and here we can put margin   okay and we'll do constant edge inserts  only and so left 20. okay all right now   that it should be fixed okay all right once again  if you come over here if you set it to false okay our images button is very responsive so white  responsive basically this variable over here is   responsive and we also set some extra parameters  here the default value okay okay perfect   so now we have this three pages  ready and they're all working so   our next stop task would be understanding what  is a qubit and based on that we'll connect   all these three pages using  cubic state management system hello everyone well in this part of this tutorial  we'll see how to use qubit for state management   or how to understand the most basic idea about  state management and after that we'll combine   all these pages we have built so far this pages  for our qubit app but anyway first i'll explain   the basic idea most basic idea and understanding  how to use qubit in your app and what is qubit   that's what i will explain first well for this  one uh well you can come to my website over here   i'll put a link to this it gives you some most  basic idea the clear and straightforward way   because most of the apps i have seen are the  websites i don't think they have very good   idea but anyway so i'll i'll explain to you how i  understand okay so your app needs a qubit or qubit   package for state management right so here is your  keyword package so once you have queued package in   your app so that cubic should have two things  that you should do you should have states and   you should have qubit so you need to create states  you also need to create qubit for this package and   from this package you can understand it like  this and then your ui will interact with this   that's the most basic idea and your states  will have data the data you want to rebuild   or sorry the data you want to change and  based on that change you want to trigger   rebuild of ui okay all right so those data should  be here within the states okay our state should   have access to those data well now those datas  are there and if some of the data are changed   or you want to rebuild the ui  or show something new on the   screen then you should use emit  function emit function will have   hold or will have idea about the states okay now  this emit function should be within the qubit   so you create state state should hold data and  because they're in the same package so qubit will   know about states and then they'll emit these  states emitting state means that hey i know that   you want to do something new or you change the  variable so i should let the app know to do that   we'll use emit function to do it and our qubit  package will know it and it would redraw the ui   okay so that's what the most basic idea  about qubit and that's my understanding   the bigger idea is that your ui qubit  and repository repository will talk with   the server it will send a request and get  back response from server okay all right so   as well again the qubit should have your qubit  package or app qubit should have qubit and states and another idea that we should know so our  cubic app qubit app should have block provider   and block builder while using block provider we  can create qubit and will also hold the qubit now block builder they'll check on  the qubits sorry they'll check on the   states okay and based on that states will  trigger something so two important ideas   block provider will create and hold our  qubit and as well as our block builder   will check on the states and let us know  which state we want to trigger or we want to   go ahead with okay so it's very important all  right so that's the most basic idea about cubic   now we'll go ahead and continue so after  this picture you know that first we need to   install this package then we need to create  classes for our states we also need to create   classes for our qubit so that's what we'll do just  according to this picture so let's come over here   come to this file so go ahead and install these  three packages and do get pub okay so now flutter   qubit is a subset of block and the package name  is a flutter block okay and we also need another   package to work with block and flutter and  they work pretty much together but of course   it could work independently with other projects  i'll explain what it is a little later now the   first thing we want to do we want to create a new  folder or directory and we'll call it qubit okay   and within qubit we want to create a file for our  states so we'll call it app qubit states dot dart   and we'll create another file for our  qubit so we'll call it app qubits.dart well the first thing as i said early from here  we understand we need to create states first okay   that's what we'll do so over here we'll create  an abstract class first and the class name is   say qubit states and it will extend  another package or class that's equal   let's see e-q-u-a equitable okay  i'll explain why we need this thing   now based on this class now we'll create another  two classes okay now this is an abstract class   so another class could extend this class as well  right so the class name is initial initial state extends qubit states okay now it will ask  you to do something overriding one method   which is this one and i'll remove this and  put like this and i'll explain what is this i'll copy this one and put it  over here i'll change the name and we'll call it welcome state now what is  this initial state and what is this class for   well every qubit app they should  have one initial state when we first   create qubit we should pass a state class or a  state function so that's what we'll do over here   okay it could be a class it could be  a function it doesn't really matter   so that we should initialize that one every  qubit app so that's why we have this one   and once that is done we  want to trigger a new state   that state name is welcome state this welcome  state would be responsible for showing this page   on the screen once the initialization has  been done so that's why we have this too   we can remove that because we're not really  passing any object to it so it's okay   now what is this for so over here actually  you put the data that should be changed   like as i said earlier states should  hold data if you come over here   so the data that should be changed and  those data should create rebuild of ui so that should be within here but for now we  are not going to use any data because this page   doesn't really going to do any dynamic update  of data at least for now in future we'll change   it so that's why these are empty so if i had a  variable say intex and i want this variable to   be changing the app and based on this variable  i also want to retrigger or trigger new build   but i'll declare it here and then i'll put  it here so if my app changed this variable   i will automatically get a rebuild of that part  for the ui okay hopefully it makes sense but   we're not doing any of this thing so we'll keep  it empty so with this according to this file our   states has been created for now and  now we'll go ahead and create qubit   or create a class for qubit that's  the better way of understanding   so here in this file we'll create a class  for our qubit i will call it class app qubits and it should extend q bit okay now let's see  it's asking you to import this package now here   it's asking you to uh initialize the  superconstructor as i said early over here   every class they'll have initial state so  this is our initial state i mean sorry every   app that uses qubit they should have one  initial state so this is our initial state   so we need to call our initial state from here  so i'll call it initial state so that's the class   okay and we don't need this one  anymore we can keep it empty   all right so with this our initial state would be  done okay yeah and once the initial state has been   done actually for initial state  as you see nothing is happening   okay once the initial state has been done we want  to emit a new state to show the welcome page so   that's why here we'll write emit and here we'll  write welcome pay welcome welcome state this one   so first the initialization has been done  then we'll trigger and the state that state   is this one so that's how they work first this  one and automatically we'll call this one okay   hopefully it makes sense so with this we are done  with extending our qubit and using this file now   somewhere we can create qubit because our app  doesn't still doesn't know that there is a qubit   in our app so we need to find a way to let our  app know that we are going to use qubit in this   app or ui okay to do that we'll do  it from the entry point of our app   which is main.dart okay we know that for so  far this has been the entry point because   because of this we say this ui right now  this should be our entry point right okay   so well before we go ahead and inject our  qubit over here we need to do one more thing   now if you come over here we also need to send  a state type okay so you would call here app qubit state this one okay because i said earlier  that if we have states our qubit would somehow   know that we have states or state classes like  this how does it know it knows like this okay   because you need to tell that what kind of states  my qubit should have so based on this one it knows   okay well states are coming from here and they're  this type okay hopefully it makes sense now   over here what we'll do we'll remove this  one okay and we'll use block provider as i said early we use block provider to create   qubits okay or inject qubits so here  we would call app qubits this one   okay now here if you hover over on it it is one  mandatory argument which is create you should   use this one and you also see that it takes a  function okay in our case we want to pass the   class as a function so you do create and what is  our cluster function over here that's app qubits well it is an error well  the one thing we need to do   as you can see from here that it takes  a context so we need to pass the context okay now the error should be gone and if you hover over on it  well there is another parameter   that we could use that's the child  but of course this is optional   but here we can still use that one so we need  to pass a child that holds all these qubits or   that can access the qubits or that can check  the qubits or the states okay like this so   well we don't have this child yet so what do we  need to do we need to go ahead and create one   so over here we'll call a new create a  new file we'll call it app qubit logix   dot dart okay so this is the file that should  hold our states and check on the states okay   so anyway we'll create a stateful class  over here and state for class we'll call it   app qubit logics okay all right and we  need to import some of the libraries   and here instead of container will return scaffold now scaffold should have body now we saw earlier  that we can use block builder to create or check   actually to check on the states because we already  have states over here so we can check on them   but to check on them we need to check them through  block builder so over here we would implement or   go ahead and create block builder so block builder  okay all right now block builder should have ideas   about our qubits and states so here we'll call app  qubits this one and app state sorry qubit states this one okay all right so just like any  other builder it takes a builder properly   okay and like any other builder it takes  two parameters this builder property   first one is context other one is state so pretty much in flatter whenever you see  the builder it takes a builder property and   build a property should take a function  okay so it takes a function over here   so now once we have this block builder now using  this one we can check on the states all right   now we saw earlier that when our when our qubit  is created first time there is an initial state   this get triggered automatically and  after that we trigger a new state   which is welcome state but now this has been  triggered but app would wouldn't know about it   so you have to find it and finding it is very easy  how to do that we can do it logically over here   so we could do if state is welcome state okay  all right then you return something return   what welcome page so this is the page  we are returning or file or class okay   if we don't find anything for now we'll  return an empty container if there is no   state found we return empty container  so once again what happens here   so this is the initial state that get triggered  automatically then welcome state gets triggered   okay so this is this state over here this one  we find it so it's just a naming that it's   this is happening after initial state so we  can find actually this name that's all so   it's a hint to the app well this is happening  right now so this is a stage that is happening   or if this is happening then take me there  or show me this or do this or do that   so this states over here another simple  understanding it just some names that's happening   first this is happening this is the name and  then this is happening and here is the name okay   so if this is happening show me this  show me that so we do conditional check   that's what we said early using block builder  we check on the states as we do it we emit   the states okay let's go ahead and check it now  we might have an error let's see what's happening okay and it says that main dart so let's go ahead  and find our main dirt which is uh this one sorry   so i guess we are missing oh sorry so we are  missing something here so as i said that block   provider so it should create our qubits and hold  the qubits so here this one actually you see here   we have qubits and states so that's what i mean by  holding qubits okay so we need to call this class   over here so here we'll call app qubit logics  okay this is a child so create the qubit   and show the logic using within this okay  and based on that do conditional check   so let's go ahead and run it and  looks like we have another issue   anyway so i restarted my app and it worked okay  that's all because there's a change of the state   so sometimes you need to restart your app and then  it worked so there are no problems so yeah that's   it so here we are able to trigger a new page okay  using this qubit and isn't it excellent so this   is the first thing we have done so we created over  here several states and after that within qubit we   initialized the first state and after that we  triggered another emit which means another state   okay and then over here using block builder we  have found that state and based on that state we   are redirecting so right now here my understanding  is it's also works more like routes it tells you   either go here or go there conditional check  okay hopefully you understood and this is   the most basic idea about qubits so our app is  working right now we have loaded this page using   qubit state management and logic okay next  what we want to do we want to load this data   this data from the server load them and some other  information and show it on the screen okay all   right to do that first we need to go ahead and  install one package so if you come over here to   this file go ahead and install this http package  it would be responsible for loading the resources   from the network well first we'll create  a new directory and we'll call it services   now here we'll create a new file  we'll call it data services dot dart   okay now over here first we'll go ahead and  import our uh http package so let's see this one   and we do as http we know here we'll create  a class and we'll call it data services now within this class first we'll have  a string for our base url so base url   and here we'll write my  base url http mark.bslmm.com and there is an endpoint for api so that's api i'm  using laravel so it depends on what kind of back   end you use anyway so now here i'll also create  a new method we'll call it get info and within   info first i'll declare a variable or string for  my api url api url and here the end point is get   places so this is my actual api get places now  here based on this i'll combine these two together   this one and this one and i will create a http  get request so that's what i want to do i would   do http dot get okay now it takes a uri well now  that is our total uri but we can pass it within   a helper function it does some decoding for you  parsing so this one we can do base url plus api   url so based on this together it creates a request  to the server and then it returns something so the   return type is http dot response okay so we get a  response back from server and we can call it res   to hold it within a variable okay now let's  see and we might need to use because here it   says that it returns the future so what do  you need to do you need to do a wait here   and if you do await you need to do a sync modifier  okay perfect so with this we get the data from the server okay we get actually object here json  object within it now here we need to decode   it well before we decode it actually we  need to make sure that we are getting   really response back from the data from the server   so we would use try catch clause okay now  within it we'll do a check if res equal um   status code equal 200 now http package it if you  if you get data from server it returns a code 200   and the code name is like variable name  is status type or status code actually   so if status code equal 200 that means data is  correct and response is correct okay so if the   response is correct we take it okay otherwise we  print error to the console okay that's what we do so once you get the data you need to decode it  okay all right so now here you want to put the   decoded data in a list which will have a dynamic  type dynamic and we'll call it list now within it   here we need to decode the data the data is  within this right well now it does response   a lot of things so we just want the  body of this data so do json.decode the   code of course we need to import a file for  this library convert library so here we do   dot body okay no actually what is  the body let me show you over here   so i have this postman and this is my total uri  as you can see from here okay so this is postman   and uri exactly same as this one we have so this  is the combined uri okay now this returns i can   uh test my api that it's working correctly because  it's respon sending back me data or response okay now if you see over here so this is what  i get as a body over here as you can see   the body is a list of objects json objects okay  so it returns json objects so within body body is   within this cur this braces over here and this one  as you can see so it returns id name description   and other a lot of things okay so this is what we  get now we need to decode it why because slider   doesn't understand json it understand map okay  anyway first whatever we get we need to decode   it so that's why we did decode and we are decoding  the body okay once again so this is the whole body   we are decoding it okay and we are putting it in a  list first okay all right now we'll convert it to   map then it will convert it to list okay because  if we convert it to map then we will have easier   access to the properties underlying properties  to this one and we are doing all of this because   flutter doesn't understand json okay now after  decoding it we are going to put it over here okay   and then we'll convert it to map so that our uh  app can use it well to do that first we need to   go ahead and create a model so over here  within it i'll create a directory and i'll   call it model and now here within it i'll  create a new file i'll call it data model datamodel.dart okay now if you saw it now here  we have this properties id name description   prices people start of course we don't need all of  them we need name description price stars people   and img for now in future we  might use uh we also need location   and selected people well so let's go  ahead and declare them very quickly so here i'll create a class  and class name is data model   okay so we'll have string that's name  and we'll have string for our img   for image and we'll have int for price and for  people in for stars and string for description and stream for location   okay now we'll quickly create the constructor  for this data model okay now over here so let's see if we can do it automatically   looks like we can't so what we'll  do here we do required desktop name all right so we have built the constructor okay  all right now as i said early from the server   we get json so from json after decoding it  we want to convert it to map object okay   because the flatter understands map well  to do that we need to declare a new method   it's called and the method type is  factory and here we do data model and here we'll create a method called from json   and whatever it gets data from from this call  over here okay yeah so the data is more like   map format okay so if you don't know what  is map format check out my other tutorial   so here we'll have string and the  dynamic okay so here we mean that here we mean so this is the so our key is  the string and this value is dynamic because   there could be any kind of value integer  string or whatever but the keys are always   string okay so that's why we  write here string and dynamic   hopefully it makes sense all right  now here we'll return our data model okay well as you can see it's  already laid out for you so would be now once you get the request response from the  server we'll get these things we'll get them as   a key okay so you want to grab them and give  it to flatter that's what we'll do now okay   so here we'll have a variable and  we'll call it json okay so we'll   send information to this variable and this  variable should hold this information here   this keys here okay now would be able to  access them so here we would write json okay well with this we are done with our data  model so all we need to do we need to grab the   object and put it in json this variable actually  you can call it anything it's just the convention   and we'll assign one-on-one to these variables  over here and then we'll be able to access them   these variables okay perfect okay now we want  to come to our this file over here data services   and within it so now everything is in the list so  from the list we want to convert them to the map   now we'll return a list okay so do return list but  now before we return first we'll convert it to map   why let me tell you so after this this list should  have information like this okay piece by piece   like so this would be the first piece and then  second piece like this piece by piece okay so now   each e would point to this certain piece or i mean  certain data like like to this this information   another e or the next e should have information or  point to this one okay so you'll be able to access   block by block okay now as we access them would  convert them to map so we could call data model   like the first one now we can simply pass the  e okay and after that we'll convert it to list okay over here so with this actually we're pretty  much done with loading the data from the server   well after this we'll be able to load the data  but i think we also need to change the return type   because we don't have any return type over here  but we are returning data over here right so we   would return future and here list and here would  the type is data model okay because this is data   model type and now i think we should also have  one return statement here okay return data model   and but of course it should be a list type data  model and empty if we have error we're returning   empty let's see over here okay now over here  we also need another one if it's not true or   if it can't load data successfully then we'll  return this one now the error is gone okay well   with this the data loading would be successful  but now we need to come back to our app cubic   we need to create two more states okay so what  i'll do i'll just simply go ahead and copy them and paste it there so first  one we'll call as loading state and the second one is loaded state so this state would be triggered when  you are trying to load the data so   we'll have circular indicator and this  state would be triggered once we have   the data has been loaded successfully  okay so that's why we need them both   well now we need to find a way to call  them okay so where they're happening   to do that first we'll go ahead to our qubit  over here and over here we'll create a new method   the method type is void and would say get data just like that okay yeah and now here would also one more time do try and  close catch uh try catch clause sorry all right now here we'll call this one from  somewhere okay so once we call this one first   first we want to load or trigger this state which  is loading state okay so here we do loading state   we do emit loading state okay and so at that time  it would be loading okay well as it's loading what   we could do we could come to our logical file  which is let's see uh not this one not this one   this one okay so we also don't need this anymore  this one over here okay so here actually we could   do a conditional check once again so what i'll do  i'll copy paste this one and put it right there   okay now here i want to check what kind of state  it is if it's loaded state okay if it's a loaded   state then i want to call a function or i want  to draw something different over here so if it's   loaded state i want to draw a circular indicator  okay so here i would do center okay child circular indicator okay circular progress  indicator that's all so that's what we'll call   so once again if you come over here so  this would be responsible for loading state let's see it's not loaded it's loading okay so  this would be responsible loading state and now   this state is in our qubit over here so we'll call  this function once we call this function it will   trigger this state and it if it's triggered this  state this file over here this dirt class would   be able to file it because it loops through all  the states and find it okay and once it find it   it would do this one okay now of course we need  to find a place to call this function where we   call it from of course we can call it from  our welcome page over here as we said early so this is our welcome page and welcome page  has a button this button right so we need to   find this button and where is this button this  is the button okay all right now this button we   should wrap it around within a container and as a  child okay and then we'll give it a width say with   200 and after that we'll wrap it around another  widget and that widget will call gesture detector okay and it takes on tap event okay and  within on tap event we'll call that function the function we just created over here so over  here this button would get triggered or trigger   sorry it would trigger this function and then  this function will trigger this loading state and   once it does it will be able to find over here and  load it successfully okay and show this indicator   so here we'll just go ahead and simply call a  block provider of qubit so you do block provider   off here so we have our app so our qubit name is  this one app qubits so we do this one app qubits   okay and within it we need to pass a context and  then we can access the method which is called   get data okay so while if you have any kind of  method you can access them anywhere from your view   using block provider okay so as i said  earlier brockport checks the states   okay block provider also can call   uh sorry as i said earlier block provider holds  the qubit so right now this is like a qubit so   the way i understand each function is also a qubit  okay it's holding the qubit and i can access them   so anyway so one thing you could  do you could go ahead and run it   and uh working okay it's loading perfect so you  try it one more time so this is our initial state   and if you click on this it's loading okay so  that means that so now we can load our data   as it's being loaded showing within  this time we can load our data   okay to loot okay first we'll go ahead and declare  data and load the data within this get data okay   so here we do final data services and we'll  call it data simply we'll call it data   but now of course this is a variable and  the final variable so we need to initialize   inside this thing but there is another important  thing though that you should know well here okay   we'll initialize it within it and we'll call  it required this dot say data okay no problem   but now if we come over here we'll have error here  because we need to pass this one over here as well   because you are mentioning you are saying that  you are saying you are saying that over over here   it should take data and data type is data services  type okay okay well after this we need to come   over here and we also need to pass from our  qubits okay over here so we need to pass data data   services data services and now the error should  be gone so what happens here once we first create   this qubit we are also asking to create a service  over here okay and an object from the service   hopefully it makes sense and after that  we'll be over here and then we can load   the data and put in this variable okay so put  the data in this variable which is called uh sorry here we need to create a variable  first we'll call it late uh final places okay   all right so now our places this variable  will hold data from this one so data.get   info so get info is actually loading the  variable and every information from the   server right and then we put it to this one  hopefully it makes sense now if we are able to   load the data and put this one over here now  we can after that we'll be able to trigger a   new state but do remember now interesting thing  should happen because it could you need you might   need to await for the data okay so that's what we  are going to do then we do a sync over here so we   are waiting for the data all right once the data  has been loaded the next line would execute okay   otherwise it won't okay so here we would emit a  new state what is the state we'd emit loaded state loaded state this one okay but now the data has  been loaded and we need to pass the data to this   one over here so we'll pass it to it loaded state  now we need to come back to our state over here   so this is the loaded state now over here   well we are passing the data so we need to  catch them over here so you do loaded state   within the constructor because this is a class  so first we'll declare a variable and the data   is coming here as list so we do data model  okay that's all and the variable name is places   so we'll put it over here places this dot  places so we'll grab the data okay so now   because we said early this kind of list is used  for uh trigger auto build of the ui so we need to   put it over here now our ui will our qubit would  know oh there is a new data so let's go ahead   and rebuild the ui if necessary okay so once again  what's happening here so this function gets called   then i'm showing loading state so it would  be loading over here and then at the same   time it would come over here and try to load  information from the server once that is loaded   it will trigger this one as it triggers we'll  also update our state because we have gotten   data so if you get data you can update your  state okay so as you update the state you are   also emitting it right you emitted it over here  because you have this emit function now while   if you could emit it here is the interesting thing  um you could come over here to your let's see this file which is called this one okay so we know that emitted state we  can find over here right so we'll just simply copy   paste it over here okay now here we might check  for a new state so the new state is loaded state okay now while if the state has been loaded   so which means we are over here okay so we  can ask for a new page what is the page or   where is the page we want to go we want to  go to the page which is called home page so this is the page we want  to go okay all right so   what we'll do we'll simply come  over here and we'll call home page okay now we need to import it so let's stop that well we ran the app now we have  a bit of problem once again   now it's coming from this welcome page over here   so we have this button now responsive button is  expanding uh using flexible if you remember now   flexible should be always wrapped around row or  column widgets so that's why we are getting this   error so now here we'll wrap it around another  widget and we'll call it here row and of course   we'll have to use children because we are a  row now here i'll just put them around this and now the error should be gone  now let's rerun it one more time   okay now the error is gone okay so yes just now  um we think we we worked on this tab button okay   and this tab button would trigger get data  and uh get data would be coming from over here   uh our qubits app over here okay so it'll load  the information from the server and trigger   loaded places okay and then once we click on  this button we can see that we'd be able to   load this data right and once we load this  data if you come to this qubit app logics so   this uh loaded state has been triggered so you can  go to our home page okay so that's what we expect let's see yes the data loaded and it took  us over here of course this data is still   not from server but we can prove that that  our data has been loaded from the server   and then we come over here how can we do that  um we can go to this data services over here   and i think we can just simply put and print this  list okay and we'll see that it's been loaded   and then we direct it to this  page let's go ahead and check it okay now we click on this and we'll see  that it's been loaded okay then we come   over here all right so that's how it works so  the data loading has been working successfully   so now what do we need to do we need to come  to our home page and find the data and use the   loaded data rather than this one okay okay so all  the data has been loaded and now at the same time   if we see over here so once this is loaded the  state has been loaded loaded state over here   this has been called now here this props has been  updated with new values okay so once again if you   see our app qubit so over here we load them and  then we emit the state okay and as we meet the   state and we save them in our states over here in  this props so now if we use block builder we'd be   directly able to access this prop okay all right  so now we need to come to our home page over here   now if you look at it so the body so here we have  this body body contains column so i'll go ahead   and simply cut this one now here we'll use block  builder and we already learned that using block   builder we can access the states so here we want  to access the state because we want to get the   props over here like this props over here anyway  so now it takes two parameters first one is app   qubits for our case it's qubits uh class and the  second one is the qubit states okay cubits states and i guess we need to import them otherwise we'll have  an error okay now over here okay we are good now it's asking you that you  need a builder property which takes function and   first parameter is a context and second one is the  state now using this state actually we can access   the state of our qubit states okay so that's why  we need block builder now here we'll return our   column the one i just copied earlier or  i cut all right so now there is no error   well here is another interesting thing we could  do we can actually wrap this whole thing once   again this one around if else statement just make  sure that the state is there how can we do that   so we can check if state is loaded state because  by this time data should be loaded all of them   okay if state is loaded state then do something  else do something else if there is no this state   it means we have the wrong state or something  went wrong so just say show empty container   but of course you can hear show much more it  doesn't have to be an empty container and over   here will return what we just cut earlier okay  uh well the other thing is that now because   of this state keyword we can access the props from  the qubit states this class so here i'll declare a   new variable i'll call it info and here i would do  star state dot places as you see we can access it   and that's all okay now this  info contains this list over here   so it returns the list now what you could  do we could go ahead and start to change our   uh information so the first place we want to  change is here so now instead of static 3 we   would do info dot length okay all right that's one  and the other one over here now instead of having   this one so i want to use network image not asset  image okay because they are coming from network   so we do network image and it takes the path now  in my case all of my photos are saved in http uh   mark dot bsl made and within uploads folder okay  so this is the folder for my images and so from   here i can retrieve the images that is passed down  to me through this list slides as you can see so   all i need to do right now add this one okay so  what i'll do i'll just go ahead do plus and info   and here info let's see after doing info we can  access the index okay index now here we could do   img okay so for certain index we get the ing all  right and it should work okay now whether it's   working or not we can just go ahead and load it  and see what happens now we loaded our app and   this started from the beginning uh so by this  time we have two two state has been emitted one   is initial state other is welcome state now once  we click on this we'll emit a new state and that   would be our loaded state okay let's go ahead and  check it yes this data they're all coming from   server isn't it amazing okay yeah  so we're already done with our app   i mean almost done i haven't said already so yeah  so it's working it's amazing i feel good because   it's been like almost four hours i would say guys  so and thanks for sticking up with me for so long   and of course in future we'll also see how to  update this information using qubit okay well   now the next thing we want to do we want to  be able to click on this and go to a new page   and show this related info for a particular image  okay well to do that first we need to come to our   app qubit states over here and over here  we'll create a new state and for this one   we'll first go ahead and copy this one and instead  of loaded state now we want to go to detail state   okay detail state it means the detail page  because we want to click on certain image   and go to our digital page okay so that's why  i set it detail state so i'll change it over   here now once i call this state which means when i  emit this state so at that time i'll pass this uh   data model to it okay as a list i'm passing i'm  going to pass it okay so that's why i have this   prop which is different from this one because this  one includes everything and this one just includes   a certain list from our uh once one certain  child from the list okay all right so now the   state has been created now we'll go ahead to our  app qubits and for this state we'll create one new image or emit function  that's what i would understand   okay all right so how to do that so here  i'll call it say detail page like that and   of course it will get information from the  caller function and it will send data model and data okay this is this would  be the type that would send okay and we need to import it otherwise we'll get  an error okay uh well another thing here we also   need to take care of this and we'll do it later i  missed it last time anyway so now here i'll simply   emit a new state so that state is called detailed  state okay the one we just created detail state   okay and it takes this information which is called  data so that's what we are passing there and we   are done creating the qubit and well we have this  error that's because if you come over here and see   well it's a list okay but we are just passing one  child from the list so we don't need to create it   like a list over here i mean wrap it around the  list not like this because we're just passing   one of the items now if you come over here uh i'm  sorry if you come over here to the qubits the data   this error has been gone so that's good one now  our qubit has been created and our state has   been created as well so now it's time to call  it call it we can call it from our home page   now call from where uh definitely we can  call it from i guess from this container   over here because this container we want to make  it clickable this container contains our image so   i'll come over here and what i'll do i'll go  ahead and wrap it wrap it around a new widget and   this one is gesture detector you can also  do inkwell it doesn't really matter so here sorry on tap okay so it takes untap event on tab all right okay and it should be here okay now the arrow has gone so over here what  it will do will once again use block provider   to access the qubit that's what we  learned so you do block provider dot off using you need to use off function and  here it takes the qubit what is your qubit that is   app qubits cubits this one and then it  also takes context the current context   and after that we can access whatever we want  to access from our qubit so from our qubit   we want to access a function that's called  detail page this one okay and we'll pass   one of the items from our index or from the  list actually so how to pass it so do remember   we have this info and using info we can pass a  certain index so that means that for that index   we are passing the whole item okay now we are  good so hopefully now if we go ahead and run   it we should be able to move to a new page  okay all right so let's go ahead and do it   so we'll run it from the beginning make sure  everything is okay and no error now click on here   so the data has been loaded and no error  here now we want to be able to click on that   so let's go ahead and click um looks like  our click didn't really work uh let's see i think we're at the wrong place i'm so  sorry uh what i'll do i'll just copy this one   and then i'll do ctrl z to come back let's see okay so this is not the place i think it it  should have been here over here okay so this one and within this so this is the  container this is the place we changed   i'm sorry about that but now anyway here we'll  do gesture detector once again and we do gesture   detector and now here i'll just put what  i copied now i'll run it one more time so   i'll click on this and now i'll click on this  okay yeah well it does it took well now what   happened here as you clicked on this uh  it tried to came here and what happened   so let's do it step by step so from this qubit we  are trying to call this function a qubit function   so our qubits are all here now it came over  here and emitted this state and at the same time   it saved this uh data information to our states  over here okay now we were supposed to see this   thing in detail page but detail page is not  there what happened that's because in our   app qubit logic we are not looking for it and  redirecting to a new condition or new page okay   so that's why it happened so we can solve it  easily so we'll just copy any of them okay and   here i'll put it okay after copying now  simply i'll just do another test over here   so i'll say if the state is detail detail state  okay do remember so this state name is detail   once you uh once you emit from here so  that's the detail state anyway so now   you come over here and then we'll redirect  it to a detail page okay so detail page yes   okay now go ahead run it and it'll definitely  work come over here okay everything is fine and now if you click on this it should work so it  took you to a new page of course if you click on   this you can't go back well the first thing we'll  take care of now is going back so from detail page   we need to go back to previous page well  to do that first we have to understand   one concept here once we click on this we  just want to go back to the previous page   and on the previous page every data has been  loaded so we don't want to load anything we just   want to go back to the previous page now the state  of the previous page is loaded state okay now we   already have loaded state over here which is this  one so we need to find a way once again emit this   state on this button click okay so that's what we  need to do and that's pretty easy we could just   come over here and write a new function we can  say go home okay and over here we'll emit loaded   state okay loaded state and loaded state takes uh  this list which is the places that's what we are   passing and once again this places is coming from  here okay so all we need to do now in our qubit   from a block provider we need to call this  function it will return or emit this state   okay now once it emits this state we can find it  easily over here because it's already here home   page okay so we don't need to change over here  so for this one all we need to do and all we did   is this one that's all so now we need to come  to our detail page and in detail page over here   uh let's see one thing we need to do   uh we need to find this button over here  i think this button is over here let's see okay it should be inside this one yeah icon  button as we already see we have this unpressed i   um event so over here let's go ahead and   call block provider because we know  using block provider we can access the uh qubits or qubit functions okay so here  we'll call app qubits qubits okay and it takes   context and from the context we can access  a method so in our case it's called go home   all right that's all okay so after clicking  on this we want to go back all right   so let's go ahead and run it see  everything is working fine or not   it loaded now i load this one now click on this  yes it went back you click on this one it went   back okay perfect so it means it's already  working okay and also as you see using this   state management system even though we loaded  this data long ago in somewhere else but we go   back and we still see the data it's still there  okay all right so this is perfect so far so good   and now once we click on this we want to  change the image we don't really want to see uh this static image so  now here we are in this one   so while once again if we want to access  everything from this state over here   from here we need to wrap it around once  again using uh block builder okay so   i'll simply let's see i'll simply cut this one  okay now here i'll do block builder okay and   block builder takes two parameters we know so  we'll just remove this one first or actually we   can do it here so the first one is app qubits the  second one is qubit qubits state all right yeah oh i'm sorry now over here it takes two parameters first one  is context second one is state okay and then we'll   return and after returning uh we can just say  here return scaffold okay the one we copied early   okay and the error should be gone now because  of this one now we are able to access the state   because of this one now what state we want  to access we want to access the state that is   included in over here okay all right now let's see  i believe uh using this you can access actually   all the state so we want to access the certain  state and i mean all the states i believe this one   and this one all of them you can access but  in this case we just want to access this one   so how to access that but the one  contains this that state name is   detail state right so we need to find detail state  over here so what we could do we would do detail   state and detail over here  state as details little state   okay now this should include our state as  well as the information that is encapsulated   inside this okay all right so now  uh it's time to go ahead over here   and first we want to change this one so  instead of this we'll use network image   and we already know that we don't need  this one anymore so we'll use http   uh mark dot bsl.com uploads now here so  you click here detail dot uh place dot   img okay perfect now copy this i mean so  restart it hot reload perfect isn't it amazing   okay so it's working already click on this  this image uh click on this you'll see this   image so everything is working all right now  i'll well i'll simply copy this one over here   because i need to reuse it and i'll change  all the other places where we need to change   let's see the places where we need to change  definitely the first place over here row   so instead of this we'll just simply  pass this one okay all right and uh   so the amount instead of this of course here  we don't need this image here we need name now   here we need to do a uh what is it concatenation i  think they call it and here we do place dot price and let's keep finding them and i think uh okay  we need to convert it to string so that it works   because it returns int over here okay we're  good with that and over here is the same thing   so here we'll do this one dot location we are  good and let's see over here number of stars   so over here we can simply just do this dot stars okay and total is five all right actually  it should be five what else over here now this doesn't change description doesn't change and  we also need to change this one over here the long   text we don't need it anymore so i'll just  go ahead and simply delete this now i'll put   it this one and here do description  okay now let's go ahead and run it   yes amazing all this information changed quickly  immediately okay all right so now come over here   click on this yes you see a different  kind of information different stars   you can click on this all right this  looks like we have a bit of uh what is it   overflow issue by 11 pixel now either this number  is too big okay so one way to take care of this   problem either you change them okay change the  font size or change this on on the back end   so what i'll do i'll go ahead and i'll see let me  see check on others one yeah so the problem is now   this name is too long okay so one way to take care  of this thing instead of doing on the back end   uh yeah i think i would go over here and this is  my back end uh i think this is the place where   it's causing problem so i don't want to reduce  the text size um i'll just do here ice field and   submit it now come to our app over here uh let's  do a reload load everything from the scratch   okay and now click on this oops i think i i  did it to the wrong place just click on this   ice fill the parkway oh i think let's  see i i changed it to the wrong place so over here actually i need to change  it over here this is the name okay   now it should work let's come  back to our app over here and by the way if you want a tutorial on this  back end just let me know i'm planning to make   one but it depends on how much you guys want  it so let's load it so over here i'll click   on this now it's perfect okay so everything is  working including this description as we wanted   all right so so far so good and if you learn  something please don't forget to subscribe and   smash that like button and share this article or  this tutorial anyway so next part of this tutorial   we'll see how to work on this and send a post  request to our server and save the information   and then we reload and we'll see whatever the  information was saved we see that one okay   thank you so much uh before we finish over here  in this part i think i'm missing another part   over here now as you see if you go ahead and  run it definitely you don't see the bottom bar   and everything else stays the same all right  and they also work as we expected all right   but now where is our bottom bar well now here's  the problem so once we confirm the loaded state   we are directly going to the home page actually  we should come to our main page okay this is   our main page which we learned early and within  man page we have bottom navigation bar like this   and in the list of pages the first one is home  page and that's also our default index index 0   which takes over here and as well as over here  okay so all we need to do just simply come over   here and instead of home page we'll call it main  page okay and main page we'll call home page   and make sure to import the library okay now  let's go ahead and run it okay yes and now it   should work so our bottom navigation but this is  the home page the bar page search page and me page   while now these are all working yes and  yeah perfect so this is all we expected   so hopefully you learned something so don't  forget to smash that like button thank you

Channel: dbestech

Views: 598,474

Keywords: flutter cubit state management, flutter cubit app, flutter cubit counter example, flutter tutorial for beginners, flutter bloc app, flutter counter and bloc, flutter bloc and counter, flutter bloc and cubit tutorial, flutter cubit tutorials, flutter travel app, flutter travel app ui, flutter travel app with admin panel, flutter tutorial, flutter, flutter bloc tutorial, flutter bloc complete app, flutter app, flutter course, flutter project, flutter full course, flutter ui

Id: x4DydJKVvQk

Length: 244min 41sec (14681 seconds)

Published: Sat Nov 20 2021