Transcript for:
Flutter UI Development for Beginners to Advanced

ice in my veins i've been driving this train  years in this lane there's no stop in this   flame cause i came to the game and i changed  it to play how i like rearranged it to my   own domain yeah i got what it takes made  lots of mistakes taking shots skipping   breaks feeling lost feeling great popping off  singing straight never stop never changed all   the squad here to play and i've got something  to say yeah i work hard each and every day   so this app will be targeting for very beginners  to beat advanced learners at the beginning we'll   learn how to draw text like this or view like this  and then we'll learn a bit of complex ui like this   and eventually would cover more complex ui like  that and as you see over here this layout is a bit   complex and actually very complex for beginners so  we'll cover it step by step and at the end we'll   also see how to show different data on different  cards as you can see the cards are different   and the data is different so we are reading them  dynamically the same thing will do over here and   we'll cover how to scroll left and right and up  and down and after that you will see and come over   here now we do have a ticket over here as well so  that would also help us to know how to reuse your   widget okay because not only you draw it over  here like complex widget but it will also build   complex reusable widgets so that you don't  need to write code again and again so you just   write code once and draw them so it would save  you time when you work on a complex project   and eventually will also cover beautiful stack  widget like this how to draw them and overlap   items onto each other so make sure that you watch  it to the end so to do that i'll create a new one   so here i'll create a new  project i'll click on this and here we'll just simply call it tickets okay  and we'll just go ahead with android and ios   not linux okay all right and we'll click on  finish okay now one thing we could do right   now actually change this organization name it  doesn't have to be like this it could be any   unique name okay so here in my case i would  do the best tech so you can have a unique   name over here okay and we'll click over here  finish okay so we'll start a new project for us so let's wait for it so here is our default app  over here okay and for android studio it might   not start right from the project so we'll select  this okay all right now we see our project name   over here so this was our project name right okay  and this is the folder structure now since it's a   beginning a course for beginners or a tutorial for  beginners i'll go through the project structure   very quickly okay all right so here is our  android folder ios folder lib folder okay   and another important file is pop spec dot yml  okay this one now our code lies inside this   lib folder and the starter point is main. okay  all right now this whole code has been auto   generated all right by flutter itself now since  this is a very beginner's code so i'm going to   start ahead with this and we'll see what it looks  like okay all right so it's starting over here   and if you're following this one with vs  code this idea is same all right anyway   now let's wait for it to be started and it's  still over here it says that running xcode build   okay and by this time i'll introduce you more  about the folders now because flutter in general   produces app for your platforms like ios and  android windows linux and mac but we just choose   ios and android so that's why we see this two  folders over here and they contain information   about ios project and android projects okay  well now it's somewhere in china and you can   hear the noise of crickets crickets like the small  insects so it could be a little annoying though so   forgive that one okay anyway so a lot of  android settings has to be over here inside this   build gradle and also inside this apple build  gradle and if we need that we'll do it later   and for ios a lot of the settings  happen inside over here okay all right   okay anyway so now we see this is our main.dart   and let's go ahead and check it so this is the  default project we have so what although i will   go ahead and restart it like this so the text was  here it's gone okay now i'll minimize it over here   okay all right so this is since beginners  project i'll take it very slowly all right   so yes uh one thing though if you don't  know how to install android in mac or   windows i have a tutor for that go out and  check it okay check it from the link below   all right so in general so this is the entry point  for flutter app okay there's a main function which   is more like java uh but here in this case this  is pure dart code okay and then we have one class   the class name is my app and we are calling my  app from run app over here okay all right and we   created a stateless class you can understand  a class that is stateless is doesn't do much   interaction and doesn't do update on the ui okay  and then we have this home page my homepage which   is a stateful class so you understand stateful  class as that does interaction okay all right   and this is more about the stateful class  over here an extension of my homepage is this   okay so what's happening here so my app is being  called inside this main function inside run app   now my app is over here right this is a class  stateless class a lot of it has this comment so   we can remove the comment okay so it would look  much easier so inside each stateful or stateless   class will have a build method okay so that's  what we have and build method returns a widget   widget means like a component you can understand  like this widget means more like component okay   widget is also more like a class but anyway in  pretty much every flutter app you should have   at least one material app okay so that's what we  have over here so we have a material app over here   okay now my app is a stateless class it doesn't  do a lot okay but anyway inside this material app   we have my home page my home page which is  a stateful class so inside this material app   we are calling another class so that's how the  calling works so main calls run it and run it   calls my app and my calls my home page okay and  inside this my home page over here actually we   are calling my home page state because this is a  stateful class so my homepage is a stateful class   now it is a class but it has a dedicated  action or part actually dedicated part   where it deals with states now here once  again state means that you are doing some   changes in the app and you can see the changes  immediately that makes a class stateful   okay or we say a class has state now  we'll remove this one so that we look   concise okay anyway and we'll also remove  this one so in this basic app over here this basic stateful class all it does  is uh button interaction okay so that's   what we see over here so there is a  button over here if i click on this   now it increases to one and two three okay  like that yeah that's how it works so this is a   stateful class now this is uh changing because  based on a variable so we have this variable   so our variable is counter underscore counter  in fighter underscore means private variable   okay but since this variable has state it means  the variable can change and we can see the value   the change immediately so it's a stateful variable  okay all right you can understand it like this and   it is stateful more because it's inside this  state set state method okay all right variable   itself doesn't do much i mean regarding the  changes on the ui you have to put that variable   inside a method that's called set state so on  flutter ui a lot of most i mean use in general uh   whenever you want a variable to be changed  and reflect on the ui immediately you want to   set that variable inside a stateful set state  method okay so here we are increasing the value   counter uh on the click but on the button click  okay so the value because uh it changes and   we want it to reflect immediately so we wrap it  around set state method okay so hopefully it makes   sense now this is a method that is calling such  state inside of this now this method actually gets   called on the button click so the button click is  actually over here as you can see unpressed so i'm   pressing your button and i'm calling a method so  you just pass the method name all right so this is   the basic introduction of flutter basic default  app that ships out from flutter itself okay so   what i'll do i'll go ahead and delete this okay we  don't need this okay we can lift this part because   we if we delete them we have to create again so it  could be here all right now of course it's saying   there is an error because it can't find okay so it  can't find my page okay so we need to create one   so what we'll do go ahead and create a new class  and everything would do inside this lib folder   okay all right so in flutter app your code should  be inside this live lib folder okay now we want to   be organized so that's why we'll first create  a new folder inside it okay and we'll call it   screens okay all right now inside this we'll  create a new file and we'll call it bottom dot dart okay just like this okay because  we'll create a button over here just like this   we had our app okay this one right so we'll have  bottom bar okay so we are going to create a new   class okay i would say just bottom bar okay that  makes more sense because this is every classes   are type of dart in flutter so you have to end  it with dot dart okay hopefully it makes sense   so i'll hit enter so it will create a class  inside this screens folder okay all right now over here we need to change this name right  okay but this is just a file it doesn't have   anything inside it it's empty so first  we'll go ahead and create a new class   but in this case we are going to create a  stateful class okay so to create a new class   a stateful or stiffness in android  studio you do st okay then you do you   once you do st you'll see the options so  we'll check stateful okay this one now here   you write your class name okay now here do autumn  bar okay all right so you see there are changes   over here here immediately okay all right so i'm  going to close this over here hide it now we need   to import some of the dependencies dependencies  means this class depend on some other files so   we need to import them and you can do that just  hovering over on them like this okay click on this   it be able to import them and the error is gone  okay all right now this is a class and stateful   class just like this class which was here so we  can remove this okay now remove all of it here   and here we'll call bottom bar okay and you'll  have option over here so the last one is the   one that we created okay so if you hover over on  this or use your keyword arrow you can see so it's   uh you see the option where it says that it's  a book ticket screens folder right anyway we'll   select this so it would be imported at the top  as well that you see okay book ticket screen so   so this is our project name okay both tickets the  screens and the file name over here okay all right   so now we'll go ahead and run our app and make  sure that everything is working correctly okay so   because i'm on android studio so i could just well  let me uh open it okay now anyway so if you do   command s or control s it would be like this  but the app became black okay now the reason is   uh because we are inside this we class now this  class has a container but continue itself doesn't   have anything so that's why it's black okay now if  you do want you can go ahead and set up a lot of   other things but this time we'll skip that okay so  to make your screen colorful you in general start   with another widget which is called scaffold  okay all right so here we do scaffold okay   all right now inside this scaffold scaffold  has some properties two great properties   are f bar okay so here that's what we  do and bar so ember takes another widget   that is called emperor and inside this we can set  title for this so that's what we do okay so here   we'll have a title and title is wrapped around  for title as you see if you hover over on this   it takes a widget okay if you go through it  you will see that it takes the widget that is   text okay so here we will put text and text is  also a widget and which takes string data okay   which takes data as a string okay now what is  string string is basically what you can type or   write on a computer okay so that's called string  okay so let's say my tickets just for fun okay i   will save it and as you see it changed immediately  okay now what's happening here we are calling so   we have this main function which is entry point of  our app and then we have this my app which is this   class we are calling it and inside this we have  material app so every flutter app should have at   least one material app okay and from material app  inside some properties like title uh and a theme   we'll talk about that later and another property  is a home so home is more like the entry screen   i mean the first screen you'll see on your app  so you can understand it like this so in our case   the first screen we want to see is called bottom  bar okay which is this one all right now inside   this we created a stateful class bottom bar  is a stateful class because it is object   now previously we had container so i'll cut  this and i'll put container back okay all   right so if you save it you will see it becomes  black so you could do control s okay all right so ctrl s would save it and  restart it immediately okay but   go back and stick with scaffold okay now  scaffold gives you more like a skeleton   okay it once you use a scaffold the colors shows  up so different colors for your screen so that   is blue and little dark little gray over here  okay all right so that's what we have for now   but soon we would get rid of this  app thing because we don't need this   now we'll go ahead and take a look at another  property which is called body okay now app bar   put things at the top as a bar for our app and  you can put text or even icons okay but now   here uh we're going to put something for this  body property body section so you understand   it would be here somewhere here right so first  i'll do a text widget again so text digit for   showing text and i would say my body okay  now let's see so here we see it at the top   it's in the body section but we can wrap it  around something to put it inside the center   now i'm on android studio  so i'll hit command enter   and here you will see some options so i'll use the  mouse keyboard arrow up and down to go up and down   and i'll use i'll select center and put it like  this okay now you would put it put this text in   the center of this body section so in a flatter if  you have kind of widget like text is a widget uh   you'd put the widget in the center wrapping  that widget by center widget so idea is if you   have any kind of widget that shows something  and you wrap that widget using center widget   it will put that red one inside the center  of the parent okay so the body is the parent   and because we have center inside body to put the  children in the center so that's the idea okay   all right so that's one property okay now we  have another property which is called a bottom   property okay now bottom property shows  the the icons at bottom at the bottom   just like we had this one earlier we saw it right  so we want to do these things right now don't   worry we'll be doing this on step by step so we  have to start from here actually okay all right so anyway now we come over here so  help properly is called a bottom   navigation bar all right now why they call it  navigation uh the reason is because you want to   switch between tabs so what do you want we want  to navigate so this is called navigation okay so   we want to click on the button on the tab and go  to different places so that's what we want to do   now to be able to do that first  we are going to have to use this   bottom navigation bar and it takes a widget  or a class or a constructor that's called   bottom navigation okay so that's what we'll  use bottom navigation bar okay all right   now if you said it will say that required argument  so we have to add that we'll click on this okay   now it takes items property item takes list  of children okay so inside this we need to put   some children okay so what are the children  the children that we want to put here but now   speaking of flutter navigation bar item   it has some special children not anyone  that you want to use so they start with   autumn navigation bar if you hover over on this  you'll see that uh there is an option we'll see okay so if you hover over on this you will  see that it takes a list list of items and   the items are called bottom navigation bar items  so that's what we want to do bottom navigation   bar item okay all right so definitely right  here bottom navigation bar item okay bottom bottom navigation bar items this one okay  all right so you can choose any of them   it doesn't matter okay now here it it wants  icon all right so we are going to have to put   icon and for this one we have to use icon  constructor and we'll choose any of them actually   it works and then inside we have to pass  something that's called icons dot home okay   because first time we are going to use uh our icon  as home like this one okay so what happens here   items takes a list of bottom navigation bar items  and bottom navigation bar item itself takes an   icon and that icon has to be like this okay  so you have to use icon constructor or widget   and pass the icon you want okay so that's how it  should work okay all right so that's the first one   okay all right so now we can go ahead and copy  them say for example we want four of them so   we'll copy it four times okay all right  okay now uh before we go ahead and run   it let's add a const modifier and this kind  of wiggly yellow line should be gone okay all right now we'll go ahead and save it and  run our app now our app is over here okay   now you see there is an error now error is  because we made changes in our app and we can also   take a look at the app down there okay let's  see so it's saying that if you hover over   come over here fine try to find the error and  analyze them and you have to do that because   it happens a lot as you develop so every  item must have a null non-null label okay so   so here it says every item this item should  have a label and it can't be null but for now   it's null okay if you hover over on it here you'll  see that it says label and here you also see this question mark okay here question means it could be  nullable okay but with the latest flutter version   it can't be null so you have to pass something  okay so to do that we'll just simply go ahead and   do label okay and we can give it a name so first  one we'll give it a name as home okay all right   and after that we're going to go ahead and copy it  okay and put it there and now we'll save the app   now here we do see that we have a new  bar over here and if you click on them   you also see that there is something okay and  you also see this kind of uh text shows up   okay right so which means we can change them okay  all right so well that was the home button right   so if you see we do have search button i think  that's a ticket button and that's a profile   button okay so that's what we'll go ahead and do  that so now we'll change the button over here so   instead of home we do search over here okay i  write s-e-r search okay now here how to write   search okay and then over here we'll do  tickets let's see if we get tickets or not   t kids okay airplane ticket so i'll select  this one and right over here i'll write   ticket and this is for profile uh  let's see we have profile or not   uh profile no we don't have profile  but i think we have a person okay   so we'll use that one and here we'll write  it as a profile okay oops i have a typo here   and now we'll go ahead and save it and this time  we might see here our icons are different okay   now the problem is it's not visible actually a  few problems or more problems the icons are not   the same the colors of course is a problem as well  but we're going to change all of them very soon   but step by step we are working on them as you  can see okay all right so right now or i've got   a bar body and a bottom bar okay that's cool  but a lot of things to fill in right so we're   going to install this kind of icon very soon but  before we go ahead and do that we want to see the   these icons because right now they're really not  visible okay before we go ahead and do that i want   to show you one thing even if you take out all  this thing your app would work okay just save   it yes it's still working okay all right so we'll  get it back and put it there okay now here we see   if we click on them so we see the label right  actually we don't want to see them like this so   if you select it you see the labels at the  top even labels over here so we want to get   rid of that one to be able to do that first  here we'll set up a property which is called   show selected labels okay so if we are selected  we want to set it to false okay now if you hover   over on this you see the name is gone right okay  that's good and but if you see over here we also   have them for unselected so we change it to show  unselected labels false as well okay right okay   and next we want to select uh change the  selected item color right now it's not visible   selected item color over here  okay all right so here we do say colors dot gray blue okay so that's for selected now we see  that item is visible but the unselected one still   not visible okay but soon would have a special  file for this property but i'm just walking you   through how to set up them first okay  now unselected uh item color this one   okay and here we use a color now we want  to use a different kind of color this time   a color number or digit okay  so here we do o x f f 5 2   6 4 8 0. okay so this is the one that's unselected  okay so yeah they almost look the same let's see   okay but what do we need to do we need to change  actually this one over here okay all right   but if you want you can use any color it doesn't  really matter okay so so that's what we have okay   all right now uh in terms of background we need  to change in terms of this background we also need   to change okay all right so we'll put it back all  right so now this is not the icon you want so you   want a different type of icons okay so to be able  to use different type of icons we need to install   a package okay so would come over here this pop  spec file and right over here we'll go ahead and   install an icon okay to be able to install you can  just come right after it and install icons okay so the icon we are going to use that's called  fluent ui or fluent ui icons actually fluent   point ui icons this one okay all right  and the version i'm going to use that's   uh 1.0.0 okay so this is the version so that's  how you install a package for dependencies but   of course we need to click on this one okay pubget  okay so it will install the dependencies for us okay and it's already done okay if it  as it is done i will close this one we   don't need this and now i'm going to come  over here and change the icons first okay well for home itself we don't want this icon over  here we want a different kind of icon and we'll   remove this and we would use a fluent okay so here  we do a regular home i see do i say font and home   yeah regular so this is the icon that we want okay  and let's save it and we do have a bit of problem   but i think that should get  result if we do more work okay   and how to do that so right after this this  one over here we'll also have active icon okay so right here we'll do another icon okay  but here in this case we do activate okay   so here we go icon so actually we need to copy  this one and put it here and then we do i see   fluent home okay now instead of regular this  time we want field okay this one and let's   save it okay and if it didn't work like this we  go ahead and check okay flynn to icon has been   imported so we'll start from the scratch over here  so we'll restart our app using this button okay and it will come to our run option  over here and we'll see what's going on   okay and if it still didn't work as we see which  it didn't in this case we'll stop the app and   reinstall okay because we have installed a  package now after installing package the app's   internal state might not work immediately in that  case you have to stop and restart the whole app   okay yes and this time it worked okay so  this is the icon and this icon should be   the same as this one okay all right so that's  why it's working right so a lot of time if   you install a package and if it doesn't work  then you have to stop the app and restart okay   now what we'll do we'll go ahead and  use this once again we'll copy this   and we'll use this one okay but instead of home  we are going to use search okay because there   is an icon named search for it okay so we'll  copy this one right now and uh let's see so   we put it right here okay and we have a comma  instead of home field we'll have search field okay   search field now you save the app  you see it got different right all right so our icons change all right of  course uh this active icon and non-active   icon they're a little bit different but  we'll see them like over here as you see   so it's when not when it's not active this one  you come over here it changes okay all right   but in our case it's not changing yet the reason  is because we don't have any other pages okay   so we only stick to one thing one page which is uh this one okay so we need to have different  pages as we click on them so we want to go   to different places okay we need to do that  one and how to do that actually to be able   to do that we need to set up more properties  at the top so here we'll declare a list of uh   widgets first okay because remember body takes  widget and each time it takes only one widget and   in our case we'll have four widgets but we have to  provide one using a method tab method but anyway   first let's go ahead and do it over  here so here we'll declare some variable   a variable actually one variable and variable  name is widget options okay all right   of course we need to have a type for the  variable okay so it is a list type variable   okay list means it will have many variables at  the same time and not only that what kind of   thing you'll put in the list will put widgets so  that's what i need to mention widget over here   and right after that you should have declaration  for your variables okay now we are going to have   widgets and like this okay so whenever you have a  list in flutter you have to have this this kind of   brackets okay all right now here we'll have four  options because we have four buttons over here   so the first one uh for now we'll just go  ahead and uh stick to text and we'll say   home okay and then we'll do text one more time and  then over here we'll write search okay and then   here we do say text again and here we do  tickets and here we do const text and we do   profile okay all right profile okay so now we have  this four over here okay now we need to find a way   to bind it over here okay you cannot just put it  right there but one thing we could do because this   is a list right so we can get one of the items  from the list we want to get the first item   so here we could do something widget options zero  so this is more like an array you're coming from   other programming background so in the array  we are getting the first item or element okay   let's save it so as you see it is over there  right okay now of course we can wrap it around   center widget or we'll cut this one and  we'll do center okay and then center will   have a child and our child is this one okay  all right now we can also change it as for   the second one so pass one okay all right so  that becomes a search but i think i still have   spelling error so restart it yes okay all right  and we can do the last one over here so we do   number three which is the profile this way it's  not a dynamic so we want to make it dynamic we   want to tap on them and it changes immediately as  based on the tab okay for this one first you need   to declare a variable that variable would keep  track of this value over here okay so to do that   first we'll come at the top and here we'll  call variable selected index okay index is zero   now this is called index so we are going to keep  track of the index of this list okay so here we'll   change it so how do we change it here we'll pass  selected index okay select the index the default   value is zero we can change it to one and we'll  see if we restart it uh let's see okay let's   restart from the scratch up here right and if we  do three then we'll see profile over here okay   so now we know that we should be able to play with  this variable and that would help us okay so we   want to play with this variable each time we click  on a icon right so each time we tap on an icon   so we have to create a method that would help us  to get the value as we tap on them okay now to   be able to do that first we'll create a method  and in the method we'll play with this variable   okay all right so over here we'll call a method  and its type is void it doesn't do it doesn't   return anything but do something okay the method  name we'll call it on item test okay and it   will take a value as this parameter and we'll  call it index okay all right so as we want to call this function we want to   send an index and that index should be reflected  over here so you want to set it like this okay   select index equal index okay now i'll  explain more very soon that how it works okay so now we we do have this method on tab  so of course it's not going to call itself   automatically we have to call it from somewhere  so we're going to call it from here okay so   here there is a method that is called on tab  actually this method should take a method okay   all right on top properly you should take a method  so we're going to pass this method okay all right but still nothing happens but if we print  a law over here okay and we would say so like this will pass it selected index okay   all right we'll uh print the log over here and  we'll see what shows up over here as we tab   so we tapped on this we get zero this value  is zero this value is one as we see there so right now we see that our tap method is  working and it is bounded to this untapped   property so what happens here as you  click on this this property gets triggered   and flutter knows where you tap because flutter  has this bottom navigation bar so flutter   framework knows about it as you click on this it  knows which index or which item has been clicked   or which index is being clicked folder knows that  and it takes that index and we pass it to it takes   that index and then we pass it to this method the  method we have defined so it comes over here in   this one okay and then we set set it to this one  and we print it okay now in general you can also   print like this okay select index okay now a lot  of time you might need to convert it to string   okay but if you wrap it around like this single  quotes dollar sign and then this uh curly braces   it converts it to a string automatically  for you the beautiful thing about it you   can also tap you can also type string tab  index is like this okay now we'll see that   as we tap on that you say the message tab indexed  okay but if you are going to do it like this say tapped index is then you want  to connect the string or connect   this one as a string so here you do select  selected index and then print it but it will   show you error because you have to convert it  to string and now it will work okay all right so now we tap on them okay we see it all right so we  are uncommenting the first one and using this one   but i prefer this one because it's easy otherwise  you have to have double quotes then plus sign and   then convert it to stream manually okay  but with this method with this method once you have this dollar sign in curly  braces this gets convert to string immediately   automatically okay so you don't need to  do it manually it makes sense but anyway   so what's happening here one more time bottom  navigation bar has a property which is on tap   takes a method and we can call the method  and inside this method we can grab or catch   the past value now this value is passed to this  function automatically okay all you need to do   is to take it as a parameter okay all  right now the the the problem is as you see   this valley has been changed but it is not being  reflected over here right because previously we   saw we changed it manually like one two three  and it reflects over here but it's not being   reflected okay now over here even though the  value has been being changed the value is being   changed but the state of the app is not changed  so that means the ui is not being updated okay   so we want to make that ui dynamic as well okay  so how to do that wow we can simply remove this   we don't need that and we will take this one and  wrap it around a special method which is called   set state which i told you earlier uh at the very  beginning set state helps you to rebuild the ui   with the new outlook or new things new color  new information now we'll restart our app okay   and uh what are we going to do we are going to  see some changes but before that actually we also   need to do one more thing okay here is another  property which is called current index we need   to change that one as well okay current index is  whatever gets selected from here okay so remember   every time we pass the index it gets changed  flutter also needs to know which one being set   so it knows it knows it using this property called  current index okay now let's restart our app okay   now click on this we see home here immediately  and we see search here immediately and we see   tickets here immediately and we see profile  here immediately congratulations you just built   a dynamic app that does something based on user  click okay all right so that's a beautiful thing   all right and uh one more thing that i think we  should take care over here like the search icon uh   okay yeah search engine still works but it's  just different than other icons okay great   now another thing if you see carefully you'll  see that as you tap on them the icons moves right   it changes over here as well but  we don't want the icon to move   how to fix this now there is another  property okay that property is called type   and bottom navigation bar item i think bar  type bottom navigation bar type okay this one   and we want to fix it okay all right and then  it shouldn't move as you click on them okay   i think this is much better now the default  property for type itself is shifting actually   okay so that's why as you click on that then  move all right so the default one we will change   so we're going to change it to fixed beautiful  okay so now as you see it become fixed and it's   working as well so with this we are pretty much  done with our bottom navigation bar so what do   we want to do next we want to focus on this home  button home icon okay our home screen actually   so we need to build a new screen and we'll call  it home screen okay so to be able to do that   we'll come over here inside this screen so we'll  go ahead and create a new file and we'll call it   home screen okay and the name as usual  is dart okay all right all right so here   first we'll go ahead and create a stateless  class and we do st and we'll select stateless   and here we'll name it home screen okay all right  and we'll just import the libraries as usual okay   and now over here instead of this one we'll call  it like our class from here okay so this is our   class so we'll just call it directly okay so here  we'll call it home screen okay and let's save it   okay all right i think we need to restart the app  okay now let's click on this okay nothing is there   because this is empty over here okay all right  so we're going to close this one and as well   as bottom bar we don't need any of this okay  because whatever the changes would be here   reflected okay all right now it is working  how we can prove so here we can have this one   new home screen okay so inside the container  i'm putting a child now container is a widget   inside it you can pretty much put anything you  want okay so here if we come over here we set   okay all right so yeah so now we need to make  changes from here on okay but we learned that   we could use scaffold so here would go ahead and  use scaffold as well because we might also want   to have a background color so here we do scaffold  scaffold okay all right and let's set background   color we use this color so it would be organized  and putting these colors in a separate file okay   let's try to have const modifier and see how  it works okay now this is our new home screen   but it is gone right the text is gone but here  we'll have a body okay it's a body section   now i want you to take a look at this original  app so this is the home page right home page has a   lot of information and how to deal with this well  here uh this stuffs as you see they're on the top   of each other so this way this is called column  okay so they're in column format column layout   but over here this one is a row layout  actually this is also a rollout this section   so the bigger layout is column and  inside this we might have a row   even column so this is also a column in one  sense all right and then row then row again   now here we can also understand them as a column  or row depends how you understand and how you do   that there is no exact guideline but anywhere  you do that should be okay all right so that's   what we want to do now here uh first as we looked  at this one now we know how to approach okay so   these things are on the top of each other so we  want to be able to put things on the top of each   other and scroll like this okay here we'll  go ahead first go ahead with list view okay   list view now and after that we'll have  a container over here okay container   all right and inside this actually we'll have  a child and now we'll have actual column okay so now for column itself we'll  have mostly well we'll put this one   this one and this one inside one column okay so the first one is this section right okay   so if we take a look at this one we see that we  can divide it into two sections one is this one   and this section so first for this one  we'll have a row layout inside row will have   a column and another child that's what we'll do  now so here we do children okay then we do row so see how we are doing it so you need  to understand the layout the layout is   so because we have column so we'll have this this  and this and this is the first child and the first   child is a row so that's why we are writing row  and inside row we'll have two children this one   and this one okay hopefully it makes sense  all right so now uh so let's go ahead and   do this first okay well first this one  good morning right now this is a string   or text so first we'll use this text over here and  we'll write here good morning okay all right now   if we are going to see it over here actually  we do see good morning immediately okay all   right we'll take care of this bar very soon don't  worry okay so good morning has been reflected here okay and we want to show an image over here  so this is an image now for the image itself   check out the link below and you can download the  images okay now we want to show an image over here   what we're going to do we are going to do a  container over here and inside container will   show image okay now as i as we learned earlier  container is a widget okay it takes text and other   widget inside it but with container you can do  some special design like as you see we have these   borders okay all right so because we use container  we'll be able to use the borders over here   okay now we want to show an image first okay all  right now if we don't have the image don't have   the container let's how to do that let's say  it so we can use image dot asset this one okay   i will go back to container very soon and now here  you need to mention your image path all my images   all are saved in inside assets and images folder  and then img one.png okay so this is where my   images are saved i mean this is the path and then  this is the constructor that we are passing so if   you downloaded the images from the link that image  folder just drag and drop inside it so i'll paste   it or drag and drop the idea is same and it would  immediately say that go ahead and create a folder   and it did it for us so you could do drag  and drop or copy paste in this root folder   okay now assets images so assets images and we  do have image1.png which is this one okay and   well this is not good enough we need to do more  settings with this so we'll click on this one   and over here uh we can mention so over  here we need to mention the image path   part of the image path and if you come to  pop spec.yml file you see like this so here you can remove it and make sure that this one  aligns with the earlier ones especially this one   otherwise you will get arrow and make sure  that you have this space over here yes   now with this you can't really be random it  has to have certain amount of space right   and after it okay right before it and after  it so you need to take care of that one and   we can remove this we don't need this  one okay so here one well now assets   mean here whatever image files or audio files  you have you have to mention their path over here   now in my in our app we have assets folder okay so  we need to mention that one so here we do assets   and images okay now this assets doesn't refer to  folder this means the thing you are going to use   and over here you need to mention  your images path so assets images   assets images okay all right and the format  is quite important now if we come over here see that uh now from here actually we'll be able  to refer it and flutter will be able to find it so   let's go ahead and run it and uh okay we might  have an error okay it says that image is not found i will stop the app and run again so we're  running actually this one so we'll minimize it well we can click on this  and we'll see how it goes   all right now it's launching in debugging mode  we still have an error i think the error is   due to this one over here i think we need one one  more slash and now let's go ahead and launch it and let's see how it goes okay so this time the  build worked okay and now if we click on this   we see the text and image so we needed a  slash over here okay so we'll close this   so this is how you can display image all right but this is far from this what you want  so definitely you see that image size   matters as well okay so this is  too small and this little smaller   definitely we can mention the image size over  here i think it takes sides but because we want   to have this kind of border as you see so this is  not going to work okay so we'll just cut this one   and remove this so now we'll go back  to container okay container well   if you're going to decorate image inside a  container we need to use a property which is   called decoration okay you would do box decoration  okay so decoration takes a widget that's called   box decoration now with this you would be able to  apply border okay border radius like that so here   we do border radius so border radius dot circular  and we'll apply 10 over here okay now let's uh   well if we save now actually the image would be  gone because the image is not here so we need to   also mention the image properly then we need to do  a property or use the properties called decoration   image for showing the image and inside  this you have to have another image okay   image properly and then we are going to use a  constructor or widget called asset image okay   now inside this we'll put the path that  we have copied okay now let's save it okay well it didn't show so we're going to launch  again okay it didn't show yet either okay now   why not let's see so we may set up some other  properties and one of the properties is called fit   so we do that one boxfed dot  cover and still we don't see okay now because we are inside a container we  have to give it width and height so here we do   with 50 height 50. okay so now here we go and  we see that now if we remove the border radius   you'll see it looks strange okay  if we remove this one all right   it doesn't exactly uh reflect anything  but if your image is not proportional   then using this property is useful okay now it  has others property like you can play with fit   height okay because i'm using a square image so it  is uniform but i can tell you in future when you   work so you have to use this property fit and then  check out which other properties useful for you   anyway so i'm going to put a const modifier  otherwise we see it as weekly yellow lines okay   all right so let's save it okay now so far this is  great all right now we do have problem we want to   put it to this right side but right now we are not  using that okay but we'll do that soon okay now if   you see this one over here we do  have another text where it says that   book tickets but as you can see from the  layout these two are together and then this   one right but currently this and the container  they're in one line having them one line is okay   but we need a text right after it but  anyway so let's go ahead and copy this   and we'll put it here and we'll see what  is the text the text is book tickets okay   so here we do book tickets tickets all right  so let's save it okay but we wanted to go down   uh after good morning okay so now there has  to be a column format or vertical format okay   so what we're going to do we are going to cut this  two texts together and then we'll use a property   called column so now we're going to have column  inside column we're going to put a comma over here   and then we'll use the children property  remember row and column they always have a   children property that you should use okay and  now i'm going to put this and now let's save it   uh yes it's it's started to look better right yeah  it is starting to look better and which is great   and what else we can change we can add a const  modifier right there so flutter is suggesting   you to do that okay great so now inside this  row i have a column and a container right   but we want to push it push them one to the left  one to the right and we can do it easily actually for this reason we can use the property which  is called main axis property for row okay so here we would say main access and here we  do main access alignment dot space between but   there are a lot of other values that you can  play we're gonna play with space between we'll   save it and see that they're pushing too too  much to this uh left and right side right so   this section is row and for row main  axis belongs to this horizontal axis   okay and this becomes vertical axis for  row or we call them cross axis as well okay so for row this is main axis and this  is cross axis but for column itself it's   opposite for column this is main axis and this is cross access hopefully it makes sense all right okay so now it's already started to look more  like this app but we are far from it okay now   one thing we do see that the spacing okay left and  right we'll also take care of the font very soon   and the top part uh so now we need to  work with the spacing okay how to do that   now as you see there inside a container  over here this container okay now for   container itself we can give it a bit  of space okay and we'll call it padding   so padding is applied inside from something  in this case padding would be applied inside   from the container itself and here we do called  const add-in sets only or actually we could uh   okay let's go ahead and just do add-in  sets only left 20 and right 20 okay   so they have some extra space over here as you  see it showed up but uh we can also be clever   we can use another property called symmetric now  this is horizontally left and right right so we   can use a horizontal 20 so it would still apply  the same on the left and the right side together   okay so it is working great now  we do see one problem over here   it should get aligned together right but it is  not how to take care of this issue now we need   to apply a property inside this row because this  certain problem over here belongs to this row   so we are going to apply and the cross axis  alignment okay remember this is we want them   vertically aligned so we are going to use a cross  axis alignment okay now here we do so now this   certain problem belongs to this column itself okay  so we'd come inside this column and then over here   for column this horizontal line is called a cross  axis right because now we are inside column so   this column refers to this section and vertically  they're okay but horizontally this is not okay   now inside a column horizontal line is the  cross axis alignment so we are going to work   with that cross axis alignment means horizontal  and line alignment so here we will do cross axis   alignment dot start okay so as you  see it aligned automatically okay now   because once again that certain problem  was over here and inside this column okay hopefully it makes sense okay now we need to take care of this bar  problem we don't want this f bar okay now to   be able to work with this we need to come to this  uh bottom bar over here and previously we have an   app bar actually we can just simply remove it okay  let's save it and it is gone okay so that's magic   like this now if we restart our app you'll see  that it starts from here the reason is this one   so default selected index is three so zero  one two three so actually we want it with our   home page okay now let's start it and  we'll see we start from our home page okay   all right okay now at this time we can take  care of a bit of other issues like this one   okay of course this doesn't belong to home page or  home screen this belongs to main screen now here   you do see the debug problem so we can get rid of  that one for this one here is a property called   show debug show checked mode banner we set  it to false and it would be just gone okay   so our app is slowly looking much cleaner okay  so next we want we want to take care of this   text size and color well to be able to work with  this text size and color and font size actually we   could go ahead and define them in a new file okay  so first we'll go ahead and create a directory and   we'll call it utils where every small things  goes and set up things like that and inside   this will create a file we'll call it styles  okay styles or actually we can call it f styles dog dart okay now inside here first we'll define  a color and we'll call it primary color okay and   here we'll have const color and we do ox ff6  8 70 af okay now color depends on a package   that looks like we are not getting it  yet i think we'll get it don't worry just wait i think we need to import   the library if it doesn't work automatically  it's called material.dart okay so we do import   material material okay it looks like okay  the third one okay the arrow should be gone   okay all right so this is a prime this is the  primary color for our app now we'll also define   a class over here and we'll call it styles okay  inside this we'll set up some static properties   and okay first we'll declare a static color  type variable and we'll call it primary primary   color primer okay why why we are doing like this  i'll explain soon when we are going to use it okay   all right so that's the primary color and we also  want to have a text color and we do it static   color text color okay here we do const color   ox ff3b 3v 3d so that will be our text color  and then we'll also define a background color   so it would be color type and we would  call it bg color and we do const color and here we do o x f f e e e d f two okay great so  that should be background more like   background like the background of this  screen okay right and then we'll have   an orange color we'll do that one all right static  color orange color okay and const color coax ff26 that should be five two six seven nine  nine okay so those are the basic colors now   these are the colors that we have  used previously in our original app so the same color we are going to use now and we  already defined the color next we're gonna set   up some style for text which includes text font  size and color itself okay and the font weight here we do static color sorry static text  style because we are going to style our text   and we are going to have the type as the text  style and here we do text style the variable   name and here we have to pass the constructor  as a text style just like the color okay all   right great and here we do our font size and our  default font size is 16 and we do color over here   and we pass the text color the color  we have defined over here at the top   okay and so that's the beautiful thing you  can reuse them so if you want to change the   text color you just change over here and  then you're good to go and here we'll have font weight okay so we'll have  font weight dot w 500 i think   okay so that's how we're going to define the text  card and we're going to copy it and we'll paste it   now the text is the text but we might also have  like headline okay so the bigger text and we call   them headline okay now we might have different  kind of headers like this is bigger than this   so different headers they have different font  size okay so that's what we are going to define   over here here we'll call headline style okay  head line style and we'll have for this one 26   and the color is still text color and the font  is in this case we use bold so completely bold   okay now we're going to copy this one and  put it here and here we'll create headline   style two okay all right and here we'll  have a little smaller text this time says 17   and the text color stays the same  and i think we can go ahead with w500 okay and one more text we need i guess before  we finish i think we can give it 21 actually   a little smaller uh and let's keep it bold and i will copy this one and put  it here and that should be headline three okay let's be organized so one two three  yeah it makes more sense and this is in this   case we could do 17 and here we do w500 and  we'll have one more which is very small one   the headline four the size is 14 and in this case  the color we are going to use a bit of different   color not the same color so here we do colors  dot gray dot shade uh i think that should be a   little lighter okay and font is stays the same  all right so we are done now over here you see   we have a variable outside this class scope  okay but inside this file so in flutter or   dart if you declare a variable outside a class  you can access it from anywhere just write the   name of this thing and you get the variable okay  so what do you need to do you need to directly   write the name of the variable and then you will  get it but now if it's defined inside a class as   a static you have to first write the class name  and then you will use dot operator to call them   okay for example if i if i'm going to use the  text color so what i will do i will do styles dot text color okay like that so that's how  i'm going to use it from another class okay   so you need to remember with the static if you  want to use the variables you need to do class   name dot variable okay and something that's  outside the class you can directly use it okay   and we're going to use it first for this one we'll  come over here and change the color okay but now   we are not going to use primary swatch we are  going to use the primary color primary color and   what is our color primary color is primary the one  we just defined okay this one all right so you see   you can just directly call it okay now if we are  going to see our app we'll see some changes okay all right but we don't see the changes over  here but if you come here you might see the   changes okay because we have a color over  here but now here it's pretty much white okay all right and then we need to come  over here in our home screen over here   so this color has been already defined and  which is a background color this one right   so we just call bg color using this  class name so we'll come over here   and instead of doing like this we do  styles dot bg color okay and of course there isn't any obvious change because the color  is same okay now we are going to apply the color   and style like the one we have defined over  here to this text now for this reason i would   come over here and inside over here we have  this style property and here we'll call styles okay dot headline okay now over here we are going  to use the small one headline three let's see   okay we have to remove const because this is not  const okay all right and if you save it and run it   yes it's already looking better got a  little bigger right and headline three is   this one font size is 17 okay all right now we're going to do the same for this one  so here we do styles and style styles dot headline one okay so the biggest one so yes it's  already looking more like this app okay more like   this but look at this one so it's good morning  but little gray but we have the same color and   let's see so we're going to use a 3 so which is  this one so let's change the color to this one let's save it let's run it okay now it's more  grayer and this is what we like okay great uh   so the text part is working and now we want to  create a bit of distance between these two lines   now here to do that we can use a size box and  here we could do height okay height say five okay well it didn't have a much bigger impact but  yes it increased like for example if you do   50 it would come down but we don't  want to do 50 we just want to do 5.   now with this approach there's a problem so every  time you have to mention its height or width   height is vertical with this horizontally  so for this one this problem to be solved   actually we can use a package okay so go  ahead and install a package the package name   is let's see package name is gap okay  so it's easy to use just go ahead and   install and then do pubget okay you're good  to go now here i'm going to use gap i'll do   gap five so you don't need to mention height or  width okay so definitely we need to import it   and put the package okay so it automatically knows  what to apply whether it's height or width it   knows it based on your layout like whether you are  in the row or in the column so it's very automatic   okay now if we are going to see our app we see  that we do have some space at the top where we   don't have so we can give it some space okay now  because we have installed this this one so we'll   be able to do it pretty efficiently and smoothly  so right inside this children over here for row   inside this column we can apply a bit of space  so here we do const gap there 40 okay all right   so it came down a little bit okay and which is  really good okay now it's looking much better okay   so now with this we are pretty much done with  this uh this kind of layout okay so next we'll   go and see what is this now definitely this has  to be inside a container okay because if you   once again if you use text or border colors  or things like that inside a container you   can have this smooth rounded border without that  it's not possible so we'll collapse it like this   okay so right after it will have this design okay  and as i said we need container but we'll start   without container and as we work along we'll see  how it looks like without container then we will   be using container later okay so here first i'm  going to do i'm going to put a row layout okay row and then row will have children now you might ask  me why i have row over here the reason is you see we need to have this one and this text the icon  and the text so they have to stay in one line   next to each other so that's why we're going  to use a row okay all right so the first one   definitely is an icon so do const icon and  here we're gonna use our package or plugin   fluent system okay just go ahead with this  one but in this case we want flint search   okay and we also want to have regular this  one okay all right now we want to have a color   for our icon okay so here we define the  color color and here we do color o x f f   b f c 2 o 205 all right okay now we need to have a  text over here so that's what we're going to have   and the text name is search okay then we are  going to apply style to it and the style should   be headline four okay so this one all right  so now let's go ahead and save it and see   okay well it's there but it's too close  to the earlier one so we need to create   a distance so over here we  do const gap and here we do say 25. that's it okay now we have space but once  again this could be replaced with sized box with height 25 the idea is same but each time you  have to write height okay so it's your choice but   in this tutorial i'm going to use this plugin okay  which is very convenient okay now as you see from   this one we do have a background color inside  but here because we're inside a row we can just   do the layout but not really the color inside this  section okay so for this reason we need to wrap it   wrap this row inside a container so i'm on mac  and i would do option enter and here i will choose   container okay so now this row is inside this  container as a child okay now because of this one   over here we can apply some styles now take  a look at our app so here you see at the   beginning we do have a bit of padding or space  so as i said earlier for this one we can use padding properly okay so here we do  padding okay and const add-in sets only okay so we could do both uh actually we could  do symmetric because we want to apply both   horizontally and vertically first we  do horizontal and we do 12 okay and   let's save it okay so it came down came to  the right a little bit okay and after that   we want to put color for this one for this  reason definitely you need to use decoration   so remember if you have a container inside  the container if you want to do style and   decoration always use decoration property with box  decoration now inside box decoration we can use   image but that's optional if you need image  then use it if you don't just just skip that   okay now here we go border radius and um we  do border radius dot circular border radius   dot circular and over here we'll use a 10 okay  now of course we didn't change the color so   it still looks the same okay so we need to  give it a color okay here we do const color okay so we need one more f okay great now let's  save it yes we see there is a color but   it does look a little weird right it's very  thin so we can use uh this property actually   so vertical vertical and the 12 and see how  it looks uh yes now it looks much better okay   so yeah great so inside this container we have  this decoration because of this decoration we can   apply the border as well as a color okay that's  wonderful so next we'll see how to use this layer   how to create this layout okay all right of course  we will do it right after it and over here i will   first go ahead and do a row as you can see  this is in a row format row format okay and we can just directly create a row because we  don't need to put some uh space on the left   and right because we already have because we are  inside this container so everything up to here   is inside this uh this container okay  so all these sections in this container   and they're in column layout as you can see  from here okay instead column we do have row   inside container we do have row as well so this  is the last one so we want to write upcoming   flights and view all okay so we'll be here  and we'll do row okay now we'll have children and then we'll have a text  and here we do up coming   slides and here we'll apply style to it okay  and we do styles dot headline to this one okay   and yes after that we also want to have a  text over here and it should be view all and then here we'll have style  okay and we do styles dot   text style we do have a text style right let's  take a look text as a style which is this one   just for simple text okay all right so let's go  ahead and save it and see how it looks like okay and now we want to change the color a little  bit that is based on our primary color okay   so here that's where we need to copy with okay  copy with now over here we can apply the color   now the color will be coming from our primary  color so we can access the primary color   by saying styles dot primary color okay all  right now let's save it uh yes so that's   our primary color which is same as this logo  color sorry the icon color over here okay great   but now they're too close to each other so for  this reason we're going to apply a property   which is called main access which we have done  before when access dot we do space between okay   all right and over here actually we can create a  bit of spacing okay so here we do const gap 340. yes that's looking great but now actually  we want to click on this click on this and   just see an effect so for this reason we  would wrap this text around a clickable widget   there are a few clickable widgets in flatter  one is incoil and there is gesture detector so   in this case we are going to use inkwell okay so  i would do option enter and well we don't see ink   well so we'll select widget now here we do inkwell  okay inkwell okay now for inkwell uh let's run it okay now here we want to be able to click right so let's come and set this property  child okay so i'll hit enter   and right here if we hover over on it we see  that it takes on tap okay so here we do on tab and antenna takes a function so this is a  function this function doesn't have a name but   you can create a function that has a name  outside of this class and call it here but   we don't need to do that but here we can print  you are you are test okay now let's save it and   if we click on this we see you are tapped  okay so that's how you print all right okay   so with this we are done so next we'll see how  to create this beautiful card over here okay   and we're going to make this ui okay now this  would be a bit of a complex and a lot of work   but anyway so uh we'll collapse this code  over here the one we have written so far   so this was our container so first child inside  this list view we're going to create another child   over here so we can actually go ahead and create  another child but because this ui is a bit complex   so we'll have a dedicated class for this and  we'll just directly call that class from here okay   now for that reason uh we're going to come  over here and we'll create a new file so   we'll call it uh ticket view dot dart okay all  right and inside this will create a stipless   class okay to do st now here we'll call it ticket  view okay now over here we're going to import the   necessary library okay all right and as you  see that over here it would be scrollable okay   so that's one thing we need to remember okay  anyway so now over here instead of returning   this one actually we are going to return a  sized box the reason is our ticket over here   will have a fixed size okay so we are going  to use a sized box okay sized box it could be   achieved through container as well but you're  seeing different ways of doing things okay   so anyway so now we'll give it width and height  now here we do to get the width we can do metro   media query media query okay and then  we do off and it will take a context   and this is the context then it will have a size  variable okay then we can definitely get with okay   okay now we do we would use the same to get  height okay now in that case we'll be using height   all right now here we are getting with  but actually we could be better now we can   move this logic to different file or class  and then we're just calling that one okay   so what i'm going to do inside this utils i'm  going to create a new file and we'll call it appleylayout.dart okay so it'll pretty  much give us the size and things like that   and here we'll create a class and we'll  call it app layout okay all right now here   we create a static method and we'll call it get  size okay now all we need to do we need to pass   a context so pass the build context map build  context and then we'll just return from here   it would return media query me the uh query  and then q u r y q e r y dot of context like   the context that had been passed then we'll just  get sides okay all right so we get size like this   now what we could do from here  actually we can call this method size from here get size okay so here would create a  variable and it's a type is size which means that   the type is final size sorry the variable name  is size and type is final which means once you   get it you can't change it okay so that's why we  do final and then here we would call app layout   then we'll just simply call getsize and we can  pass the context so this is the context okay now   we can reuse this variable so we take it and  we get it from here okay we'll use it here   and then we can get width from it okay because do  remember size has width okay w-i-d-t-h with okay   uh so let's come over here so we could also do  width like this but because from this side we   can also return height so over here we'll not  do it like fixed so we just want to get hot   size based on that size we'll get width  and height okay so now here we get this   size over here and we can also get the  height for this okay so here we do height   all right so right now we do say well we can  give it a fixed height and see what happens   let's see do we have any chart no we're good  all right so that's what we have so far okay   so this would be reusable later once again okay  all right now over here we'll have a child okay   now we'll use a container okay container and  inside this we'll have a child and child will   have column then we'll have children okay so  let me explain that what is happening over here   so if this is our app now over here in this  app this card okay so this is one row this is   another row these two rows are on the top of each  other so which is like a column right so this is a   column based approach but you can also do row  based approach so in this case you will have   three rows or like that but here what i'm trying  to do i'm taking this whole card as a column okay   so inside the column we'll have first child which  is this one this is the second child third child   fourth child fifth child like that okay  and inside each child will have row   okay so this is the approach we are taking so  once again this is whole card inside this column   insert inside this container and then we'll  have a column inside it and each column each   the column will have children and each of the  children is like this horizontal row okay so each   row have three items you have to understand  like this so now we'll come over here and   so this is uh over here actually  we want to create another container   because if we have a container then we'll be  able to create padding inside the container   okay and this container will use also with margin  or padding but later we'll see why okay all right   so anyway so here we do a container and then we'll  give it a padding okay and we do const as insets   all so we want to have padding everywhere and  we'll have padding like 16. now this padding would   be this this this padding as you see the border  okay the empty space okay great so that would   be our patty so now we'll go ahead and define a  child over here and our child would be a column and we'll have children as well okay so our first child should be a row and  of course row will have children over here now this row will contain this three items or  actually you can if you count them separately   then you will have more okay all right  anyway so would you come over here and   the first one we have seen that is uh text  right so we want to do this text over here   so we simply do text and first one is nyc which  stands for new york then we have to assign styles   to it so that's what we do into style okay and  here we do headline three okay so styles dot   uh headline three i think this one okay all  right so that's what we have and next a use   all right so after that uh we're going to do this  one over here okay so we'll just copy this one and we'll put it here and then instead of  ncy here we'll write one done okay okay   and now this is the very beginning of our  card so what we'll do we'll come over here and   call this ticket view okay ticket ticket view okay  all right yeah that's all we want to do for now   we'll save it and see how it looks like  of course they're too close to each other   now if we come over here and let's try to put a  widget okay so we'll call the widget const and   i think the the type of i mean we are putting  cost instead of in in in in front of it and   then we'll use a spacer okay now let's see how  it looks like okay so they're pushing to the far   end of this okay yeah well that's interesting  but now at the same time of course this is far   from what we wanted right but don't worry we'll  take care of that so over here uh you do see that   it came out where it should not and as well as it  should go inside right now why this is happening   now this 16 padding is this one right so the  container is more like this so it is touching the   edge and coming over here like this okay so  what do we want to do we want to create uh   more spacing at least on the right okay  so here we do this one so here we do   margin okay so margin would be applied out of the  container okay so here we do const edge insects   only now here we do right okay and now here  we apply 16 oh sorry that should be left okay   all right so now it came inside okay but now if  you see over here that our container has a bit   of co i mean this container has color right the  background color so we need to apply that color   to it and we also see that it has borders right so  this kind of border that we need to take care so   what we can do now we are already inside  this container like for example if you give   it a color say colors dot red okay you  can assign it color colors dot red okay   all right and i think we need  to import the package over here   so let's save it and we do see there is a color so  what we want we want to apply a border to it right   rounded border but anyway so for that one  actually we are going to use the decoration   and box decoration so once again using box  decoration we can give beautiful borders and   color inside it okay so anyway so what i'm going  to do here uh look at this color over here so   this is the color that we want to apply so  okay so we have this color right over here   and then we would do border radius okay and  we'll do const border radius okay border radius   and we'll do only actually okay now over here  uh if you see the card we will have border only   these two sides right because we are doing  this first part of the border okay all right   so now here we do top left okay and radius  radius dot circular and say here we want to have   21 and then we can also do top right  okay and here we do ray ds.circular   21 okay all right so our card is already looking  better and which is definitely good all right now   the problem with the text itself okay now text  should be white which they are not in this case so we can change it so over here whatever default  color has been given to them we can change this   one how to change this remember previously we  did dot copy okay copy copy with the colors   this one remember and here we can reapply the  color so we do color colors dot white okay so we can do the same for our next one now what happens this is your whatever the style  you have saved earlier in this file but you can   override some of the style using this copy with  okay if you want to override your default style   i mean whatever you have defined then you can  just do copy with color okay and actually it   does a lot of things a lot of properties like  color background font size so a lot of the things   actually you can override okay uh let's see why  we do have this error over here which we're not   supposed to have okay we are missing i think this  one okay right so it's working as we expected okay   all right and now here it's too close to this  one now we could change it from here so here   we'll just go ahead and do like this const  gap 15 and it would help you to have this   space at the top okay great all right  now we'll go back to ticket view   because we have more things to do and for now  would be doing const so that the error the lines   they are gone so now we're going to do we're going  to look at this section now this section will be   very interesting okay now as you see this has to  be a rounded container then we'll have some lines   and then this would be rounded container again  in this case we'll have two rounded containers   and then we're going to have this airplane  okay so that's what we're going to do   okay so now for this uh thick rounded container  which is this one actually we can define   a new class over here now this would be reusable  widget okay now we want to uh separately create   a folder over here and we'll call it widgets  okay widgets and inside this uh would call   a new file we'll call it thick container okay  and then dot dart okay now inside this will   create a stateless class and we'll call it thick  container i think the naming is not good actually   okay we'll go ahead with this one for now anyway  so here we are going to have this container and we are going to import this flutter uh the  package library at the top okay now here we are   first going to create a padding and we'll do const  as in sets all okay 3.0 all right and after that   let's see we are going to do decoration  okay we do box decoration okay now over here   we'll have uh border border radius we can  do border radius as well first no problem   and here we do border radius dot circular say 20  all right and after that we'll have border okay   now over here border dot all and over here  would apply say width so border will have   width 2.5 now this would be actually the  thickness okay like you see the white part   the thickness okay all right and then we'll also  give it a color so we'll call it colors.white okay let's see we need to import the package over here okay so here we do colors dot white okay so for now that's what we have and as we're  good to go so what i'm going to do i'm going to   call it right after this okay so we'll just  simply go ahead and call thick the container okay   and that's it okay now let's see how it looks like i'm going to see what's happening so here we are returning a container  decoration oh yes actually it is here right   um that's that's quite interesting now why  this is because there's a spacer here let's uh   put another spacer let's copy this one  and put it here okay all right so now we   have two spacers so it's in between two  spaces so you understand that one right well now we want to achieve this result so which  means that we need two of this right so we need   one more so we're going to do we are going  to just simply copy this one and put it here   then we run it like this okay now one thing we  need to know that our spacers so we have this   two spacers so each of them they push things  to the left and right so over here we have a   spacer so it's pushing left and right and this  spacer is also pushing left and right okay over   here the spacer now the way they do it they  try to keep things equal and proportional   so it wouldn't push like here okay let's say  pushing back over here and empty space here   a little empty space here they don't do it like  this okay so spacers it takes the space and try to   distribute the space equally okay so that's what  it does now if we put a third spacer we'll see   that it is true okay all right so now what did  it do we have this three spaces right so three   spacers it took the empty space inside this parent  which is a row and equally divided into three   pieces as you can see over here now this could be  also done using expanded widget expanded widget   okay expanded but you need to put an empty widget  or empty container okay we'd see the same result so let's do it okay so you see there is no  change at all okay so expanded widget and spacer   in some aspect they are same   so anyway so this is where we want to put some  new stuff okay stuff like this one okay so this   dots over here so that's what we want to do or  put so now we'll come inside the standard widget   and we'll remove that one okay now here we're  going to put a widget that is called sized off now for child itself we are going to use  over here say flex okay flex all right just to put direction and what else now if you  hover over on it you'll see that it takes a list   of children okay so we want to put children okay  children all right great now a direction we can   set we can set it to access access dot horizontal  and what we are doing like this so you need to   take a look at the first picture over here so  these dots over here they would be inside this   flat suit okay now what flags do because of flags  uh we can put a lot of children together so there   would be like a children one by one otherwise  you have to say a lot of them together a lot of   sized box but here we are just using one size  box but because we have flags it would help us   to do the layout for us one after another because  we are going to mention the direction of this   okay so hopefully it makes sense so here we are  going to put list okay now how to put the list   so but we'll dynamically generate our list okay so  here we do so here we do list dot now say we want   to generate five of them and each of them for  example uh we need to return them as a widget just wanna simply return this dash okay all  right so now go ahead and save it all right so we   already see them it's over here right okay now we  can change this one how do you change this so we   do over here main axis alignment okay so here we  do main axis alignment main access alignment dot   space between all right so you see this one took  uh the space uniformly okay and expanded to it   now with this approach there is a problem so here  this part is pretty much fixed right and this is   something that's also fixed but um that's that's  fine though but over here we don't want to make it   fix we want to make it dynamic okay because larger  screen and smaller screen based on screen you want   to make them smaller and larger things like that  as well as how many you generate in larger scale   larger screen you will have more  dots and smaller skin you'll have   fewer dots okay all right now because of  this reason let's go ahead and do layout   builder so we'll wrap it around the layout builder  widget so we do command uh enter or option enter   and here we do a widget and we'll call it layout  builder layout builder okay now while we're using   layout builder because of layout builder you  will get the width of this space over here okay   so we you need to put it inside a parent in our  case the parent is sized box but we don't know how   what's the will of this parent right so in this  case if you put layout builder will be able to   grab that with okay that's why we are we wrapped  this flex using layout builder so over here   uh it wants us to add this argument and  that's what we do okay now we it did it   automatically for us and over here you also  see that it returns something so instead of   having this child over here like this we'll  move it inside layout builder and return it   all right so now with this we'll  be able to grab the width of this   and how to do that so here we'll just  simply print it we do print the width is so here we're going to use the constraints dot  constraints with width okay so this will give   us the width okay because layout builder has  constraints so it automatically calculates the   width our height for you okay so we'll save  it and now if we come over here you see that   this is 69.333 so this is the distance that is  69.333 so that's the beautiful thing about it   okay so as we can get it so now we can apply  it over here so i'm going to copy this one and   i'll remove this first i'll put brackets  and then inside it i'll put what i've copied   and then i'll divide it by a certain number  so i'll divide it by six so what i'm telling   whatever this width is take that wave and  divide it by six okay now for a larger screen   you will have more numbers after the division  with smaller screens will have fewer numbers   that number represents the number of dots over  here okay so here we do two floor okay or floor   all right so now let's go ahead and see okay now  that's what we have over here now to get rid of   this problem we'll maximize the space so here we  do main exercise this one and we do main exercise so here we can use a size box and inside  the size box we'll have width so here would   mention with as one or maybe actually three is  better and height is one okay now we would do   a child inside this so a child over  here would do decorated box decorated   box and then inside this we do decoration  and then we'll do box decoration okay   and because of this one we'll be able to apply  color to it the color let's save it and yes   the error is gone okay so that's how you do  it so that was the first part of the puzzle   and then if you see the earlier design we  also need this arrow plane over here okay   so how to get that one now we do have this  one over here and right after this we have   this thick container which is this one so right  after it first will get an icon over here okay now let's save it and see how it works so it  is there okay now it is uh upward but we want   to rotate it so how to rotate it so we'll see how  to rotate an icon here i'll cut this one and over   here we'll do transform transform dot rotate okay  this one and then we need to specify the angle   so we do 1.5 so which is uh from vertical to  horizontal shift which is more like 90 degree okay now we see that it converted like this and  after this now what we want to do we are going   to have to put it like this in the middle  okay but right now we can't the way it is   okay so the idea is these two this size box and  this one they have to overlap and how they are   going to do it so over here we are going to put  this sized box and transform widget uh together   uh inside one special widget that's called stack  widget because stack widget helps you to have   overlapping right now they are not overlapping  actually okay and you cannot really push it over   here but if you use size uh stack widget we'll  be able to do that okay now for this reason we   need to move this one up and right next to  it okay so that's what we are going to do but first uh what i'm going to do i'm going to  wrap it around size box and then we're going   to move it inside the stack widget sorry i'll  wrap it around using stack widget then we'll   move this one inside stack widget as well  okay so i'll click over here and then i'll do   option enter and then here there is a  widget and over here i'll select this stack so for this one the parent widget is  a stack widget so we want to center it   so we'll select it with the center  widget okay let's save it and it's   centered so that's how you do uh widget  overlapping or cool design like this after this we'll go ahead and do this section of  this design okay all right and for this one we   are going to introduce a new row so we'll  collapse this and put a comma over here   and then over here we do a new row and  as you all will have children remember   rows and columns they always take children  and they they take list of children and   this one means a list okay all right so over  here first would go ahead with the size box and we'll give it width say 100  and we'll have a child over here child would be text and over  here we'll have new york and here we'll do style  okay and for now once again   we'll do styles dot headline for  would go ahead with this one and   yeah okay so that's the first one and let's  save it and see the result okay so here we are   and we know that we can change the color so we do  dot copy with so here we do color colors dot white okay all right okay so now it worked and over here  we'll have a text widget here we'll   uh pass the string eight i think eight  miles also eight hours and thirty main   and once again style so it would do style stop  headline three and then dot copy with color   colors dot white okay and then once again  we'll have this sized box so let's see let's save it and see the result compare it um  yes uh it's it's looking okay but i think this   text got a little bigger so we need to work on  that one and the others are fine so anyway so   let's go ahead and copy this and we're going  to put it here here we'll change it to london london and there is a property that we can  set that's called text align we do text align   text align dot end and i think it  would help us to change the position   okay so yes it went down a bit of far okay   now we can set up another property over here  which is called space between main access main access alignment now here we do space  between okay so it's looking much better   now the problem with this one it's uh it was way  too big uh let's see if we can solve this one so uh headline go ahead with headline four and yeah  now if we are to come over here and we see that   yeah it's pretty much the same but of  course we have this problem over here   which we also need to take care all right so  it doesn't all right so it doesn't look very   uh aligned the reason is actually we do messed  up over here and here here and here well this   line is okay but here actually it should be ldn so  let's go ahead and find it and add this one okay   london ldn okay now it does look much better  because the three letters three letters and   this length and pretty much same as this one okay  all right so that's has been sold now over here   between this two we want to create a little  bit of space so here we could do const gap   one and let's see how it looks okay and we need to  import the library okay so it went down a little   bit even you can do further three okay it's much  better all right so the next section is doing uh   this and this as well as this okay now for this  one actually we have to introduce a new container right after this container okay all right  so this container is responsible for   showing the blue part of the card okay all right  our ticket actually card or ticket now right over   right below it would do something  new showing the orange part of the   card ticket okay so right over here first to do  a container okay all right now if we are going   to look at it you do see that it has over here uh  this layout now the this is the first part which   is like first child second child and the third one  okay now we could do it in a row okay so that's   what we'd be doing so we'll put everything  in a row so over here we'll do child okay   a child is zero then we'll have children now  over here we'll do sized box okay all right now   if we're going to look at it here you see this  is a half circle so that's what we're going to   do and that has to be once again using uh like box  decoration or decorated box okay so here we put uh   well first we need to give it  width and height so height 20   and say with 10 and after that we'll have child  and here we do decorated box now here we'll have   decoration box decoration okay now definitely  we need border radius so we do border radius   this one okay border radius now over here we do  only only now if we're going to see we don't need   a complete border so we need border at the top and  the bottom okay so that's what we need to mention   so right inside it would do radius dot  circular now over here we'll have 10 and that should be top left okay that's the top top right actually top right  okay and we need to put another one okay let's   see we can we need to put a const as being  cranky now the other one is uh bottom right   okay and we do radius.circular10 okay now that should be it all right and  what about the color actually okay so we   need to define the color now that should be our  container color we should put a color over here   so we do color and then we do const  color and here we put orange color so the color would be f37b67 okay all right and you see the color came out now actually we  could put it in our styles file so we'll copy   this one and we'd come to app styles over here and  we do have a bit of orange color over here um okay   so i'm not sure this is the same color though so  what i'm going to do i'm going to come over here   and comment it out over here  and we'll try styles.orange color okay all right let's see   nope the that color was wrong actually so uh  we are going to come over here uh i'll replace this one over here do f three seven b  six seven okay and we'll see how it goes okay now would come to this app let's restore  it okay now it took actions okay it's fine so   now that that is working okay now how about this  section over here this section also needs a color   now inside this decoration we can set color over  here so we do color uh colors do white for now so that's our uh the rounded corner okay all  right great now we're going to copy this one   and put it right here okay all right  so we do have two but now in this case   uh instead of top right it should be top left and bottom left okay all right now of course they  shouldn't be together so we can   separate them and here we do expanded widget  and say for now we have an empty container   and we'll see that let's see what are we  missing over here expanded what's the error   okay most probably it doesn't want to work with  const okay great so it's already looking better   all right and okay so now inside  this we need to put stuff which stuff   this one well just like earlier we have done  layout builder we'd do the same but we would   take it step by step so first here we'll have flex  and of course we need to get children for this   and as well as the direction okay all right  the direction is access dot horizontal and   we'll once again use our friend list generate okay  and in this case uh we'll just first go with five   and then over here actually  we're going to use a sized box okay and with say for example five height  say one over here we are going to use   a child and we do decorated box  and decoration box decoration   and just simply we'll use the color and  we'll do colors dot white and we'll see   okay now it's very tiny and that's not what  we want because we just have five of them okay   but previously also learned that we can wrap this  around uh uh center uh layout builder widget but   another thing we still need to do over here this  is main axis alignment so main access alignment   dots space between and okay now of course this  is still a hard-coded five over here so that's   not what we want i think there's another property  we should also set that one which is main exercise   okay so main exercise dot max okay so  take the maximum space of main access   all right so it'll completely try to take the  maximum space now would wrap this around a layout   builder so we do widget over here and here we do  layout builder okay now of course we can't have   child for this it has a property which is called  builder so that's what we're going to use and let's see uh okay cool now we don't need this one now all so all  we need to do from here we need to return   return the flex widget okay and we're good to go  all right and make sure that we're good uh yeah   and i think we need to put semicolon okay so we're  good now here one second we'll use this constraint   okay all right how do you do that first we'll have  brackets and outside will have something but later   so here we'll have constraints constraints  with width and here say i want 15 of them okay so there should be 15 of this okay so that's  working great and let's see what else do we   need a const modifier yeah it worked here we  also need one and here as well as okay great okay so that part is working but now let's put a little bit of  padding around it so that it looks better   so would come over here and wrap it around  another widget and we'll call it padding now we   do have like eight over here let's go ahead with  eight uh yes it looks better fine if you do 12   okay it looks a little thicker and i think that's  okay and now this problem has been sold over here   okay now if you see the earlier design it does  have a little bit of space at the top over here   and now we have the same one exactly okay all  right so with this that problem has been solved now we'll go ahead and do the rest part  which is this part okay now if you see uh   we need we also need a container to do that  so here we'll have our bottom part of this   orange card which is this one so we're going  to make a small note about it and definitely   we'll start with a container okay all right and  container will have a background color and color   things like that so for this reason actually  we can just simply copy this section from here actually all of it from here   and then we're going to put it here uh and we need  to change this color over here so we change it to   styles dot orange and we need to change this part  and instead of top left so it would become bottom   and over here it's the same so that would  be bottom okay all right and let's save it   and see the result yes of course because we  don't have any content so it's looking weird   anyway so now we'll come over here and we'll  do child and inside this will have column   now we'll have children at this time the approach  is a bit different uh this time we are going to do   column by column so we'll have  three columns but inside one row   so this would be a row and then  we'll have like say column okay   so one column first column second column  third column inside the big row okay so here we do row okay now with the row why we'll  do all because it would help us to do like   space between uh so we can center them  together okay like they would be aligned of children and now over here this is the  first child as a column so we do column over   here and children again now here we are going  to put our text so the first text is text may   do text first may and then we'll do style and styles dot headline  three that's what we would do okay and then we do copy with so we  do color over here colors dot white all right let's see okay great   and so that was the first child so we need  another one and that should be another text here we do date and style styles dot headline which one we can use   for actually this one and then  copy with style color colors dot white okay all right now they're too close  to each other so we'd use const gap five   okay all right now we want  them to be aligned over here   so we can set up a property inside this which is  called a cross access because we want which one so horizontally actually  horizontally start from the   beginning horizontally so over here we would do  cross-access alignment cross access alignment   dot start yes that's looking better and i  think this part actually we can directly   copy and reuse it okay so i'll copy this one and  over here i'll put it here okay now we can set   up a property over here which says main access  alignment main access element dot space between okay great you see it's looking better  now here if you see the align from the   right side so here we need to do end instead  of right okay now it's looking better   what else we can fix so here  it should be 23 and number so 23 and number all right great and for today  actually you could all do small   small letters so yeah now we are  left with this section over here and that's how to do that so definitely we  can copy one of them and it's the same idea   so i'll just go ahead and copy this  okay all right and let's put it here   now this one okay so this one we can change  from this property we do center beautiful of   course this is not the text we want we want  8 30 8 a.m and departure time so here we do 8 a.m and the aperture time beautiful  now if we just copied this section   directly here this alignment  would have been difficult okay   we just can't do that okay now one weird part  about it is you see over here we have like 16   but here it does look like more than 16. so  we need to cut down a little bit so we can't   really use this one um so here we could  do only say left 16 so top 10 right 16 and bottom 16 and this way it should look better  yes so they say it looks a little better okay   all right now we are done with this section so  this is our first card okay now we need to have   two cards over here if you see we have two cards  and of course we also have to take care of this um this part over here the space but our  card is a little longer and which we would do   very soon okay all right uh so for this reason we  need to come to our home screen which is over here   okay and the first thing i'm going to do i'm going  to collapse this one now over here we need to make   changes okay so to be able to have two two of them  so we need to put or wrap them around as special   widgets i'll cut this first and that's called  single child scroll view single child scroll view   with this we'll be able to get a single child a  part of the screen become would be a single child   and that child would be scrollable but inside that  section you can have many children okay so once we   are registering with flutter you're saying hey  i need a part of the screen where i can scroll   or whether you scroll horizontally or vertically  it's up to you okay we can set that okay now first   we're gonna set scroll direction and in this case  we're going to scroll access dot horizontal okay   so we want to be scroll it horizontally and  now here we'll have child okay now here we   do row and inside row we'll have children  okay and we'll have this first one okay   all right beautiful uh but because we don't have  any other children so we can't really scroll them   so i'm gonna copy this one and put it one more  time and now we'll have two now it already becomes   scrollable okay now we do see that we have uh  space over here so we're going to use this over   here and here we're going to use padding actually  and const add-in sets only and we do so left 20 or if we do it left here okay let me change it  to right actually and let's see how it goes   you know we do see that we have a bit of  spacing but it's over here uh let us come to   sorry about that let us come to our  file over here so our biggest container which is this one so container we do here  right 16 okay great and over here we do   left the next change we have to do is actually  over here in this ticket view and this section   okay has been done okay but it's showing the com  pretty much complete screen from left to right   but we don't want that so we'd come over here and  we just want to use say 85 percent of the screen okay all right now it's scrollable beautiful   uh well we have we have came so far  and we have made this beautiful design and let's see next we're going to  focus on this sections but this   should be pretty much uh easy and  quick because for this entire app   the ticket was the hardest one actually uh let  me see the rest part is actually pretty easy yeah so next we'll focus on how to build this ui okay great so now we'll go ahead and  do this section and doing this section   should be actually pretty straightforward  uh for this reason we need to come to our   home screen but at the same time actually  we can close them we don't need this for now okay so this is our home screen and we have this  one and right after this we'll create another   uh child over here inside this list view so first to do const gap 115.15 and right after this actually i  think uh here we can just copy this section   okay well now this section i think was somewhere  here let's say good morning we had this images   search upcoming flights yeah so pretty much  like this so we're gonna copy this section first and then we'll come down over  here now we'll see how it goes and now let's put it yes we do see it over here   and we of course definitely  need to make some changes   uh let's see the changes so over here we need  hotels and view all so we'll just change hotels uh everything else stays the same and now this uh  left issue spacing issue that we need to correct   so for this reason we're going to wrap it around   a container or even a padding widget  okay but i'll do it with a container okay and over here would have a bit of padding so would use the padding both for  left and right side so we can do const and inserts let's see we do  symmetric symmetric horizontal say 20 and it should already be getting better  right okay so now they all have aligned together   okay that part is done and what else  so now we need to work on this okay now   just like this section uh they would have  some of the similarities like scrolling views   like that and how we're going to work together  first i mean with this so we'll create a separate   dart class for this one and we'll  call it hotel view or hotel screen   yeah like that so what are we gonna  do we're gonna come over here and   inside this we are going to create a  new file and we'll call it hotel screen okay all right and we'll create  a stateless class for now we do st stateless and we'll call it hotel screen let's import the dependencies okay you  should be good to go all right so would keep   this container over here for now okay and first we  want to get the size because uh the screen uh is   this width or the um the horizontal  distance is this but we want just part of it   like say 60 percent okay so how to deal with  this so for this one first we need to get the   size so we do final size remember we  have this uh class called app layout   so uh and over here we can get get size  okay and all we need to do past the context   okay and right inside this now we can give it a  width okay so we would give it a width say size   0.6 okay so 0.6 so you take the 60 of the size and  put it on the screen okay but of course our screen   is still empty nothing is there to do that we need  to put a char okay we also need height actually so   we do height 300 350 for now height is hardcoded  but we'll change that later a child and child   would be a column now why is this like this uh if  you take a look at the view now definitely this   would be a column right first we'll see the image  and then we'll see this text and then the certain   place and as well as the price okay so that has to  be column layout so that's why we have this so far and inside this will have a container now container say first give it a height now first  container would be responsible for showing the   image okay so we are going to give it a height say  180 hard-coded for now but soon we'll change them   decoration and we'll do box decoration   okay and right over here we're going to do uh or  give it a color okay so we do color so colors dot   styles let's see we do have  styles right styles dot   primary color go ahead with primary color and  before we go ahead and everything else let's just   display an image first okay so here we  do image decoration decoration image and then we do image and asset image okay  all right and inside this we need the path   now the path is images i think  that's assets actually assets   images and well we'll have one photo that's the  one.png okay for now we'll go ahead and this one   and this image should be this one okay so this  is the image that we want to show all right   okay great and it should be in the  downloaded folder the one you have downloaded   okay all right uh let's see what else i think  with this we're good so we can just go ahead and   call it from here now before that we before  we go ahead and call it from here let's   define the gap over here and okay right after  it we are going to call our uh hotel screen   so here we just simply do hotel hotel screen okay  right okay and let's see how it looks and it says   that size and type of double so we'll come over  here and let's see where it is causing the problem   okay so most probably it will be over here get  size hotel screen okay pin points over here so we need to do size dot width  actually so now it should work   and we'll just remove this okay all right  so i missed that part anyway okay yeah so   so far it looks like this not bad actually  but over here there so we set this one right   so without this it will look a bit different  yeah like this so we'll have this uh box fit   okay let's put a const modifier and let's give  it a border radius for this container itself   okay so yeah it's already looking great but so  far we do have only one the reason is why it's   taking the whole screen with which it is supposed  to take a little bit but we can change this one   very soon okay so let's come over here and uh  now wrap it down single child scroll view okay   so using uh well this one will wrap it on  single child scroll view so here we'll call   this one actually so go ahead and copy  this okay great and we need to set up   two other properties over here so let's go  ahead and set up this and see how it goes   okay now of course we might have arrow ah well  we can copy actually the whole row actually   and just replace this with this  hotel screen or hotel screen all right okay so now you see it's working okay  so without uh a definite well now here even though   we said this one but container might take so  far from my understanding it takes the whole   available space unless you have a different kind  of uh well child because right now we just had   one so it took all the space but if you put two or  three then you will see that it's working okay so   we can like say go ahead and copy them both  and i will say it's still like this okay so   if you have fewer childs uh or only one  the container will take the whole screen   right okay i'll look i'll keep it  there for now it doesn't really matter and for this container itself actually we need  to put some set up over here because they're   too close to each other and for this reason  we do padding over here and const add insects okay and instead of only we'll  do symmetric and say horizontal   15 vertical 17 okay all right so we do  see that there is a bit of uh white space   here but we want to cover that space  with different kind of color okay so to be able to do that actually let's  define a decoration over here okay   so here we do decoration box decoration  okay now inside this with different color uh wow i think we could do styles dot our primary color let's go ahead primary color and  see how it looks yeah it looks like this okay   yeah okay now there's a bit of problem uh first  this border right so we need to work on this one   and we can do it easily right over here so we'll  do border radius and border radius dot circular uh   and we just do some 424 okay so it's working  better now we need to create a space for each   of them okay okay now how to do that so  we can do a margin over here so padding   when you do padding it takes empty space inside a  container when you do margin it takes empty space   out of this container okay from outside  now here we want to do the outside spacing once again we do called uh const and sets  and over here i think we could go with only   and because we'll have different ones so right  say 17 and give it a little bit top and let's   folks yeah okay so it's already  really looking good so you can do   up and down like this of course now this  space is for putting our text okay right now we want this to a little bit like you  know uh have like a 3d feeling so for this   reason actually we can define a little  bit of shadow so here we do box shadow   okay and a box shadow takes a list of shadows  box shadow takes a list of shadows so in flutter   whenever you see like these two icons that means  lists okay all right and here we do box shadow   it has some properties first is the color  so now here we do colors dot gray dot shade 200 but i think we need to import the material go ahead and see how it looks yeah it does have a little bit of uh shadow  over here if you see but we can do much better   here we do blur radius go ahead and two and  okay now let's see how it looks not much   change spread radius is one okay now if  you want you can actually change the color   and see how it looks okay  so over here say instead of gray you could do red so for example so here  you see the color came out okay now instead of   this you could also do white and  yeah but because our spray radius and   uh blur radius are very small so it's not that  obvious so you do 20 okay and over here say you do   10 so now you see we do have like white edges over  here but that's not what we want okay so we'll go   back to what we had earlier like this okay but if  you want and let's let's take a look one more time okay so with this i'm kind of happy i'm not sure you  guys but okay we'll go ahead with this one so   that anyway you can play around with this and  have a different kind of value in the result now we'll go ahead and do another  text over here that should be like   this okay all right now over here what we're  going to do first we're going to have a const gap   say 15 or maybe 10 is better and then we do text  okay all right now first one would do hardcoded   so the first one is open space so here  we do okay temporary so here we do   open space okay and then we can apply styles  to it so we have the style start headline to   this in this case we'll do this  one and dot copy with colors and here we do color dot now i also want to get  this color from the styles okay so if you sorry option enter if it didn't work then  i would come over here app style   and i'm going to define a new color okay  and uh here i'll call it static color copy   color and here we do const  color you would do all x ff d2 bd d6 d basics again this is the color that i want   so i will save it and now of course  we'll have some error now here we do   styles dot copy color okay so that's what we want  so this is the color that i was talking about   okay all right so that's it the text itself and  now we'll have another text but in this case   we'll call it destination for now okay or like  where you want to go okay so the first one is   london okay and text style but this time we  just want color okay uh nothing else and maybe   we don't need so big and we want white color  this time so colors dot white let's see yeah   it looks great and we can copy this one and put  a little little stop over here okay all right now   we do one more gap and here we do eight okay  now we can copy this text and put it here   okay now here uh say 40 per  night okay all right and   so forty dollars per night  and this headline one okay and here we go ahead with copy so copy it and put it here okay great all right so this we are almost  done with our home page design but now there   will be a problem here now this is pretty much  hard coded okay so the next section will see   how to make this dynamic okay i'll make  this section pretty dynamic and as well as   this section okay because we want to  read them from a file okay or like from   a server item but in this case basically  we'll go ahead with like a list of arrays   a list a list list of information things  like that okay so that's what we'll do next okay so to be able to work with  them and read different information   for different pictures we need to create a new  file and uh would come over here inside this   utils we'll create a new dart file and here  we'll call it app info list dot dot okay   now over here we need to put a list or a list of  maps and you'll get this from the link below in   the video description go ahead and copy that and  put it here so once you do that once you copy it   you'll get this kind of information okay  let me explain to you what's happening   so in flutter flutter uses dart to compile  and build widgets okay so every widget you see   inside of them is just a dart code in dart code  this is called a map this is called a map this is   a map now maps are more like json if you're  coming from javascript or php background or   anything like that so this is also a kind  of json but they call it map now map has   two kind of properties one is called key another  is called value so this is key this is value here   this is a key this is value so each map has a key  value pair okay all right so now we have few maps   here and the maps are inside this list so you  call it a list of maps okay or simply a list   now this is a map right and this map actually  stands for this keyword or this keyword stands for   this so in dart or flatter if you write  map you have to mention the map keyword   now map has property i said like key value  pair so this is key this is value this is a   key and this is value now if you see all the  keys as strings but some of the values are   string some of the values are integer some of  the values could be even double okay uh so it   might have different information in our case  our values they they consist of uh string and   integer but the keys are same now inside the  map when you write map so it takes a type so   first type refers to the keys type in our case  all these keys are string so we write here string   the values are different or it could be anything  it could be dynamic so that's why we write here   dynamic but if you're sure all of your values  are string then you can write here string okay   all right so that's how we created this maps of  list so inside map you have to mention the type   so what type of map is it okay now for  list itself become so this list has a map   inside inside list actually you can have  anything but in our case we are putting   map inside this list okay all right now once  again i also said that list in dart has special   sign like this bracket and this bracket  okay so we instantiate ah or we create   a list and we name it hotel list okay so  you get the idea but anyway regarding this   list and map i have created complete video so  you can take a look at them from the link below   and if you have any questions you can leave  a comment anyway so with this uh now this   information would read dynamically  okay now of course over here you see   there is an image property here now this  image property has a value that is one.png   now actually this comes from here right you say  one.png2.png like that so it has one.png2.png3.png   actually it refers to the image names nothing but  then that okay anyway so hopefully it makes sense   now as we have this global variable name is  hotel list we can access it from anywhere okay   all right so first thing we want to come  to our home screen over here actually now   instead of doing like this we want to do it a  bit differently okay all right so how to do that   well first we need to make a  change over here so we want to   access this hotel list over here  and pass them to the hotel screen   now we need to read this variable information this  variable has three pieces of information or three   maps so we need to read them more like in a loop  okay and once we do that each of the information   will send to hotel screen and it will send  from here so if we read them in a loop and   then send each of the information each of the map  to this hotel screen okay now how to do that of   course this hotel screen need to be able to catch  or grab whatever the information i want to say   but not just now i said that i want to send each  of them at a time at one time okay so each time   i'll send one map so here actually i have three  maps right so each time i will send one map   so in this case hotel stream should be able to  receive it okay so it will receive it in the   constructor so over here i would do mac and i'll  the map itself will have string and dynamic type   for key and value and here we'll call it hotel  okay all right now over here it wants you to   make a change over here so yes you're  passing you need to grab it okay it's grab it in this constructor itself and let's see what  else so we need to okay we can make it actually   final over here okay now the arrow should be  gone okay so we'll pass one hotel information   or one information this one one hotel information  to this hotel screen from here okay so now of   course we have an arrow over here we need to  change that okay so we are passing that in the   construction which means we have to pass inside  this brackets over here so anything you pass   instead of brackets for a class that goes to the  constructor okay and as well as it gets connected   with the whole class so you can use it later this  value okay now each of the hotel variable will   have this information so you can access them using  this hotel word or keyword or the variable okay   now over here we'll first delete this actually we  can delete i think all of it okay delete this one now we'll access this hotel  list so here we do hotel   list okay this one now what the list has map okay  so you do math okay all right now each of the   variable each of the item will access  them in a hotel world or hotel keyword   or anything it could be anything actually over  here okay so it doesn't really matter so hotel   is a list it was a hotel is a hotel has met so we  are accessing the map and we name it as a hotel   now this hotel we need to pass to this screen okay  so how do i do that so here i'll have hotel screen   okay and then you just pass it like this okay  and of course you need to convert it to list okay now this word it could be anything  okay so here we can call it single hotel   okay now single hotel actually should be same  as this one okay okay so now there is god now   what is this now this has to same as this name  okay this is called named parameter or named   constructor parameter okay so this one has to  be same as this one now and this one has to be   the same as this one so what's happening  here we take this hotel list over here   and we take the maps inside it as i said earlier  it has map okay and we name it a temporary name   as a single hotel and we pass it to this  variable or named parameter okay all right   i think we donate this yeah okay  let's see what's happening though okay we're good this is the row whatever  we have expected to find okay yeah   so actually we should have one more over here  and the arrow should become that's for a row   so that's how it's working okay so here it's a  row you know that row takes children so this is   children so that's also more like row has a for  loop so the loop is happening over here anyway   so now we'll run our app and we'll make sure that  we don't have any arrow so this is the first thing   we want to do yes so we don't have any error  over here now are we passing the information   are we able to get it over here we can confirm  it actually we can we can print it over here   now this one here runs it three times so from this  hotel list because we have three maps so it is   ran three times okay now each time it will  point to one of this so first time it will   point to this second time it will point to  this and third time it will point to this okay   so we can try to print the information so here  let's just simply say print uh would say hotel   price is now we'll do this one because previously  we said that inside a string if you want to print   value you need to have this okay now here we'll  have hotel and then we just simply print the price   okay now we do have a price tag over here so first  we'll see prince 25 then 40 and six as you see 25   40 60. now it may run a few times now that depends  on uh its compile time and run time so but it has   nothing to do with that so we can skip that  that part form now we can skip this part so   it makes sense right as well as we can also print  a lot of information okay so now we know that   first time it refers to the first hotel and  second time it refers to the second hotel so up   to now this information they were including this  image they are all fixed so now we can change them   so as we see if you want to change you  have to change it like this okay you have   to take this part all right and we'll  put it here now because we have single   quotes here i think we need single quotes  here as well and the arrow should be fixed or let's oops now we have this arrow because here i have this  const but now this is not a constant it's dynamic   so we need to remove it okay and of course i  need this one as well okay all right great so   that part is working and if you run it now you  will see that it should run three times but okay   it did say that we don't have image but of course  i need to replace this with image name right   not price name yes so now we are  pretty dynamic as you see over here um now we do have a bit of problem with the last one   last one three dot png so do we have three dot png  yes we do have and what else was the error here okay unable to load so in that case i  would stop the app and rerun it okay   so now we see that it's here okay so a  lot of time if the images are not readable   after putting in the folders then you can stop  the app and you run it and then you should be   good to go okay great so this part is working  wonderful okay so now with this we're pretty much   done but of course we need to make this changes  over here so next one we do like this one so it should be let's see okay we don't need  this one we do hotel and a place because okay where is my map map is here right okay so we have place  destination and price so that's how we change them   so would come here now we do destination   just to copy this put it here and  it's replaced we do test destination and over here the idea is same all right now there is a bit of problem  because here we'll have this dollar sign okay   we don't have dollars on here but we need to put  a dollar sign here okay so for this reason we need   to cut this one and first put it inside this some  single code then this one and this one is showing   for dollar signs so if you have slash then you  can show the dollar sign okay and then we'll have   this one like this okay now this this part is for  showing the variable value itself okay all right   then we'll have say night like this so let's go  ahead and check yes open space for night global   wool per night tallest building per night okay  now it doesn't look like i don't want to place   i want price actually okay great oh yeah this  is beautiful at the next so it's already working   so this is what we expected to work with okay  great so with this we've done with our home page okay so now this uh well now time to take care  of this thing because this is also pretty much   fixed okay so we want to make it dynamic like this  we want to read them whatever information we have   right okay right to be able to do that uh you once  again have to copy one of the information from the   website go ahead and copy it information from the  website and paste it here now the information that   you should copy that's called ticket list okay  now this also has a map okay all right this is map   so but here we do have a little bit  complexity like it is a map inside map okay   all right so just a map inside map  and we'll see how to access a map   inside map but once again this is a list list  of map and inside map we have small maps okay   all right so that's the first thing we have  done and you can edit them as you want and   once you have backend if you read from backend  it would be also like in a format like this okay   now anyway would come to our uh home screen over  here so this is the place that we want to change   okay all right so before we change we need to  make a change in the ticket video itself so just   like hotel screen our hotel view here we could  we also need to do this one okay say map string   dynamic okay and here we call it ticket  okay and we need to make it final   as well as we need to grab it in the  constructor so here we do require this dot   ticket now we are good and with this  we need to make a change over here instead of doing one test uh we  need to read a ticket list take it   list just like we read for hotel screen okay  that was hotel list and then convert it to   map and here we'll call it uh  single ticket okay single ticket and here we need to call ticket view ticket  view and all we need to do pass a ticket here   so we'll pass our single ticket to it okay  and then eventually we need to convert it to   list okay because y row takes a list of children  ro doesn't take map so that's why you need to   convert it to list because this part is a map  from map you convert it to list okay all right   so okay this this section is good but if we go  ahead and run it we'll see no change because   we need to change those things here okay so  we'll uh close others we don't need them now and uh style so look at this one okay so the  first thing we want to go come over here and   change this one okay all right now for this one  so this is uh like say from this is a two okay   from two so this is more like this is  where you start and this is the destination so that's what we have from new  york and to london so we also have   code and also that name okay now cody's ncy code  is lvn so first we need to access the from and   then we'll access code and then we'll access name  so now to be able to do that we'll come over here   so at the top we have this ticket instance and  from this we'll first select from and then we'll   select code okay so you see how we are doing  that from then we access code okay all right   now if we going to go and run it now it should  work okay now as you see well it didn't look like   it looked like it didn't change but it did if  you come to the second one like dh okay but   of course we also need to change this information  as well here so the first one is uh like new york   all right the second one is dh so this  is the second ticket right okay great so would come over here and continue so right now  after this what else we want to change we want to   change this one okay all right so for this one to  be able to change we can just simply copy this one and we're going to put it here  but this time it will be 2 okay which means destination and here we'll  see it changes shanghai all right okay now   this section we also need to change now once  again we copied her you will just replace   and here is the name okay and here this is awesome all right so first it doesn't have  any change but the second one we have   so yeah but this time it is a two okay so it says changed all right okay so with  this we'll be also able to change this one so   here we'll have this one but we don't need this so  this refers to this time which is the flying time   so here we flying time so once again fine  time is coming from here okay we have date   departure time in numbers okay all right  great and uh let's go down we'll make the   changes for related other fields so this one  so this is the date right so replace this with   date but this is we're not going to change  this because this is the title okay subtitle   okay now this one once again we need to change time what else we can change we need to change this  one here so here is this is the ticket number but this is over here as an integer but here it has to be a string  so convert it to string okay   now let's change it yes one second  first one doesn't have any changes   the second one does okay all right so this  information changed this one changed yeah um   which didn't change because we used the same  information you can use the 10th may okay all   right now let's load it and we'll see that it  became 10th may so with this we're done with the   front page okay um well now we're gonna do we  are going to go ahead and take care of this fixed   property we want to make them a little bit dynamic  not hard coded using smaller cranes they should be   a little smaller bigger screens they should be a  little bigger okay so that's what we want to do all right to be able to do that we need to  come to our file over here pop spec file and   over here we'll install a  package which is called get x so over here we do get and we'll use the latest  version of it okay the get package has packages   for routing as well as for transition as well  as for screen height and width and dynamic size   and middleware a lot of things okay now with  this you'll get over here it's been installed   and the first thing we want to come come to this  layout file okay now previously we have sent this   on the context okay but if you're going to  use get x we don't need to send context okay   uh we can just get it from the package directly  so import get so over here first we want to get   the screen height so we do static get screen  screen height screen height okay all right   now with this it will just return us a  screen height here we do get dot again   again.height okay yeah and we also want to  get screen width so here we do screen with so here we'll have it so you see you don't need to  pass context for working with size for get x okay   all right so we have this one but you see a lot of  time we have this gaps okay so as i said earlier   including your ticket view if you take a look at  the top you'll see that we have hard-coded value   or ticket height okay so we want to change all of  those things so we'll do that using galax okay so   we would create a function where we can get that  height dynamically automatically okay right so   here uh so first i would do here a new function  is to get get height it'll get me any kind of   height but we need to pass what kind of height  we want so we'll pass it as integer and we'll   name it pixels okay and here we will do uh no i  think we should do it using this double actually so here we do double x and now first we'll get  screen height so this is the function we get   and then we divide it by  pixels okay then we'll return the return okay return okay so it will get me say if i want to  pass 200 say i want to get around 200   but that 200 should be a little more  for bigger screen and little less for   smaller screen so we have to pass that  number so we want to pass 200 so it will get   first screen proportion okay so this gets me the  skin screen proportions okay all right and then   if we get the proportion we can divide the screen  height by the proportions so we'll get a number   for that certain screen for that certain  device okay so this is a simple calculation   so for example if your screen height is 844  and you want to get something around 200 so   it will return maybe over here but with a  smaller screen so if you have say 7-fold   for smaller screen device then this would  be a little smaller so a little smaller   uh so 200 by say 744 so we get a smaller result  okay now screen screen height by smaller result   also means smaller screen okay but the  approach is with this you don't really get   hard-coded 200 like as we saw over here it  would vary a little bit based on the screen   size with this we can get rid of overflow issue  things like that okay all right so now uh what   i'm going to do i'm going to do here app layout  dot get height and here we'll just pass 200 okay   yeah that's how it works this is as simple as that  one okay yeah and for width we can do the same so here we do with and i'll copy this one i'll put it  here and here okay all right so   so it would be done all right now what i'm going  to do i'm going to change this one over here as   well so now this is a margin on the right so i'll  use height okay so i'll copy this one and i will   put it here and inside of 200 so i'll use 16 okay  all right now let's see what's happening okay so   we can't use the const anymore okay all right so  if you use this kind of equation because it deals   with equations okay now we should be changing  everywhere okay so wherever these numbers are   so we're going to change them okay and once again  we can't do const over here so here's the same   and remove the cons so you get the idea uh let  me change a few more then i'll skip that one   like even this one we can change so this is 24 so  we'll just pass here 24 okay now for height we'll   use the height section for width we'll use the get  width section okay this is the only difference um   everything else should just stay the same like  this one so this is width right so we instead of   get height here we'll use weight so for horizontal  direction we'll use a width for vertical direction   we will use uh height okay so i'll copy this  one and put it here um where else even even here   we can change this one but this time this is at  layout and don't get high okay so we passed 20.   and okay we need to remove const so here's  the same app layout get with so do 10. so even even this all of this could be changed  okay which you should okay so what i'm going   to do i'm going to pause the video and change  all of them and you should do the same as well   before that we run it and make sure that  everything went fine you see there is no   visual change at all because it already calculated  everything for us okay all right um i think i want   to do one more thing with you guys so that is  change the hotel screen within height all right   especially this section right there so here we do  app layout dot get height so here i would pass 350   okay all right it doesn't have any change you see  wrong now if you want you can though change past a   smaller one okay and you see it becomes smaller so  you can directly control from here okay all right   so go ahead with this all right very great  and other changes i think we should uh   i would pause the video and do by myself  and you should do on your own as well my contributions so far please buy me a  coffee and show your love thank you all right   right after this we'll go ahead and build a new  screen and we'll call it uh search screen okay so   here we'll create a new screen and we'll call  it search script so anyway our search screen   would look like this so once again this will  be scrollable but this is just up and down not   left and right okay so which also means that  we can just simply put it inside a list view   and that's what we're going to do so  here anyway uh we'll collapse this and   you could be we don't need home screen  we don't need we don't need this one   uh home screen we also donate  i guess yeah we don't need that   okay so here first anyway we'll create  a status class and we'll call it search screen okay and here we don't  want to use container we want to use   a scaffold because we would have a  background color for the whole page   okay and over here we'll also use  const so far let's see how it goes and   first thing i want to get a background  color so we do background color and styles dot we need to import it bg color okay all right and okay if we do that we  can't use const because bg color is not a const   here we'll have body and inside  body we'll have list view   and then we'll have children okay all right now  if we take a look so the first definitely we need   this big long text okay all right and right before  that actually we can we need to have a distance   so we did const gap 40. okay  and now we need to import it all right but here because we have used screen  height so here we could do like this lay   app layouts okay that get height and then 40. okay  you're good to go of course in this case we can't   use const anymore because it's not a constant all  right and then we'll have our text widget so we're   going to do we're going to wrap this one what are  you looking for so here first we'll have this one   uh what are now right after r we want to  make a new line so we'll have this new line   sign okay all right you are you  looking for okay yeah that's it   and then we need to do a bit of  styling with this so we do style   styles dot headline one we'll go ahead with  this one okay and then we also want to set   um a font size for this one so this font size is a  little big so we want to override the old one like   here it does have a font size which is 26 but we  want to override that that's why we do copy with   now here we do font size say 35 okay like that  now let's save it but of course after saving   we're not going to see any difference  because we need to come to our   uh bottom bar over here now instead  of search we're going to call call it i mean instead of using the text we can  use just search screen okay all right   and we can put cons right before that okay now if you see over here   so if you're going to restart it okay now this is  what we see beautiful so it's already showed up and okay anyway so this is the list view now  this list we actually want to give it a padding   and left padding and right padding okay  now for this reason here we do padding   and here we do edge instance.only and we do  left or horizontal actually horizontal is better   so in that case we need to use symmetric  horizontal horizontal over here we would do   now that is vertically which means with  anyway so here in the app layout dot get   width so you want to get around like 20 pixels  okay all right and for vertical we'll also use   cap layout dot get height so that's  also 20 okay all right so you see it's   already looked a little better left and  right okay so we have this space right now what if we want to get a dynamic size for this  hand uh for this font size so um just take a look   which one works over here so instead of 20  we're gonna use 35 and the let's see does   it have an impact no all right whether  it becomes smaller or not we don't know   and i mean it didn't actually and if you do get  wet let's see how it looks so let's start it again so it doesn't matter which one because  the proportion is always correct   all right it gets you the correct proportion all right so yeah so that works as well okay  they're right so that's the first part and   second part is drawing this okay now before  we're going to do that we need to do a gap   okay so here you do a gap and this time we just  do 20 okay and right after this we want to draw   like this okay now if you're going to draw  like this you see that it is bordered right so   we need to do it inside a container so here we do  container okay now container definitely will have   border radius so we want to use decoration and box  decoration okay now here we'll do border radius   sorry border radius radius dot circular okay  now here we want to use a bit of long border so let's do it with 50 okay get height okay so the  border will be really big okay but once again   because nothing is there yet so we don't see but  soon we'll see that uh so give it a color actually   so here uh right after this so we  could use a color so here const f for f save it okay no change yet  because we don't have any content   but once we put the content we'll have  change for example here you can do child   now right hi okay now as you see we do have  color and border radius so that's how it works all right but anyway so if we take the logs  we have these two items right so we need to   put them in a row so you need to put them in a row  okay so what i'm going to do i'm going to cut this and here we do roll all right so we'll have children now inside this will have again container  because you do see that they have different   color as well so you need a different container  to do that so here we have a container and now at the top actually we can do one thing we  do final size app layout dot to get get size okay now if we uh if you have this container   then we can do with here and then in  that case we need to size that with and then we'll take 44 percent  of it okay yeah and that's it   and then after that we need once again decoration  for this because we'll have a color inside it and this color is colors.white let's remove that and everything else stays the same and here  all i need to do put a child inside it so   here we go to child and here we have  text and then here we say air line tickets so let's save it and see yeah it's already  came out so which is looking much better now   here we could apply a bit of padding so go ahead  and do padding and here we go edit set symmetric   and we'll do vertical okay vertical  now here we do f layout dot get   height and say seven pixels  okay yes so it is looking good and now the text itself you can actually  center in it so here we do command option command enter well if it's not working  then i'll just cut it and then do it   inside this center widget so it becomes child  so here it looks like this okay yeah so it's   much better now all right so we need to do more  first we need to take care of this border like   here you know this is has to be a straight line  not a curved line so how to do that okay now   to be able to do that we need to come inside  this container over here and we see that over   here we have applied circular okay now we can't  apply circular over here i think we should apply   something called horizontal okay or let's explore  the options so yes we do have horizontal okay   all right now if we are going to apply horizontal  then we need to take this one and over here   we need to say on the right okay so we would  say right okay now here we need to do radius   radius dot circular like this one and  inside this we put what we had early okay now it works okay so part of this container  uh what do we what is happening here on the   left side it is keeping circular and on  the right side it's keeping horizontal   i mean you have to do the opposite actually so  this is a horizontal and what's happening here   once again on the left it is keeping circular  okay all right but on the right it's keeping   nothing actually so which is like more like zero  border okay hopefully it makes sense all right   okay that part of the puzzle has been done and  another problem you would see that here we do have   a little bit different kind of border which is the  background okay so we need to do that one for this   reason here we can apply uh okay so let's see okay  now inside this container actually not this one   this is good now here we need to apply padding  okay so let's go ahead and do it and here we do   uh cons and inserts and we do all actually and  say 3.5 all right uh okay now let's take a look   yeah so you see that here at the edges now we  have a different color perfect okay great okay   so that's part of the puzzle has been solved okay  now if you're going to take a look we need hotels   like this so for this reason what i'm going  to do you're going to copy this section copy   this container okay let's make a note over here  because otherwise it would be too much you'd say airline tickets airline tickets okay   all right and now we're going to copy  this one and we'll put it over here as okay hotels and here we just  will put this one but of course   there are a few problems here okay so first thing  we need to change it to hotel okay our hotels   okay but we still have this uh overflow issues  now to be able to solve this one we want to   squeeze everything inside the row now it is taking  some unnecessary space that we want to take as   small as possible so for this reason actually  we can wrap this inside another widget which   is called fitting box so i'll cut this one here  i'll do fitted box um perfect and now here inside   this i'll have a child and put it like this and  now if we're going to say yeah that's gone okay   now definitely we need to take care of this border  because it's applying the same border as over here   so it's horizontal but this time we want to make  it on the right okay on the right we want to have   circular okay all right let's do it yes great now  this color we don't want the same color over here   because uh all this is strange so you could  do gray shade say 200 and now let's see okay   so yeah that's how it should work and uh if  it's 500 uh no well instead of applying any   kind of color we can just use whatever in  the background so it could do transparent   so yeah now it's more look like to the bedroom  perfect so we already have a very good looking   ui over here right okay beautiful oh next step  should be doing this one okay this box is over   here inside this will have a icon and a text like  that okay now to be able to do this design over   here first we'll collapse this because we do have  too many things over here we don't need uh to keep   them like this okay fitted box okay all right  right after this first we'll create a container   and if you take a look that we have border right  so whenever you see border pretty much you should   apply using a container okay because it does have  box decoration okay anyway so first we'll have   child and inside this we'll have a row okay now  we'll have this uh list of children so what are   the children inside so this icon and the text okay  so what are you going to do here we are going to first create an icon so do icon   okay cons icon and here we do icons dot  flight take off round let's see slide gh take let's see take off rounded  this one so this is the flying okay   all right and here we do color so now  for this color we do color okay ox ffbfc2 c2d5 okay so this is the color we want and  what else we also need text so here we do   text and for now we'll call it departure and  here we'll have style and styles dot text   style okay so this is the one that we are going  to use okay now let's go ahead and save it okay   yes now definitely this is the gap issue  that we need to take care so here we do   const gap now here this would be a height so  here we do app layout dot get height and here   we want to pass say 25 okay so we can't use const  because that is a function okay all right perfect   now these two are very close to each other so we  also need to change that and here we do say uh   we'll get this one and we'll do  this okay all right but instead of   20 25 would do 10 but we have to do  with because this is horizontal okay   all right okay better and what else so we  also need this background color right so for   this reason we need to use decoration over here  okay so do box decoration and border radius and   border radius dot circular now we want to apply  10 so just to go ahead and simply do app layout   dot get just again with and  over here we pass 10 to it okay   all right but of course we don't have any  color yet so we don't see the border radius   now for this container we can apply color  like white color okay colors dot white because we want to be same as this color okay  now it's looking better and if you use borders   say five okay so then 50 oh sorry that's 15 and  this is five okay so we do have different kind   of borders over here but now we are applying 10.  it doesn't look great yet but soon it would look   great okay now here we are going to do padding  okay and we're not going to do const here because   we are applying dynamic layout so  symmetric okay now here vertical   for this one i'm going to copy this  and put it here and i'm going to use 12   padding for vertical so up and down okay and at  the same time horizontal i'll put it here and   the horizontal is also 12 so it should be left  and right so it's already looking better okay   now with this actually we can make a reusable  widget so we're going to cut this one okay   and we're going to come over here  and inside our widgets here we do   file and we'll call it we'll  just simply call it icon text   widget okay dart and here would create st  stateless class and we would say app icon x okay   now we'll replace this container the one we cut  just now and you simply have to import the library   okay all right and we also have to do colors  and app layout we need to import all of them   and let's see over here i know it's not  recognizing how it did a little bit slow   perfect but now since we wanted this section  and this one to be dynamic so we need to grab   them in the constructor so here we do final  and icon data icon okay that's one as well as   final text okay so that would be string  type okay now here we need to re grab them   as required because we must need them  to require this dot icon and required   this dot text okay great so that's what we have so  all you need to do pass the icon and text and if   we do that we can just replace them here so you  could do text so whatever will be sent would be   given over here and as well as the icon okay so  here we just simply pass our icon and it looks   like we do have an issue so we can't have const  here okay so whenever you have dynamic parameters   of variables you can't have const okay all right  but here we can have const okay great so now we   are over here so we'll just simply call app text  icon so first icon we want to send is icons dot flight take off okay this one and this one is a  departure d par picture okay and we'll see that   still works okay yeah also we need constable  for it great and we're gonna just copy this one   and put it right below it um this time  we'll say arrival and if you do see yes but you need to change flight landing around it so let's change  it so this is the opposite and right   over here we need to apply a bit  of margin so here sorry height and   so we do 15 okay which looks much better great so  next we are going to do this one so find tickets   all right now this is something that not  reusable so we can just simply go ahead and copy this one from here and pretty much would be we can make it reusable okay i mean copy this  and put it over here and i will select this   and i'll reorganize the code okay great uh  but in this case we don't need this we just uh   stuck with this one and here we can call it  uh let's see what we have find the tickets   okay so here we'll just call it uh  find tickets okay great what else uh okay great and now we do need a background color  so here i'm going to apply a different background   color so this one color i'll get this all  right okay right and the ticket itself uh   here we can do copy with color colors dot white and  we can also do font size for 26. it's pretty big and we did have and what  you could actually do you can take this and we   don't need this actually so we just have only one  item and now you're going to wrap it around center   widget to put it in the center yes great and at  the same time this time instead of having this uh width like this i would go ahead with 18 okay  but we don't have much change and uh left and   right 18 as well okay all right so for that one  we don't have much change so we are good all right   great and now the spacing let's see uh we're  going to copy this one and put it right after it great but actually i think this one should  be a little bigger okay great and over here   um let's do 20. okay yeah great  so yes it's pretty much like that   but i think yes we should have to go back to like  uh at least for vertical that is 18. okay great   yeah and so the next part is doing this section  but okay first we'll do upcoming flights   now we remember we have done this before so  we're gonna go ahead and copy that section   okay all right uh so that was in home screen over  here all right so yeah this is the part which is   upcoming flights and view all now we  also want to be able to reuse them okay   so let's go ahead and create a widget okay so  here we do have widget so just call it view all okay now here we do st stateless okay now  would call it f double text object okay uh   from here we are going to copy this section  and we are going to come over here and put it   okay all right now definitely we need to import  some libraries i can create an impala as well and the styles okay great all right now once again  just like the earlier one we need   some parameters like this one right so we  need to grab them so here we're going to do a final it's a big tag a string string big text final string small text  okay and we are going to do this required this dot big text required this this small text   right and so we're going to just change them over  here and fake text small text okay small text   great and what else so over here we're gonna just  uh hold this okay big test big text and small text add a double text widget okay now here  big text is upcoming flights a small text is view all people okay let's see uh the view is capital  letter like f is capital letter okay great now if we were to  come over here yes we see that   it didn't change whatever it was there it  was there right okay great now of course   soon we'll be using for this one and then we'll  come and check it okay so this way your code   becomes more organized actually and easy to  maintain now i'm going to copy this section   and for hotels we're going to also change  so yeah everything else should stay the same   okay now here for hotel itself uh we are  going to remove this first and put it okay   put it right here and we will see that not much  change only i need to change this one hotels   great with this we have a reusable section right  wonderful so we can remove this open screen we   can also remove this one for now this one for  now now on the search screen right over here so right below it we'll put it this one and   yeah great so all you need to do put a bit  of spacing over here okay so i'm going to   copy this one and put it right below it  and instead of 25 would do 40. okay great   so next we are left with this two sections  over here okay so now we'll go ahead and do   this section and if we take a closer look  definitely the first thing we see that   this part has to be a row inside the row we'll  have first child okay and then we'll have a column   okay now our first child would be a container  why because we see that we have border right   we have different borders uh rounded borders  so it has to be a container now inside the   container we'll have columns so column will  have first child this one and text okay so   that's how we are going to do that once again so  the basic idea is the big layout should be a row   and then first child second child and our first  child will have container container inside will   have column column will have image and text the  second one will be a column as well and then   we'll insert column will have more complex layout  for this one because we have this as you can see   okay all right so first go ahead and do the first  section so for this one first i'll come over here   and then i'll do a row and then children as well  now we'll have a container as i said earlier   container okay all right now inside  this container we're going to have   first well we need a border and color  right so and as well as an image so okay   i think we can start doing that image first okay  all right so for this reason i'll do a children   a child over here and then we'll see column that  will do children okay now the first one is uh image inside it so that image has a order  okay so here we do once again a container   okay and because we'll have box  decoration and image like that   okay now here we'll have height and we'll use  app layout dot get height and pass 190 for this   okay great and then we'll do  decoration and box decoration uh and here image decoration image and  image as an image okay so here we do assets images dot jpg okay so that's what we  should have and if we take a look and uh also   it's not taking effect okay so we might have  to wait a bit of time and at the same time make   sure that we do have the image yes we do have this  set image okay so that's what we're going to show okay the reason is this one uh we also need to  set height for this actually we which we didn't so   we'll copy this one put it right here and we  want a little bigger height for this because   it will have text as well and we also  need width for this so this container   is the parent container so it needs a lot  of other things so here we do sized with we need to use border radius so that's  what we're going to do for the radius   border radius dot circular and aptly out  dot get height and we'll pass 12 for it   and we see we already have a border  okay now what about the background color   like this white background right  so we need to do that as well   now for that section we need to come over here and  apply a decoration to it okay so we take this one   and we do box decoration and then color colors dot  uh let's dot white i think we could do white okay   great but uh this is this looks ugly we also need  to apply order to it so we'd use the same border   as the child or the child will have the same  border as the parent so that it looks better yes and we could do a padding over here  so we do padding and addresses only   and this is i think symmetric horizontal app  layout dot get height so we do 15 and app layout and other should be vertical okay yeah it's already looking the same as the  parent and which is really great now let's change   this border radius i think we can have a little  bigger radius not 12 so we do 20 yes now it looks   more similar and let's try to apply a box  shadow to it to do box shadow box shadow okay and color colors dot to gray 200. with this we might have a little bit of 3d  filling and blur radius one and spread radius one okay now it did take effect if you don't know  for sure you can always apply red one and   check okay it does have but most of all  because it's in simulator a little far from you   so the visual effect is not very obvious so  that's what i'm trying to say and over here we   need to keep a bit of distance so we do this gap  over here and put it here and we'll use it as 15.   not too big okay great now we need to apply the  text to it and the text should be inside this   container also we need a const modifier okay great  so right after it will have our text so we do text   here would say 20 percent this count on the early  booking of this flight you don't miss out this   chance okay or you could you could write it  pretty much anything and we are good with   that and here we do style and styles dot we  do have line two and then copy with the color   if you first do headline two and let's take  the result okay now it does uh seem to have uh   create an overflow now in that case either you  limit the text okay or we have to do dot lines so   but this is not clickable so this  section would not be clickable   so just let's remove part of it don't miss out and you see okay great because since it's  not clickable so yeah you have to keep it   like this and as well as you're going to have  a const uh gap over here we do app layout   then get height and let's use 12 pixels  okay great now this is looking great better   so with this we're done with the first  part and now we'll go ahead and do this one all right great so now we'll go ahead with the  next section and for this reason uh we're going   to collapse this one and right after it will  have a calm down okay so let's do it children all right now let's take a look so definitely  we need a container for this as you can see as   always we know it and inside container will  have a column layout for this and this okay   that's what we're going to do so first we'll have  container and we'll give it a width and size so   with a height actually so we decide that with  uh let's do 0.44 percent okay and height is up all right and we'll have uh okay  let's go ahead and do a decoration   box decoration okay now here we  do color so we do color ox ff3 a b 8 b 8 i think i need capital b okay great and right after  that we'll have photo radius or radius dot circular app layout dot get height and  we're gonna use 18 for that okay   so here we go and it showed up already  great and i think this is a little too   small we want a little bit bigger  okay great now we do want to have uh it's a padding for this so let's  go ahead and do a bit of padding   or maybe we can do the padding actually later   uh we could do the padding later actually once we  put the text so now we want to put the text inside   this so now we need to put a child first right so  the child would be right over here and definitely   this would be column format okay all right now  the first one is text so here we say this count for survey okay now here we do style styles dot  headline two dot copy with we need a different   color and we do font weight first let's see font  weight this time okay we'll do it bold font weight   dot bold and what else okay color  right if you don't apply color you   will see that it's like that so we need  color right so color colors dot white   all right right yeah it's already looking  great and what else now we could apply   padding to it let's go ahead and do that padding  now we do an inches symmetric that's on the track vertical we do app layout  dot get height here we do 15 horizontal upload dot get height horizontal 15 okay all right okay now it came down a little bit and we wanted to start from this line over  here and for this reason we want to set it   over here like cross access alignment  okay cross on dot start okay perfect   now i think we also have a problem with  a problem over here so what we're going   to do here i'm going to set a main access  alignment main access on the space between okay so now there is this automatic space okay   so here 20 and here 20 and automatic space right  now we're going to put our next text over here and   for that one first we do gap then have layout dot  get height and then we'll do 10 inside this okay   now for the text itself maybe you can  just copy this and put it right here   okay now we need to change the text over  here we can't use this it did take the survey about our services and get  discount okay all right so   that's the first part and this time we want  a little bit different kind of font so do 500 font size i think we also need to change font size  we do font size 18 different kind of font size   and color okay let's go ahead and save  it and that's what we see over here right   now so we do have a bit of problem so in  this case maybe we need to increase this   a little bit okay if it didn't work like this  okay we'd go on okay let's go ahead with 200.   210 okay great all right or 200 that should  set perfectly okay right so that's what we   have and what else so let's see so now we're  going to do this one but first we do this in a   column so here we do decoration first and  then we do box decoration and right after this   it's a shape so we want to draw a circle as  you see this is going to be a circle so you   can apply the shape property which is the box  shape dot circle okay it's still not visible   because we don't have any color and any other  properties so do border yeah so go ahead and   do the border with this and we do order dot  all border border.all and here we do with   18 color okay so let's go ahead and see yes it's  there it's visible right okay now we do color color let's go and ox ff18999 okay it does have a bit of  different color as you can see now that's the border color but now we can apply  the color to itself okay so let's go ahead and see   uh colors that are right just go ahead and do  red first this is too small so we're going to   apply a padding to it okay so we do adding sets  dot all and here app layout get height 30. okay   now it's a little bigger okay all right now if we  do color to it we'll do colors dot red and let's   see how it looks okay perfect but in the middle  actually we want transparent so we do transparent   okay so it's more become like the background color  itself okay great now we want to put it here at   the top not here as you can see so we do have this  two widgets ready but how to put them together   so for this reason we have to use stack widget  okay now we do have this container over here   this container okay so this  container and this container   we need to put this together inside a stack widget  so i'll just go ahead and copy this now here we do stack so i cut them and then here we'll have  children okay like this now you see they're   overlapping okay great and after that  now i want it to be over here actually   now i'll cut this on now because i'm inside  stack widget so i can use a position widget   okay so now position widget takes the  child so i'm going to put the child okay   but of course it doesn't have any change  yet so i have to define the coordinates so let's do right coordinates say minus 45   so it came to right now we'll  put it up okay so here we do top minus 40. perfect so it looks much better  now this place is not empty   so now we'll go ahead and do this one and for this  one to do actually we are right inside this column   widget so yeah right after the stack widget we  can continue so here first we'll have a container   and once again y container because of the border  as you can see okay now here we do width and with size dot with 2.44 i would do  height apply out dot height   to 10 and then we'll have decoration box  decoration and border radius first okay and   as well this time we'll also do some metrics so  heading sets that's so much right now vertical   apple layouts don't get height into 15  horizontal apply out get height 15 okay well that should not be here actually not erin  said that should be border radius this one   and okay what i'm going to do actually let me  change it instead of border radius i'll do padding   now this padding actually i can cut it and move it  up because i have to apply padding somewhere later   okay we are done and here we do border  radius border radius border radius dot circular okay up layouts it can height okay  we pass 18 okay so yes here we do have some space   as you can see from here okay great and you see  the whole thing they move together at the top okay great and now we can also  set up color color and we do const color ff easy okay we do have a different color as you can see  and all we need to do put a bit of spacing over   here okay so here we do gap i think just  go ahead and get this one and put it here okay great all right and what else okay we need  to take care of the symmetrical issues over here   but which we'll do very soon okay don't worry  uh what else so yeah now we need to go inside   this thing now to be able to go inside this  thing we need to have a column again as you   can see text and this one so here we have  this and right after that we'll put child   okay now here we do column and children okay so first we do the text here  so text here it says take love style style start have line two okay  so that's what we have and then copy   with the color because the color is not good  so we're going to apply white color color colors dot white and here we also need to use font  weight so let's go ahead and do that   because i need to be inside copy with font weight font write the alt and yeah the color trick   and make sure the text is in the center  so we could do text align inside this or most probably it should be outside text  align and over here we do text text line center okay well with this it will take care we stay  in the center so that's the first part and then   we're going to copy this one little spacing and  we'll just apply 5 to it and right after that   we'll have a rich text rich text now rich  text is used for applying similar style to   different part of the text or like okay we'll  go ahead and see actually what it is okay anyway   so what do we see here oh yeah it wants you  to use the text argument in which we have now   over here we'll have const and we do text spam  okay correct now text spend takes children now inside it it takes text spam as children okay all right so we do text now we need to have  this icon so here i have these three icons with   different styles okay now let's go ahead and  put it now we see like this perfect so yes it's   working as we expected now this would  actually you can get it from a keyboard and we need to take care of this  height issues now they do have a   different height right now the reason is  okay so here we do have 15 okay now here   let's take a look at this height so  here 400 and 190 so that adds up to sorry so over here the container it has a 200   height and this container over here  has doesn't have any height though let's say 210 okay so in this side  we have 200 210 and over here we have   200 so that makes 410 and as always we  have a bit of this gap which is 425. now here for this one so we just have 400 so let's move it to 425  and see what it looks like yes so it's great   now saying that one actually you can put more  stuff inside it okay yeah so yeah that's how it   works so with this we are pretty much done with  this two pages hey if you loved my contributions   so far please buy me a coffee and you can  use the paypal link below a dollar payment perfect so it's already looking great next  we'll see how to work on this this button great so we are done with this  page and now we'll go over here   and if you come over here you see that this this  section and the same as this one right so it also   means that we can reuse them so we'll go ahead and  create a reusable uh widget and we'll call it uh   tabs okay all right uh ticket test dot dart okay  so here we would create a status class and we'll   call it app ticket tabs okay all right now we'll  import the necessary packages libraries okay great   now in this time we'll come over here over here  and we'll see which section was responsible for   showing this tab i guess this fitted box right  yeah so we'll first go ahead and copy it and the   ticket tabs instead of returning this container  we're going to return the tab itself okay   and we might import we might need to import  some of the dependencies let's see okay so   here libraries colors what else okay only the  size one okay all right so uh what else move child   property to end of arguments okay do that yeah  the red lines the yellow lines are gone and the   only thing we need to grab over here is the size  okay so your final size app layout the get size okay great now with this it became reusable so  first i'm going to come over here and remove this   and i'm going to call ticket tags and  we'll make sure that it stays the same   okay so if you come over here but of course  because we want to reuse so we need to   pass different arguments to it and we'll grab  them over here as a parameter so here we first   do final video first tab first tab and it will  be string type okay all right and we do string   second tab okay great so over here we're going  to do required this dot first tab required   this dot second tab all right great  now here we're just going to replace   this one with the first tag okay and here  we're going to replace this with second tab okay right now we need to come to search  screen and here you can say first tab   here is their line tickets second tab is hotels   okay great now it might need cons to support a  cost yeah online tickets and hotels okay so yeah   peaks okay great all right so that  means we can just directly go ahead   and use it over here so let's take a look  at this layout yeah pretty much like that   okay so now we're going to create a new  screen and we'll call it ticket screen okay over here we'll create status class and we'll  call it screen here we're going to import the   libraries and then definitely we do one  thing which is called uh final size and layout dot get size okay all right now  instead of returning this we're going   to return a scaffold over here  okay oops scaffold okay great   now if you're gonna take a look at this  one the whole thing well this section is   okay and if you take a look these two sides  they are fixed and they also overlap on the   uh lower level or lower uh ui so this has to be  uh stagnated okay so this is the idea so right   right now inside this first we'll have list view  okay all right for body we'll have list view   okay now it will have children okay now  inside this actually we'll have stack view uh okay let me wrap this list view  actually using stack view itself   so here we do stack and here we'll have  children children and rest over here right after there's another list okay great now it's the best looking  so open the layout yes fine okay so   everything will be in a stack widget over here   so now the one at the lower level that will be  inside the list widget okay uh or list view uh   widget the lower level and this would be for this  to be for uh out of the list view but inside the   stack one because they have to be fixed and  overlapping hopefully it makes sense all right so first we do the one we had  earlier would do that one or   whatever let's say all the tickets  this one we have to have this one first   so here we do text and pass tickets  and then we do style for this styles and i think we came for the library  okay great so here we go head style   head start one actually which is  very good all right now let's save it i know we don't see any changes yet because the  reason is i think we need to change it not in the   main i think our bottles are okay so here instead  of tickets you want to call ticket ticket screen okay i think we need to restart our app   to be able to work with this well we do have  another one here so i'm going to close this   terminate and this is restoring so i'm  going to wait a little bit until it's done oh it did say okay i'm all right so  that should be this is mini this is me ticket screen okay so where is our ticket okay  over here let me close the other one as well   okay let's start it all right okay so here we go  this is our ticket definitely we want to apply   padding to it okay all right so we do padding  now we do engine sets dot symmetric horizontal so app layout dot get height plus 20 but here  we could do vertical app layout dot get height   and 20 okay so it does have  a bit of change right but   we want to put a text over here  so here we do gap up layout dot dot get height and will pass forward  and we need to import the library   and go ahead and do that okay now it looks  much better great right after that we do and ticket tabs okay so the first one here we want  to send is upcoming and the second one is previous coming on the second one it's previous okay great so that's how you make  reusable components now here we do gap and here we do 20 okay beautiful so it saved us  a lot of time so next one over here actually you   want to directly call the ticket view the one we  have created early okay so that one now how to   do that so here we just simply go ahead and call  ticket view well not here we want to pass a ticket   view and which should actually look like white but  first we'll pass this one okay whatever is there   we'll pass that one okay just go ahead and  do it first but of course we need to make   some changes actually a lot of changes too but  this way it would be reusable okay now here we   do legend sets um only okay now say for uh left  side and have layouts and then we get height 15.   okay now here we're going to pass a child and here  would call ticket view okay now ticket view takes   ticket if you remember and then it has a ticket  list right take a list this one and we grab the   first one and send it there okay all right  yes it looks like this so it's already there and then we need to put a  little distance as you see   from the top okay so i think that's around 20  pixels so i'll get that one and put it right here okay great now the problem is if you see well all  of it is white okay but this is quite colorful so   we need to set up parameters to work with this  one so we need to set up color so at least two   colors that you want one is white actually  three colors so these are all white and like   black one and the gray one so three colors for  text that we need to pass and for background for   now we have this two colors right but we want to  make it dynamic so for background we have to pass   two colors and another color is  white so actually that should be   three colors or even we can just pass two the  default one is white okay that would work as well   and uh yeah so it's pretty much about changing the  color okay now first thing we could do uh well now   we so these things could be done actually with  only one condition set so i checked the condition   and then based on that we change the color  okay so so now if you look at this two tickets   uh actually there are variety of colors that we  need to change like for text maybe three colors   for background also three uh like that so  how to deal with this well we can set up   one condition and based on that condition we'll  check what we're doing and what color to change   so now we'll go to this uh ticket view class over  here and now we'll set up a new one and we'll call   it final goal is color okay so would you tell me  whether i'm going to color change the color or not   okay if it's true change the color if it's not  true don't change the color okay now here we do   this that is color so it's not always necessary so  that's why we don't say that so if it's not past   the value will be null okay so we'll be checking  whether it's null or not all right so the first   one that we want to change over here is decoration  well let's take a look so we do have a bit of padding over here that's fine okay and if we come inside this okay now over  here so now we do have a bit of color over here   now if you cut this color and if you  do colors.red let's see what do we see   okay all right so this is the color that we want  to change so it has to either white or orange okay   all right so so we could set up the condition like  this that if it is null then we would use whatever   the color was there otherwise we'd be using a  different color so for example here we could use   is color okay now is color say null then you use  this color otherwise you use colors colors.white   okay just idea now if you come over here in ticket  screen okay so we are not passing anything so this   value is at the top is null because it doesn't  have any value no so here if it's null then use   this color otherwise you use a white color okay  so it looks strange but now if you come over here   let's try to change its color okay so it's color  true you'll see immediately it changes over here   all right but it didn't change here because when  we are calling from our home screen we are not   passing anything which means there was null if  it's this null it is going to use whatever the   color was assigned okay hopefully it makes sense  okay now so we well now we do have the text over   there but they are not visible because the  text was white as well so you get the idea   so what are you going to do next so we need  to change over here actually the styles so we just had a white now we need to  introduce a different color for this so if it's null if a is color is null so  we are going to keep whatever was there   otherwise we are going to use a different  color okay so styles dot headline three   but this do remember headline three has a color  but we overload it here okay but in this case   we if we don't pass anything we keep whatever  color was there if we pass it through then we use   the color inside this so it's a conditional check  let's check it yes new york showed up as you see but i think we need to make more changes  but anyway so we'll go ahead first and uh okay let's go down okay i think we also need to change over here okay  so i think our changes are actually should be over   here so we need to go to this big container over  here uh and here the color change previously   if we don't pass anything that is white okay  anyway so here first we need to define the   final bowl is the color as well okay all right and  here we do this stuff is color okay so always if   it's not the value is not given will keep whatever  was there okay so here we'll check is the color   no then we'll keep white otherwise  we'll use a different color ox ff8 a cc   f7 okay so that's how it should work okay now so  we need to come over here inside the ticket screen   uh yeah ticket view so here we use let's say  his color control so okay so now that works   and for this one actually we can also do it here   so to remember the changes are only happening in  this page because i'm only changing the items here   in this file not in other places okay so we see  this too and we need to make changes for this   stack widget as well here we introduce a new color  okay let's see i think if it wants us to add const   well we did it somewhere maybe okay i did  it here actually now here is the color   change okay so here we would say in color  people know then use the white otherwise otherwise we are going to use a different color  and this time we use colors.gray dot shade   shade i think 300 okay and uh now here it  doesn't say that is it it's uh in it's uh   it's not defined over here embedded constant  value is it or we have to remove this one   okay yeah so for this reason because it can't  be const anymore okay right so we do see that   our dots they have appeared now this part is  empty now that's happening due to your uh white   icon so we also need to change this  all over here so you do this color no   then keep it white otherwise  a different color over here use color ox okay so our plane is here beautiful so we made changes here and we  also need to make changes over here so you will check in the color otherwise styles let's see sty yes  style start uh okay i think i'm doing   it draw in wrong place we have to have  it here actually otherwise style start headline three okay so it appeared yes i do know that the color  is a bit different but you can change the picture   all right now we'll go ahead and  change our color for this one over here   so we'll make sure whatever color was there it  stays so his color no okay and then over here okay so over here we're going to put a different  color so which is headline three or headline four   okay so new york showed up now we'll go over here inside this  box decoration and we do the same so here we do is color is color now then so we do want to have uh   this dashed color right so for this reason  actually so first here we'll put our colors.shade   color okay which is coming from gray and here  we do shade to say 300 and what do we see here   const now we might have to remove uh the const  value from somewhere okay over here actually okay so in this case the setup was i  guess opposite so here we do this one okay now it's looking much better and here so let's do it like this do it half  six so okay so next we need to work on this this color this orange color   so next we need to work on this one but  this should be same as the sized box here so   i'll just go ahead and copy this and i'm going  to put it here because we don't see any changes okay what's happening i think we  have to remove this const once again   the error should be gone and maybe  we need const over here okay great so get the idea so you do have some conditional  check you have to do that otherwise you do   different thing okay now here we do have a bit of  problem though the idea is as you see that okay   some gray colors are okay but some of them  we can't have all of them gray over here okay   like this is has to be black this has to be black  as well so black and this has to be black so we   need to find these places now definitely the  first place we're going to look for it and yc   okay it's not there maybe because we're reading  them from a file remember so it's as a variable   so here we do see that from code we have  white otherwise we do have a different kind of   headline now if we come over here headline  three so we have gray shade for headline   so that's what we do have so for headline three  what we can do we could do a bit of different   things so let's remove this color completely okay  and see how it looks now let's save it okay i   guess we need to restart because that's a static  file okay now it worked okay so as it was there   and now another thing is that the background color  which is white over here and which is not over   here now we need to come over here inside this  ticket view and we'll find the background color so we do have sized box over here and  this one and we do have a container okay so now this is the ticket view  and actually what we should do we   should change the background color to this  one because actually this is already white   but this color and this color pretty close  okay so we should change this background to   something similar to this one okay or like exactly  this one now this has to be happened through here   so here we'll send background color and styles  wbg color now let's save it and if you come   over here yes we do see that now it's more  obvious and much better so yes that's great and uh let's take a look  at our original design here   it's pretty much the same pretty much exactly  the same thing right all right so now we'll go   ahead and do this section this design okay  to be able to do that we need to come to   screen over here or right after this  we'll create a new container over here   and that would be just a container and inside the  container we'll have column okay all right now   go ahead and declare a child inside  this and we would call it a column and then it will have children let's see what's  going on uh we if we do have a column then   we can have children child and inside  okay so here is the spelling error   okay great now would go ahead with children now if you see that this layout actually it's a  big role okay and inside the row you will have   column and a column okay so we could understand  like this so what i'm going to do i'm going to put   uh so here we'll have a row and central will have  children and then we'll have a column okay so do   column and children once again now  inside this we'll have text over here   and here say flutter db and then here we  do style and the style start headline three again now over here with the  app layout let's get height five   and right after this actually we can  just simply go ahead and copy this   and put it here now here we'll call it passenger  okay press enter passenger and now we'll save it   and that's what we see all right and what else we  could change about it let's see oh the container   has to have some padding horizontal padding  left and right okay so that it aligns over here   now we are inside this container so we'll do  padding and since dot symmetric horizontal 15 okay yeah that's working and then  what else i will take care of this   uh distance over here and why this distance  is coming actually this distance is coming   in this file you can view the dart and here  this one okay so it is a little debate over   here so now here we could do one thing say  the correct height is 169. if we do that   they overlap with each other so that's what we see  but now if we do go back to home page we don't see   any changes so this part is still okay but of  course we need to work on this icons color because   it changed because of this condition that we  added but anyway first we'll come back to this   one okay so that's thing but now if you go to  android uh so this is our android phone and if we launch it and do a refresh now we  see that 168 doesn't work over here so   here uh what do we do so for now the solution we  could do for android we could do 167. now it works   but of course this is not the way to go so you  can do a conditional check to get platform okay   get platform is android so if it's android okay  true right then we do 167 otherwise 169 okay   so this way we'll be able to meet both of these  platforms requirements so here we do have this one   now this is for ios and if we refresh reload and  they stay the same great okay now another thing   we need to take care of this border issue over  here now the border is coming from i think this   container itself okay over here so bottom part  of the orange card so which is this one now we   do see a border over here now we can use is color  equal null if it is null we don't send anything   then we'll have 21 if we do say send then it's  a zero okay now this one same over here do is   color equal null so which means  we are not changing anything   all right now let's save it and we do see that  they have aligned together so it's beautiful   now if we select my android and if i come  over here and i do a refresh and we'll see   it stays same for android as well okay so it's  working in android as well all right okay great   so that that part has been taken care of  and now we do see this section over here okay now this section is not itself in the ticket  view and we see that in ticket screen over here   and which is this one okay now this part actually  would be there a lot of time not just now so we   could make a dedicated reusable widget for this  so we'll copy this one we would come over here   and then inside this widget folder what we'll  do we'll go ahead and create a file over here   and we'll call it uh column layout.dart okay now  here we create a stateless class and we do uh app   layout okay now whatever we have copied we're  gonna put it here and then we're gonna return   the build context and things like that i mean for  the libraries okay let's import this one first   sorry for this and now let's import this library  okay yeah so with this we have done over here   uh well i think we need to we need to use some  parameters for this but for now i'm going to   remove this and here i'll just call it f column  layout okay and make sure that it works it   should work because these values are hard coded  but now we want to grab this value so here   we want to send a few uh parameters  the first one is i would say first text   and here uh the type should be string right so  string and then here final string second text and here we need to do it as required this dot first text required this  dot second text okay great now over here   we're going to change them so here we'll say  first text okay and then this is a second text second okay great uh now we need to come over  here definitely we need to pass them over here so   it wants you to add record argument so this is the  first one and it also wants you to add the second   one okay so that's the second one so the first one  was uh flutter db and here we say passenger okay   all right now we do need to improve it  a little later and i'm going to tell you   how you're going to do that but that's the first  part right and then you also need over here this   one that's all right so what are you going to  do we are going to copy this one and put it here   and this time so we need this ticket  number right five two two one so just   random ticket number five two two one  three four five six seven eight okay and   what else we have here and we do  have password right so here we do   password okay great all right so let's save it and  you were supposed to see that but we don't say it no we don't have any error here it looks like  oh yeah i didn't save it so because i'm on i was   simulator okay now here the problem is they're too  close to each other right so i need to set up this   property over here which is called maintenance  alignment right so we do that and exercise uh   space between okay so that should work okay great  now if you take a look at this each of this their   alignment is not good okay here it starts from  the beginning and here it's just in the middle   the beginnings part is okay but here you want to  start from the end just like this okay beginning   and door will also take care of the color issue  very soon okay all right so how do you do that   well now for this one this column layer  actually we need to pass extra argument here   so here we do main access alignment  and alignment okay do this one and here require this dot alignment okay now  here we need to do uh whatever the   alignment was given we'll use that  one okay so main access alignment okay and here we will use alignment  okay so whatever will be given   from uh for of this time okay so  we're going to just use that one   now if we are coming over here we need to add  this one okay now for the first one i want to pass   alignment right and i will pass main access  alignment dot start so for this one we're   going to start from the beginning okay and for  this i'm going to start from end okay all right okay let's see can't okay and we do have a bit of change let's see  it says that package that out trying to perform   hot wheels okay i'll close this one over  here okay and now i will do a hot restart oops i'll i'll close this and actually stop all  and i'm going to close this one and i'm going   to select the we have this mini one in this way  we know actually what's happening quickly okay   so that's what we have here this is mini mini  and if we are going to come over here let's see okay now if this is column then actually we  need to change it to cross axis alignment okay and so we also need to change this one to  cross access alignment now it should work   okay and let's see we must really need to  restore it hot resistor cross access okay and   we also need to change here sorry about it it's  a cross access alignment and just copy this one and okay so here we just do end okay yes now into the  fact it's working because it's a column so we want   to do the cross axis alignment is the horizontal  one right so that is the cross axis alignment okay   all right uh so this section is great but here  you do have a bit of problem with this styling and for this one actually we may use  yeah this one i think this is much better so now as we got to this reusable component  actually we'll be able to use in many other places   in our app uh like in a search screen i do  remember that let's say not search screen   okay well over here this ticket itself actually  could be reusable okay now if we go to our ticket   view over here we do see the same pattern  right so all we need to do we need to pass   them so here i do add text layout have  a column actually right so this one   so let me collapse them like this so that  we know what's happening now the first text   over here is date so i'm gonna pass this  one over here okay and the second one is date itself this word so i'm going  to cut this on and put it here   and alignment okay so we're going to  pass cross access alignment dot start okay and after this i'm going to cut this one and okay so we do see that we have a slight  problem with this color like this color thing   now if we roll back over here that reason is   the color itself over here okay so we also  need to pass is orange or not okay otherwise   this is not going to be reusable so over here  we pass is orange or it's null or not okay so   to be able to do this first we need to declare a  variable over here the column layout so here we do   final bool is color okay now because this is going  to be optional so you put this one and let's see and final filled to the parameters okay yeah so we need  to add this one as well but this could be   optional okay now in terms of this  uh let's come to our ticket over here   so all we need to do we need to take care  of this one okay the color section okay   so we'll copy this style from here so that should  be the first section so we'll come over here   and we do see that okay let's put it at the  top and see how you're going to change it so it does have a headline three headline  three if it is orange then okay yeah   so what we could do we can just directly grab  this copy this and replace this okay and it   has to work but only thing we need to do import  the libraries okay all right now let's save it   uh we might have an error somewhere else  okay let's see okay expected column layout it says expecting this okay and it has to work yes but of course we have  some extra like uh this one right where we were   taking v right so we we need to remove this one  so that's that's why it's causing this overlapping   issue but anyway so what i'm going to do i'm  going to go ahead and copy this line from here okay all right and uh okay i think i forgot to  copy this one so i'll copy this one from here   and put it here okay now this time to give you so  we can just simply remove this ticket okay section   perfect okay so with this our component column  level is completely reusable okay that's 100   reusable and okay now we do have a problem here  but to know how to take care of this problem well   i think this one is coming from here f layout now  because we are not sending anything over here so   uh what it's falling back it's null if it's null  then we are falling back to this uh white color   condition okay so all we need to do need to just  uh do a conditional check conditional parameter   let's pass this one so it is color uh well we can  send it false it doesn't really matter because we   are just checking it whether it's null or not null  okay so now it did came back so that's good okay   so saying that one we know that now we can use  this one to work with uh this section over here   so i'm gonna put it here first and all  we need to do just pass this one so   let's grab this and pass this and  what else let's see we do have   departure time so that should be our second text  uh so i'm going to put departure time over here   okay and now i'm going to take this section out  okay so that's not needed anymore okay uh well   now over here we need to change this one we  change this one to center and it should work   yes as you see so that's working and  i'll copy this one and put it here   now from here i'm going to pop  copy this and pass it over here   and then the number itself i'm going to copy  this one and put it here and we do see that it's   end right over here so i'm going to copy this  and put it here and okay and right after this i'm   going to remove this we don't need this anymore  and we do see that no change because it's working   all right perfect so that was about a ticket  view now you'll find that ticket bill become   much better because we are replacing with fewer  lines okay now i don't remember whether we do   have the same block of code over here let's take a  look no not this one and we'll take a look at this   one over here no we don't have anything like that  so we can't reuse that code but so far we have   done great job okay uh so i'm going to close this  okay we don't need to close this yet now come to uh this one over here so that was  a ticket screen which is this one okay great so so far everything is great  now we need to continue with this design so we do have this dash line and  we also have a line at the top   now for this line at the top actually we  could for this one would come over here   and draw a size box okay and that would do the  job size box and we'll give it a height one and   with say with it really doesn't matter actually  this size box let's try without the width just   give it a height and we do see there's one like  this okay now we want to have a bit of spacing   about this so here we could do vertical and  15 and it would come down now we do see that   we do have equal space over here okay even you  could do 50 it doesn't really matter of a 20   okay but i think that's great i think they  do have 20 so for now i'll go ahead with 20.   yeah okay great so what is the next section  that we need to do um so we're done with this   now we are going to have to have this one over  here this dot lines all right now to be able to   draw this section actually we could reuse some of  the components that we built early now if you do   remember if you come to ticket view over here uh i  think we have a section where it says that layout   builder okay so this is the layout builder that  we can reuse and for now it's it's over here hard   coded so anyway so what i'm going to do i'm going  to copy this one okay and i'm going to put it here and i'll call it layout builder widget okay  lay out builder widget dot dart okay now here   i'm going to do sd class then i would do uh app  layout builder widget okay now instead of that you   return mr container we're going to return this  and some of the libraries that we need to return   now one of the variables that we need to work  that is is colors as you can see okay but anyway   so i'm going to import this one first and its  color is definitely that we need to define first   so here we do final bull and is  color okay and at the same time   we want this section to be dynamic okay so here  i would say final uh end sections okay yeah no   here we do uh this dot is  color and here we do required   this dot sections okay now we're going to  replace this one with section value okay all right now we are done with this  everything else could stay the same   now over here we'll remove this and of course i would call app  layout builder object up layout layout builder widget now here  we could pass say sections   and first one i remember we had six sections  and we're going to pass that one and everything   stays the same okay so over here at least no  change and that was the ticket view now if we   going to come to our home page and of course we  don't have any changes here yet i think we do   we did mess up with some of the settings but  we'll take care of that don't worry but here   we want to make sure that it still works uh so  that was a ticket view right so this section is   right in our home page so let's find  home page and we do see that we have uh   ticket view which is this one all right now for  this section i think we already have this okay   great so this part is fine and i'll add const and  what else let me see whether in any other places   we need this one looks like we don't and if we're  going to come over here which is a ticket screen   and over here we need to do the same thing  okay now we'll put it right after this and here here we are going to do this load  builder so i'm going to copy it from this   home page our home looks like ticket view  actually from here is it the ticket view uh yes   so this one i'm going to copy this and  we'll come over here and put it right here   and this time actually we can have 15  sections because we are not going to put   anything like that okay i mean like a plane  okay because previous we had a plane here   this time we don't need okay now let's see how  it looks yeah so yeah nothing changed that means   that our reusable working reusable widget  is working okay oh that's uh the first place   uh actually oh this should be right below it  but it's still not visible i think that's at the   end but if we are going to say for example put a  text over here and we just say hi and we see that   it's still not visible okay now  let's find out why it's not visible   so we'll go to this layout over  here and we are supposed to see   the decorated box so it is null then color okay  all right so it is there but it's a white color   because if it's null then we show white color  otherwise it's gray so we would come over here   ticket screen and then here would say is color  false just pass a value okay let's call it false okay and now we would see oh yes we see it right there did you see that yeah   it is right there but if we are  going to compare with this we need to okay first let's remove this  text which we don't need   and we need a bit of spacing as you see it  does have a lot of spacing which we don't have   now to be able to work with the spacing i think  we can copy the spacing let's see from here so we could do gap 20 actually so  over here we're going to put gap 20. okay now we do have space over here okay okay so  now we do see it's small and it's larger so one   of the way to solve is having a different width  actually so here we do final into with okay and i think this could be as like this so we do this dot with equal three so  now it will have a default value   so this would be here so in dart  when you have a constructor let's see   okay so we need to have double because that's  width so in dart if you write something like this   so that becomes optional you don't say required   if you don't have or don't pass any value  it would use this value but if you pass the   value that it would use the value that you have  passed over here so now if we were to come to our   ticket screen over here so here we are going  to pass with say five and now yeah we are good okay and it does have a bit of error now  the error could be let's say from where   it is causing this error because  of const value let's check it out well we don't have any const here so that's our sized box   and if we were to come to this ticket screen  if we're going to remove this one now let's see   uh looks like we still have error it didn't  say that const cause cannot remove fields   okay so something is causing this error maybe  somewhere else actually not just here now one thing we could do we could  go ahead and look for this class   okay and how many different places we are using it so we see that in ticket screen we have   only one and over here we do have an inside  ticket view itself so let's remove this one   once again and see if we can compile no we can't  compile but and it looks like this time it did   and yes it worked and everything is okay so the  way it was compiling and hot reload didn't work   it worked from here so i think that's fine and  then now over here if you see okay this width   is fine as well so what's the next section  we're gonna do well next section is this   as well as this section okay now for this we  can just directly come to this over here and let's see if we can put const here yeah hot roll it worked okay  so we are still inside this   column and that was our first row and we can have  another row so for this reason we are going to   copy this one because you see that here we need  this row okay so we'll put it right below it   and the idea is it will have some numbers and  number of e ticket like that so i'm going to   put some random numbers okay and what else we have  we have number of e-ticket so here would write   number of e ticket okay and here we do b2sg28 so here it is b2sg28 and then we'll have booking code booking code okay oh yeah so great now just  a matter of placing this one right below it okay so we do have equal space and after this we are going  to work with this section   but before we are going to work with this section  i think we need to reuse this layout builder again   the one we had so that's the beauty of this thing  it just you don't need to write it again and again   and again so here i'll put it right below it and  i think would be seeing some result okay great now if we're going to take a look at this one  so here definitely we want a row and instead   rule this is column one and column two but this  column inside we do have a row again because   that that should be an image and  that should be as a string so   inside this column the first one is  a row and the other one is a child so i'm going to put column right  below it and then we'll have children   and then we do cross access alignment or we can  do it actually later it doesn't really matter   uh i mean it has to be actually here even if we  do it but for now we'll have a column over here i'm sorry so first we'll have a row over here  then we'll have children and inside these children   we'll have column now inside the column we'll  have children and then we'll have a row okay and   then we'll have this uh text over here okay now  for text itself first i'm going to use gap 5 and   text would be payment method and the  style should be style and style dot   headline four so that's what we're going to  use and yeah that's what we have but we don't   have anything at the row now for the row itself we  need children and then we'll have image image dot   asset so this time we are not going to do any  style with this image so that's why we are not   using it inside a container and we are directly  using using assets images visa dot png visa   dot png okay and we just scale it a little  bit and we'll see how it looks all right and we do have this section and um right  below it because we need this star over here   so we do text and we'll have space  three stars and we'll do 2 4 4   or 2 4 six two actually and then we need  to do style styles dot headline three great all right now as usual we just need to put  this gap right below it so here we'll have this   okay great now that's the first column and we also need a second  column now for second column we do have simple   just like this now we have seen early that  we can just go ahead and copy a row like this   uh actually we don't need to copy the whole row  we just copy part of it okay and we'll put it here let's see how it looks yes  now here we're going to do   we're going to do main axis alignment  and may access iron man dot space between okay now here we don't want  start we want end okay great   but of course this information is dollars  and price okay so here we'll have so 249.99 and that should be price okay great it's looking much better and it  i might need to put a const before it okay   great what else we have now we do have another  line or divider like this and which we had early   well that was not a divider there was a const  over there so we're going to just copy this one   and put it right below it  and we'll see how it looks well it does it doesn't look visible   but if you put a height right below  it i think it would be visible no we don't see it here okay so let me make sure  that we are getting it right actually we do have   this ticket viewer and then we we did this car  all right and now first we'll go ahead and draw   this and then we'll draw this uh line and there  should be a reason why we're doing like this okay   so what i'm going to do i'm going to collapse this  now right over here we'll draw our barcode okay so it's a bar code yeah now to be able to do that we need to install  a package over here and we'll call it barcode   so we'll install it the package bar code widget okay and here  we're going to use the version 2.0 and then we do get pop okay great now right after this because  we want to draw the barcode over here   so here we install the barcode plugin  and then we're going to draw it over here well to be able to draw it first i  just simply call bar code let's see barcode bar code build draw it  first here we'll call it barcode   widget and if it doesn't recognize we might have  to import the package manually so we'll go up and   import it manually right over here right  below it and then let's see barcode yes   now it wants you to add additional parameters  required parameters so the first one is barcode now barcode has a special code that you need  to send so that's what we do barcode dot code   say we're going to use this one 128 okay and it  needs more parameters or properties and the data so now the data has to come from somewhere  and for now we're going to use https get tab dot com martino all right martino and here we'll have draw text we don't  need any text so it set it to false   and here what else color and we would use  the color the one we had we do the text color   and then with we do double dot max finite or  infinity would work let's see what's going on do we have text color let's see  styles dot text color this one   and we're gonna give it a height so that should be  70 and here we go so that's what we have amazing   all right now we don't want to have it like this  we want to have the design like this okay now to   be able to do that first we'll wrap it around the  widget and we'll call it clip right okay all right now over here we want to give  it a border radius so we do border okay it's not recognizing so  we do it manually border radius okay and here we do border radius dot  circular and here with the up layout get height say 14 or 15 doesn't matter and okay that should be clip are  wrecked and now it should work   now it's already working okay and then we need  to wrap it around a container because we do   have a little bit of extra padding  around it so here we do padding and adding sets dot symmetric and we do horizontal actually  and here we do app layout dot get height 15.   yes now they look almost similar okay we're done  with this part but if we're going to take a look   and you'll see that it is well now it comes  inside well it has to be up to here right   and as always we have to have some empty  space but we don't have any of this okay   now for this reason actually we can wrap this  one around another container so here i would   wrap it around well just simply go ahead and do it  using container okay all right now this container   will have say color so first would  use color okay say colors just red and of course it looks like this  but here we'd use margin okay   you would do edge inserts only  and say all 15. it's beautiful now here we could also apply padding  actually here we do padding so as insets   and now here say padding only so  here we do top 15 on the bottom 15. okay great now here okay it should work  by this time now it gives us a visual look   but here we are doing all so instead  of doing top and bottom over here   we can just do left and right okay so only  especially left 15 and right 15. now let's   take a look so now they're closer and at this time  actually we can remove it and we could do white   and yes so it looks like this okay but we also  need a sized box over here okay so to create this   distance over here beautiful okay now it does have  a little bit of problem and as you see we should   have a border like this we don't have it yet  but we could do it so here we'll do decoration   box decoration and here we do border radius  and here we do border radius dot only   now here we would use bottom  right and radius radius   dot radius dot circular here we use 21  and here bottom left radius dot circular okay and now we take this color and would put  it inside this and most really we need to put it   const otherwise we get this wiggly lines and  okay for now we'll just go ahead like this   and you see it changed immediately it  looks beautiful but of course here we   don't want to like this we do app layout  okay app layout and get height and 21 okay   and i know the error is about the const keyword  we know it by this time so we have to remove it   okay and what else we have i think  yeah now this should be same here so do 15 1 5 okay great and here here's same okay well we'll copy this one once again and put  it here because that's 15 and as well as 15 here   it's beautiful okay great all right now  our barcode is ready the last section   for this one is this code now the ticket  itself actually we could copy the earlier one   we had this this one okay so okay we can just  simply go ahead and copy this section and uh we're gonna put it here i think right after  this container and we'll see how it goes   okay let's put it there yes we do see and but  for this one we don't want to send anything   so we have this reusable one and as well as we do  need a bit of spacing so i'm going to copy this   and put it right below it okay and perfect  yes they do look similar only a few changes   like this color right now we're going to take  care of them so how are you going to do that   uh i think we also need to change this  distance over here it should be more than this   so instead of 15 i think that should be 20 20. 20 and 20. okay well it does look like it messed  up with some of the properties so   let's put it back and check it one by one okay and for margin uh okay i think we just  want to do this one just the padding actually okay great yeah now it's looking better yeah okay and now how to solve this  issue no all right now this color problem   could be solved easily actually how to do that i  do remember that we are calling ticket view from   ticket screen which is over here and we're not  we're we're actually not passing anything right   so over here is color we are passing null so i  think all we need to do because in ticket view we   grab that color right if you see at the top that  we take it but if we don't pass it's null right   so whatever is there just grab that one past that  one and it should solve the problem so is color okay so this one okay and i think the problem should  get solved yes it did as you see   and if you come over here we also maintain  the original condition and over here it works as well so yeah it's beautiful right okay  great now we're almost done with this three pages   and i think we came a long way and our app from  very simple app it became reusable components   app where you have different components and you  can reuse them based on the color based sorry   based on the condition and his color is one of the  condition but up to now actually we built a lot of   uh components anyway uh so yeah let's go ahead and  start working on this profile section all right so   so far this has been our list view and inside  this list view we have many different kinds of   children right all of these were responsible  for building this whole squi ui as well as   this scrollable section right now actually we are  missing another part and uh this is the part like   this the actual app here these two fixed circles  so this is what actually we need to draw again   and because of this two circles actually at  the beginning we had the stack widget right   so we need to finish this section great  now we'll collapse this list to fill yet we   don't need this now because we are done with this  so right below it well here first we'll have a   container and insert container we do decoration  because we want to draw a circle right because if   we do box decoration then we can select the shape  so here we do shape and box shape circle right and   well it's not visible yet we need to apply border  to it so here that's what we do border and border   dot all now with this we can find a color  here we do color and now here we do styles   dot text color and would also give it a width of  two okay now let's go ahead and save it and this   is unbelievably large but anyway uh right  after this well this decoration over here   would assign a child over here now our child  would be circle over turn okay because with this   circle over two we could give a constraint to  the container now why it's taking the whole space   because it's this container itself doesn't have  any parent well now stack wizard itself doesn't   care about the children's size so it allows you  to as big as possible okay or stack with the only   thing it does is let you to overlap  a regarding size it doesn't care   so but because if we have circle over two we can  do a radius constraint so here we do max radius   and we do four okay now well it  became very small and where is it it's   hiding somewhere i think it should be at the  top but which we don't see yet but if you do   40 you see it came out so it was hiding at  the top now our purpose is to bring it down   well how could you bring it down now to bring  it down you need to wrap this widget around   another widget that's called position widget  okay so here we would assign the position   okay and that's not enough uh we  need to assign certain uh length   left and right properties so here we do say  left 19 okay so it came over came out over here   a little bit and we want to give it a fixed  position for top okay so here we do 9 295.   all right uh okay we need to save it so it  came down right but of course we know that we   shouldn't be using like this so we do app layout  dot get height and now inside this will pass 19   and the same over here so for this i'll just  simply copy this one and replace this with this   and inside we do 295 okay of course this is not  the color that we want so we can do a different   kind of color so here we do background color and  for background color itself you do styles dot   text color let's see how it looks okay now it's  much smaller okay sorry it become blacker and   that's what we want okay but it's still much  bigger now to control this actually we can apply   padding now to be able to applying padding we need  to come inside this container section over here   and we do padding and here we do as insets all  right add the ge edge inserts and here we do all   and apply it as a three okay now as you see it  became much smaller now over here the radius was   40 but of course we don't want 40 we want four  okay now this is very perfect so now as you see   you can scroll like this okay and it does work  okay now if you want to be even much better you   could do like say 20 or 21 so it would go inside a  little bit more and this is what you might like it   okay now with this we are done with one circle so  we need to draw another circle now for this reason   what you're going to do we're going to copy this  one first and we are going to put it right there   okay and only thing we need to change  over here this left becomes right okay   all right so now we do have to everything  else stays the same now officially we're done   with this page so next we'll see how to work  with this profile section hey please keep me   motivated and buy me a coffee either using  paypal or the buy me link coffee thank you and first let me explain the layout first now  over here definitely this is going to be a part   of the whole screen would be part of a list view  and inside this the first child would be a row   and inside row this would be the first  child and that should be inside a container   then we'll have a column okay and then another  column okay and well after this we will have a   new container about inside this container we'll  have a stack widget because we want to overlap   different things okay so it could be part of row  there should be a row as well as another section   but they heard all would be inside the stack  widget so they could overlap each other   and we'll have this one the big text and this part  is relatively easy okay all right so now to be   able to work with this we'll close this one and  then we'll come over here to the screen section   and right inside this will create a new file and  we'll call it a profile screen okay and then we'll   call it dart and as usual we'll create a stateless  class over here and we'll call it profile screen   right into this we are actually we can remove this  we don't need this section so we'll replace this   with scaffold okay great now inside this will  have body and then we'll have list view okay   all right great and then we'll have children  okay great and uh let's see what's going on   okay so it was supposed to  be body not a background   okay great and now instead this definitely will  have a background color and styles background   color do bj color but now we need to come to our  bottom bar over here and replace this section with   our profile screen okay profile screen and we  are good to go all right so we know what is this   like so i'm going to close this and get my  app from here and uh so i think we need to   restart and then it would be great okay  now everything is gone great all right   so as i explained earlier that first we need  a row right so i'm going to do row over here   and inside this definitely we need to put child  the first one should be once again a container   because we want to have order rounded border okay  and inside there's definitely decoration and then   box decoration and after this border radius border  radius and here we do border radius dot circular   border radius dot circular and here we do app  layout dot get height and then we'll put a   10 over here and right after this we're gonna put  an image over here and then we do decoration image   and image once again and then we do asset  image as that image shows the image from the   local files now here image path is in  in the assets and then images and over   here i have an image called image1.png  okay that's what we're going to show   and uh let's see okay now the reason is it's not  showing one second because we are not applying any   height and width so let's go ahead and do that say  height 86 and with 86 and let's go ahead and see   how it looks like okay beautiful so it's already  showed up with the border and things like that   okay but definitely once again this is not  what we want so we do have to lay out the   get height and then inside this will have  86 and just copy this one and put it here   okay of course no changes yet great okay now one  thing definitely we need to give it a border on   the left side right or padding or things like that  so to come inside the list view and we do padding   over here and here with the edge in sets only  okay and then we do symmetric and then horizontal   and then we do apply out okay dot get  height or get width is fine as well   okay now over here we do 20 and i think then we  are good to go actually we could also do vertical   if for now we just skip vertical  and see how it looks okay   now of course definitely at the top over here we  could do gap because we know that we have this uh   plugin so we can use this plugin and definitely we  need to import it first let's go ahead and do it   and after that we're going to put this comma over  here and then inside this we just pass app layout and here we do well this time we're gonna  go ahead with height and then we'll do 40   and say how it looks like so well now if you  do see our other section starts a little below   right at this section but it is a bit at the top  so we can change here or we can put it over here   so yeah we'll go ahead with this one over  here and then with the app layout.get uh   with uh i think that was oh yeah that should  be height actually 20 and it should be the   same over here get height because that's the  vertical distance now it's looking much better   right so with this we have done the first part and  let's see it wants us to put a const over here why   it doesn't put it itself i don't understand it  should but anyway okay now right after this i'm   going to come over here and draw well this time as  i said earlier that we need to have columns that's   what we're going to have and then we'll have  children okay and inside the children the first   one is definitely a text where it says that book  tickets okay and after that over here we do style   and here we'll have styles dot headline one  okay so there's a big light here and right   after that we're going to save it and  see how it looks and it looks beautiful   now at the same time we do understand that here  we need to apply a gap so we'll take this one   and copy it here and instead of 40 this time we'll  just get 10 okay and now it looks beautiful now   over here we have other properties that we could  set up now once again i'm going to copy this one   and put it right here and we're going to  change the section over here we do new york okay we have new york and styles for this  one we are not going to have this style so   we completely gonna change it uh we want more  customize this time so here we do text style   so whatever was there we are skipping that so do  a customized style over here for this reason we do   font size so this time font size is 48 and after  that with the font weight and font to it we do fun   to it dot 500 this one and color okay so here we  do color colors dot gray dot shade 500 that's what   we're going to do and it should look better yes  it is now it does tell you that you need to set   up this property over here which is called cross  axis alignment which is responsible for horizontal   alignment for inside a column okay so when you're  insert column cross-access alignment is horizontal   so this time we do cross axis alignment dot  start and we should make it look beautiful okay   wonderful now we do also do main access  alignment over here so let's go ahead and do that   main access alignment for this one should be  vertical alignment so main access alignment dot   over here we'd also do start and let's see how it  looks uh well it didn't look any better but let's   go ahead and do more work definitely it'll change  okay now let's take a quick look what else we had   earlier so now over here this is the section  that is interesting because uh here this is   one section right so that section definitely has  to be inside a container as you can see from here   after that there will be a row and inside  this row we'll have this image and then we'll   have this text so the idea is first you have to  get a container and then you have to get a row   so let's go ahead and keep going all right so now  definitely before we go ahead and here we could do   uh this one like this one more time create  a little bit of distance so instead of   10 this one will have two okay now there was there  is a bit of distance and right after it once again   we'll copy this one because i don't want to  copy it again and again so i'll put it here   and then continue it would give us a distance  of like eight after that definitely we're going   to have container as i explained with you early  now then we do decoration and box decoration and   box decoration take border radius and this time  actually we are going to use a huge border radius   that would be circular and then once again we get  it from app layout that get get with or hide it   doesn't matter so this time this would be huge  the reason why it's going to be huge because you   can see that here we have a strong curvature  okay so it's a lot of curvature so that's why   all right yet it is not visible because  we don't have any content inside this   but anyway we'll go ahead with the color as  well so here we do color and then we do well   we can do a const color and then here o x f f e  ef4f3 okay and i do think that we need one more   f okay right after this we're going to put  a child over here and our child definitely   should be row as we talked about it early then  we'll have children now inside this children   once again we need a box decoration because if  you see over here this is quite a round right so   definitely that's around so that's why we need  box decoration once again so what you're going   to do i'm going to copy this section directly  from here and then first i'll put a container   and then inside this container i'll have this box  decoration now it did save us time but we don't   need everything from here so we also don't need  this section here instead of this we'd use box   shape or our shape actually and box  shape dot circle now all we need to   do change the color so we'll remove this  section over here and then we do ff526799 okay perfect all right now let's go ahead and save  it and we still don't see anything yet because we   need one more icon inside it without icon just  decoration doesn't or without child decoration   doesn't give you anything so here we are and  right after this we're going to create a child   and the child should be an icon now here we go  icon and then we'll get it from fluent to icon   system the one that we have uh installed  earlier okay great here we do i see point   shield and then we do shield okay shield  shield field and that should work and now   let's go ahead and save it yes we already  see that but now we want to change the color   because it does look a bit scary and we did get  scared and here we do color so colors dot white okay and then we do size over here  and this one just one size size is 15   and let's go ahead and save it yes it does look  a little better but not completely better and   let's see what we could do for this one well  now it does look very small so we need to apply   padding to it and padding would help us so it just  exercise from out of this icon because we are not   using padding inside the icon so because child  is already inside so for container itself the   padding would be taken from out of child so here  we do three and we'll see how it looks yes it does   look much better and right after this let's see  what else we could do most probably we need a   constant modifier otherwise it is getting cranky  uh yes great now right after this child we want   to get a text over here and the text is premie  um status and right after that we're going to   do style with this and then we would have text  style over here okay great now once again we are   going to use a customized style a little bit for  this so we do color over here and a const color   we don't want to get color from there we're  going to get color from here and then we do   ff uh once again most really we can just copy  this color over here and we should be good to go all right and right after this we also wanna  set up our font size so here we do font   sorry font weight actually and then we do  font weight dot what this time instead of   500 let's get it a little bigger so  600 okay and yes we are looking good   and let's add a const modifier instead of this and  as well as over here and we should be good to go   all right now these two are pretty close to  each other so what you could do you could do   gap over here let's give it a gap and then we do  app layout and apply out that get height and we'll   apply five or six i think six i just go ahead  with five it will make a big difference though   all right great so which is looking much better  now we do have problem at the top and left and   right now that's inside this uh big container  over here so now over here actually we're going   to apply padding to it so here we do padding and  then add inserts only and well i think we could   go ahead with symmetrical now horizontal and app  layout so here we apply out that get height and   for height itself would use three  and then we'd also do vertical   now vertical uh the same app layout dot get height  and then three now if you save it yes it's looking   a little better and we're actually happy with this  but if you want you can apply more padding but so   far i'm done with this section now anyway uh right  after this let's go ahead and uh let's see what is   our text so this is our text right after this  text we're going to put in the gap over here   for the next one otherwise that would be too  close to each other great all right done so   yes so we are done with the second container over  here so so far things are great and we want to   create another column right after it so yes we  do that so let's go ahead and create a column   and here we do column and then we'll have a  children okay and now inside this children let's   go ahead and use the text and the text name is  added and we give it a style and then we take   it the styles whatever the styles was there  styles the text style and copy with color   so go ahead and do that copy with color now here  we do color styles dot primary color we do have   a primary color so that's what we want and font  weight and here we do font weight dot maybe 300   w 300 okay all right great so that's what  we see there but of course this is not the   position we wanted so we can change the position  here we do cross axis alignment first um   before even before we go ahead and do that  before we go ahead and do that let's put another   widget over here which is called cons spacer   uh so this is give us this will give us a  minimum space between these two because we want   it at the end okay now right over here let's  come over here and apply alignment so here we do   uh cross access alignment and then we do cross  access alignment dot start and see how it goes   yes everything now on the same horizontal line  which is great now just to be become more uh   interactive what i'm going to do i'm going  to wrap this around another widget which is   called inkwell because in future we might want  to click on this and do something different so   here would have on tap event and for now only  thing you do print you are tapped okay great so   uh we need to put semicolon all right if you  do that and here you can say you are tapped   great so that's what we want with this we're also  done with this section so next we're going to do   this one over here okay now to be able to work  with this would come over here and collapse this   and right after this we are going to put uh  actually we're going to put uh this one first   because we want to create a bit of distance so  we'll put it over here and instead of say 40   just get a little bit like eight and right after  this you want to put a divider over here so that's   what we do divider i want to change the color  of this so it becomes colors dot gray dot shade 300 okay all right great so if you see there should be   a little bit of divider and it's not  that obvious but it is there okay   all right and then we need to stack widget so we  do stack over here and then we do children okay now if you take a look look at it so first we  are going to have this container this container   has border so first thing we want to do we want to  do a container and then definitely the container   itself will have height so let's give it a height  would give it height of 90 but we don't want to   give it like this so we want to use our calculator  which we have built already so use this one   all right right after this we do decoration and  then we do box decoration okay and then we do   color over here so we do styles dot our primary  color styles dot primary color because we know   we have a primary color and then we want to get  a border radius and border radius dot circular   and then we want to get app layout dot get  height and then we do pass 18 to it okay great   all right now if you come over here and let's take  a look yes it's already there beautiful okay so   it's it's already over there but uh to be able to  uh get rid of any kind of error in future so we   can define a width over here and we do double dot  infinity okay so that means whatever the possible   way is available just take all of it great  so we are done with the first section   but now if you take a look at this one so over  here we have this section over here and we have   this section over here so a lot of things to do  so we're gonna start with this container over here   okay so this one this is the one that we are going  to put first now for this reason what i'm going to   do i'm going to first go ahead with the container  itself so go ahead and draw a container over here   and then just like last time so just like last  time we would draw it first and then move it up   okay that's what we're going to do so definitely  then we have to do decoration box decoration   and over here so we do a shape and box shape  dot circle okay and right after this we want to   get a border and border dot all it's a border  dot all now here we give it a width width of   18 and after that you want to get it with it  you give it a color and here we do ox ff 2 6   4 c e d d2 so this is the color we're going to  apply and let's see what's going on border dot okay we don't want this radius we just want border   okay now let's go ahead and save it yes we do  see it over there now just like earlier we can   apply it a padding to it so that's what we're  going to do and instance that all and then apply   out the get heart past 30 you know it became  much bigger and that's what we actually want   now we want to position it to this corner over  here and how to do that so i'll just cut this one   and then first i'll have position widget  and then over here uh whatever we had   earlier we'll just put it back at the same time  right inside this section we're going to put it   top and right properties so here we do right and  right is -45 you'll see it's already moved and   we're going to put it um in the top position so  here let's do -40 and see how it looks uh so yes   it put it up over there okay so great so now  with this we're also done with this section now if we are going to be much better with  this let's go ahead and set up the color   well it doesn't look like the color is a problem  but let's just make sure to have a transparent   color whatever was there okay yeah we're good  all right so we are done with this section   and what else we're going to do next all right so  now we'll go ahead and do this part of this design   okay and how to do that well definitely  if you just take a look at this one   this is our reload so that's what we're  going to do first so here we do row and then we'll have children inside this okay   and right after this we're going to draw  this first container or the first element now this is definitely a circle over here right  so that's what we're going to do we do circle over and here first thing we want to do the radius  max radius is a 25 otherwise it would be too   big and then here we'll have background color  and we'll do colors.white okay all right now of   course this is not our app our app the actual  one is over here okay and we already saved   great now we want to put the icon inside this so  that's why i would use child over here and then we   do icon i will get the icon from fluent assist  system icons and over here we do ic ic fluent and then we are going to look for light bulb  light bulb yeah this one okay and then we do color   and let's see what color we could do styles the primary color okay so that's  what we're going to do over here   and then we'll do size size we'll do 27 okay  all right great and what else so this part is   done and then we want to do a text over here right  like the one we have seen earlier like this yeah so the icon looks a little different  so here i'm going to change this   light bulb i think we could do filament i think  there is an icon called filament filled okay yeah   this one yeah yeah great now it looks  much better now right after this we come   over here and then we do a column okay  once again now we have the children and first one is text definitely  so here we say you have   you've got a new reward okay uh new award is  okay yeah and right after that we'll do style   and then we'll do styles dot now  we need to head line two over here and then we want to change the part  of the style so we do copy with   so now here we do uh say  font weight so font weight about i think we want to do a bold is fine and  then color so do colors.white okay and yeah so   let's go ahead and save it and see it okay um well  i think we do need to set up other properties as   well but let's first go ahead and see how it looks  okay now over here we're going to copy this one   and then we're going to put it right  below it now this time would say you have say 95 flights this year okay flights in  a year like that okay and over here we're gonna   change a part of the thing instead of border like  this would do fab w500 so a little different bold   and i think colors is okay and over here we could  also set up the font size we want a different   font size so here we do 16 and with color okay  now let's go ahead and save it but they do have   exactly the same color so we can apply opacity to  it with opacity say 0.9 and we'll see how it looks   uh okay that is this missing point okay great  so now they do have a bit of different color   um okay so that's part of the puzzle has been  sold but this is not the exact layout we want   so uh we want to make a big difference  okay so let's go ahead and do that   now first over here we do  cross a main access alignment   um okay do main access alignment and then we do  main access alignment dot start and we'll save   it but we wouldn't see much of the difference  but it would make sure that we stay aligned   and then we do cross access alignment but this  time would see difference cross access alignment dot start okay no definitely  it would start from over here   but saying that one we also need  to give it a little bit of gap   with this light bulb so here we do const  uh gap over here we do say f layout dot get height and then we just go ahead with 12  and of course we can't do const because that's a   function all right great so now we do have this  space what else we could do now we we can take   care of this layout properties over here so  here for row itself um we could do say main   axis alignment with domain access alignment dot  start okay and we don't see any obvious difference   but just to make sure that things are good  cross access alignment dot start okay yeah so   it went up a little bit that is great or actually  i don't want this one i still want it to be center   center is great all right okay now we need to push  it down a little bit now that's not so far we're   able to do it now for this reason one thing  we'll do we'll wrap this row around a child   around the container here we do container all  right and right after it over here we're going   to apply a bit of padding to it okay so here  we do add insects dot symmetric so now we do   over here horizontal app layout dot get height  and for this one first would go ahead with 25   and we'll see how it looks yes a little bit  more centered and then we can also do vertical so here we do app layout that get  height and this time we do 20 oh yes   so it's more to the center right now yeah so  this part has also been done pretty much and   one thing i do think that we need a bit of spacing  at the top over here which we don't have right now   but let's go ahead and see the spacing what  could be here yeah they do have more space   than the one we have okay now let's go  out and put a little bit of spacing and   i think the spacing should be here so  we'll copy this line and put it here and   the spacing should be done yes okay great  now let's take a look at the next section   now definitely over here we want this text first  and then this one so let's go ahead and do that all right now for that one we don't  need the stack widget so it'd be   below the stack widget and right inside here  first we do text and then we do a queue mutilated   miles okay great and then we do  style styles dot headline two yeah   let's put it yes we see it there but we  also want a little bit of distance so   i'm going to copy this and put it here and  instead of eight this time we're going to put 25. okay great and then what else we want  after that we want the this text over here   okay or this we uh digits on the numbers okay  all right so right after that we'll go down   and uh this time let's okay we'll do actually  we can do that later it doesn't really matter   so if we take a look at this whole  layout we understand that this could be   uh in a column layout and this would be the  first child and then we'll have a row inside   the column as a child and then once again we'll  have row but inside row we'll have two columns   okay like we have done previously so this would  be a row and inside row will have two columns   and previously we have done reusable columns so  we'd be just able to go ahead and use that okay   now for that purpose what are you  going to do over here we are going to   do a container okay and instead the  container will have child child is column   so here we do child and definitely first we want  to go ahead and start with column now definitely   we want to do children over here that's what we do  and then would have text okay now text is one nine so i think that that was the text and right  after that we're going to do style over here okay let's go ahead and do text style because  this is not following any of our earlier reusable   components so we do it from the scratch so  here font size say 45 and color so we do   styles dot text color the color we had  early text color and then font weight okay   so font weight w 600 okay all right that's  what we have and we're going to save it and see   yes that's how it looks and over here actually  we could do a gap to give it a little distance   so app up layout dot to get height now here  we do 15 and we'll see that it came down   okay great and what else you could do so right  after this text and then we need to have another   child and that child should be a role and then  we do children but now we also need to have a   distance so let me put it here first okay now  here we will have 20 okay right great and uh   if we see the layout we'd see that there  should be definitely a row over here and   actually that's what we did now these are  two texts right so we are going to do text so here we do text miles accrued then we do style so styles dot subtitle uh  sorry there's no subtitle that's a headline four okay and then copy with so this time we're just  going to change the font style font size so we   do font size say 16. all right great and we  can just go ahead and copy this one as well   and put it here and right now  here we'll put say date so 23 may   well this is not 23 today though  so i'll just do it 11 and june all right and text size itself would be same  okay we do see this now over here we need to   set up this property which is called main access  alignment and main access alignment.space between   so let's go ahead and save it  yes it's looking already great and what is the next part so  next part is over here now that is also in a row so we're  going to go ahead and do row okay and the children now i think  previously we have done a reusable component   which was for column and here that's  what we did before column layout   so here we do have styles three and styles four  sorry so here we do have styles three and styles   four and at the same time we do have conditional  check as we see over here okay so we're going to   try to use it and see how it looks like okay  but uh so for this reason here we'll just   definitely call it app column layout yeah so we  we have this some conditions so we're going to   fill them one by one okay so the first one over  here is a text definitely so that is 2 3 0 4   2 all right and the second one is this  text over here and that should be miles okay and alignment here we  definitely want to start from   cross axis alignment so here we need to do  cross access alignment cross access alignment   dot start okay so yeah now let's go ahead and  check it how it looks over here yes we do see that   it's pretty white but that's not what we want  so let's see is a color we can say just false yeah okay so this is the result we wanted and this  is the beauty about reusable widget and that's why   i love flutter so much and of course there are  a lot of other things but i think this is one of   the shiny things or when you learn programming you  should be learning how to do uh reusable reuse of   your code you don't want to write the same code  again and again that's pretty boring anyway now   we're going to go ahead and copy this one and then  we'll put it right below it because we want to   have another child so now let's go ahead and see  that child so here there is uh airlines co airline co now here we want to have received from received  from okay all right let's see i think we need to   put a const modifier okay great and we also  want a bit of distance between these two oh let's go ahead and check it yeah well now this distance actually we could  just directly do main axis alignment over here   so you do main axis alignment dot space between  and we are good to go which is looking great now   definitely at the top we need a bit  of distance which we don't have yet   we are going to copy this one first and then  we're going to put it here and we just want say   8. so it came down a little bit but if you're  going to see the earlier design the original   design you might see that there is a line over  here okay so this is the line that we want to draw okay now for this reason actually right  below it we could do a divider okay divider   and here we do color colors   dot gray i think and shade 300 but in this case we  don't want it eight over here we want it for and   this would give us a look or feeling that it is  more aligned okay so at the top at the bottom we   have different sections okay i mean different the  same white space so here's the line at the top at   the bottom we do have same white space now here  cross axis alignment we don't want to start we   want to do it with end okay now it looks more  aligned okay so far everything is looking great   now we'd come over here and we want to draw  this section over here now as you see that   we do also have dotted lines over here which  is in this case this was not a dotted line but   here these are dotted lines okay so that's one  thing we need to know and we should take care   so let's go ahead and do it so this was the row  and right after it will have a custom layout   sorry a space over here so let's go ahead and do  that and this time let's give it a distance a bit   more distance uh from the upper one so we'll give  it a 12. and now right after it will have this   row section and then actually we don't need row  now you have a row later so here we want to have   app layout builder app layout builder widget  and all we need to do we need to pass the   sections to it and it will do the job for us  okay so now let's save it and see the result yes we do see that we have this dotted lines  over here but these are white so that's not   what we want so let's go ahead and check it  now we do have condition so over here if it's   a null then we do white okay so we are not passing  this color so it becomes null so we fall to   this kind of condition so just we need to do over  here uh send is color is color false okay all   right and let's put a const modifier here and  you will see that it changes to dotted okay i   know they're very small but it's still it is still  there okay so right after this we're going to do   this one okay but i think we also need a space  between this dotted lines okay and then we do   row over here and then we do children now  inside the children definitely will have   app layout our column layout which we had  early so i'm going to copy all of this for now   and put it here okay all we need to do change  the text okay so first one is i guess 24   and the second one is already miles okay  great and this one should be say mcdonald knows okay and yeah so with this we are good and then  we also see that we have at the bottom like this   so now to be able to more efficient this  time i'm going to copy all of this from here   to here okay so i'm going to copy this  because these are just reusable so i'll put it   right below it okay all we need to do we need to  change this information over here okay so five two   three four zero miles stays the same and here you  could just simply do the best it could be anything   but it doesn't really matter okay now would come  to our layout over here and we'll see that okay   well now this properties we need to change and how  do you do that now first one was for this one so   definitely we need to do main access alignment  main access alignment that space between and it   should take care of the problem great as well as  over down there so we are going to copy this line   and put it here okay all right great and just add  a constant modifier so as you see if you use a re   uh reusable widget it makes you work much faster  okay all right now this is the time to go ahead   and compare with this layout that okay now we  do see that they have more spacing over here   okay which we don't have so that's one of the  problem and i do see that over here also a   little bit of space and more space over here  but if you compare our layout so this space   especially this section okay so we need to push  it inside as they did okay they posted inside   over here so we do the same over here now to  be able to do this section we need to come to the container itself over here so we can apply  some paddings or margins so here first we   would go ahead and do padding and with the adds  insects okay once again symmetrical horizontal   app layout dot dot get high now over here i think we should  go ahead with with just to be more safe so   here we do 15 and we see that yes it already post  inside a little bit okay now actually i do want   to put a little bit of box shed over here okay so  that's where we do decoration and box decoration   and then we'll have uh border radius border radius  border radius dot circular and then app layout um well it doesn't matter which one you  use in this case is pretty much the same   and then inside this we want to use background  color or color actually so here we do styles   dot bj color okay now let's save it uh not much  change okay and then we want to do a box shadow   now here we will have color so first you do  colors dot red so that we know what's happening   it's good for debugging blur radius so 10 and  spread radius say 10. now let's save it as you see   it's there so there is a box over there now it's  up to you how how you want to show this okay and   i think this is pretty good if you want to show  a box like this because it gives you have more   3d feeling okay now in this case i'm going to use  this one okay but definitely not this color this   color doesn't match so we'll do this one okay now  it's looking a little blurry now that's because of   this spread radius so let's cut it down a little  bit and it's still a little bit strange but   okay so now we want to do this one okay so  now it it looks like a little bit different   than what we have okay and for me i like it  so if you don't like it you can just remove   this so here i'll have this one and then  i want to create a little bit of distance   right after accumulated flight and here we do 20  so this would help us to take care of the distance   now with distance and everything we are done  and right after this we want to go ahead and do   the last section our part one which is get how  to get more miles okay so this is what we wanted   okay now to be able to do that we came out of  our container and right here we do a text widget   so let's go ahead and here would  write how to how to get more miles   okay and then we'd apply styles to it and here we  do styles the text styles and then copy with color   copy with color or copy it actually and then  we do color so here instead we would use our   primary color and then we can also use a bit  of front weight over here and font weight could use 500 that's a pretty common one and  yeah so let's go ahead and take a look okay great   now we want to center it uh how do we center that  well there are many different ways to do that   so we'll just go ahead and simply wrap it  around center widget and hopefully it'll do   the center for us and actually it did and then  after this over here we want to apply a bit of   spacing so here we do this one and maybe 25 is  better okay now we get a distance and yeah so this   this section is also great what else and in future  if you want to be able to click on this so just to   wrap it around and the widget which is called  inkwell okay and then once again on tap so here   text you are uh sorry here we do print method not  this one you are typed okay now let's uh tap on   this and you'll see it says you are tapped okay  all right great now with this we are done pretty   much done with this section uh all these files  hopefully you have learned a lot of things and if   you did please don't forget to share this tutorial  and don't forget to smash that like button   and i also work hard to make this tutorial so i  hope you you'd get me a coffee and buy me a coffee   or a dollar payment which would keep me motivated  doing more tutorials in the future thank you