hello everyone assalam alaikum this is a flutter absolute beginners course and this is a course for flutter 2024 and in this course will cover flutter and dart using flutter and dart will cover complex UI the complex topics would include class Concepts Constructor inheritance stateful class stateless class widgets reusable widgets and then more on the Dart side will cover more about list and map different iterations map and Json and how to process map data and many more at the end of the course You' be able to build something beautiful you'd be able to build a homepage UI like this which is complex and then over here you will have your search screen and then after that here you will have ticket screen which is very Advanced and complex UI and then eventually you will have your own profile page and in the course we'll also see how to do navigation or routing that means that if you click on different part of the screen it will take to other places or other part of the screen or other part of the app so that would be very exciting apart from that we have also covered three main State management system getex block and River pod but by the time now if you don't know about them it's okay so take it easy I'll cover everything step by step we have also covered routing and navigation which I have talked before at the very beginning of this tutorial we have started with installation that means we'll cover installation how to install so we have done a step by-step installation of vs code flut SDK and Android studio and not only that we have covered how to set all the complex environment variables and how to get them up and running anyway throughout the course you will see we have covered a lot of quizzes and assignments to solidify your flatter learning and then along with this along with this of images to solidify your further learning because if your beginner to flutter sometimes it could be scary the ideas the concepts but as you can see we have used so many different types of images to give you better understanding of the visualization of flutter application and how everything works together So eventually end of this course you'll Master flatter learning okay so this is our app when you start it up you'll see like this and you can scroll you'd be scroll left to right from here and the same you'd be able to do for hotel screen or hotel sections and at the same time if you click any of this over here it will take you to the detail ticket screen page now the same for here for example if you're moving from Daka to Shanghai so here you'll see from dhha to Shang and all the related information not only that You' be able to view all the tickets okay so these are a lot of tickets and once again if you click anywhere you'd go to the related screen on the detail page and the same for hotels so here you will have hotels and then you can also click on this you could view more images like this and then over here you'd be able to scroll up and down and you'll see there is a beautiful animation you can do less you can go back all right now you'd be also able to view over here so here you'll have more hotels or related information and once again you can click any of them and the same effect goes and a beautiful animation eventually so we have covered everything in depth and of course you will have your search screen over here and then your ticket detail screen and your profile okay so the very first thing we'll do we'll go ahead and install vs code so let's go ahead and type in vs code and click on the very first one and then over here go ahead and click on this download it somewhere I have already downloaded it so I'm not going to download it again and then the next thing we want to do is flutter SDK SDK and then I'm going to come over here this second line where it says that flatter archive SDK archive and then from here I'm going to download the latest version and once again I have already downloaded it so I'm not going to do that again so go ahead and download it and after that over here we are going to download Android Studio let's go ahead and do that Android studio hit enter and wait for it to be loaded and then click on the first link that you have and let's pop up and click download and then all you have to do accept the agreement go down click yes I have read it and click download and then wait for it to be downloaded and after that you'll see you have three of them in downloaded folder and this time we're going to first start with vs code we'll install it and then we'll move ahead with others so now let's click on this vs code dual time or twice and then it's going to start installation let's accept it click next next and next with this we're going to continue but I think I have forgotten to mention or click on the start as a desktop icon or create a desktop icon let's go ahead and select it now click next next and next so now it's actually installing and it may take a bit of time depending on your system and we are done so now it's going to pop out with the vs code UI so let's wait for it so here we go this is our vs code well in next section we're going to install flut SDK open up your V code and go to new terminal and then over here we're going to run flutter doctor once again we're going to make sure that our setup is correct and once we see the setup is correct we'll go ahead and install two extensions one is a flter and another is Dart we need those extensions to create flutter project in vs code now you see that everything is fine now click over here on this button and we'll inst stall this two extensions so first come over here and type in flatter make sure that you type it correctly and then go ahead and install this one the very first one here you will see an install button click on that and install I have already done it and then type in Dart and once again select the first one and over here you will have an install button go ahead and click on that I have already done it so once these two in extensions are done installation we'll go ahead and create a folder named flutter project so come over here and create a new folder called flutter projects and within this folder we'll store or save our flut projects now this will hold many apps in future anyway so once this is done our job is to go ahead and open it to open it come over here view command pallette and type in flutter now once you type in flutter choose the first one and then over here once again choose the first one application and then it would give you a popup window and from the popup window select flutter projects the one that we created and click this button over here and now give it a name give it a name ticket app and this is our actual project name ticket app now over here it will go ahead and create this flutter project for us and as you can see that it's running over here and then on the left side we see that project has been created and this is our main. Dart and main. dart is the most important for running flutter project but now our project will not run yet because we need to go ahead and create an emulator or virtual device to do that you need to open your Android Studio from Android studio will go ahead and create emulator or virtual device to create an emulator or virtual device first make sure that your Android Studio is open and then open your project which is ticket app let's go ahead and open it from our flutter projects folder ticket app this one drag and drop on Android Studio drag and drop it on Android studio and once you have done it will open and make sure that on the left top side you select project project and you will see your ticket app and within it you will see the live folder and select main. Dart and from here we'll create a virtual device to create a virtual device click on device manager and here at the top you will see that create virtual device the plus icon and select over here any of them you want in my case I'm going to select pixel 8 Pro and this would be our virtual device click next and over here if you see any message like that you can ignore this and then click this download button you make sure you you're downloading it and now the downloading may take a bit of time and you have to wait once the downloading is done we'll be able to start our emulator so wait until the downloading is done now it's done and once again over here make sure you select the downloaded one this one and and click next and you may change the name if you want but anyway so let's go ahead and finish and here you will see your virtual device or emulator I have created a few in your case you will see only one whatever you have created go ahead and click on this button and then it will start your emulator and once the emulator is started you may go ahead your vs code and over here Run start without debugging it will start and make sure the bottom you select over here that button and based on that you'll see that your emulator is start and your flatter project is starting and after that over here you see that our emulator is here and click on the button and it's going to continue to increase the number as you see so that's how you run your first app go ahead and get started make sure that your Android Studio is open like that and then over here we're going to go ahead and create a new flutter project so I'm going to click on this and then over here in general the SDK path should be selected automatically this also means the folder where you have installed flatter so that path so you need to make sure that that path has been install sorry that path has been correctly given over here once again so this would be somewhere here so I'm going to come over here and then we'll see that this is flut dab and flutter like this so we are referring to this folder over here okay so I'm going to click next and over here I'm going to give it a name okay here I'm going to say ticket app all right so make sure that you give the same of course you can name it anything all right so at the same time you make sure that you have underscore that's the recommended way to do it but I believe you can also do like this but this is not recommended and it looks ugly so you should have underscore and whatever the name you want to have uh in front and end okay all right and this where your project would be located all right okay so make sure that one anyway so this kind of naming is called snake case naming because it's like a snake all right okay and after that over here we don't need to do this because uh and flatter is multicross platform app but here we're just going to focus on working on Android and iOS mobile apps not really for Linux Mac and web or Windows and uh one more important stuff here in general because this is a very starter course or app this should be okay but if you want to use it in real world app real world production app or in the real world this name has to be unique in general it would be using your domain name so this is our domain name or my domain name device tag and then com so when it comes to organization name it starts from the end so when you type on the browser you might do the best.com but for creating flutter project organization name Comm or or or CN or whatever the end suffix is that goes or comes first all right so that's it so now after that we're going to go ahead and click finish so it's going to create our app all right okay all right so the app is uh the project has been created actually and I'm going to make sure that I create I select the project folder so make sure that you select this one all right and after that that I'm going to make sure that I have an iOS simulator selected all right if it's not selected first you go ahead and create one from here and then select it and then it's going to show up over here but at the same time if you want to run on Android just pick one of your simulators Android emulator from here and it would show up here somewhere then you select this and you are good to go so let's go ahead and restart our app now this may take a bit of time so here we go so this is our default app and actually this is our app from our default project we just created it and nothing has changed so far project has been created I'm going to continue over here and give you basic introduction of this project folders now at the top these two files uh the files that starts with DOT we can ignore them and then we have this Android folder we can open it up and here we see app folder and then also other folders now in general when our app becomes complicated and if we are going to connect with many third party services for Android phone or for Android apps we need to make a lot of changes within this files mostly this file and this file and at the same time we also make changes in our Android XML file which is actually called Android manifest XML this file okay now for now we don't need to touch them so we'll keep them aside once again the changes you make in this folder they reflect on Android apps now similarly we one we'll have one for iOS apps so most of the time the iOS apps if we we want to make changes on iOS version now over here we have to make changes or add new files and in future we'll also see that there would be pods folder p o DS pods we don't have it now so these are some Advanced steps we don't need to touch this for now now in between these two folders we see build folder actually build folder is generated when you run your app compile it for example I can go ahead and delete it okay so let's go ahead and delete now the build folder is gone and now if you go ahead and run your app here we'll see that soon a bill folder would be created let's see if our app is running or not okay okay right now it's restarted and the build folder has been created so in general we don't do anything so this is autogenerated most of the time when you move your code around you want to skip this build folder because it's too heavy and it's too big and after that we do see that our lip folder now lip folder sits at the heart part of flutter project Li folder is the folder that would contain every source code all the code that or the source files that ends with DOT doart all of them would be inside this live folder and as our project grows we'll see that there are many more folders inside this live folders and we will make changes and entry point of our flutter project is this main. Dart file now this is the entry file and entry point and among them this is the most important or core function main is a function and this is actually entry function we'll see this things later tutorials and then test folder now test folder is is for flutter test driven development which means that if you build an app if you build functionalities it's better you go ahead and test those things but since we are not going to test any of these things in our application so we can also go ahead and remove this and it's not going to create any problems okay you can keep it you can delete it now I have other tutorials how to do test so once you're done with this tutorial you may go ahead and take that one now there are a few other files and among them the most important is this pope. yml file now this file has your project configuration settings like your project name basic description and Publishers name and your project version and most importantly flutter SDK version and this is the latest SDK that we are going to use okay all right and then there are dependencies that our flutter project depends on so here are the dependencies files now very soon we're going to install a lot of plugins so that our app we can build fast and those plugins most of them would be under this dependencies section and we'll see them later and these are Dev dependencies which means that during development time we need some plugins plugins that would help us to develop faster we'll keep under this section c s and over here we also see flatter and now inside under this Mark we can add our resources and assets so this file we're going to come back later again and add more stuff to it all right and then there is another one which is pop speec do lock now this file in general we don't touch but if there are some dependencies mismatching if sometimes we delete this and it's generated later but most of the time you don't want to touch this all right so that's our basic flutter project introduction and later we'll talk about this whole main do Dot and some of the concepts and the code is here we're going to go ahead and take a look and try to understand okay well in this part first we are going to save our project in get repo CU every time we make changes we want to save the repo so that in future we can use it easily okay so I have already created uh get repo from here as you can see so if you have a git account you can go ahead and do that but this is not my mandatory but recommended if you have a repo where you save your code it's great and you can always go back and see the changes and the differences anyway so I have created it now I'm going to upload my code to the Rost so I'm going to follow this command all right so I'm going to open up my terminal and uh after that I'll just make sure that I'm in the root directory of this project okay so first I would do get in it all right and then I would do get add the whole project everything has been added and then over here I'll have this command where it says that get Comet uh first comet so let's go ahead and do that okay and our next one is this one okay let's go ahead and uh add to our uh remote origin so with this would be connected to this rle link okay and then the last one is this one okay right so the benefit of doing this one is that now every time we make changes somewhere in our code we'll see that there are this blue lines at least in Android Studio okay so I highly recommend follow Android Studio because it's very flutter friendly so with this you'd be able to see the code that you have changes okay for example if I go ahead and remove this I know that over here I have removed something now if I go ahead and hit enter the blue lines the green line means I have added something this Orange Line means I have removed something and I like it it's very user friendly and it helps you to keep track of the changes easily seeing is that we are going to clean up this Sol code because here we do see that there are a lot of comments and how to do that well there is a trick to do it definitely you can go ahead and remove them manually but there is a trick so I'm going to use controlr or command R if you are on Windows use controlr if you're on Mac you can use command R so let's go ahead and do command R and we should make sure that the file is selected and now we have this and after that over here at the top we could do this one so you see each of the commands just starts with double slash so slash okay and then Dot and Then star and after that new line n okay so when you do that after that you just click replace all but we need to make sure that we select this one and then replace all and here it is it's so beautiful okay so now it's cleaned now of course over here it messed up with the format and how to work with this one well actually it's easy so you might have it like reformat the code with dot d formator so all you need to do select the file right click and click on the this okay now it looks more beautiful okay so yeah that's how this reformatting works so if you want to remove code so anyway if you want to remove something you have to have this uh removing thing in our case we are removing double slash and then dot star means all the comments or all the double slash and the slash N means everything after this comment everything after this double slash it means if you have some empty space Also remove that one okay and here we are saying that whatever is there has been selected remove everything okay with this emptiness all right so that's how it works and make sure that you select this one as well okay and that's how it works okay so now we are going to go ahead and start coding and understanding so next hour or like so would be pretty much understanding about how flutter works and definitely actually how Dart works okay because flutter is written based on Dart language and the entry point of Dart language is main function this one just like any other uh programming language out there like Java or PHP you have an entry point so this is our entry point and everything starts from here okay and now this app is alive for example if you go ahead and click on them it would work actually but of course if you go ahead and remove or restart it actually it' be gone okay all right now one thing let's go ahead and do that remove this and anyway rest your app and you will see that you click on this it's gone okay in a sense because it's not reactive it doesn't work anymore because inside the main function run app is our entry point actually main is entry point and another entry point is this one now this one is for flutter framework to work in our case if we go ahead and print here we say hello Dart all right and then if you do it actually you need to restart it so here we do see that hello Dart okay so main function is the entry point for our Dart language not and at the same time this is an entry point for a flutter framework okay well of course uh even though it's not there the UI is still visible even if you restart and even if it's not there the UI is still there the reason is because we are inside flatter ecosystem right now so there's always a default value okay so everything is default right now this one even if you don't give anything it'll still show you okay so that's how it works now our main function Works without this so next we'll understand what is called class and extending classes now if you're very new to programming or flatter this may look scary so next 10 minutes I'll give you an idea what is class and what is uh extending now before that I do actually I'm going to uh comment that out so I'm on Mac I'm going to hit command option and slash so it's going to do or comment like this so if you are on Windows you have to do control alter slash when I say slash this slash so you have to hit control alter slash anyway so now let's go ahead and uh learn a bit of idea and from here actually our actual programming starts and one thing though in this tutorial you'd be actually building flut as well as a dart skill a lot of B beginners they skip the dart part and end up learning a little so would heavily focus on Dart and flutter and every time a new flutter concept comes up like this we will cover the dart concept first and then we'll learn the flatter one more important concept before we start editing our code is understanding this uh Constructor thing and what is it well a lot of you might already know it but I'm going to cover it briefly but if you have more questions you can always leave questions now we do see that here we have two classes they this one extend the other one okay now there is something called abstract class okay like this now when you define an abstract class you can have same properties but in general you shouldn't have the body of a method okay so when you have abstract class this abstract classes just work like you know blueprint for child classes one more one thing though like abstract class itself still works as a parent class or Bas class so similarly it will have a child class so this is a child class so car class extends the vehicle class okay all right and then this class itself has its own properties now all these properties once again would be would be able to extend or override actually in our child class okay all right and one of the properties of this uh abstract class is that if you try to instantiate it you'll get error for example ver V call let's see so as you see here we have an error abstruct class cannot be instantiated try creating an instance of a concrete subtype so it's telling you over here go ahead and make this class a parent class of a child class and use that child class to create an instance like we did early so you cannot work like this then someone may ask why do you have this abstract class once again I said that in abstract class abstract class the work as blueprint okay which means that there are some given criterias properties and uh child class can use them and child class can also add more on the top of it so abstract class works as the base it's the base and on the top of it you add more and more stuff okay so that's why we call it abstract class because it's a blueprint okay but it doesn't really do anything like when you create a building the building will have Foundation underground right without that building without that Foundation your building will not stand right that Foundation defines how tall that building should be and how strong that building should be right so that's what the abstract classes do at the same time just like Foundation this also works as a parent class like when you create a building on the top of foundation we create more and more layers so we have abstract class on the top of this we may add more functions in our child class for example here you can have a class sorry you can have a method okay you can say car type okay that's it and here you say uh land Runner whatever it is okay so it's just a type type of the car okay but this one is not defined over here okay it just defined within this one so we have WNAM and at the same time we have car type okay so this is not going to work so what you have to do here you have to save our car and car and then we'll not have any problems so here we could say car dot car type as you can see we can say car. wols type or Wes num okay it's still going to work as you see over here it's printed so one of the basic idea of uh programming in a lot of other places to work like this like Java PHP C that you will have an abstract class and it's it's something that you should be doing like this this is a common convention and programming rules okay so most of the time if you app back app becomes bigger complex so you will have blueprint in your app so rest of the app has to follow the blueprint and work on that all right anyway now back to this idea how the Constructor works so this is something called Constructor okay so now you have a class name and you define a method without the body and the same as the class name that's called Constructor so this is our Constructor okay so over here this vehicle itself is the Constructor okay why because over here you do see that this is the class name and the method name is also vehicle so when the class name and Method name becomes the same the method name is called The Constructor of that class so we do have a Constructor but why do we need this thing in fact everything works without this Constructor right now see in this vehicle I said that whose's number is 10 right what if you don't want to Define this value over here okay of course now it's going to say well this value must be initialized now over here you'll see that okay null non eval instance field WS must be initialized okay so when we assign a value like this any value is called initialization but now over here uh this one it says okay this variable value has to be initialized so one of the ways we can do it over here okay we like this and this is still work but now this would cause problem in our child class now it would say okay in child class you need a Constructor like this this exactly the same thing that one we see we have over here okay now of course with this this is a problem that it created a new problem what is the problem the problem is that well this child class itself uh has a Constructor as well as you can see there's also a Constructor just like this one but this Constructor actually takes values okay takes values parameters when it gets initialized or when we we actually instantiate it when we create an object using this child class it needs something so now you do see that when we actually create an object we call the Constructor you can understand it like this okay now this Constructor has this parameter that we need to pass to it otherwise it's going to throw an error so here we can say four all right now let's go ahead and run it so we see that number is four so if you have a a Constructor in your abstruct class and that Constructor takes uh parameters and then at the same time your child class has to have that Constructor the same way the parameter should be there otherwise it's going to create an error now the benefit of having a Constructor is this that you can pass value the way you want okay why say for example you want to create another class so let me go ahead and copy this okay all right say over here you might say that plane okay okay plane type all right now what about this planes over here okay how many cars how many walls should it have so here I'll say ver plane and plane so now a lot of planes they might have only three wheels small planes okay so here would say plane. WS Nom now go ahead and print that okay now of course we need to change it to planes Wheels number okay planes Wheels number so this is what we see over here so once you have an abstract class this could be blueprint for all of your other classes and at the same time you can customize each of your child class based on this blueprint so we are still using WS number of WS but for each child classes they are different now how it is possible it's possible because our child class has a Constructor and our child class has a Constructor why the reason is because over here our abstract class as a Constructor and that Constructor takes something all right so that's how things work over here so with this we see that the similar idea is implemented over here so well this is a child class child class is extending this stateless widget class the stateless widget Constructor takes something like this and that's how and that's why we have to pass super. key something like that just exactly same over here we have passed all right now with this I think we have good understanding of basic classes and inheritance as well as abstraction and concrete classes these are called con concrete classes concrete means solid okay and this is called abstract classes and extending on abstract classes is called inheritance so car class inherited vehicle class plane class inherited vehicle class and at the same time we have better understanding of how Constructor works so in next section we're going to dive into this section and start editing so now by this time we already have a very good understanding of what is class abstract class what is inheritance so we don't need this now so we can go ahead and remove them so let's do that okay and as well everything from here let's clean it and now let's run our original app and let's do something exciting and let's look look at something exciting okay all right so everything is back with this life you might not have the same but anyway so earlier we learned that this run app run app actually if you see so it takes something in its argument so what is it now it takes widget okay it says that this is a widget so whatever you have to pass to it has to be a widget now what is widget in flut actually every class is a widget when you write flutter code like this is a flutter code and then in general every class is a widget okay but of course uh to meet the condition every class to be a widget you have to either extend this stateless class or stateful widget class this stateless widget or stateful widget when you extend them then every class becomes a widget okay widget means part of the screen or UI that you can see like this is a widget okay so if you have more of this there would be more widgets if you see a text over here like this is this text is a widget this is a widget of course this section is very different this doesn't called widget this is called abar okay so remember in flut pretty much everything is widget every class is a widget and a class to be widget that class has to extend the stateless widget class or stateful widget class by saying that one of course if you extend this stateless widget or stateful widget you have to override this build method okay in both cases you have to override this build method so that's what we might see over here so here we do have this build method method okay so this homepage is uh extending stateful class and over here we override another method which is called create State and this method eventually actually takes a class so as you can see this is a class and then this class eventually has this build method which we override so the idea is as soon as your class extend stateless widget class or stateful widget class you have to have a build method okay so this two thing I mean this thing is compulsory all right the build method itself so that's uh the thing that we need to understand there are more things that we have here and we'll cover them later otherwise it' be too theoretical now then what is the difference between stateless class and a stateful class all right okay so so from the meaning from the word itself stateless widget class you have to know that you have to understand it doesn't have any state what is a state state means that where things changes a lot of things happens you get to see State means condition status situation so which also means that it doesn't have any living condition which means that it's not alive you can feel like it's dead okay on the other hand stateful which where a lot of activities happens okay so whenever your class is uh extending a stateful widget class your widget also becomes stateful remember now this class is also a widget right whenever you extend stateful widget class your class itself becomes stateful so I can say this class is stateful and this class over here my app is stateless okay okay all right so that's what you have to understand so that also means that right now if I say have a variable somewhere here or say somehow I declare a variable ver X here Z and I want to change the variable on the UI and show it um it won't be responsive which means that if I change the variable in run time and I want to show it here the changed value we will not see here okay that's one thing now with this we'll see more examples in future uh we'll have more live examples where it'll make more sense okay so with stateless widget class the idea is if you have a variable or UI you want to change and redraw the UI with the stateless class itself within the declared variable you cannot do that okay you might need other mechanism but whenever your class is a stateful class in this case this one and you somehow change the variable their value and you get to see the value the changed value immediately now here actually flutter official uh site has given us an example so this is our counter variable value zero and then somehow now we change this value so when we click on this button this methods get called and as this gets called this line gets executed and then this value it changes and we see it immediately over here okay so let's go ahead and click on this so as you see the value changes and we say it now the value changes is actually we can also show them on our terminal let's go ahead and do that um over here let's come over here inside this print inside this set State method this set State over here so we say the changed value is okay here counter we are printing it to our V uh terminal over here okay all right so now let's go ahead and change it remember when I click on this this button we'll talk about this button everything later but let's get excited about it so here you'll see so the value changes we say it here but of course if I put it down actually You' see the changed value live let me go ahead and do that okay all right let's try it one more time now it's currently 0 0 and if I click on this this value would increase and then over here will print it so as you see it changed immediately like this okay so the point I'm trying to make over here if you have a stateful class then you can if you make this kind of changes in general you'd be able to see it on the UI on the screen but if you do the same inside a stateless class you'll not be able to see that even though you're able to see the value printed over here but you'll not see it that it works on the UI which means that we will not be able to see it over here on our screen so that's the biggest difference okay so earlier I said that stateful class like this one my homepage is a stateful class then it makes our screen scen live active with stateless class it looks like our screen is dead nothing is happening okay like that so that's how it works okay and another big difference is that when you have a stateless class inside the stateless class you cannot use set State function okay set State function could only be used a class that is stateful like in in our case my homepage is a stateful widget class so that's why actually we are able to see the changes I mean and as well as we can use this one okay set state so set State we won't be able to use inside a class that has stateless widget only within this okay so this is the biggest difference between a stateful class and stateless class okay now we'll have more examples on stateful class like this okay so right now we already see that we have this button so where is this button now I know there are a lot of other things we'll be talking about them later okay so let's see that how stateful class works over here there are tons of other things that we need to learn so we be learning step by step don't worry okay so now over here you see that uh we have something called this one Floating Action button so we can just cut this one I'm going to select this and then here I'm going to put something like something you call as a row don't worry if you don't know what it is just type in with me because I'm going to explain them soon all right and then I'm going to write here children and then after that I'm going to put this one one more time and I'm going to put it another time okay one more time so to Total two times so we have this one and then this one and this things okay all right now let's go ahead and click on this hopefully it would be able to help us solve it I mean save it actually when you click on this one so it says hot reload you don't have to always restart when you have UI change you can just click on this and it would update the UI of course these two things are together don't worry once again in later tutorials I'm going to explain everything right now come over here and then right over here you could write something like this called main access alignment main access alignment write again main access alignment remember it's capital letter then do Dot and then here we say space between and then do it like this so we see that they went too far from each other okay like that now it we could do more styling but it's not important right now okay and uh over here instead of add I think we could do remove uh it would still work okay and instead of writing increment here we could say decrement decrement and over here we can also say decrement all right now of course this doesn't exist this is going to throw us error now to solve this error we can just go at the top and then we're going to come over here and just exactly down there the way we wrote we can write here decree INR and the arror should be gone in both places so earlier this one was referred by this and then this one is referred by that okay all right and then over here I'm going to do minus minus okay so when we click on this button is going to increase the value when we going to click on this button it's going going to decrease the value before we do that let's do hot reload and you see the icon changed okay so we're going to click on this this method would get called we're going to click on this this method would get called and both of these methods are actually over here inside something called Floating Action button widget this is also a widget okay all right and it's inside a row and which is assigned to this Floating Action button Floating Action button refers to this kind of buttons that you see comes uh ready made from flatter framework anyway so let's go ahead and do this so our value increases click on this the value increases awesome okay so so that means that it's actually already working okay what I mean by that so now we have two buttons right each of the button is doing different thing and we do see the changes on the UI like over here whatever the way you change and want to change everything should be working all right all right so that's actually a stateful class so our class this one my homepage is a stateful class CL now this class has been called from here okay all right now when a class I mean of course you can call a stateful class from a stateless class and that's okay all right so it just they're connecting with a glue okay they're sticking with each other but the changes happens over here and this changes we see over here the same changes if you try to make over here you will not see on the screen okay so this one is getting cold and which represents over here actually this class so that's how about that's how our stateless class they work and that's how they update the UI that's very important so in next section actually we'll learn a little more about our screen structure and how flutter uh put the layout so we'll take a look at the basic screen structure of our uh flutter WRA Okay cool so one thing you could do we can go ahead and actually remove this things we don't need this and of course we'll get error over here I mean over here so we can also remove this let's put something called text uh let's put something called CH uh sorry we don't need child over here actually I think we can just simply say hello flatter let's go ahead and restart our app and we see things like this and then to be able to view it carefully so let's put something called Center okay Center widget now once again I'm on Mac so I'm putting my car server here and I'm clicking on option okay option and hit enter so on Windows it should be alter enter and it should be working and then I select this all right and then let's go ahead and put const modifier and over here we do see that hello flutter of course this is very different than what we have seen before we had a colorful background but everything has gone okay all right now one thing that now we are learning and you should be remembering that to make a colorful background you always have to have a widget that's called scaffold remember text this is a widget Center this is a widget so widget inside widget that's how things work in flatter so widget's a nest they put one inside another like just now we had only text wet and we saw it was on the top so we wrapped the text widget using this Center widget now we see it in the middle but now we want to have a colorful background but to do that one more time we need to wrap this around another widget called scaffold so let's go ahead and do that scaffold okay now scaffold is very special over here actually here we have this body and inside the body we can put this now here we see at least it's not black it's white it takes other widget okay scaffold is more like you know the skeleton it holds everything together that you see on this UI okay like it makes your UI colorful otherwise you will end up as um black background so that's what you don't want to see now scaffold actually as I said that it holds everything to together and it takes an abber as you can see it takes a body now body is a widget and E is not a widget or maybe it is a widget but special type of widget okay all right it also takes Floating Action buttons it takes a lot of different things okay all these things are the properties that we can twe to make make it more beautiful and interesting okay all right so now we understand that to make our app colorful we need uh this scaffold okay with scaffold you would end up having black screen the scaffold takes body body actually is a widget so if you all if you forget if you ever forget what does a special property do you can always put your carser on it and at the top you will see what kind of thing it is so most of the time it would be a widget most of the time okay all right now it does have other things as well now here it will have abar here we can also do abar and uh here it's saying that if you put abar you can't use const Constructor so let's remove this okay now it wants you to use const at the top all right let's go ahead and do that okay so now we are over here even though we are supposed to have an AB but we don't say it over you don't see anything over here even if you restart it and it's fine now abar actually has a few properties so we can assign these properties to it there are a lot of them and one of the important one is most probably there a title and then we might also have a background color Okay so we're going to do that one say let's go ahead and give it a background color colors. red all right okay now let's do hot reload and here we go so this is called abar okay all right and then over here you also give it a title name actually so title okay and if you forget what it is you can always take a look look it's a widget now of course we cannot just put a string like this this is called string when you have um double quotation and put something something inside it this is called string so string is not going to work it's saying that you need a widget one of the most common type of widget is text widget so here we can say text widget we can use a text wiet and here we say flotter title okay all right and once again it's recommended put a const modifier and hotr load and here you see the flutter title but of course you can give it uh color and that's fine we don't worry about this on now we'll be looking at this later okay so step by step we are progressing and understanding how whole things work so that this is it so you will have scaffold in at scaffold you will have most probably abar and most of the time you also have to have a body you may not have abber and that's okay some screens you might just have complete height in that case you might not need a bur but body is something that you always need so now we understand scaffold and then what is this uh material app what does it do now in fact you may think of like this so why don't we just uh put this one this one over here all right and let's go ahead and do it and here we get error now if you read the error carefully you can try to make sense of it it says that no directionality weet found Rich Text weet require directionality widget ancestor so it's saying that okay well this kind of text widget and it needs an ancestor but you don't have an ancestor okay that's what it's saying and then it says that typically directionality widget is introduced by material app or widget app at the top of your application widget tree okay well all this means that you should have a met matal app in your application and it's saying that you don't have this so that's why you are getting this error okay so now we can have material app let's go ahead and do material app material app okay and then if you hover over on it you will see some properties one of the properties is home okay and home itself takes a wiget so here we could do home like this remember text is a widget Center is a widget now we can put it over here now we see that hello flutter like earlier what we have seen so the idea is every flutter app has to have one material app so material app gives it's like the life to your application scaold holds everything but before even if you hold everything but we don't see anything on the screen if we don't have material app so we need to have scaffold okay sorry we need to have material app first and then scaffold okay so here we could do scaffold and then here we say body let's put it there and then we'll see that our screen is beautiful okay and that's how it works so the idea is your whole app at least have one material app in general actually only one material app and then your screen should have scaffold if you want to make your screen colorful okay and then if you want to make your uh abar you should also use abar over here okay otherwise you'll see that nothing appears on the screen and of course at the same time you can give it a background color here colors. red all right okay so metal app refers everything that you see the you can also see that it holds everything okay and since that moment on you will have your scaffold so scaffold is something that you already see on the screen okay so material app is something that lies out of the screen holding the whole screen and scaffold is more like the screen that you see everything and inside the scaffold you will have abur which stays at the top you'll have body which stays in the middle okay now let's take a look from another picture so that we understand how things work so here we see you might have your main app which is the entry point then your run up and runup takes a widget material app is a widget and then and just now we learned that this material app actually holds in the outer level stays in the outer level exactly completely outside okay and then over here scaffold this orange line is the scaffold the one that you see the screen with so scaffold extends until the edge of your screen edge of this page or mobile phone device okay and everything until this Edge is visible that's called scaffold and then as usual you will have abber of the top that's what we see and then your different kind of widgets which could stay inside your body over here so hopefully it gave you better idea how uh your main function your materal app scaffold and body there all tied together so let's go ahead and continue to work on on this now this time actually we are going to build our Bottom bar just like we have AB bar we also need to work on our Bottom bar now to be able to do that let's come over here inside this lip folder and then over here we are going to create a new directory and here we can say base or you can also call it core it doesn't really matter now inside this we're going to put everything that most important as well as the one that we're going to use throughout our app some things like the one that we would be sharing everywhere okay the whole app would be sharing some of the code and that code we're going to put inside this now inside this we're going to create a new DOT file and we're going to call it bottom navbar do Dart so in flut every file you create it has to end with Dart and if you have more than one word in your in your name then you should use uncore all right we're going to hit enter okay and I'm going to add it because I'm connected to get so that's why it's asking you to uh make sure that whether you want to connect it with G or not but anyway let's continue now let's go ahead and do an important stop over here so I'm going to create a stateful class so I'm going to end Android Studio so I'm going to hit St so St would be for stateful or stateless so I'm going to S the first one okay all right now this is a basic template for our class and all we need to do we need to go ahead and give it a name bottom nav bar and that's it but of course we do see that lot of Wiggly red lines it means that uh like these are errors or it's missing some of the items that's why it has now like this Widget the container and the class actually they depend on other libraries libraries means other code but we call it Library so we need to import the other code path which means that like this one depends on certain code and we need to tell it where it is the code so that we can use it here now in general both Android studio and iOS if you hover over on them you'll get like this okay so you just go ahead and simply click and your error should be gone all right now this one actually we can assign it over here so currently we have the scaffold right so we can just replace the scaffold so we can come over here and then we can do bottom nav bottom NAB bar this one and let's go ahead and import it okay so there are a few options that which one you want to use so we are going to import it as Library okay and let's come over here and we do have things like that now let's go ahead and uh restart it now we do see a black screen the reason is based on our previous knowledge you'll see that we don't have any scaffold even though we have material app so if you don't have scaffold it's always black okay but it's still going to work for example if you have child text and here you say hello and go ahead and do this you'll see that okay it's still there but we want a more of a colorful UI so we're going to do scaffold over here okay and then here we'll say Eber Eber and here we'll have Eber okay so let's hot reload okay cool we are back and then here we can have say say title now one more time you'll see that title takes widget so it could be any kind of widget so here we're going to do text to Jet it would say my tickets okay hot reload and this is what we see over here at the top cool now we can also give it a body sorry body and and we going to first put a center widget and then inside this we'll have child and then here we can say ticket info now if you save it you will see that ticket info you can also save it by using command s and on Windows most of it's control s all right so but the given name is bottom nebar so where is our bottom NE here we're going to do bottom navigation bar and if you hover over on this you'll see that it takes bottom navigation bar okay it takes a widget okay so we're going to put a widget over here now it could be actually any kind of widget it doesn't really matter so for example you could do container and here you could do child and text is a bottom now let's hot reload and here we do see that we do see we see something okay so that means that it's working so in this widget section actually you can put any kind of widget but this is not going to work right this is not what we want because it won't look like our original app our original app has four icons over here now we can use container this one to do that but that would be a lot of Hassle and we need to create our own widget but we don't want to do that as flutter has already given us some widgets that's already in flutter framework we can go ahead and use them so one of the widgets that we use for bottom navigation bar is called bottom navigation bar so the widget name itself is this one okay all right now here it's going to throw arror you can always put your cursor on it and it will tell you that what's is missing here it's saying that and it's add required argument and it says this okay add an AR argument and it should be items so that's what it's saying so you can add it manually or click on it it should automatically give you this hints okay and the code all right okay cool now we do see some Wiggly lines let's fix them okay now here we do see this kind of of uh braces and what is it supposed to mean in Dart this means a list okay so if you have list you can put items one by one we can do it here actually so that we understand what's going on so you can declare a list okay so here is a VAR my list so to declare a list you can just have this things this braces and you can say flatter Lal PHP like that so list contains items like this items could be any kind of variable custom type or the type that's already given in flatter like int string or any kind of object okay here you can even print okay like this my list. two string if you go ahead and run it and you'll see that they're printed over here but of course we have some issues and we'll take care of that later don't worry okay so it gives you the idea of a list that how list works so remember list are inside braces like this and you can put items using this comma if you add more items you need to have more commas like this and we already see that that's been printed over here now you can also access them using this operator here say we want to access this uh first item so let's hotload and we should be seeing the first item not here so yeah we printed first item is a flatter so zero refers to the first one and if you put here one is going to refer to the second one so we will see laral as you see okay anyway I'm going to remove this it gives you the basic idea what is list okay now yes we have an issue because it's empty it must not be empty okay now you can quickly put anything in it if you see the arror it says that okay bottom navigation bar this source file the items which refers to this one it should be at least two or more than two so it's doing a conditional check internally and it found the item the list this items list is not two or less okay so that's why it's returning false and it's returning error or Crush like if you come over here we can print the length of a list so you can just simply do your list name do length and then let's run it and here we'll say three it means we have three items now here it has zero items okay and that's why we see the crash over here now if you hover over on this you'll see that it takes list items okay so we can put list inside this now interestingly it also tells you the list items type okay so here it's telling you the type has to be bottom navigation bar item if you see over here this type is a string but here it's telling you that this item has to be bottom navigation bar item okay it's already telling you you cannot put string over here okay anyway so then we can go ahead and put it like this now we see another error and if you hover over on it The Element type cannot be assigned to the list type like this now it doesn't give us enough uh idea that okay what it is and then you hover over on this it tells you that okay it needs an icon Okay add required so every time you see add you need to add something okay so go ahead and do that so let's put icon now if you hover over on this it says that okay this is also a widget and typically the icon widget is an icon or image icon widget so you cannot really put uh like text widget or anything like that it's telling you it you should have either this icon or image icon so it gave us some hint okay now let's go ahead and put icon because that's what it says now because this is a class right so we can always use this curly braces so just like this one this is also a class and that's why we put curly braces like as you can see over here first braces actually and then then well of course it cannot be empty yeah it says that it it is expecting something new it's expecting one positional argument we'll talk about what is positional but here we say that it says it expecting argument so let's go ahead and add all right now I'm going to add icons. home okay the arrow is gone and then it's asking us to add const modifier to remember over here it was saying that we should have at least two items so let's go ahead and copy this and put it here and for now just say over here settings I hope the icon exist yes it does now let's restart our app and we will see most probably another error okay now once again it's saying something about the error this items that every okay this item and it says whatever inside this items list bottom navigation bar item this one it's referring to this one okay should have item. label which means that item. label cannot be null so this one should have item. label if you hover over on this you'll see that label okay so we need to have this label thing and it's a string so let's go ahead and put it over here we can say label and here we can say home and then here we can do label and settings okay there's a Temple let's go ahead and fix that now let's restart cool now this is the first time actually we have really something going on and this is the thing that we created on our own okay so now we have two of this we can actually have more of this and let me change it correctly so instead instead of settings actually we want to do have here search so let's go ahead and do search search button and then here we can also write search and if you do see that over here we have four of these items so we need four of these in our list so let's go ahead and do that so here we can just simply go ahead and copy two times let's go ahead and do that okay now if we do hot reload and uh we see like this okay now of course they are gone but if you have two of them and you do hot reload we see that now this is actually flatter they do it when you have more items just hide it because too many items or NAB bars could collide with each other so in that case we require some basic settings anyway so here let me change it to so we're going to take the first one airplane ticket and then here we'll say tickets and at the same time right now here here we'll have person because we might not have profile icon so we're going to use person and there should be a person icon inside this as you can see it's there now here we're going to do profile we're going to write profile okay all right now let's save it now it's gone actually but if you click on them you would see that that they're still there so in next lecture we are going to style them okay so the current problem is we don't see them unless we go ahead and click on them hard so to get rid of this problem we need to style them and actually the style properties are already given here and we might have background color selected item color un selected item color font size and tons of those things these are all for styling so the first thing we could do over here is selected item color selected item color and we're going to use colors class and it has a property called blue gray so let's go ahead and work on this okay now let's hit reload or hot reload actually and over here you see that we already see our home icon so the first one actually okay by default it's going to show you the first one because the first one is a selected one okay by default the first one is selected one but the rest of these things are still not visible okay now that means our unvisible or unselected items how to make them visible so that's what we want to do so over here we could do show unselected label or unselected item color first actually unselected item color this one and for this one we're going to use const color and then over here we're going to do o x FF 526 4 all right so these are our color code and this is actually int value hexa code let's go ahead and out load and here we go so this is the first time we see all of our items together remember this is only selected these are unselected okay now here the problem is this uh selected one still showing its name or label remember this is the label name okay so we can also set up this one over here here we could say that show selected label fals this one false okay and save it you'll see that it's gone and it's beautiful okay and uh yeah that's pretty much it so with this actually we can see that it's already working so now let's go ahead and compare two of this icons so our icons are very different than the icon that we see over here so you want to be able to use this kind of icon and there's also a benefit of that because we have some extra features that we can use but to be able to do that first we need to go ahead and install this icons uh to install icons let's come to the terminal and do a clear and over here we could do flutter Hub add fluent UI icons and then flutter pob add uh sorry flutter PP get so it's going to add this and then over here at the same time it's going to install it install in a sense that I mean getting all the files that we need and get ready for our project let's hit enter okay cool now it should be added now let's come over here and check our Pops spec actually this one pops. yml file and here we do see that we have uh green section which means this code has been added and we also see that fluent UI icons okay so this has been added so now let's uh come to our class class over here so since that's been added now we can come over here and remove we don't want to use uh this thing over here the icons that's shipped out of flut automatically here we want to use fluent fluent system icons this one and then you can do dot operator okay so here I fluent fluent so we looking for our icons and home okay and we're going to use the second one okay so it should be fine and after that over here we are going to use uh another property now if you come over here and click on bottom navigation bar there is an active icon property so we can toggle between the icons okay so let's go ahead and do that over here we're going to do active icon and then here I would do icon and fluent system icons fluent system icons do IC fluent home fi this one okay cool now I'm going to actually go ahead and copy this and put it uh three more times Okay cool so second one was I think search and what else so I think we also need to change over here like that okay so make sure that icons are corresponding home home search search uh okay so here we do see that we we have an issue here it should be search uh sorry ticket and then person person all right now I guess we're going to have to restart our app because we made a big changes and looks like uh uh let's compare with this yes they already took the effect okay so now if we are on the homepage we do see that just like this icon or this icon is homepage icon but now when we go to other Pages like this uh so this one should change to like this okay so this is our this is the difference between active icon and nonactive icon okay so the idea is when you are selected so it's filled which is actually when you're selected it's showing this one when when you are not selected or like you went to a different different one like this one over here so we clicked on this so this one you will see that that uh it's uh home regular so the idea is selected icons are filled so that's why filled filled filled non-selected items are not filled okay like uh over here you see this is filled okay but we cannot switch between the icons right so that's a problem so in next lecture we'll see how to go ahead and switch between them all right to be able to switch between the icons uh we need to do a little more advanced step and we need to do it step by step okay so we want to be dynamic so as we click on each of them we want to change the icon that means that uh we have to there could be many other ways one of the ways we could do keeping the track of index for example say for example we can assign zero to it one to it two to it and three to it so they will have index and as they have index we can actually change the index easily because indexes are numbers right so then it becomes easy of course uh to be able to do that we need to declare some stuff at the top so here we are going to actually declare a list over here so here we would say ver or we could do actually final over here and then here we'll say my screens or here we say app screens and then here we have a list just like last time I told you like this okay and then as I told you the list could include anything any object as well as custom object and Primitives so here we'll have custom object like text okay now text is a widget which means it's also an object so here first I could say home so and then I think we need to put const well soon we would learn the difference between final const things like that because they're going to show up again and again and it's very important to learn the difference okay so here we're going to change over here and we can say search and then I think that was uh tiets and then profile okay now let's go ahead and I'm on Mac so I'm going to actually do command option L to reformat the code it looks a little more organized even over here okay now if you're on vs code you can right click and definitely you might see something like reformat the code with dart it should work the same okay all right anyway it's been that so this is our list okay the list for changing between this icons which also means that changing between the screens okay so as we click on them we want to go to new screens actually okay so that's what we want to do now where to change actually as we click on this not only the this should change the icon should change screen should change screen I mean this section over here now this this is called body right this is Bottom bar and this is app bar okay so we want to be able to change between this sections so keep this one as it is keep this one as it is pretty much and keep changing from here so that means that over here we need to change and how do we change so let's replace this and let's come over here app screens app screens okay this one and we can put zero over here okay so we are using this index zero to have a property from this list or item actually there's a list list could be uh uh visited using index or they call it iterate okay visited is not the correct word I mean not professional but they call it iterate okay so we are iterating using index okay list is iterated using Index this is our index and now you have to understand another reason why we put text or anything like that because body you will see that only takes widget if you just put here string like when you put anything between this curly braces uh sorry this uh double coats that's called string and you will get error so you have to have what is it uh widgets inside this string so what's going to happen this is a list and this this list contains a lot of objects and these objects are all widgets okay and uh then we are getting objects or widgets out of this string sorry out of this list using index okay so let's go ahead and restart okay now we do see that it's over here that's fine but what I'm going to do to be able to work better actually I'm going to to uh wrap this around using Center widget so I'm on Mac I'm going to select this and option enter Center widget and if you're on vs code you can just select it and then right click you will see wrap around different kind of widgets so you can select Center widget okay and let me see we need to do a bit of change Okay cool so pretty much like this so I'm going to do the same for rest of them Center widget and it looks like this so I'm going to reformat the code so that it looks good so every time you want to wrap things around on vs code in general you have to select the widget and then right clicking should show you that uh wrap around certain things okay all right now we are actually successfully able to show a widget now first time we are able to successfully show a widget from a list okay now since this is index based we can change it so here let's say one restart it we should be able to go there as you see that over here this is search but looks like it's still not selected and because there are steps to do that but now here you see that search has been shown and what if we go to the last index okay okay that's profile which is referring to this widget from our list so right now just now we learned that we can actually go ahead and uh change this indexes and show them but what we did we did them using indexes and manually but of course you don't want to do like this we have to be somehow Dynamic so when we click on them we need to be able to change the indexes right I mean that's our understanding right now we are changing manually and we see that it changes so we need to find a way as we click they change automatically so in next lecture that's what we'll see so now we have a very good understanding that changing index can help us to changing the icons and these things so let's go ahead and do that well first we need to Define uh function over here or method so we'll call it void and we'll have this underscore and underscore means private private means the function that we are going to use only accessible within this class this class is bottom nabar so here we're going to call it on item tapped and then here we'll pass an index index would be int and we'll call it index you can call it anything it doesn't matter now the thing we are going to pass to it the indexes of this list remember zero refers to home one refers to search two refers to tickets profile three refers to uh this um profile right so we need to be able to pass the index okay so as we pass the index uh we need to somehow reflect the changes as here as well and how we are going to do that now to be able to do that we can declare a variable at the top okay so here we can say that change our index uh for bottom NE bar or I would say bottom NE okay so declare a variable okay so here we say ver and it'll be a private variable actually we can do in is specific about it and then selected index so now here we do selected index equal index okay okay so we're going to grab this index and give this index to this variable which is this one at the top okay all right now how to actually send this index to this function right we need to send this index to this function over here how to do that we don't have any direct mechanism do we well actually yes we have now if you come over here and you'll see that there is a function which is called ontap okay there a call back function which means that when you call it does something back for you you call it and in return it does something for you that's why it's called call back so this is a function and as you see that this function also takes in integer and its argument okay so we have to create something that's related to this callback function which means they would work similar actually we already did this one so this would be our represented callback function and it also takes INT in its parameter this is called parameter and things like that this is called argument things like that this is called argument okay all right now our parameter is in so what we could do come over here and we can use the ontap property and simply call this callback function let's go ahead and do that okay cool so now what's going to happen over here this on tap is connected with this ont item function or on item tapped okay you can name it anything it doesn't really matter so these two are connected so what's going to happen each time you click on them click on them then this function is going to get called because remember right now as we did like this this two function or this and this they're connected and how they are connected flutter already takes care of this thing so you don't need to worry about it okay it takes care of everything so every time you do things like this as you can see over here so flut automatically takes care of everything like even over here right and over here all of this things flut does it for you all you have to do follow the steps okay all right so yes that's how it works I mean now we have connected them which means that if I click on that means each time you click on them this would get cold and as this get called the index from this each of them they have index okay this index would be passed on to this function and then we assign this index value to this variable now this is the variable that we can directly use and control on our own let's go ahead and print okay so here I would do print and then here I would say tapped index is Select index all right okay so let's go ahead and restart the app and hopefully we'll see the changes okay so let's click on this okay zero all right and uh I think we have something wrong over here okay we don't need this let's do it one more time and and click on this we see 0 1 2 3 0 2 3 all right okay of course so it's already being printed which means that each time we click on this now we are able to grab the index from bottom navigation bar item remember indexes are automatically created based on the items over here okay because we have four items so we'll have total four indexes these are automatically created and all we are doing over here grabbing the indexes and passing to this call function and assigning it to this variable so with this we have the freedom which means we are able to grab right grab the index cool now let's come over here and also assign the variable so now this way we become more Dynamic okay let's go ahead and click on this okay and uh okay right my computer was a bit slow so it's already reflected over here right okay but the problem is we don't see the changes okay so let's go ahead and click now let's hot load now we do see right so we are progressing step by step if you don't know what I'm saying let's see this so let's click on this or it's already actually selected because zero refers to the first one which is this one okay all right and then if I click on this we know that that's been clicked but we don't see it over here all right the screen should be changing but it is not but if we hot reload we do see that it's changed we are still progressing step by step right click on this index 2 is tapped but out reload and we see the changes click on this index 2 to0 here we see and now we see like that so we are almost putting everything together but still there is this problem first that we have to hot to see the changes right which means like pretty much restarting quick restoring and then we still don't see the icon changes okay well in next section this is what we'll take here we'll see how to change the icon finally dynamically okay so to be able to change the icon as you click as you click as soon as as you click to change the icon we need to use something called set State and that's also called State Management So currently our app state has been changing but we only see them if we restore okay so the state changes we need to reflect immediately to be able to do that we need to use uh function which is called set State Okay so so here this is called set State as you can see over here this one all we need to do put this inside over here let me remove this we don't need this anymore okay so now let's restart everything from the beginning all right now let's click on this and we do see this search automatically okay that's fine let's click on this we do see the tickets automatically let's click on this we see the profile automatically now because of this uh changes over here using set State partially we can update the UI right now every time you have a stateful class this one a stateful widget class you can use a set state to update the UI so set State helps you to update the UI but our icon still not changing the reason is there is another property in bottom navigation bar that we need to have so that's called current index item I think yeah current index okay all right so over here we are going to actually assign the selected index remember this index is being changed as soon as this on item tapped get called we call this on T on item tapped this index has been already changed but we didn't assign the index what we did early actually we grab the index what we did early using this we grabbed the index and put it over here and after putting it you also need to tell the current index okay so every time you grab the index that becomes a current index now you need to tell bottom navigation bar explicitly what is the current index okay because current index could be anyone so that's why you need to tell it explicitly and then the magic will happen so now let's go ahead and click on this beautiful we see that it already changed click on this beautiful it already changed click on this it already changed so we have done a big progress so far so the idea is you need to use both on item and selected index to actually work on the bottom navigation bar dynamically well in this section we are going to create our home screen module now home screen module would be complex and actually there's a lot of artwork as well as design going on now what we are going to build eventually this is going to give you a highlight so over here definitely this is the screen that we are going to build and eventually our home screen class will look like this now inside each of them there are complex code but to give you the idea so home screen would be built on the top of using tons of different widgets over here we just see container single child scroll view container single child scroll view but we'll see that actually there are more nested widget inside this so the first one would be over here using this uh container over here second one this one would be single child scroll view as you can see and this section we will put inside another container and then this one on once again uh single child scroll view we'll remember that single child scroll view actually would help us to move left and right like this one again we would be moving this one left and right so this part would be very exciting and long so get started okay so now our job is to create a home screen like this and learn all the related knowledge regarding it okay now to be able to create home scen screen the first thing we need to do over here uh come to our project make sure that entire project is open and then this Le folder okay right now inside this Li folder I'm going to create another folder and we're going to call it screens so all of our screens would be here in this folder okay all right now the first thing we want to do create a DOT class for this or file actually home screen. Dart like this hit enter and I'm going to add it to my git okay and I'm going to say ignore all right and then over here I'm going to do s then I'll have the option for choosing stateless or stateful class in vs code you need to do state full like this okay all right now I'm going to do state L actually this one and over here I'm going to name it home screen all right errors and let's go ahead and import our library the arrow should be gone and now make sure that our screen home screen the one that we created is bound within this uh app screen lists okay so over here I'm going to remove this and then I'm going to call home screen now let's go ahead and import uh this is as a library over here and uh let's go ahead and restart our app okay so nothing is there because uh this is an empty container so that's why nothing is there but if you go and check others we'll see that uh they're still there okay cool I'm going to close this well in our next section or next lecture we are going to start drawing our home screen okay now to be able to draw our home screen um we have to go ahead with a certain layout you'll see that over here our home screen has uh like uh a layout over here like this one good morning book tickets this one and text and image text an image like that and this is also scrollable actually kind of now in flatter to achieve this kind of scrollable effect as well as as well as putting things on the top of each other you can use different kind of widgets which means different kind of classes that's already in flut WRA now what are those classes well you can actually use uh column widget most probably column you can use list View you can use list view list view. Builder and you can also do a lot of others uh in fact uh there are different ways of doing that also to expand widget things like that okay all right now for now we're going to take a look at the easiest one the easiest one would be using list view now what's list view a list view is same as actually list but previously we have seen in list you can put 1 2 3 4 or any kind of custom object okay all right within list view actually you can do pretty much same but it expects more like widgets rather than a custom type okay well as we work on this we'll learn more which I'll show you later now here first go ahead and do scaold and then over here we're going to have body just like we learned before that it will have body not like this body and inside the body we're going to have list view so if you write list View and then write children and if you hover over on that one you'll see that it takes widgets okay over here once again you see list widget so list view is also a list but it takes widgets as you can see over here you can really put string like this okay it's going to throw an error as you see over here okay or something that it doesn't work with Okay so it has to be a widget flutter widget like a flutter class now if you see over here here this is also a list which is like list view but in this case this is just a string or custom object so in the list you can actually put string custom object or widgets like for example we have seen over here so here we have you see this is also a list and here we have widgets these are all widgets and over here these are all text screens but list view only takes over here as you can see widget okay so that's the difference between list and list View and there are a lot of other differences but most important difference so that's what we understand because over here we want to put uh a lot of widgets okay so that's why we are going to work with this and this would be scrollable remember if you put things like this you even though you can put all kind of things but you cannot really make it scrollable so let's move over here now inside this uh we can put container okay and container is one of the most common type of Widget the container as it tells you that it's like a container it contain things for example over here this UI you can think of it as a container so it contain contains a lot of other things okay like this UI over here it's a container container contains things well then what about this actually this could also be a container but we just don't see any extra colors over here and it is also true for container container can contain other containers like this okay containers could be nested into each other for example if this is a container then this could be another container and this could be a container and this could be a container as well so that's how it works so right after text container is one of the most common wiget in flatter so remember now why we use a container why not a text over here the reason is as containers you get to color them you see if it just a text wiget well it is just a text you can only color the text but if you put container and use container and if you use text inside container or container inside a container then you can color them you can decorate them which we will see very soon okay so this is the reason that why we use container a lot of time rather than text text is plain and boring but containers are colorful and you can style them like for example this kind of complex style has been achieved through containers okay all right so this gives you an idea what is a container widget all right so I'm going to move this as I don't need a container inside container one container is going to do the track all right okay but here I could do this one say hello home screen so now let's go ahead and check our uh design over here okay so that's what we see over here it says hello screen okay now one of the other things that we can learn immediately over here is this one we can have another container and we could do child and then over here and say hello how are you all right okay now let's do hot reload okay so you see we are putting stuff onto each other and this is possible because of using list View and remember as I said early we can also do this using other widgets like column okay remember in flatter a lot of time this widgets like list view is also a widget container is also a widget text is also a widget and earlier I said that column is also a widget there's another one row is also a widget now this things this most of the widgets could be like like this they could be nested inside each other and they always work it depends on your UI and style okay so now let's go ahead and take a look and understand that how we are going to uh style our UI now over here we put list view because we want to make it scrollable we want we want scrollable effect so that's we put it the list view now let's dive into the actual design so here let's understand it like this so we are going to put everything inside a container first okay because with container I can color the background that's one thing okay and inside container I'm going to have uh column the column is more like list view or list view is more like column that you can put stuff inside each other especially you can put things onto each other like for example over here we can divide this screen into many different sections okay all right so in next lecture we'll see and try to understand another important concept which is called row and column okay so here we're going to understand what is called column widget row widget and how they're related to Vertical layout and horizontal layout as you can see well in flatter anything or a direction if it stretches from top to bottom this is called vertical layout now this vertical layout represented by column wet and then anything that stretches from left to right we call them horizontal direction or horizontal layout and that is represented by row widget now both row widget and column widget could be nested into each other which we will see later so like for example over here we see good morning book tickets in the search bar they are on the top of each other so this kind of layout are putting things together together is called vertical layout which would be represented by column wiget now over here we see for example upcoming flights and view all these are two text they are horizontal so we could use row widget to represent them now let's move on to more complex structure where we'll take this section out and understand step by step how how row and column widget plays a vital role in designing your layout so here I took this section of this screen and then divided into various sections and then I have shown the related widgets remember row and column and container they are all widgets okay now over here this boxed area is represented by this one okay the outer layer and the outer layer would be our column widget now why as I said earlyer when we put things on the top of each other we call or use column widget for that purpose now here internally you see inside this column widget this one over here we have this big box and this little box these two are on the top of each other now to put this two together on the top of each other we used column widget because when you use column widget you can put things on the top of each other the way we did over here as you can see so that's why the big one over here it' be represented by column widget and then we have divided this one and this one into two different sections which are represented by this box and this box hopefully it makes sense that why we are using column widget and why the layout is like this all right now moving into further over here if we take this section of the screen we also see that we have um so now this section of the screen actually could also be inside row widget so that's why we have this row widget over here now do see that actually we have two row widgets inside this column widget that's what we have said early that if you have widgets you can Nest them into each other and that's what we have done over here first The Columns this one we have divided into two and each of them are represented by row now of course this totally depends on your UI layout how you think it's not the exact form that you have to follow anyway so the big one we have divided into this two sections and each of the sections are represented by this row widget okay now why we did row widget for this one the reason is because this section of the screen actually we can also divide into two sections like this one over here and it be this one over here so that's what we did so this is our row widget and then inside this we have this section which is represented by this area and this section which should be over here this area so we are putting two things horizontally next to each other so that's why the outer layer or the outer widget has to be a row widget hopefully it makes sense right now the same for this one now this is a row widget which is represented over here now why this is a row Widget the reason is because over here actually you see we have this um icon and search and we actually also have a empty space empty space could be also a widget so this two over here are next to each other so that's why the outer layer has to be a row widget so that's what we did the outer layer is r wiet and then we'll have over here the search icon and search and over here we'll have this uh empty area as you can see so that's how the whole layout works okay now inside this row wiget we also see this one over here and we Tagg it or named it as a column Widget the reason is once again we want to put this two on the top of each other so that's why the outer layer for this two has to be a column widget so over here it would be good morning and over here this would be book tickets like this okay and so that's how the whole things work so when you design a UI first you need to look at the UI and you need to think how you are going to put them and which kind of widgets should you be using for representation once again this is not hard and faster rules to work like this there are other ways to do that as well so you can just practice different ways of doing your layout okay so from now on we'll be using this kind of picture a lot to understand how things work and then we'll eventually start coding now understanding this so actually we are going to go ahead and implement this step by step so let's go ahead and check our code over here now first thing we have seen that we need to have a column widget exactly the one that we have seen in the layout we are going to implement that so here we'll have column widget once again column widget represents horizontal layout H sorry vertical layout now inside this earlier we have seen that we need um well we can put this two row this one and this one inside the column one right let's go ahead and do that now one thing though column is a widget so if you want to put more widgets inside it you need a list okay so widgets list inside widgets list inside widgets are represented by children just like over here we have list view list view take a lot of items those items are put into a list and then you have to represent the list using children and this kind of braces the same over here column column takt items you have to put the items in a list so that's why you have to first write children and then this braces children means the one that would follow this one okay that's why we call it children and that also means that we'll have more than one child okay so those those items each of the items are treated as a child like for example over here so this is a column inside this we're going to put this two now the each of these two are also called children child one child two so we have two Childs so that's why we say children of course there is a generic name children right but each of the children could be using a different widget name so in our case we are using row widget but of of course in this case both of the uh child they have uh they are represented by row widget okay once again children is a generic name okay so exactly what kind of children you have to Define it over here now just now we have seen that we could do like over here text widget okay or like uh row widget over here we have seen that okay we can put two row widgets so let's go ahead and look at that so here we going to do row and then now once again row also takes children now over here we are going to put children over here let's go ahead and do that and then we're going to copy this and put this let's go ahead and copy and put it here we need to put comma all right now we have this uh yellow Wiggly lines so we need to put const modifier hopefully it would work and it's gone okay so so far we have exactly followed this layout column and inside this we have put row widgets okay now what else we could do we also see that within this um first row within this first row over here we can put uh column and container this one so remember first row is our first child inside this column and we can put over here let's go ahead and do that over here column and then of course we need to every time you write column you need to have children and then we have seen that we have a container so let's go ahead and put a container okay all right now if you do put a container you need to remove most probably this one not it's not related to container itself uh which we'll talk later actually so let's go ahead and change based on this okay so now inside this row widget over here let's take a look that what we are going to put inside this row widget we'll have two widgets but of course these two widgets could be anything for now and we are going to put uh text widget okay so let's go ahead and put text widget over here okay here we could say text one it doesn't really matter and text text two all right so this is what we have seen in our layout and we have exactly follow this so one more time let's go ahead and confirm this so this was our original design over here so this is the column which is this one and inside this we have uh two row just this one and this one so so that's what we did over here this and this row and inside the first row we have another column so that's what we had and inside column we'll have children okay so we can put two children over here but I didn't do that but you can put it it doesn't really matter and then next to it we had a container as you can see over here so this is our container this is the container and then the other row over here is this one and we have this two wigets okay now to be able to work better on this actually let me go ahead and put this two text wiget okay inside the column over here okay so now we are all aligning with our design okay now this time let's go ahead and restart our app and see how things look like okay so this is the result we have of course this doesn't look like no nowhere near this one but don't worry we going to step by step work on this so the first well this two over here this two pretty much looks like this too so we are going to change them first we are going to go ahead and change it the first one is good morning so let's go ahead and do that good morning good morning and then second one we have book tickets so let's go ahead and do that so over here we're going to put book tickets book tickets all right and let's go ahead and hot reload Okay cool so now they almost started to looking alike and there are a lot of other things that we're going to take care and now how about this one now this one should be an image right now we are not going to put image yet but we could be clever and do something over here so here we could put width and height say withd uh 100 and then say height 70 okay now if this is a container container has a lot of properties if you hover over on this you'll see that one of them is width and height okay now they are not compulsory so if it's not compulsory in flatter it's represented by question mark so question mark means you may put it you may not put it okay so if I remove this I don't have any error right if I put this I might see something different let's go ahead and see well we don't see anything yet there is a reason what's the reason okay now we need to put a color over here let's go ahead and put a color so here we're going to do color colors. red now let's go ahead and hoto this is what we see so now once again slowly we are starting to look like this guy guy over here step by step changes so what is the next change you want to make the next change you want to make like you want to put them separated just like this okay not so close to each other now you have to remember that okay this and this inside this rowet and these are the two children we need to separate them to separate them we need to apply some styles to this rjet so let's go ahead and do that now of course main access alignment is horizontal alignment for row widget okay if it's for column widget it would be still main AIS alignment but that would be a vertical one so which means that inside row widget if you write main AIS alignment that would be horizontal alignment okay remember that now over here we can use dot operator and let's use space between so which means that create some space between this and this hot reload and here we go wonderful so it started to look alike very good now how about this one okay now for now we can just say all right search icon okay and uh say empty space for now we'll see what we use later but it doesn't really matter okay all right so let's do hot reload okay now we also want to do the same over here we want to separate to them let's go ahead and do that so here main access alignment main access alignment dot space between and hotr load beautiful so the more we do the more we are looking like this but once again we need to continue to style this thing okay so let's go ahead and style them now first we need to style this text and this one the outer layer okay so let's go ahead and do that now of course we don't have the this in our original have this in our original design original design we had this column this is the column right now that's what we see over here so this is the column just taking the whole space left and right but actually we need to extend the design over here a little bit so we need to wrap this one around a container so let's go ahead and do that so I'm going to select this and then on Mac uh option enter on vs code it should be if you click right click you should be able to see this so now I'm going to wrap it around container widget as you can see let's hot reload of course nothing will happen now there is a reason so there is something called padding okay so let's go ahead and create this padding and here we do const Edge inserts here we would do symmetric and horizontal is uh 20 now I know it's a lot of information to grasp but we'll fix that now as you see that things looking a little better the first thing when you apply padding padding happens inside container remember container takes a SP like a box like for example we can give it a color over here let's go ahead and do that colors do say blue okay all right so this is what we see so definitely our container is extending from left to the right completely to this screen but because we have applied padding so padding creates space inside within the container and these are the extra space that's been created now you may ask why the space is created left and right the reason is because here we say symetric symmetric means the same which means same amount and in which direction horizontal direction we said that horizontally create 20 space in inside this container from the container border so this is container border this is container border and horizontally create 20 pixel space so that's it has done over here now in our design we don't have a background color so we don't need this so we can save it now just that was to visualize that one that we need some extra space okay all right so now while this part is great but of course this text themselves they don't look great okay they're not looking good and over here we also see that there is some discrepancy like good morning starts from here but book tickets they start from a little bit to the right we can fix that so this is an alignment issue now remember this part of the this this two sections over here they are a column right so this is by column wiget over here now within this space over here so we have vertical Direction which is like this and vertical Direction inside a column called main axis so this would be the main axis now over here this one for a column horizont Al direction is cross AIS okay so here we're going to write cross AIS alignment and a cross access alignment so which means that horizontally remember for a column cross AIS means horizontal for a row cross AIS means vertical so they are the opposite idea so over here we're going to say start and let's let's put a Comm over here and do like this now you see it got fixed so it's already looking better all right and this two text over here we need to go ahead and uh create some space they are too close to each other now here we could do sized box say sized box over here we want to create Horizon vertical space between these two lines so over here we're going to do height now over here we can say okay we want to create a little bit of space of five pixels so let's go ahead and do that and now there is a little more space Okay cool so that part is working right now how about the coloring if you do see that their colors text size they're all different okay now I'm going to come over here and so this is a text actually this text could be colorized or change or we can assign style to it okay so let's go ahead and do that now if you hover over on this this text itself you will see that there are properties one of the properties is style so you're going to take that one style and if you hover over on this style now you see it takes text style class or text style widget so I'm going to write here text style now every widget is a class since we are invoking a class we need to have this bracket over here right so let's go ahead and hotr load nothing changes because we are not assigning any style to it okay so by default no style is applied as you see this is are all these are all optional this question marks everything over here they are optional so that's why even you put this one and if you don't put this one they are the same all right so no change in style okay so I'm missing the come over here okay anyway so there is no change in style so the idea is you may have your text wiget but you still need to assign style to it so let's go ahead and do that now over here there are few properties that we can use so in our case we are going to use one of the property called font size so here we're going to do 12 okay and then uh um well 12 would be too small so let's go ahead and apply the 17 and font weight okay so here we do font weight this one okay font weight. w500 okay this is the one that we are going to assign all right now let's go ahead and Hot Load and it's already looking beautiful wonderful so now we can go ahead and copy this section and we can put it over here as well okay now let's go ahead and save it and we see that it gets bigger but in our original design it's much bigger and the font weight is also different so let's go ahead and apply to it so here we are going to apply font size as 26 okay and then font weight okay let's keep it as it is all right and then the color should be different so let's go ahead and apply a color so here we do color and we're going to call the color class and pass it a color code so that is o x and let me take a look so here o x and FF 3B 3B 3B and let's hot reload now it's looking much similar like this one in fact these two are exactly the same beautiful so with this we have just learned how to have this color and how to text and style actually how to style our text over here so I'm going to reformat it so with this it's going to look beautiful so now we just saw that we can style our text the thing is that as our app grows bigger we will have a lot of styles like this and every time we have to write them manually but this is not what we want we want to reuse them in fact all of the Styles actually we can save them in a separate file so that we can just directly use them whenever we need them just can call them okay all right now to be able to do that inside this base over here I'm going to create another directory and I'm going to call it res which means rest over here actually rest of them and then inside this I'm going to create a directory and here I'm going to call it the directory Styles and inside this I'm going to go ahead and create a file and here you can say file name app Styles Dart okay so now inside this we are going to save everything and how to save them the convention is go ahead and create a class and over here we can call it app Styles now of course you can go ahead and create Global variables and access them but which is not a good practice so you can go ahead and create a class and using the class name you can access everything from this class from outside so inside this here the first thing uh well one thing you could do you can create a variable and the variable name would be color and we call it primary color and let's go ahead and do that and inside this here we'll have const color and then this would be used as our primary color for our app so which will have FF 68 7 DF so this would be our primary color now over here inside this we need to import this color Library looks like it's not recognizing let's click on more actually going go ahead and import it from this material library or package actually now let's come over here and then let's create a static variable and the static variable would be color type and we'll call it primary color and then primary color primary this one okay and uh now about static const and final we'll have a dedicated section and there we'll be talking about them now let's go ahead and create more of them now you see that over here we have created this text color so in fact we can copy this we can come over here and create a variables static color and here would say text color and const put the color name okay now you'll see that first we can try to change from here actually so here we could do app Styles okay dot text color okay and let's go ahead and see now it says that invalid const actually it's referring to this const over here let's remove that and arrow should be gone now it's telling you okay you can put const in other places because inside this widget if there are Dynamic things you cannot put con before this because it becomes apparent because just now the whole parent was static so that's why you were able to put const here but now this this part is static but this is dynamic that's why you have to remove that and you need to put const partially over here okay cool so that's what we learned now over here let's go ahead and create more static variable so another static variable here we could create of text style because we are going to use this text Style over here and here so in fact we can go ahead and create variable for them so here the first one we can say headline style and one so headline style one which means big letter now for this one actually in fact we can copy everything from here so let's go ahead and put here cool now we created this we can copy this and uh we can just simply go ahead and remove this okay so here we can say F Styles dot headline one beautiful so you see this file become much more simple right now cool but of course in this case we don't need this this one because it's in the same file over here it can access directly we don't need dot operator okay so now we can just simply go ahead and copy this and then for now we're going to put headline three and text size is 17 and we don't have any text color for this for this one we are going to use default color so it's not Dynamic so over here we can put const because it's static when a widget is static this is in front of that widget you can put const but like this widget this is also a widget this is not static why not this widget depends on this one so this one is coming from outside source so that's why it's not static we call it dynamic because it could be changed anytime theoretically so that's why it's Dynamic you can't put const over here now let's come over here and also remove this here we can say app styles. headline three okay so now more and more our app is looking great and professional let's go ahead and work on this okay cool so which means that this part is already working and exactly like this so now we just separated part of our code and uh then we' be able to actually work efficiently on this okay so now we'll go ahead and uh work on this one this a container and we already have a basic structure for it so remember that container has WID and height and of course you can design it now right now we're going to design it so that it looks like this well let me put up our app from here okay so we' be getting ready for putting an image over here okay and uh how to do that at the same time notice that we will have border for it okay okay the image itself all right now we can put an image border but at the same time we can put an image inside a container okay image itself is also used with image widget which means that image widget we can put inside a container and how to do that but of course to put it inside a container we have some conditions or code to use you cannot just write here image okay you see that if you work on container you will not see something called image over here so we can put that but we need to use a mechanism for that okay so first go ahead and work over here so we want a rectangle so here we're going to do 50/50 so 50/50 would give us a rectangle and uh let's save it and we see it's already become smaller the next thing you want to do use borders okay now how to use borders over here well to use borders of course once again you also cannot find Border over here but what you find is called decoration so it's a plain English decoration means decorating making it beautiful styling it right so that's what we are going to use decoration okay looks like we are not getting that so let's put it here and um then I can just uh type it in all right and if you do see hover over on this it takes a it's a type of decoration class widget okay decoration class widget now what property to use for it let's see what class to invoke well here it did say decoration but actually you cannot we in general we don't go ahead and use decoration class for it the one that we use is called box decoration this one okay and while it wants con modifier we can ignore that okay let's go ahead and check the other properties so one of the properties over here we do see that called border radius so we can go ahead and assign border radius border radius okay all right and then within the Border radius we can use border R sure why my flatter lter is not giving me hints okay circular we'll check that later and here we can use 10 okay now let's go ahead and hot reload and we see a crash and let's go ahead and read the crash again so it says it cannot provide both a color and decoration so you cannot have color and decoration at the same time this color and this decoration you cannot have at the same time that's what it's saying so we can only use one of them that's the first thing it's saying that but we have both of them right so of course earlier we have used this one for uh debugging of course here it says that to provide both use decoration box decoration so it's telling you that okay so if you do want to use this color okay now you can just pass in the argument of this box decoration widget class over here you can pass it from here but not really from here okay so it's telling us we can pass color inside from this class okay so let's go ahead and put it here and now you'll see that if you hotra load it's gone the error is gone so that's how you go ahead and read errors and fix them okay so most of the time reading the error carefully helps you anyway so now it's looking more and more beautiful I mean as you can see over here we are looking more alike and what's next well now this time actually we want to show the actual image right now for images first we need to do a bit of setup and how to work with the setup first you need to come over here and then inside this over here we need to put inside the root folder over here we need to put our assets assets means our images or related stuff to it okay so now if you go to the resources section of this lecture you'll file a folder where it says that assets so you need to unzip that file and inside this of course you will see assets folder and then you need to drag and drop and put inside over here and then it will show up over here so make sure that you drag and drop inside your root folder okay and then you'll see images like this and these are the images that we are going to use throughout our app okay so all the images are there they're already given in your uh assets folder okay cool now we have to do a next setup over here so we need to come to our Pops spc. yml file over here and then we need to go ahead and unlock this place now there should be a section where it says assets actually this one now we need to make sure that we are aligning with the structure over here so let's go ahead and uncomment this all right now of course this destroys the alignment but over here let's do it on your space bar or the one that create space empty space in your keyboard let's hit one two so this one you need to press twice okay the space bar of your keyboard okay and now do the same from here okay 1 2 3 4 so you have to do that all right so you have to have four spaces over here all right and then it says that images dot blow okay now we don't want this so we want to remove this and now we're going to come over here and we see that our assets are inside assets and images folder so here we're going to write assets and images like this okay so assets and images so we are telling flatter okay so our images and assets are found inside this assets and images folder okay so make sure that you have this one set up correctly and the space has to be important one more time here two spaces and here four spaces okay all right let's go ahead and close this okay so now we are ready of course we don't want to use the color because we don't need that so let's go ahead and remove that and after that over here if you do see decoration inside this there is a property image property so we're going to use this one image okay and then over here we are going going to use box DEC decoration image okay decoration image now inser this let's go ahead and set up the other properties let's hover over on this and here it says that you must have image argument so let's go ahead and add this we did this so and remove this now and hover over on this here it says that you need an image provider so what are image provider image providers are different classes in flatter one of them is Network image Network image okay so this is an image provider uh if you hover over on this you will see mostly that Network image Network image and well it didn't specifically say this is an image provider but we know this is an image provider because it provides an image for you now Network image loads images is from Network we can also do asset image over here now asset image loads images from your local storage okay so this is also an image provider so particularly there are two basic image providers one is the asset image other one is the network image so we are going to use this asset image over here all right so now let's go ahead and uh find our image Imes so our images are in assets folder images and the first image that we want to use is called logo.png remember now this could be a little bit of confusing because you are saying the path name over here mentioning it over here and at the same time you also have to mention it over here okay otherwise uh you'll get error now this tells flatter to know about your resources where they are and this tells flatter code to find your images okay so both of them has to be mentioned look like they are not connected but they are because flatter still needs to locate your images for optimization and this one also for showing it over here so both have both of them have to be correct if one of them is wrong it's not going to work okay so let's hot reload and we see that image is already showed up over here and it's beautiful okay now in your case if it did not showed up you need to do make sure you go ahead and uh read the error message if it doesn't show up there would be an error message read that try to fix that the other one you could also do go ahead and stop the app using this one stop the app and then run it again hopefully it would show up and if you still don't see the image you can send me messages I'll try to help you so now with this we basically see that our layout is getting more and more like the one that we have seen our previous app over here okay so let's go ahead and put this uh const modifier over here well this is so far so good but now this is not very good practice to put uh your image path directly putting over here it may create a big problem in future what problem because one day you might want to change the folder's name okay now if you have say 100 images in your app 100 different images and initially if they were same in the same path but now somehow you want to change because your app is growing you want to restructure your app and resources and images you might want to put them in a different path so you have to find those 100 path and then change one by one so definitely this is not good so we want to optimize this so let's learn this how to do that so previously we have seen our lip folder here we have base resources folder now Styles folder now inside now inside resources folder we are going to to create a new file and we're going to call it media. Dart okay so let's go ahead and add it over here media. Dart and over here we are going to create a new class and here we'll call it app media okay now inside this we can go ahead and create a static variable static actually we could do static const and then here we'll call it base image and over here actually we can go ahead and uh put our images folders name or path name which is like assets images okay like this and uh let's put it here and we should be good to go now okay so this is the correct image path right okay so this is the beig image base image path now let's put underscore over here so two things we are putting static const now static means that this variable over here it's not part of the class instance but it's part of the class itself okay which means that we can directly use the class class name to access it we don't need to use an instance or create an instance to do this okay all right and const means that okay once you assign the value you cannot change it okay so that's what so we are assigning it and we don't want to change it when the app runs during the run time we don't want to change it so that's why we put const and static and underscore means that this is a private variable okay so private variable means that you can only access this within this class you cannot access this out of this class okay so that's why here we put uh underscore whenever you put underscore in Dart that becomes a private variable private variable are only used within this class now regarding this and now here we're going to create another variable and we could call it study const and the logo and then over here we are going to do this one base image and then we can mention our image name what's our image name Logo logo.png well in this case I think we can remove this slash because one slash is already here now what beauty you see in this it's beautiful why and it's optimized so next time you want to change your image path actually you just change here and everywhere else they would be changed automatically okay so that's why you should separate them in a dedicated class okay always separate your colors and media files in a separate class because it's good for optimization and future maintainance another example like over here we Chang the primary color now because we all put over here so we just need to put in we just need to change in one place and everywhere else it'll change automatically okay so you don't have to check one by one and make changes all right so every time we put images we are going to follow this pattern so next time we can just go ahead and add a new image over here and we would use the base image path and then the image name itself okay whenever we need that we do step by step now let's come over here and we're going to come we're going to be here and inside this okay so this is the time we access our app media class so so here we would say app media so app media let's go ahead and check if we can import that Library so app media dot here we'll have logo okay so that's it so that's how because now logo is a static variable you can just go ahead and access set using the class name this is our class name so that's the beauty with static variables because you don't need to create something like you know like this say for example app media logo app media like that you don't need to do like this okay so it's very convenient all right so let's let's go ahead and restart our app and looks like everything is good we see that we have this uh row over here and this row is showing this uh two text over here now of course this is supposed to be our Search widget or search layout over here now we can continue to work from here and we will see that how the work now let me go ahead and remove this okay and let's do hot reload okay so it's still going to work so we don't have to always use two widgets over here so we can just simply put something like this now this thing is not really good because uh here we can't apply any decoration uh let me show you our original app in our original app we'll have the decoration decoration I mean style as you can see so there's a lot of things that that's going on over here now once again when you have a main widget or like this icon would be our main widget and this text itself now around it we have uh this style now this kind of style around menu yet mostly given by a container so that's what we want to do we want to give it a container okay all right so that's what we need of course we understand that part but I think there is another thing is missing at the same time actually even though we can write search over here but we don't have the search icon so we need to go ahead and show the icon now for that one we can have an icon over here so to use an icon simply we can use our icon class okay so this is our icon class and once again since this is a class we always need to pass something otherwise uh it might end up as an error or showing nothing but in this case this is an error because we need something okay now at least we need this icon over here okay so let's go ahead and pass uh this icon to it so how are we going to pass but this time we are going to use fluent system icon okay system icons this one now let's go ahead and import it we already have it installed and from there actually we could do IC fluent search regular so this is the icon that we want to use okay and then over here we are going to use color so icon takes color so we're going to do that and here color and instead there's o x ffbf c205 so that would be our color code so let's go ahead and hotr load and beautiful so it already showed up over here here but one thing I do see that at the top over here we can assign sized box actually and then here we could do height h e i g HT height 25 okay and most probably we can also use const with this okay now it's coming down okay so so far so good now this row is showing this one right okay cool but now the problem is uh we need to assign style to it so we cannot assign extra style like color and everything to a row so we're going to wrap it around a widget so that would be our container widget and if we have container widget we have learned before that we can always assign decoration okay so I'm going to copy this so that it becomes quick so let's go ahead and put it here okay so now let's hot reload but of course we have some of this one which we don't need like this image right so let's go ahead and remove that we don't need this one and one thing we could do over here assign color to it so let's go ahead and do that so here we do const and then color o x FF 4f 6f uh actually it should be 6fd so this is the color that we want to assign let's go ahead how to reload okay that's gone right and then actually we also want to assign a bit of uh padding uh hor actually vertically so how to do that over here we're going to have padding and then we would say const Edge Edge insets do symmetric horizontal 12 vertical 12 okay cool now let's hot reload now it's looking more beautiful but now we do see that we don't really exact ly look like this so we have some other issues that we need to take care so one of the first issues should be actually the background itself the whole background okay so we still need to work on this so that it looks exactly like this now let's come over here and change this color code actually it has a typo so now it looks like more white okay and then we can also remove this one we don't need this because this one pushes this two item to far end but in fact we want them to stay close to each other so that's why we are doing this and we also don't need the word search icon we just need search right so now it looks more similar okay and then if you come over here the Bottom bar this AB bar we also don't need this let's do hot reload okay and then if we come down over here container over here actually we can add a new child that child would be for creating some space as sized box okay so now here we could do h e i GD height 40 okay and then in front of it we can add const okay okay now let's do hot reload cool as you see right now they're looking very alike the more and more we are doing the more they look very alike all right and uh one of the other thing you could do you could also set a background color over here like this one if you remove this background color it won't be like this so it gets a different look feel and look but we don't want to have we want to have it but at the same time we can actually Define this color over here so let's go ahead and do static color BJ color and then now let's come over here we completely copy this thing and then we are here and let's put a con modifier and over here here we can simply call app Styles app Styles Dot and over here BJ color I guess it should work houd okay now they look very similar exactly similar okay all right and one of the other things you could do over here actually okay so first thing I think think we can add a con modifier here but there's another property that we want to use now that property would be this one so debug show Checker mode Banner which refers to this one if you hot reload it' be gone beautiful so this is the first time our UI look exactly what we looked into before now I think there is another part missing over here like this book tickets okay okay now the book tickets this section is coming from here our style uh headline style and let's put it to 700 and uh let's see whether they look similar or not okay right hopefully we still have a little bit of differences so for that reason over here actually we can directly put bold b o l d bold and let's outload and now we should be seeing that they're similar okay cool no they're exactly similar each and every pixel they're similar okay so now we can move on to other sections okay so here we go and in this part we are going to going to continue with this uh text over here now here we'll have a special learning like uh how to make a reusable widget because you'll see that this text and similar text they show up and they may show up a lot later in future like this so whenever you see code like this I mean a layout actually like this which appears quite often then and you can use them as reusable widgets okay now the name may sound scary or fancy but it is not at all it's just creating a widget and reuse it and that's how it works now there are no hard and faster rules but there are some conventions and then uh how to do that because this reusable widgets actually would be used throughout in our app in many different places so we want to make them actually part of core widgets which means part of Base widgets so over here we are going to create another new [Music] folder and let's go ahead and do that so here the folder name is widgets okay all right and inside this we are going to create a file all right so over here we can say Weg just name app double text. Dart okay now I named it like this the reason is because we'll have text one text here and another text here so that's the only personal way of doing thing you can name it anything but it's better it makes sense but the naming of this widgets folder like over here because in this folder we are just going to put widgets and why we put in base class or base file once again the reason is because whatever is here defined is used throughout our app not only specific to certain screen okay or certain area so that's why we do that okay so over here I'm going to create a stateless class and I'm going to name it over here as is app double okay app double text okay all right and it may want us to import some of the packages let's go ahead and do that and now the arrow should be gone okay now I'm going to close others out we don't need this now we'll need this one we also don't need this we'll need this okay cool okay so we created a class and this class is stateless class because it's extending stateless okay all right and now this class actually we want to reusable okay which means that we want to call it from different places so that uh it looks like this and this now well uh take a look at our app over here this one so we want to put the text here now to be able to do that first we want to go to our homepage over here home screen actually so that's what we have currently and previously we have this list view right now instead over here we can have another const over here and we going to call it sized box and height 40 okay let's go ahead and do that and then uh of course if you save it nothing's going to show up over here yet and then here we're going to say app double text like this but we need to UT the path so let's go ahead and do that okay all right uh and let's hot reload once again nothing appears over here but one thing we could do just give it height and color so that we know what's going on okay height say 40 uh with say 40 and color say colors. red okay and we got to import stuff for that okay just skip coino we don't need this uh let's restart and we see that it's showed up over here beautiful so it means that we can use a class that's defined in another file or another place okay now of course we want to pass this text okay all right so how to pass this now if we want to pass we want to pass it over here okay as an argument and how to do that so we going to pass two Tex one is Big text and there is small text Big text would refer to this one small text would refer to this one okay all right so we can come to our class over here and then over here we can declare the variables that we are going to get as argument so here we're going to declare a variable type string and here we can say big text and then then here and one so string small text okay now since this is a class and you defined uh Define variables and there is already a Constructor it wants this value to be initialized at least it should get a value before it gets this uh Constructor now for this reason over here we could do required requir this do big text required this do small text like that now you see the error is gone which means that right now we can get this two variables value as in the parameter so this is called parameters right now of course over here we'll get issue okay it's saying that okay you have defined two parameters but you are not getting them you have to get them as argument so that's one and I think we have another one small text okay now here we can say upcoming flights [Music] upcoming flights and here we can just simply say view all okay just like that's upcoming flights and view all okay looks like we need to capitalize okay so it should be capital F and then it should be capital V all right and then it wants us to put a con modifier so let's go ahead and do that okay hot reload but of course nothing is going to show up over here now we have the value we received the value the value has been initialized when you say required you must pass the value okay we said require we must pass the value that's why earlier we have seen error okay but now we pass the values and the error is gone Okay Okay cool so now we can show this value right so for example over here um we can actually let's go ahead and remove this we don't need this okay and what kind of layout we are talking about we are talking about a row layout like earlier we learned that this is going to be a row right horizontally so that's why it's a row now if it is row then we can actually should apply a lot of properties to it so one of the properties is children and uh which means that it will take a lot of child over here one of them is text let's go ahead and assign big text to it okay and um let's go ahead and assign styles to it we know we can assign assign style so Styles dot we think we have head headline Styles style I think we have had line style three I think that should be app Styles or class name okay hard load and we already see it here and which is looking like this okay all right but now in this case uh we need to change this one which will change very soon don't worry and the other one and over here we want to use inkw well now inkw well is a special type of widget which has a property called ontap on tap means if you click on this it's going to get response okay so here we' say well before we say that so let me assign a child to it child and for child itself over here we can use the big the text itself and then here we're going to say small text okay and and then that's hot reload and beautiful now they're too close to each other we're going to use any the property at the top which we learned because this is a row so for a row horizontal access is the main AIS so here we're going to say main access alignment this one and then here we're going to do main access align I think I have a typo now my flatter uh Auto completion is not working it has to do with kind of version so I'm trying to fix that once that's done then it would work all right so that's why you see I'm typing in everything of course this is a slow process but you get the idea okay so here we do see that okay we have styles to it already Okay which almost looks like this but now we need to assign the exact style to them okay now to do that here we're going to do our app Styles class and uh okay let's go ahead and copy any of this it doesn't really matter and then we can call it headline two so we have headline one headline two so have for headline two we can assign text size as 21 and text color so let's go ahead and assign color to it do have color early so this one let's copy this and put it here so what's going on text color let's see did I copy it correctly yes I did and invalid const okay right this one to remove this okay so text color has been assigned and then over here we also want to do bold okay now let's come over here so instead of three we're going to assign two so it's looking more like this right beautiful exactly the same now the view all this one we have to assign a different color to it let's go ahead and remove this one and here we have text style this one okay if you do come over here you'll see that okay we don't have text Styles so we need to actually uh create a new variable that's going to call text style so let's go ahead and create this so this would be our new variable where what refer to as text style now this would be also working as our base text style the default one okay now let's go ahead and use this and hot reload and we see that okay uh it's almost looking similar but there's still a bit of problem remember this one is going to work as our base style okay this one this is going to be as our base style because it has exact color exact font color and font weight but what if we want to change one way to work with this is that you go ahead and copy this and you give it a different name like this okay but there is another approach that we can use we don't need to recreate many variables like this this is possible but let's learn something new this called copy with okay let's go ahead and do copy with so copy with is a method actually that's pretty much applied to flut objects or widgets which means that uh whatever the properties it has keep some of them and and remove others if you want that's how it works copy so copy some of the properties what does it mean it means okay you can keep some of them if you want and change others okay it's it's more like okay this is working as a parent class and you want to change the parent to be a child okay and then keep some of the parents properties and adding something new or removing something new removing something from the parent and create a new copy okay this is one way to understand all right so this is called copy with method now here we could apply Color and here we can say app Styles app Styles dot [Music] primary color this one now we already have this color now let's go ahead and save it now we do see that the exactly look similar thing is this style over here so it doesn't look like this because we do see that we have bit of spacing right but we don't see the spacing now it's too much to the edges we can fix that now if you come here early you'll see that this one um we have applied out of this container in fact we can also copy this we can if you want we can actually put it right inside this column over here and it would work exactly the same okay and let's hotr load okay so you see that now they're aligning very much that's what I was talking now another thing I said earlier that this is reusable so you can say upcoming meetings okay and hotra load you see beautiful so you don't need to go ahead and create everything from the scratch again we don't need to do that so that's why this is reusable but we don't need this now so this would suffice now one important concept is this copy with method in next lecture we're going to cover copy with method okay so in this section we're going to learn about uh a concept which is called copy with method because this is a method is very useful common and it used a lot in Dart so let's come over here and we will see how to do that now I think we need to find our main main main Dart class this one and definitely we can remove this we don't need this okay now we're going to create a new class and do some examples here now remember this is nothing to do with directly our app we are trying to understand the concept okay now here we're going to create a class and we're going to call it test class you can name it anything and then we are going to declare two variables int y int X and int y so these are two variables and as you can see that there's wigly lines so either you have to use a light over here when you say light that means that you're going to give it some value before you use it this is one way to go and use it but we don't want to do that we want to use a Constructor remember Constructor is the class name like over here this one we have but it's also like a method it could have a body or it might not have a body it depends on many things but the same as a class name that's called Constructor and if you have value like variables actually not value if you have variables you need to pass the variables inside the Constructor so this is what we are going to do over here and then here we'll say required this.x required this.y okay so it means that when you create an object of this class you're going to pass value and when you say required that means you must pass okay so that's why we tag them using required there are other properties that we'll learn later for now let's focus on copy with method now what I'm going to do over here so here I'm going to create a variable we're going to call it VAR and here we can call it test and then here we're going to call it test class and then over here we're going to pass x 2 Y3 that's how it's going to work now this required thing we are going to talk about later okay for now let's SK it as it is now we have a class and it is two variables and we have a Constructor and if we want to create a new instance of this class we have to call the Constructor and as we call the Constructor we need to pass the value of this variables and that's what we have done over here and then here we can say print dot print test dot X now if you hover over on this well I guess we need to restart let's go ahead and do that and here we see two if you change to Y then you will say that here it's a three so now so for it's normal class in Dart the only difference is this time actually we have used required okay now what if you don't use required and that's okay but if you don't use required you need to skip this variables uh sorry the braces over here that's still going to work but in that case you can't really have named okay so we need to remove the name like that XY and if you run it then it's still going to work the same okay all right but so the difference is if you want to mention the name then over here you need to use required and that's what we have done over here okay and let's remove this let's see what happens it will give you wiggly line and it says that named parameter X is required okay so this kind of uh parameter that you pass that's called named the parameter why because you'll have name like X Y you can name anything okay so you're going to do X4 y10 so we gave the variable's name over here all right and exactly the same name as there here otherwise it's not going to work okay okay all right so Y is 10 now that's all about understanding our Constructor and named variable know this place required this keyword plays an important role in a class and the Constructor most importantly if you want to use copy with method now in general you can name it anything but we're going to call a method it name is a copy with and then over here we're going to have int X you can name them anything but we can also keep the name as they are over here and this is the convention like this okay now I want this method to return an object so here I'm going to say test class okay well now this method is going to return something and that would be of test Class Type and over here we need to say test class otherwise we'll get error now over here once again you can you need to give it a name say 20 all right and then it's going to work okay all right so we just said the method name is copy with and then when you call the method you may pass variables you may not pass variables okay and whatever it is it doesn't matter so let's go ahead and here call it copy with now remember over here so hover over on this two positional arguments are expected with copy with method but zero found okay so it wants you to pass over here as you see that uh arguments so you need to pass two of them but let's do x uh 30 y [Music] y40 we created this and what if we want to save it in a variable ver new test why we are doing that because we know that copy with method is going to return us another object of test class type because we are returning from this method as you can see there's a method it has a return type and it returns something from here so now here we can do print New test. Y so what's the value you think you would be would it be four would it be 30 or it be five well in fact it' be five let's go ahead and check sorry y value it should be 20 not not really x value I'm talking about y value so it shouldn't be 10 it shouldn't be 40 in fact it bit 20 let's go ahead and check and that's what we see so this is the first Y and this is the second y so what I'm trying to tell tell you over here even though we have POS we are passing value from here but this value is not being taken okay it's still using this old uh the value that's been here so of course it makes sense right whatever the value you pass from here directly that's going to take this place right it would be overridden even if you pass value from here uh we are grabbing it right and then we are not assigning to it so the value actually is taken directly from here so it's 20 so this value doesn't take effect but what if I want this value to take take effect the 40 y value is 40 over here right now definitely I can do like this but now there's this problem as you see there's this error okay so this is this Y is optional right because when you have a question mark it could be null but this y over here is not null right so that's one issue and then if you do put this one it's gone right so we are saying that okay it's not going to be null now let's go ahead and try this okay now we see that 40 is taking place for y value why so here we are calling copy with so we are passing 30 and 40 and we are using whatever the value we are passing of course we are passing both of this 30 and 40 so Y is 40 now if we print X we will see X is 30 and seems like this is nothing special right this is okay now the problem is what if you have 20 variables what if you have 100 variables so each time you just want to pass in that case if you have too many variables you have to pass all the variables at one time right and this is not efficient and what if you just want to change x value but you don't want to change y value you still want to take this y value and you want to take a new x value from here and how to do that okay now this is where actually the full power of copy with method comes so what do we need to do first we need to have this thing over here just like this one over here we have this curly braces we can also put curly braces like this and to the end then what's the benefit of this the benefit of this is that right now first here you need to put like x30 right but what if you don't put Y and it's still going to work why whenever you wrap your variables like this kind of curly braces and then you also have optional you may not pass all of them you can just choose which one you want to pass all right and then what about the rest of the values over here and it's easy to do how to do that here is the thing so here you check like this this do X and then here is the same thing this doy so what is it doing over here well once again first we WRA it on curly basis and the benefit of this is that I can just pass one value any value if I want pass y that's okay if I want pass that's okay if I want just pass XY both and that's okay if you have 100 variables and but you just want to pass two of them and that's okay that's the first benefit and we can see it over here we have two but we are just passing one and why how it is possible because over here we have this as you can see the curly braces and we also have the question mark question mark always makes it optional okay so that's the first thing and then over here here what we are doing we are saying over here okay remember this copy with method is getting called from here right so that means it tells you okay you're passing value so it's first check whether there is a value it would first check for the X because it's the first one it will see if x is coming from here so what's going to do it over here it's checking the x value that this x whether is coming from here and giving it here right whether it has value or not if it has value use this value which means that if it has new value use that value but if it doesn't have any value use the old value so this dox is actually getting the old value and where is the old value it would be four but of course if this doesn't exist but in our case we are passing 30 so it will just be executed this one and then assign the value to this it doesn't need to come over here but what about why now you'll see that here we are not passing y okay so copy with method gets cool and Y is here and now here we check the Y value so y value is not given it's not given over here so this means this part doesn't execute now what happens it comes over here okay and it finds okay this do y refers to this this one this refers to the original value but originally there is already a value when we created the first time an object we created there is already a value okay so then it would take the original old value original Last value so our original Last value is what is that this 10 so y value would be 10 over here now anyway so after this changes let's go ahead and copy this I mean sorry execute this well as usual we see first y value is 10 all right and then of course we can change it to X actually so that we know compare directly so X was four we see four and over here well we pass 3 for x and and we print the value that we passed and we say it's 30 but remember over here we didn't pass any y value let's print the Y value for this object and here we see 10 where is this 10 coming from even though I didn't pass anything it's coming from here because as I told you if there is no value then it's going to check the value if it doesn't exist it takes from the original old value okay and that's how it works works and that's the beauty of copy with method that's like a lot of knowledge so what's the beauty over here copy with method lets you create a new object remember actually in fact over here we are creating a new object even though it looks like a method but the method eventually returns a class Constructor so whenever you return a class Constructor you are always returning uh new object so this returns us a new object and the new object object is saved over here and then we can reuse the value from the old object actually this y value is a 10 which was passing from here okay so the old value is still saved okay so that's how it works now let's go ahead and create another variable okay so here we're going to say ver say new Test new test two and then here what you going to do so here we're going to say copy with method and now x 100 okay now this time actually let's say we don't pass X we pass y all right now let's print new test two and Y value so let's go ahead and print this and definitely we see 10 for y okay earlier it was 10 over here because you didn't pass anything it took this one but now this time you passed 100 so this time we just taking 100 over here now what about X let's go ahead and print that now this x value is four where is this coming from it's coming from here okay because originally this one over here was four but what if you put this one over here now let's try so here you see 30 so copy with method based on whatever the object you give them it takes value from that object so this is the object or this is the object right here we are calling copy with method based on this object and here we are calling copy with method based on this object so it's going to take values like in oure it's going to take X values based on this object whatever was there whatever was there it was 30 why it took 30 because we are not passing anything anything over here as you see we just pass y so that's the beauty of copy with method it means that you can always pass less value and then you can create new object based on the old object's value and this is exactly what we have done over here so here you see that we have this text Style Now text style has font size text color font weight so what we have done over here we just change the color but then that also means that our older value font size 16 was still in our object and font weight also was in our object now this copy with method we use a lot in our Dart so once you understand how it works it should be very clear but anyway so if you still didn't get it I would suggest go ahead and replay the video and it's going to work for you okay okay so now we want to build this one and how to build this but before we go ahead and build this we have to understand this is going to be our Global widget why because this available here and this also available here as you can see and at the same time this is also available here so this ticket itself we are going to build it as a global widget now to be able to do that need to come over here inside this base and widgets folder and here we are going to create a new file okay so we're going to call it ticket view ticket ticket view do Dart this one and I'm going to add it to my G all right and over here for now we are going to start it as a stateless class the last one if you're on um vs code is the same thing so here we're going to say ticket view just like this and it needs some imports let's go ahead and do that okay cool so now with this we do see that okay our stuffs are ready now this would be our ticket view okay so the first thing you want to do over here okay let's uh come inside this view over here here we have this column so let's collapse this this row and then we have this container over here so we're going to collapsing all of them and then here for now we can just simply go ahead and call T kit view this class okay all right and make sure that it's imported at the top as a package all right and then we're going to do save h load and we do see it that it's available over here directly now this is our placeholder this placeholder is being coming from here now of course definitely this is not what we want so we are going to replace this we don't need this placeholder we're going to replace this with a sized box now why we are choosing sized box instead of container because here you see that sized box has only this three of this uh it takes arguments over here key with height and child most importantly three because key in general we don't really care most of the time but if you do have a container over here and here you'll see that it has a tons of arguments that it needs to take now of course this is not optimized because it's much bigger than the file is much bigger than sced box so the place where you just need WID or height and child so you want to limit yourself within sized box because it makes more sense and makes your app faster so that's the first thing you want to do all right and now at the same time uh let's look at our app over here uh okay so here this is our ticket right now this ticket would be represented by this file and this file or this class actually this class class is going to represent this section and if you do see that over here it doesn't take the complete screen with it just takes uh part of it and another part it shows up like that okay so one thing we want to do over here we want to access the width of this screen so here we'll have final size we're going to call it size and then we are going to have something called media Cy now media quy I think we're going to get this one and then off context and after that size okay now this is going to give us the size of this uh screen with okay or the whole screen actually in fact if you go ahead and try to print over here we will say size dot here you can say height okay so if we want we can go ahead and print it and down bottom you see that okay this is 932 932 so the size object itself has other properties that we can use and so this is the width 430 so that's why we can have it and now beautiful thing is after that we can control this with over here okay so here we can size do uh size do with and then over here we're going to just take 85% of it okay now with this um uh let's see what's going on so here we do have const let's remove that so the whole uh the sized box this is going to be in terms of width we just going to take 85% of it okay and the rest we will take care of that later okay so this is the reason that why we have it uh I mean now it's going to be dynamic right because um whenever you have uh different screen size it's still going to take 85% so you don't want to hardcode it by saying 400 or 380 because in every screen it would be different okay so that's why here you don't want to hardcode it by saying 48 uh 380 than we are taking a percentage of it and this is how it becomes more Dynamic okay all right and at the same time here's another thing that we want to take this called height now this height is going to be interesting well now for height what we could do now height is the problem in many different places both on Android and iOS so over here for now we can just go ahead and say for example um 178 or 79 and this is going to suit us but why we do like this uh we can of course do 80 but in my original design with the design layout we have used 179 that's why we are doing that okay now this one regardless whatever the screen it is we're going to keep it pretty much the same height okay so that's why this one is pretty much fixed all right now over here we're going to have this child and and uh uh child itself we can say container and then we can say color and here color is say for example colors. red and looks like we need to import something okay and we don't need this okay and then here we can have a child and then we'll do text and say hello let's go ahead and save it and we do see that this is what we actually we looking for and this is what we got let us take a look so this guy was here okay so that's uh kind of the thing that we are looking for okay now of course we're going to work on this more okay looks like it's taking more but don't worry uh we'll work on that more and so let me put it behind it okay right so you get the idea okay and then over here I think we can apply a margin so what kind of margin margin would be applied outer side from this container so here we're going to do Edge inser do only and then we just want to apply on the right side so let's go ahead and do and here we're going to do 16 pixel and see now it becomes smaller and in this case this and this are looking similar in terms of width and height so this is the basic layout in next section actually we'll start to make it looking more like this okay so here we're going to do one thing before we dive into this complexi first take a look that what we are going to do and how we are going to work on the layout and we'll also see the layout in structure grid so that it makes more sense to us so over here this is what it looks like so the ticket itself would be wrapped inside a container and then over here inside this we'll have a column actually column would contain the whole ticket okay well I haven't drawn the column yet because it's uh too many lines here it won't be visible but you get the idea this column would be actually the whole ticket and then inside the ticket we will have uh two rows this one and this one and this two would be inside the column column n column needs children so it could be any children in our case we're going to put this two different colors item there so that it uh can stay on the top of each other so that's the first view of our ticket now here this is a better view of our ticket layout over here as you can see one second as I said that this part would be a container that's our container like this one okay and after that the ti itself would be a column so over here this one the second box or rectangle represents the column itself and inside this as I said earlier we will have two rows so these are the two rows as you can see Row one and row two and inside each of rows we will have different items okay so we would put them together uh uh next to each other okay so that's the basic understanding of how we are going to work on this layout here I have this Center widget right uh container widget actually and then I'm going to wrap it around using uh widget so here I'm going to do Center so if you're on vs code on Windows you need to do control and Dot button control and Dot would help you if you WRA if you want to wrap this so all you need to do control and uh dot okay like this okay if you're on Mac for vs code you need to do command and Dot anyway so I'm back to Android Studio over here so I'm going to save this and then okay me run it okay so now here we go so the first thing we want to focus is styling this one so to be able to style this over here I'm going to have uh decoration okay so so we're going to do decoration and then box decoration okay and we're going to use it from our material package and then over here inside this the first first thing we want to do is color so here we do colors. white now as soon as you do this and you'll get error because we also have colors here so let's go ahead and save it and here we go all right so this is the white color we want to give it and then over here we're going to declare our or assign our radius okay so because we have radius in our original design so here we're going to do border radius this one and then here we would do border radius dot only over here and uh we want to only assign one border not everywhere so that's why we do only and over here we want to do top left okay top left now here we're going to call Radius do circular and then our radius should be 21 now let's go ahead and save it and here we go and here we do see that over here it already changed okay now we are just doing one right actually we can do a lot more so here we can say top right and once again here we can do radius. circular and 21 let's save it so now it looks more alike what we wanted and uh like this both of this so now it's getting more and beautiful now this color over here white makes it very visible but this is not the color we want so we want a different color now to be able to do that let's see if we have our color file over here looks like the color file is not open so I'm going to C over here in our resources folder Styles and app Styles over here and here actually we can define color so let's go ahead and do that so here at the top let's define a color static color Okay ticket color now look at this over here we'll have this kind of blue and orange okay so now over here we can say ticket blue and then const color and here the color we want to Define is o x FF 5 526 799 so that's the color that we want to Define and as you see over here we already see the color now let's come over here in our ticket view so over here we're going to call app Styles I think this one okay but we want to get it as a package and then EP styles. tiet blue now let let save it and beautiful so we already see the blue color cool of course there is other color as well but we'll take care of that later so keep it is as it is so now after this we are going to work on our app so this one we want to make it look like this right so the first thing we want to do right now having a child inside this uh uh container and we already have one as we can see that okay but this one we want to replace by column as we said early so we want to have column widget just like we have explained over here so inside container we'll have a column okay now inside the column what do we need we need two children okay row and a row so both of them are children over here we are going to have a row okay and row will have children as we know once again this is what we learned from here so if this is zow there would be many children so that's what we're going to do now instead the children over here first we are going to have a text over here now the text itself should say we are going to show ncy okay this one ncy so let's go ahead and do that n or NYC actually and then over here um we want to style it okay so that's why we'll have Style and within it we'll have like this so we'll have app Styles so we have this one and then here we can address headline three now after doing it here we can use copy with method because we know that there is something called a copy with method and then here the color here would say colors. white so we want to assign white color to it okay and uh for now that seems okay so let's go ahead and do that okay so that's the first part and now let's save it and let's see how it looks like now okay this is fine but it doesn't look really that good so over here we're going to do a padding and add inserts all so here we're going to do 16 as our padding let's save it so now it came down so now there is is padding everywhere okay so it came down within this container itself from everywhere so it's pushing inward from all the sides okay all right so this part is fine okay so the next thing we want to show is this two right and as well as this one and now luckily what happens over here that this text itself actually you can go ahead and copy and we can put here okay so let's go ahead and do that and let's save it and if we save it now we're going to see the result where is it okay here of course they're too close to each other and we don't need to worry about this thing one thing we could do over here something's called expanded okay and then we going use container widget okay and now let's save it and you see they go to the far end of each other this is expanded widget but say for example you don't want to use expanded widget then how to achieve the same result here you can do main AIS alignment for Row the main AIS alignment is horizontal alignment main access alignment do space between so this is still going to work okay so it would work anyway but our um alignment is bit complex so this is not going to work for a long time so we want to control everything on our own so and this gives us better control okay so that's why we are doing this thing okay so now this dots then we are now we need to show this dots okay so now you're going to do this now to be able to do this they would be Global right because these two are showing over here and uh over here as you can see on all the tickets and as well as over here so we want to make it part of our Global widget now to be able to do that let's come over here insert widgets so here we are going to go ahead and create a new file and we're going to call call it U big dot dot Dart okay so let's go ahead and do that and then over here we are going to create a stateless class so here let's go ahead and do St stess and Big Dot like this and let's go ahead and import this guy over here now definitely we don't need this let's remove this here this would be a container and let's go ahead and return stuff okay so let's remove this and now let's come inside our um app over here so here simply we can just go ahead and call Big Dot this one okay so you're going to import it as a package let's go ahead and do that Big Dot actually this one and uh we're going to do the same over here actually uh okay it should be here between this two Big Dot okay fine and it looks like there's a bit of issue and it looks like we need okay little a little bit of refractor otherwise it's being cranky and for now put const modifier and say do the same over here now let's go to our Big Dot over here and as we make changes we will see them okay all right so here we want to do decoration box decoration because we just want to draw something round okay so that's why we need that now with box decoration you could do pretty much any kind of shape you want uh it gives you a lot of flexibilities Border radius do circular and 20 now this is not obvious from the beginning so here we are going to give it a color and now we could directly give it a color or actually we can give it border and within the the Border itself we can do more stuff so here inside this here let's give it a width and we're going to give it a width of 2.5 and then over here let's go ahead and assign color to it so here we say color and colors. white and I think we have a typo White okay let's go ahead and import it material package and it's done now we're going to save this thing and we do see that okay so there are two small dots but they are actually really small now let's come inside this container and over here let's assign padding to it so here with the add ins sets do all three now let's save it now now we do see that they got much bigger just like uh the one that we were seeing over here okay all right so they're exactly the same size okay so let's continue now we do see that they're on the very far two sides now it's easy to solve and how to do that right now we see that we have only one container widget right uh expanded widget actually so not container so we can put two more one here and one here and if you do hot reload okay now we see that they're at correct place okay so that's the beautiful beauty of this expanded widget with the expanded widget actually you can uh proportionally put a lot of the items and then it's the idea is if you I mean right after each child you have to have a expanded widget and then it just going to work okay so like here you see one 2 three 4 so we have four uh children so we have to have three expended Widget the idea is if you have five children then you have to have four expanded widget so number of expanded widget in a row if you want to put proportionally should be be one less than the actual child so that's what we have to remember now the progress is good so what to do next now earlier we said that we also want to put stuff in it okay now this part is going to be a bit complex now before we put stuff in it so right over here inside the expanded widget we can actually put kind of say a child like T text and we can say hello let's save it and we do see that hello actually showed up over there now how do we go ahead and put other stuff in it to be able to do that first we need to look at our original design over here and a few things you had to see over here the first thing is that well there are this number of dots over here as you can see okay so that's one thing so first we have to have dots and then actually we also have this uh arop plane icon now this arop plane icon is actually on the dots so it's overlapping this uh theplan icon is over overlapping the DS dots now here it gets a little bit tricky and complex in two sense first we see the dots but actually the dots are not fixed the dots are counted based on the space given okay so it's more like if you have more space you'll have more dots if you have less space you'll have less dots something like that and then we also have to have this overlapping section over here okay this aop plane itself so this is what that we are going to work next now as we talked about earlyer that these two are going to overlap now how to work with this the first thing we need to remove this container itself okay we can't have container for overlapping so we have a special widget when two items they overlap the special widget is called stack widget okay and stack widget actually takes children instead of child so here I to have children okay now the theory is that because they're going to overlap so that's why you will have children so stack wiget would put the children on overlapping manner okay so because it is children and because they have to overlap each other so that's why we are stacking things things onto each other okay so stack widget means where you will have stuffs onto each other on the top of each other okay and then that's why you need a a lot of children to do that okay now let's go ahead and continue so first let's go ahead and make sure we have a widget and we can give it sized box and within it we'll have child and the child itself will have say for example text and here for now we want to give it dot dot dot because we want to for now follow this dot dot dot or actually Dash they're not really Dot and then over here we are going to have a text for them now let's go ahead and save and we already see this right and then after this sized box over here we can have say another widget Center widget and then we'll have child and then we could do text and then we can say plane okay and let's save it and here we see so here we do we do see that this dot dot dot or the dashes and the word itself the text itself has overlapped but here it's empty right so what we could do then here we can increase more actually now the layout out breaks okay now that's where actually I was saying that this part is pretty uh complex because now we need to find a way to dynamically calculate the space between these two widgets okay dynamically calculate the space between these two widgets and then based on that we can actually go ahead and find that how many dots we want because it would be easy that would be basic math okay so here we are going to broaden our understanding how to get this Dynamic space or width and then generate widgets like as you can see over here this dots are actually widgets okay so any kind of thing on on the pixel or as pixel you see that would be a widget in flatter anyway so layout Builder would give us this space available space and list to generate would help us to First to know how many items we want and then it would generate and then actually the size of this widgets generated would be given by sized box or any other widget like container that's also okay so the basic math over here is so we'll have this available space which is the most important one and we'll get it through layout Builder and then we'll have a random number you have to divide this available space using this random number to actually generate a certain amount ount of number over here and that number would be given to list. generate and then it would generate certain number of widgets for us now take another look so that we understand it better okay so here there's another picture that would help us to know for example we have two widgets over here widget one and widget two and we want to get the available space or width between these two widgets so what do we need to do between these two widgets actually we need to insert layout Builder so as I said earlier layout Builder would get us width okay and then here of course we see a new widget which is called flx why we need that before we need that and why we need that let me tell you about list generate widget as I said that earlyer list. generate would help us to generate widgets so how it's going to do that it would take this width and earlier picture I told you that we also need a random number so this is the random number and this is the width So based on that the input would be given to list. generate widget and then it would actually generate widgets for us but at the same time it would take this sized box because you actually want certain widget okay not a random widget so either you want container or sized box or anything like that okay so now where's this Flex coming over here say for example it generated 10 widgets okay now this 10 widgets actually would be sitting together not spaced like here as you can see there are spaces between these two widgets so to create this kind of space between the widgets that's why we need this okay so that's why we need this Flex widget So eventually we'd be able to generate widgets and that widgets would look like this so this one I put it here so that you understand better now why do we put in steps like this because you know flutter all the widgets are nested so layout Builder inside it will have flx inside flax will have list to generate and inside list to generate will have sized box and eventual output would be a dynamically generated widget like this based on your layout Builder okay so now since we have the basic understanding of how this works so now we're going to go ahead and actually start implementing on this and this is where we want to Focus well so inside this uh sized box widget this one we don't want to have it while even before that let's go ahead and create actually a new widget in it okay right so here I'm going to create a new file and here we're going to call it app layout Builder wiget dot dot so let's go ahead and add it and then over here we're going to create a status class and we're going to call it app playout builder wiget okay now let's go ahead and import the necessary things okay cool and then over here we can just simply go ahead and call here app layout build widget okay so this is what we're going to import and we're going to keep as it is now few things that we have to know that earlier we learned that so earlier we learned that we also need to pass a random number so that's what we are going to do now if we going to pass a random number we need to grab it over here okay so here we can say final int random d divider I think that your divider this one is what we want to do and we also want to pass okay I think regarding this I'm going to talk back later now here this is something that we would say this is required required uh this dot random divider so this is what that we want whenever we call this class pass we want that you have to pass this one so that's why we said this is required all right and from this moment on now over here here we can also say random divider and we're going to pass Six you can actually pretty much uh pass any number and we'll also talk about the later okay now let's come over here and remove all of it and here we're going to pass layout Builder widget this is what we said early that the first thing we want to pass is layout Builder widget and inside this we can pass build context context and then box con straints [Music] con straint like this and then inside this uh we going to return over here okay let's go ahead and return and the arrow should be gone okay so now inside this it does want you to return something so return flax like this okay and of course instead of flax you need to set up some arguments like directions this and that okay so let's go ahead and set up the directions first and access. horizontal okay right so we want to put things horizontally so that's why we put that here okay so now this is fine few things to know that now earlier we learned that we need to pass layout Builder let me find my file okay must R this one right so here we learn that we need to pass layout Builder and that's what exactly we are doing and after that we also said Flex withget right and that's also exactly we are doing so Le Builder flex but of course these are the some arguments that we need to pass now I didn't mention that but you need to do that and most importantly box constraint and in fact this is the one that actually gives you a lot of information and uh it is so interesting that over here actually we can go ahead and print so let's go ahead and do like this constraints. constraint uh this one we can use this so this is right away will give us some interesting information so let's go ahead and open up our terminal uh well we don't need to open up terminal so we can actually we also say it over here here okay now uh let me go ahead and run it okay so here you do see that we do see 74 and what is the 74 74 is the space between these two widgets okay so that's what has been printed over here and that's how actually the layout uh Builder widgets work okay so so they are always between two widgets and the space so we already know that we already have this one and that's what we wanted okay so I said earlier that layout Builder gives you like um the space between two widgets and that's what it's giving us of course here we have flax and uh of course we need to use the flax we are not there yet okay so there are other properties that we use from flax okay so now over here there's the property called children and inside this we want to put a a list of widgets now over here this means list of widgets okay this kind of thing but here we have a widget or class list of generate actually this widget list to generate we can use this one now the important part is over here length so how many to generate well interestingly enough the first thing we could do over here we can take this one okay so let's go ahead and take this and after that we can pass a random divider okay now this random divider may actually return us float or decimal number so over here we want to wrap it to floor so which means uh integer number okay like for example if you do here up it to uh floor you'll see that this just 74 let's go ahead and run it and okay here we have uh error so now let's go ahead and run it you see just 74 because when we use uh dot floor on a certain number what happens is that it gives you complete integer the closest integer now of course what's going to happen over here you can also do like this random number and based on that let's see what we get okay you can do Hot Load and 12 because we had 74 and looks like we are dividing by um what is it we are dividing by a number which is random number and uh what is this random number though but this random number is coming from here six so we are dividing it by six and then we see it here 12 okay but if you do remove it this floor. floor and we'll see that okay well it's not close to 12.5 so it takes the closest biggest integer which is which is 12 okay and so that's how it works so now we know that over here it's telling you that okay it's going to generate 12 of the um widgets because remember if you hover over on this the first one is length that tells you how many widgets to generate so here actually we are generating 12 of them now the main two important factor is this for this constraint with and random number but of course if your random number is bigger then it'll generate a fewer widgets remember the smaller it is more widgets uh the bigger it is fewer widgets okay so here we know that now it's going to return us uh 12 of them because we are doing floor right and then later on earlier we Al sorry we earlier we also said that we need sized box so so far far we have layout Builder flax and list widgets and now sized box now the equal spacing thing I'm going to come back soon uh let me go ahead and do this sized box first because the order is bit weird though the way we're doing it anyway so now here we are inside the size box and then here we could do width say for example three oh let's save it okay well nothing is visible here here yet but how about we're going to put a color over here okay so let's go ahead and uh put color but in fact the problem is inside this Siz box you can't really put a color but here we can first put a child and there is a another widget which is called decorated box we can put that one and then we can do decoration and then here box decoration okay box decoration and inser this here we can put color and we can do colors. white and looks like we also need to import the package all right so this one right so now let's go ahead and save it okay so looks like it's still not visible now the reason is here we do have width but we don't have height so let's give it a height and height say one and then now let's save it and here we go there it's already uh up there but it's too small okay so that's the first thing now here is this thing the one that I was telling you that this one the flex comes in what does this Flex do well this Flex actually helps you to spread them equally but you need to tell it to do that explicitly though so here we can do main access alignment so once again main access alignment do space between this one let's go ahead and do that and uh let's go ahead and run it and as you can see here it already spread them separately okay and now they're extending from the left to the right and this is beautiful and that's exactly what we wanted and this is working and then over here uh let's see what's happening you can also put a const modifier okay so it's going to work so so far this was the most complex part and we just dat that so as we said early that we need all these things so what are the things that we need we need a layout Builder layout Builder we needed a flax we needed a flax let's generate let's generate and then sized box and then we had eventually size box but regarding sized box in fact you can also replace this with a container then you'd be also able to actually decorate it so it doesn't really matter and here this part plays an important role now before I wrap up this one here we need to make some changes let's go ahead and put con modifier so that our code looks beautiful now here this is not at the top so there is this problem now to be able to do that over here here we can put say height because size box takes height right and then here let's put 24 let's save now it came down now as it came down over here we also have this this one now we are going to actually comment it out so now it it looks beautiful so with this we are pretty much done with this section the one that we are doing with uh layout Builder now we have this and another thing you have noticed is I have increased the screen font size over here so it looks much better and more readable all right so now what do you want to do next this is the thing we want to do showing this icon over here and how we going to do that let's come over here inside this ticket View and previously we had this one and let's uh let us save it okay and we see over here whatever it is most probably plain okay but now here the first thing we want to show is an icon actually we don't want to show this thing we want to show an icon so here icon and icons dot loal local Air plane rounded this one let's save it and we already set there beautiful and at the same time we can do color to it and [Music] then over here um we can do colors. white okay beautiful now at the same time you'll see that this is not the direction we want we want a direction like this so from this is from departure to Des destion so how to do that now this part is tricky while actually there's an easy way even though it looks tricky so I'm going to wrap it around using another widget so I'm going to say a widget and then we're going to give the widget a name and what is the widget name so in flut there is a widget called transform and and uh within it there is a special class that or method actually rotate this one you can call this and it's going to work but at the same time it's going to say it needs an argument angle so add that one so here we're going to do 1.5 and it should work and let's see we do have uh issues so over here let's remove the const over here and then put const over here and then if you save it now as you see that it already changes Direction and beautiful and at the same time over here looks like we can also put a const modifier and that would be our new widget which is transform rotate so what whatever you do over here uh icon or image whatever is that if you want to rotate it all you need to do over here you need to rotate by calling transform. rotate and as you see over here and there is a basic formula that how the rotation works so it's given over here math. pi and divided by 12 okay so now this is going to rotate in clockwise you can also rotate in anticlockwise so let's go ahead and save it anticlockwise is like this direction and this is clockwise Direction okay so with this we are done with this section how to show this but even before we finish this over here actually we want to do L DN London so here we see 1.5 and we see that this is an angle but no way this is an angle right because earlier it was vertical now it's horizontal that means that it's not 1.5 angle so if you look at the documentation over here here it will say that okay uh this example rotates an orange box containing around it by 15° so it's not a 15° is 1.5 radian okay the unit is different even though the documentation said that it is degrees but there is a relationship between degrees and radians okay so let's go ahead and take a look so here I have this simple uh presentation where you'll see the simple math and how they are connected so we know that if this is a circle the circle is total 360° one rotation is 360° so Pi is 180 and then if Pi is 180 of course we can say that 180 = 3.1416 and that's in terms of radian so that's why I wrote the unit here and this is in degrees right so 180° equal to this then 90° should be 1.57 radians so the question is why we have 90° and why not 45 or 60 the reason is because you want to go from vertical to horizontal so you want to have a 90° change so that's why you do 90 = 1.57 radians so this is the basic math over here that if you want to understand that's good because programmer should understand a bit of math and how things work all right so yeah this is the basic relationship between uh degrees and radians and that's how actually it works over here then the other thing is okay well actually why it's 1.5 because if it's 1.5 it's a little bit til Ed so just now we learned that we can do actually 1.57 so let's go ahead and do 1.57 all right so now if you save it you'll see that okay it is exactly vertical so let's take another look that how it works so if it's 0 Dee let's save it so it's vertical like this and if it's one sorry not 0 degree once again it's 0o radian and then 1.57 then it makes it 100% uh what is it uh horizontal then of course we can also do negative rotation let's go ahead and do that okay so it's negative right now this way so in general if we have plus sign over here positive that means it's rotating clockwise like this okay so you can imagine this is a clock and then it's rotating the hands of the uh clock is rotating like this and that's the positive direction if you put minus over here then it would be negative directions okay so that's how it works anyway so after this hopefully it makes sense the how rotation work well hopefully in future we'll see that if we can rotate it and animate it which means that just changing this one dynamically and updating the UI we are not ready for that yet okay so the next part is pretty easy in next part actually we want to show this one one this line over there but interestingly we already laid out the foundation for the first part so let's go ahead and create a comment over here here we say show departure departure and destination with icons with icons first line okay all right and then we are going to copy this I'm going to put it here and then over here I'm going to make another commment show departure and destination names uh with time with time okay now let's go ahead and save it and then we'll see that it's already there so we'll fix it don't worry now before we go ahead and fix this few other things that we need to change over here so this part is New York so let's go ahead and do that and New York and now looks like everything is hardcoded don't worry we'll fix them very soon and then over here soon we'll be loading them dynamically so so you can just follow along with me it's not going to temper anything with us now the only problem is this one over here now this part is uh uh look at this right here expanded wiget so here we have uh big dots so we don't need any of these things okay now in fact we can just co go ahead and copy one of this and put it here and in this case the only thing we want to change is this one 8 H 30 which means that 8 hour 30 minute okay so that's what we are doing now now let's go ahead and save it and this is what we see beautiful so right now actually we are looking more like this and we are getting closer to it but I think there is a space between these two rows so we're going to do that and then here we do sized box and here we're going to do height and three and that's all we want to do so you're going to push it down a little bit and most probably we need a con modifier now let's go ahead and save it and that's what we see and this is Beau beautiful okay all right so then apart from this there's also a top part that where we need to put a little bit of spacing otherwise it doesn't look good where here so we need a little bit of spacing this is in ticket view while over here we have this one so we are going to copy this we're going to come over here and the end and put it here and let's save it now it came down too much we don't need all of this so we're going to just do 20 and we would be happy so just like this we did 20 okay all right so now we are looking more alike wonderful okay so right now we have an issue what is the issue the issue is that it's taking the whole Space over here right it should be a different color we don't want it to take the whole Space over here cuz over here we'll have this orange color so that's what we want to do now for this reason we need to refractor the code and how to do that now over here we are going to actually uh wrap this around this section around a container another widget let's go ahead and do that so here we'll have container okay looks say we don't have container so I'm going to go ahead with Widget and then and then and replace this with container okay all right and let's go ahead and save it and uh if you restart it nothing's going to change it's same as before and this one we can actually move out of it over here all right and let's save it and okay let's restart no changes and one more change over here okay so we want to wrap this around another widget and that should be a column okay now let's go ahead and save it and that's how it works and you see that this way we see half of it and that's exactly what you wanted all right now the design doesn't change much but if you go ahead okay and let's save it we see the other one but of course we don't want to have it like this but the gives you the idea for example if you wrap this around okay so we can have say colors. blue all right let me go ahead and do that just say for example colors. blue or actually colors. orange colors. orange okay let's go ahead and save it and we see it like this but this is not exact color that we're looking for but we are going going to change it but now over here it's top left so you can change it to bottom left okay then that would be a quick change and over here bottom right okay and let's go ahead and save it beautiful so with this we actually looking very close to this wonderful okay so now this one looks like uh this one over here here and we do see that we have an extra space over here this this dots and this two circles over here actually it may look scary but in fact we can draw them easily now we already have this two containers right so between these two containers actually we can get another container and uh we can give it say for example give it kind of height say give it height 20 okay now let's save it and you see that it came down and uh it's like it's going to work but yes we do have a problem over here so what we could do say change it to eight all right now uh the Overflow issue is gone so looks like we are able to separate this to container using a different color Mark right uh that's what we have seen over here let's save that this is gone and now if we put it back we say there so in fact this is the same exact logic has been used over here so what we could do now we can go to our file let's see F Styles this one and then you can create a new static color let's go ahead and do that ticket orange so you're going to create orange color orange and then const I think I have the color here let's put that so this would be our new color now let's come over here inside this container and over here we use this kind of color but actually we want to use app Styles app Style do we have this okay I'm going to copy this and put it here type cannot be okay actually we were supposed to get that orange to get orange okay most we need to remove this save it and we see that the color is exactly the same now let's put a con modifier over here it's gone now in fact over here if you do assign color then you can do app Styles dot not primary but we can do ticket orange and you'll see that okay we have this one right now it looks like same as this right which means that it's working so let's go ahead and keep working on them and after that over here actually all we need to do we need to create uh some items over here and how we are going to do that now if you see and look at this layout so we have this and then we will have layout Builder and then this one so let's go ahead and build that so now here we understand that so this is going to be a row layout right so here we could do child and row and in the row of course we need children otherwise we'll get issues sized box this one sized box and uh keep it as it is for now and then give it a height so here actually move the height to inside the sized box we don't need this and then okay what else here we could also do width WID is 10 now let's save it and what's going on on over here because actually here we are going to create a circle right so we have the sized box and then here we could do child and inside the child we can use decorated box so once we have this widget decorated box and we can color them all right let's see what's going on so it says you need decoration okay so first we go ahead with decoration and the issue should be solved and over here we are going to to assign decoration so let's go ahead and do that box decoration and inside box decoration we do so let's go ahead and check the color first okay so here we want to do a color so what I'm going to do here first for now I'm going to use colors. white okay now let's save it and here we already see that so now our sized box is working but our point or Target is to make it a turn it into a circle now box decoration over here actually has a properties where it says border radius so here instead this we are going to use border radius so let's go ahead and do that now here we can do border radius and that we can do only over here because we just want to apply Border in two places so top right over here at the right and here we could do radius do circular and then let's assign 10 and you see it already changed and at the same time over here top we can say bottom right bottom right this one and radius do circular and then here we can also do 10 again now let's put a const modifier and put it here and we see that this is almost look like it's working as you can see over here right so looks like that okay the it took effect and I know there are some tiny differences so we're going to fix them later no problem now this is our sized box for now and uh I do believe that we can turn it into a reusable widget okay so I'm going to copy this thing over here let's go ahead and copy and find it here and insert this widgets over here we can create a new file and uh before we had Big Dot so here I can have big circle dot Dart let's go ahead and add that and then here we can create a stess class and we can say big circle clle now let's go ahead and import the library and we can just simply go ahead and remove that and put whatever we had already and go ahead and import for this one remove this package we don't need this one all right now we're going to come over here uh let's go ahead and put a const modifier so so what I'm going to do I'm going to actually delete this and then here I can just say big circle and save it you'll say there and and if you have two of them okay you can save it and we'll see that they're together but now you may try to use expanded widget expanded and then here you can use a empty container let's go ahead and check that and we'll see that it should work I'll remove the const let's save it and here we are but now this circle has a problem because the decoration itself the Border you see that the border is not showing here correctly so what do we need to do we need to set up them differently the Border over here we need to work on a different kind of setup so what setup we could do we can come over here actually we can attach some condition over here okay so we can just simply talk about left and right okay and if this is new to you don't worry I'm going to make it easy final here we can say is you can name it anything so I can say is right okay I'm going to say it's is it on the right side or left side this is the meaning so it's like a flag now here we're going to add this one but we are going to have it as required we must have it okay and and looks like uh what is it uninitialized okay we can ignore that one now over here actually we can check so we going to send a value to it okay so we'll say is right is right if this is true okay maybe I can do like this this is It's called tary operator if this is true then we use this okay otherwi wise then here we can copy it again we going to put it here and uh let's see what's what's going on inv valid const so we need to remot the con itself and then we can also change it here is write true then it would be shown over here okay is left true it would be shown over here here but how to do that if it is right true then actually you don't want to have border uh outside you want to have border inside okay so this is where we are coming so is right true then over here instead of top right we'll have top left okay top left and instead of bottom right we'll have bottom left okay hope you understand the thing that I'm trying to say okay now we have an issue what is the issue we need to pass it from here as well okay so here we're going to say is right so is right so the first one is this the right one or left one so this is the left one so we're going to send false now over here it's the same thing is right the second one should be the one on the right over here right now let's go ahead and save it okay and we already see that it changed all right so now over here actually we have used Turner operator to work on this now more on Turner operator and this thing in next lecture okay so now we are going to learn about turn oper this one that we talked about early before that let's go ahead and do a little fix over here like over it says that and uninitialized field should have an explicit type annotation so here this field is not initialized what what do you mean by that that means that it doesn't have any Direct Value over here like say anything like that so this kind of situation it says go ahead and do a type so we assign a type to it and that's called bull okay and now you see the arrow is gone so that's the correct way to go ahead and work on this thing all right and then and we also talked about that we're going to see tary operator now to work on tary operator let's come come to our main uh main function over here and then let's re clean this things so we don't need this all right so in general uh here this question mark and Dot is called tary operator okay this question mark and this I think it's not DOT actually it's called colon so that's called tary operator so we are going to use this tary operator now how it works okay now it is used for conditional statement for example you can say int x equal 10 okay all right now I declare a variable and then I can do over here if x = 10 print he is a kid all right and then over here else we could say that print he is not a kid just an example okay now let's go ahead and run this so here we'll see that um is going on so let's go ahead and print it okay so he's a kid right that's what it shown over here now what if I don't pass 10 or what if I pass 12 okay well he's not a kid this one gets executed right now of course this is a basic uh else if or if else statement but now there's a easy way to work on this we can do like this x = 10 then here we say print a is a k and then we could do like this print he is not a kid now for now I'm going to comment this out and we'll see that exactly the same result is not a kid but if I do this here we'll say he's a kid so this if else you change it to this question mark and this colon so here is your question mark and here is your colon so you can use you have to use them separately actually so this is called tary operator okay well even though it looks like uh it's very simple and yes it is simple but it could be very powerful and that's what we have seen over here now inside this over here we have set up a condition so this is the condition actually if is right is true then we show this border radius otherwise we show this one this is just exactly same as this okay so hopefully it makes sense that how Turner operator works now using tary operator not only you can print or do some conditional check you can also return widgets okay which we'll see a lot more very soon that we have a lot of conditional uh variables then we can use this Turner operator which means this question mark and this column together to make sense out of it okay cool so hopefully with this your idea about Turner operator should be clear now let's go ahead and move on so this time we going to come over here one more time so that's what we had and I guess we can add a const modifier and same over here all right and at the same time let's format the code all right now with this it looks good okay so now of course we need to change this one over here this doesn't exactly have to be the same um as you can see but so the next thing is that we are going to show this dot over here right remember we already have an app l Builder if you see come over here app layout Builder so this one we can pass this one for now right and how do we go ahead and pass this thing okay cool uh let's come over here we can close this ticket View and then we have this container right and then we have the other one for the bottom part so here here we go we have this row right and and then inside this we have this one so this is creating the space between these two right so we just simply go ahead and remove this and then here we can call app out Builder widget and then here I think we have a variable which is called random divider okay now I'm going to put as 10 over here all right and let's go ahead and have it okay have this const I think over here and now let's run it and here we already see that we have this uh dots they showed up right okay now let's C here this app layout Builder now anyway so what it does so this gets the space between these two dots right and I mean this two circles and then divided by this one remember this constraints do constraints width this one gets the space between this and this then whatever we pass gets divided and that's the number of wiet right so here this value the larger it is the smaller this value so fewer the generated list hopefully you understand so this value the more or the larger this is the eventual result would be smaller right so it means that list to generate over here value would be small over here with the 10 we see like this so how about double it go ahead and do 20 okay now we do see that okay here we have well few of this dots but now there's this problem that what is the problem you see this width is actually hardcoded right we don't want to do it so how do you want to do that okay so here here we could do final int okay here we could say with just go ahead and do that and then over here we can say this dot width now we don't want to make it required as you can see already it says here you make it require but we don't want to do that we can actually give it a default value value default value is three okay once you make it required you have to pass it but then if you don't want to put required then of course you remove that at the same time you give it a default value and what does it means it means when we call this class if we don't pass value for this it's going to use three and this is exactly what it is doing over here now we are just passing random divider this value value which is this one but we are not passing anything so it's taking as a three over here but here actually we want to have it a different style so one thing the other one actually you have to also assign to it with okay and let's see what's going on okay so we need to remove uh value so this one right and let's see what else we have in cannot be okay so here it say this double then what do we do we assign it as double and then we are good to go and then here we go so whatever the value you pass that would take effect and if you don't pass any value this value over here three would take effect over here okay and that's how it works okay cool and let's restart and of course we'll see no changes because that's expected let me go ahead and reformat my code so that you guys know actually what I'm talking about okay okay so just like this now over here we want to pass withd so here let's pass withd and this time for this one we want to pass Six okay and then let's save it and we do see that they got much bigger right so that's how it works and then how about say eight okay so that's how it works now one thing you could do here we can do 15 or say 16 and then let's keep it six okay which is much better well so this part so far so good and this exactly looking like this one over here and we are happy about this one okay okay so now let's go ahead and continue to work on this so what's the next step Next Step would be doing something like well uh this but looks like our app is not running so now we want to change this text over here okay so that they look similar okay by the way now you may look like that um here it's small here it's big that has to do with the screen and resolutions okay uh if you run for example I'm running at iPhone 14 this app we run here it would look small and if I run this app over here the screen would look bigger so you can always ignore that okay all right so now let's go ahead and move so we need to be here inside our ticket View and so far will have three containers on our ticket view so let's go ahead and locate them um okay so that's the first container second container third container so let's uh put some comments otherwise it'd be confusing okay blue part of the ticket and then circles then over here we'll have orange part of the ticket beautiful so this is the place that we want to change all right make sure that once again you find the correct one and then how you want to change now I'm going to put it here so that I know what I'm changing so the first one is the day so it should be uh first of May all right and then over here uh second one now second one here we do see that we have this big dots expanded widget L and that but in fact we don't need any of this so I'm going to keep them as it is uh I'm going to change them later so let's go ahead and change one by one okay so that's the uh text that we have changed all right and then this one should be date so let's go ahead and change to date they right and then this this one should be here like 0800 am okay and what else after that so now this one over here should be uh let me see am I doing it correctly so this is the first row May okay so I missed that so this one should be here okay so there's a bit of um mismanagement sorry about that so this one should be uh okay this is date this is correct and then this is correct as well and then this one is uh number okay okay hopefully I'm correct now let's go ahead and save it and let's take a look and compare yes we are correct apart from this one okay well there are some problems we'll fix them don't worry and we also have issues with the text some of them are big some of them are small we we'll fix them no worries okay all right so now how to fix this one now for this one actually uh here okay what are we going to do we can remove this too we don't need them and then I can copy this text any of this and then I can put it here and uh here we do see that 08 am right so we need to I I think we have a bit of mistake so let me go ahead and fix that so here actually it should be O8 sorry about that uh am and then over here this one should be departure time de departure time let's go ahead and save this and now we see that okay now the text are all correct right so we have two problems one is first the layout problem and then we also have the size problem let's go ahead and fix them okay so currently we are having some issues with the style and layout so let's go ahead and fix that the first problem is this this text would be actually smaller than this right now they're all headline three as you can see so that's what is causing the issue so we need to change that now to able to do that first let's come over here app Styles file and we create a new text okay so let's go ahead and do that and we're going to keep it here and we going to call it headline four and then over here we're going to have 14 okay so now let's come over here make sure that you change correctly so here instead of uh not this one over here instead of three we're going to have four here is the same four and here is same now let's go ahead and restart and we do see that they have actually uh become smaller but there is this alignment issue right now what's the alignment issue you see here it's a little over to the right but it's not centered now making it centered is possible for example say over here you have a a now here BB and say where here you have CC now they are centered perfectly well but the problem with the earlier situation is that they don't have enough they don't have fixed width like this text the spaces takes is different than this and this they're kind of all different okay so that's why it's difficult to center now we can use a trick to do it we can give them a fixed width especially the last two middle one is okay because it's still it will stay in the middle so if the first one and the last one we can actually give fixed with this would autoc centered okay we don't understand say for example here we say a a a and here we do BBB let's go ahead and save it and here see that they're all currently aligned and centered right so the important thing is the first one and the last one we need to give fixed width and how can we do that now over here we can wrap it around the widget and we're going to wrap it around sized box widget and then here we can give it width say 100 and the last one is the same over here sized box weet and we give it 100 actually we need to do width and then we do 100 let's go ahead and save it okay right all right but now this's this other issue okay it's it's really not looking like that it's centered like this one right this one is at the beginning of this uh widget right this a size box widget this is at the beginning and this is also at the beginning so what we want to do with this this one want to put it to the right side now inside this text widget over here we can use text alignment and here we can use a text alignment this one and then here we could do end we put we're going to put it to the end now it's perfectly aligned and this is what I Wasing talking about so when you see you have text in one row and the text themselves They Don't Really uh get align and if you want to align them so you need to go ahead and give them fixed width and the middle one doesn't really matter because as long as they have fixed width they can align themselves perfectly hopefully it makes sense all right so now let's continue to work on this and in this lecture we'll see how to restructure refractor our code a lot of the refractor would also help us to work on this now the first refactoring or restructure we want to do with this text because we do see that this text is actually being used in so we see that the text is being used in a lot of places so let's go ahead and create uh different widget classes for this so we're going to be here and inser the Base Class inside this widgets we are going to go ahead and create a new uh class over here let's go ahead and do that and here we're going to call it text style third now actually this could be anything so I'm just going to go ahead and name it like this so here I'm going to go ahead and do stateless and text style third like that okay now there is no hard and fast rule as long as it makes sense so you can go ahead and do that now how you're going to restyle this thing so let's go ahead and see now I'm going to copy this one first and then I'm want to put it here and then I'm going to replace this and that's all and over here we going to go ahead and import it as a library package and the same over here let's go ahead and import and with this opportun is not needed let's go ahead and clean that now let's come over here and we want to remove this and then here we're going to say Tex style third so over here I'm going to have it as a package well we're going to choose this one all right and then let's put a Comm over here now well we want this to be dynamic so this is something that we want to pass now if we want to pass it we need to declare the variable so that we can go ahead and grab it in the Constructor so here we can say text and then this is something that that we also want to say requir which means you must pass this so here this do text and with this uh the arrow should be gone and then over here we're going to go ahead and uh like uh just pass it down text so whatever the text value you pass over here uh you'd be able to go ahead and uh show it okay now now over here we'll have an error so we can pass anything so here we'll say ncy and YC actually so let's go ahead and put a con modifier and restart it and nothing changes now with this it becomes simple as you can see so what we did here we created a class and in this class we can pass the text dynamically because we must pass the text and then uh that's why we said required and now this is within this curly braces something with it curly braces this is called named parameters okay now if you do how over on this you will see that or if you remove that you'll see the hints so let's go ahead and see it so okay the named parameter text is required because it has a name so that's why you have to give the name whatever the name is given here so if here is given text you cannot write here say string or you cannot write here as name say for example my computer so whatever the name is this this has to match this one or whatever the name is this it has to match over here all right now I'm going to collapse this so that it looks great now the same over here so I'm going to copy this and put put it here okay and now instead of this we are going to have L DN rester nothing changes but the code becomes more readable and clean okay and the same goes over here so I'm going to take this but now there's this problem over here you see that uh the text headline is a little bit different right so I'm going to go ahead and uh one thing definitely I'm going to do I'm going to copy the whole thing over here okay in fact actually I'm copying the whole file and then I'm going to go ahead and create a new class here a text style fourth now the way I'm naming it based on the headline text okay so instead of third we're going to change it to Fourth fourth okay let let me come over here and put it and that's it now let's go ahead and close this and over here ticket view so let me copy this thing and let me put it here now instead of third we say fourth okay that's the only thing we need to change okay so this Things become quickly reusable okay this one I think we have one more comma and then instead of this here you want to say New York New York okay now of course we need to come over here and instead of three we need to say four otherwise we'll still get an error and that's it let me go ahead and close this uh let's restart and nothing changes at all and over here uh put a con modifier so yeah that's how things become very simple now luckily we can also take this one from here and then we are going to change it right and okay so here what are you going to say uh what was that early though I think it was uh 08 0 am and let's put con modifier in front of it and it should be fine okay right now over here as you see we have this one but it got a new style over here which they don't have first two right so if you just focus on this one but what we could do we can actually assign a style to it okay so here we could say uh final text align okay this one okay and then here we could name it anything align and then over here we could say required or even we don't need to do required now this time it's align and then let's give it a default value so here text align do start so if you don't pass any value this is going to take default value and when you put a default value you don't need to say required keyword over here because well it's already given a value default value so if you don't pass anything it's going to take this one now all we need to do pass this value over here align so here we're going to say align and then let's see what's going on okay I think we need to do text align okay now it would be good so the property so the idea is we may pass the Align property if we don't pass we're going to use start okay and whatever you pass that would also take effect okay so let's go ahead and restart and definitely we'll see no changes at all no changes at all okay so uh that's it by the way I think um let me go ahead and copy this just let me make sure whether I made a mistake in terms of text over here I don't know what text was there oh there was 8 hour 30 minutes so that's the one that we want to pass 8 8 hour 30 mean so 8 hour 30 mean all right let's go ahead and restart okay so back to it or 30 m all right but nothing else changes and regarding this one once again uh we can copy this and then we put it here okay let us remove one of them and then over here it should be London right let's go ahead and put London let's hit it okay now we see the problem because right now it's taking the default value over here start but then we can pass a value so you can have the uh parameter name which is align and then here we can pass text align this one dot end okay so let's go ahead and restart and we'll see it would fall back to our original design and then over here we're going to put a con modifier now with this the code looks much simpler right as you can see so whatever we are passing uh it just does look more simpler than anyone else now one could go ahead and also put uh new or create new widget using this someone could do that but I just keep as it is okay all right so with this this part has been done so in our next lecture we're going to go ahead and work on this one all right so now this time we need to go ahead and work on this and of course this looks like a mess now earlier we have given fixed size to work on them now the problem is these three text are very different so giving fixed size could overlap each other so that solution might not work here so we'll take another approach actually which is also a way to learn about layout okay that how we can in different situations we can design different kind of layout now over here this layout we are going to change and we are going to do it in a very special way and and how we are going to do that so let's first come over here and over here okay right now what I'm going to do I'm going to go ahead and comment this out okay that's the first thing I'm going to do and let's keep it is as it is and then at the same time I'm also going to actually comment all this out and of course that's very weird where we are doing all these things right okay so now this two text actually I can wrap around another widget well okay just think of column first so I'm insert column and then I can create another one and then over here I can go ahead and save it and before saving we can go ahead and change the name to date let's go ahead and save this and that's what we see and exactly what we had early with our other app well looks like I closed that simulator but anyway so you get the idea and then inside this we can actually create size box and give it a height five and this is exactly what's going to work work and all it needs a con modifier let's let's put this let's save this and this is exactly what we wanted just like earlier and then of course here I think we had date okay and at the same time this one 1 of May could be replaced by text uh I think text style third this one and then the text was first I think that was may just like this and let's put it like this and it's going to work so it's working right and it looks simpler with this so I'm going to put it here and then over here we are going to say date date okay right so yeah now it became much simpler right and let's get a con modifier now that also means for rest of them we actually want to repeat this thing and so that means that we can just copy put three of them and done but it rises a more questions about I mean it it it does create a bit of problem let me go ahead and put and you know what I'm talking about so the first thing of course they're very close to each other okay now if I have a layout like this over here of course I could go ahead and change it to main access alignment main access alignment dot space between all right okay but the earlier problem was as you see that if it's the beginning that's okay they're all aligned but when it's at the end over here they it's look it's not aligning it's still aligning from the top right so for this one over here actually we can use uh alignment uh that should be horizont uh vertical actually uh sorry horizontal alignment in that case that would be cross access alignment and cross access alignment do end and you see now it align just like this right okay cool and how about this one so this one this two should be centered over here we could do cross access alignment and uh cross access alignment Dot Center we can do this and uh let's restart okay so they are already centered but it doesn't look like but if you do have a big text over here big text and you'll know that it's a center and that's what I was talking to perfect alignment so this is a better approach and going to work with like Advanced concept where you want to align different kind of stuff okay with different kind of text and this works this always works okay now here one thing we have found that this process is repetitive so what we could do we can go ahead and create a widget over here and here we can just simply go ahead and call it uh app column uh text layout do do okay and then over here we can do app column text layout the name could be as long as it Mak sense to you all right okay so now copy this and we're going to put it here and then let's go ahead and import the dependencies and most probably we can put a then here we can say app column L text layout okay but of course the the problem is we we still need to pass the text right so right now it's hardcoded but we want to make it Dynamic then here we do final string top text final string uh bottom text like this and we want to make them required so here would say required let. top text required this do bottom text it's going to work and then over here this would be replaced by top text top top text XT it should work let's see what's going on so here we have this const thing remove that and it's going to work and here we say bottom text and it's going to work as well okay now of course here we'll get an issue because now it's saying okay you have named parameter or I mean it the Constructor needs parameter over here but you don't have so you need to assign that here I need to say top text first May and then over here bottom text is it should be what was it date okay now this is going to work and which means that over here I'm going to just replace them but now this may cause the earlier issue alignment but we'll fix it but you see how we work step by step let's save it okay now if the text is Big it's still going to cause alignment issue if you see okay now if we have alignment issue it may cause alignment issue so here we can also do final cross access alignment and align me this one and we pass it here with this we can actually pass uh required you can make it optional if you want alignment okay and then push the alignment here so here we're going to do cross AIS alignment to alignment so whatever alignment you pass it will take that one so the first one over here we are passing alignment and here we're going to pass cross AIS alignment. start so let's go ahead and copy this put it here second one we know that we are going to do Center and the third one we are going to do to the end all right let's save it and now they're all perfectly aligned so then in that case what's our job our job would be to go ahead and copy them just uh pass uh I I think uh what was it so this is I guess one of the text over here I'm going to pass it down and I think that was uh what is the text let me go ahead and check that from here departure time so I think that was the other text and it should be here departure time let's go ahead and save it beautiful and and over here there was 23 so it should be 23 what is the last text number so that is actually most probably the sit number so let's go ahead and put it and beautiful okay now you see how they Auto align everything automatically and this is the result that actually we are looking for and that just works perfectly okay okay anyway so now after this that means that uh we can just simply go ahead and remove this things we don't need this our code is clean and readable so over here this this all the things we don't need okay so with this actually we are pretty much done drawing our widget and uh working on this clean beautiful layout okay now if you do want actually go ahead and further separate this and this to a different kind of classes and just call that class with the given arguments if you do that make sure that you are passing this things anyway so uh after that we are going to go ahead and focus on Dart concept so far it has been front end a little bit of Dart concept so next section actually we are going to learn more about our Dart concept and how to load this thing from Json file which would be more like API response so this is where we are going to focus and then of course that Focus would be step by step first we'll learn what is Dart list and map we'll give a lot of good examples and then we'll dive into loading them from our local storage I'm going to do this thing in this browser over here so just go to D pad. Tab and there's this browser and and it's a DOT language pad where you can practice your dot you don't have to install any compiler to work on this all right so first over here we are going to create a class and we're going to call it test the class name and over here I'll have variables so here I'll say int x z and int y say minus one it doesn't really matter and then here I'll have uh Constructor and then I'll say this.x this. y so which means that well um when we call the Constructor this one we have to pass this X and Y value even though there's already one but when you create an object of this we have to pass now how how do you do that so here we'll say test T equ call test well Z and 10 it doesn't really matter now I want to print the T T.Y value so that's what we want to do and now if you see and come over here hopefully it would work well looks like it's a bit slow over here so uh I'm not sure why it is slow though it is supposed to yes it printed the value which is 10 even though the earlier initial value was minus one and then but we were able to change the value okay and after that like for example you could also do like this T 100 okay T.Y so we are we are creating an object first and later on we decided to change the value and uh actually changing the value takes effect as you can see over here right so this is the basic and general way of creating a Constructor first you create a class and use the Constructor to create an object and if you want to change the value you could do that now there's another way of doing like this working like this I wouldn't say doing like this okay all right okay so over here first we had this test now I can create a class called result it doesn't matter you can call it anything here I would do a little bit different one so here I say final x = z or just final final int X X final int y all right and then over here I would do result this dox this doy all right just like this now here you see there is a difference so over here we are saying we are using this final modifier and of course at the same time we are not assigning any value over here so all right so this is what we have over here now what's going to happen is like this so let's go ahead and create a result R I'm going to say and result and then pass zero or like say 10 okay let's do something different 20 like this and then print r.x doesn't matter okay now let's go ahead and print it well definitely at first to will see t y500 and RX which is this one now what I'm trying to prove over here well you see okay the first thing over here we created an object well at the beginning for test itself with this value right X and Y and when we created this value actually when we created this object we changed the value well the first one we didn't change but if you want you can second one we change to 100 and then later on we again changed it right if you want actually you can also print it here print T.Y so with this we'll first see tal 1 uh y y = 10 and then over here we'll see that y equal 100 because the first time as we are creating the object whatever the object we created and we can print that object field value which is this one and later on we change the value and then we print it again and we this is what we see this is 100 right but now let's go ahead and see what happens in terms of this result now so far looks like everything is same so over here we created a result instance and we get this x value what is x value x value is 15 and that's what we see over here now you do see that um here if you try to do like this r.x equal say 300 or any value and you will get a compile time error which means over here we have an error why because this FS uh you see over here X and Y we have assigned them as a final now what does that mean that means that well you can use this value to create an object that's fine but this fills X and Y you can only assign once per object so here we created this object called R and as we are creating actually we assigned a value and uh we can print that but once you assign value you reassign value you can't do that so what happens with final modifier if you have have a final this keyword in front of a variable in Dart or in many other languages actually it means that you can only have the value once you cannot change it again you can only assign the value whenever you create the object which is very different from this so over here we don't have any final or anything like that and as you see for this reason you can can change the value anytime anywhere you want and that's what we have seen we have changed the value over here but this one we can't because we actually have SN value and we say it's final which said which means that we are not going to change the value once we create an object so you cannot do that but of course you could create another object so here result say RT result now here say 33 or 400 doesn't matter of course you can create new object again and print RT do X so this time we'll see that it's printing 30 so yes because there is this Constructor because of this you can always create more objects but as you create you assign the value and after once you assign the value actually you won't be able to change it again so that's what here final means and if you have final Fields actually you can also put const in in in front of this Constructor but so which says that actually even if you don't put I think it works the same saying that okay I'll create this object but once I create I won't be able to add it or modify or nobody's is allowed to edit or modify so this way creating object is called immutable object so over here whatever we are creating from result it's becoming immutable immutable means not changeable the fancy name the name is very fancy it says immutable but it just means not changeable but this way we create an object this is called mutable which means which is changeable now over here let's see you try to put a const over here and here you will have a problem here it says that can't Define a con contractor for a class with non-final Fields right this fields are not final if it's not final that means that they are changeable so if you can change them that means you can't have const here so in Dart and flatter if you put a const before a Constructor you have to make sure that these fields are all final otherwise it's just not going to work which means that you have to have final keyword in front of them that's what it says that now in general most of the time this is more welcomed and more convention because this is safe it's really safe because once you create an object you can't change anything or any value that becomes less buggy less error prone which is really good so try to do this whenever possible all right so yeah that's how the immutability final const uh modifier Works in Dart all right so since we have this basic understanding how this final const modifier works so we'll go back to our flut wrap and we'll see okay so after learning Dart list and map a little more now we can go ahead and build something better and stronger this time we are going to go ahead and uh create a new well I say that over here inside this base over here I'm going to create a new directory and I'm going to call it you tails and inside this I'm going to create a new file and then here I'm going to call it app Json dot Dart just like this okay and okay so that's the first thing and inside this I'm going to put this information now this would be given in the resources section you can go ahead and grab that all right so what's happening here uh first Analyze This things we see that this is we have a bracket like this so we know that this is a list okay now inside the list we see that we have curly braces as I told you if once you have curly braces that corresponds to a map so from this visual analysis we see that we have a list and inside list we have map now that's what exactly we wrote over here we have a list and inside list we have a map the map itself we also said the type okay so the map here value is string and then the sorry the key is string and the the value is dynamic so if this is a map over here if this is a map then what do we say well actually even before I go there let me show you a little more that what I'm talking about okay so this is a list and inside list we have many Maps so we say that this is uh list of maps hope you understand so there are many Maps here so if there are many Maps we want to put it in a list okay so that's how you go ahead and process them so we say that a list of maps Okay the curly braces are all maps right okay cool now if we see each map now this is one of the maps and if we see each map we'll see that here we have keys so [Music] two uh fight time date departure time number so these are all the keys and then for each Keys we have values now for Value itself we see that there is another map but here we wrote a dynamic so it could be anything now here there is also another map okay but here we don't have map for each key we have values values a string okay now the same goes over here for other maps and then how they're structured inside they're all same so now this is available in our app right now so the whole thing list of maps we call at ticket okay ticket list it is a list right once again it is a list so we call it ticket list so remember this is a list of maps just general English learning okay hopefully it makes sense and since we are ready with this now we can come over here in our uh home screen and if we if we see in home screen we have ticket view okay for now we have only one ticket okay well then if we want to more ticket horizontally how to do that well we can wrap this around a widget so let's go ahead and do that we're going to wrap this around the widget and we're going to call it single child scroll view single child scroll view this one now what is a single child scroll View if you have too many children like over here this one we have uh lot of children right let me show you what I'm talking about so this is a column and inside the column we have a lot of children one of the children is zow sized box container and app double taxt things like that and then we see that we also have ticket View now when you wrap ticket view inside single child scroll view it's just going to scroll this ticket view it's not going to scroll others okay because you just one scrollable item okay so that's why you say that okay go ahead and just scroll this child okay and leave the rest as they are so that's the first first thing and then over here uh we can do scroll Direction okay we want to scroll horizontally so here we do access. horizontal okay all right of course so far we have only one child so you I mean you won't be able to really scroll it because nothing to scroll here you see actually there is literally nothing to scroll I think my app is running okay so since there is only one child uh we cannot scroll it what I'm going to do I'm going to have another child over here and that would be row wiget and inside this I can have things like this okay so now here actually I want to scroll this row so that's what I'm trying to say so now go ahead and put say for example another one so have two of them and here we see that we can scroll already isn't it beautiful okay now if you have just one you cannot scroll them okay so you need something where you can put more children so what I'm trying to say whatever you put inside this single child scroll view as long as the children inside or the child inside there's a longer more than the width of the screen then it's going to scroll okay now of course right now there is nothing on the left and right no point of scrolling why we put row because we want to put a lot of them next to each other and now one might say why you just don't directly go ahead and put the row over here all right someone can say that but then you see that we have overflow issue because row widget is not supposed to scroll to make a row widget scrollable you need to wrap it around single child scroll view okay so that's how it works remember again to make a row widget scrollable you need to wrap it inside single child scroll view actually the same goes for column if you want a column to be scrollable you need to go ahead and uh uh wrap it around single shell scroll view now we can actually go ahead and oh we have this one already but of course we don't want to rate it like this we want to rate it from our list okay we don't want to have two tickets of with the same information these two tickets they have same information so what do we want to do now to go ahead and load this information and okay so for this one we actually need to remove the list over here here so here we are going to introduce the list variable the one that we declared which is ticket list this one and this is a list so we can take some part from it so we can we just going to take two of it and then we access the map of it so remember we have a map right and we give it a name as a single ticket and inside this we're going to return ticket view okay so let's go ahead and do that here we say [Music] return ticket view this one and that's it and of course it will show an error because row needs a list remember children is a list but what happened over here remember this one just became a map earlier we have seen in our other example that whenever use this map function it becomes a map so that's why it causing issue and what to do then well in that case you need to go ahead and convert it to tool list okay remember earlier we had this and let's see what else we have we invoked okay so we have a const expression let's go ahead and remove that okay right so that's what's happening over here and I do believe that it shouldn't be here okay right like this and then we need to remove that and actually we also don't need return because this arrow means return okay so that's how it works but if you don't understand the arrow sign and everything else so here you could also do like this so here return and it's still going to work okay um a lot of people prefer this because this is more readable and with this uh lot of the programming concept might not be very clear okay so what I'm going to do over here I said that okay I'm going to take the whole list and I'm just going to take 12 it convert it to map and from each of the map we take each of the from the list we take each of the map so remember we are taking each of the map so this is a map right what do we do we take the map so the map name is single ticket and then we're going to do actually we'll pass it over here now let's go ahead and save it but of course we don't see any changes but so far we have two items but now things can be more Dynamic here we can have three so we'll see that we'll have three items uh okay as you see we have three items but if you remove that most probably we'll have all of the items uh let's go ahead and reload and here I think we'll have five or six items as you can see and the screen become beautifully scrollable and in fact it does look beautiful okay with everything uh sitting together so that's what we wanted to do of course now the problem is once again this information all are same but if you see the Json the Json information inside they're different okay uh so like here New York DK Daka New York like that you got my point so that's why we take each of the map once again each of the map is the map here each of them and we are passing so in fact we need to pass it over here okay here we can say t K single ticket now this is going to throw an error so let's go ahead our tiet view class over here and then here we could do final map uh string Dynamic and we're going to call it uh what is it ticket we can just call it ticket all right and then of course then we'll have issues over here so here we'll see this the required required this do ticket okay I think we have a type over here dyamic okay now if you come over here of course the error is gone now what we did over here we are P passing each of the map to this ticket view that means we are passing each of them each of them and we are doing that in a loop okay so row is also like a loop actually you have to understand okay now okay so we can grab that information and not only that this time um we can access the ticket itself and where to access them so this is the first place that we want to access so we want to access this one okay ncy now remember in our place we have to access code from and then code and then we' be able to access this okay so how to do that let's go ahead and try it ticket view so here I'm going to remove this and then here I'll say ticket and here you'll say from then here you will say code and uh let's remove the coner here and let's start beautiful now you'll see that immediately this one changed everywhere remember this is ncy this is DK and this is another DK and ncy I mean now they're a little bit different right because I'm loading the data dynamically from here but of course some data is are repetitive and that's okay you but you get the idea right so that's the first thing that we changed over here and that's the beauty of loading from Json file okay now this one over here this one okay uh let's see what what code we have so it's called two code two code so we need to have that one once again I went to the wrong place so here ticket to code I need to remove this okay and what else okay so New York right so I do remember that should be uh ticket [Music] from let me see the Json file over here it's called a name from name name so here we're going to say name all right and I do believe we need to remove const one more time error should be gone okay and the this one so I'm going to copy this and put it [Music] here and then from a should be two name let me remove this okay right but of course we don't have any changes but we'll see that Dynamic changes are here on this ticket we know that there isn't much change but here things are changed as you can see DK Dhaka aset Shanghai right now by saying that one which also means that actually we can change flying time date departure time number and that means that actually we need to come back to this one so we have this uh okay so this this part is just for Ticket icon let me put a comment over here ticket flying icon all right and then from name okay so this one right so let's see what is it flying time so we call it flying time I'm going to copy this and come over here and remove this and ticket flying time let's remove const it's gone beautiful and so that was this one but okay the flying time I put the same over here but I can change it let me go and change the second one okay I think the second one has already been changed so let's restart the T our uh app yes now here we see that 4 hours is 20 minut so it's working cool so we are loading them dynamically and what else so over here the same thing uh and what is okay it's a date and departure time so I'm going to copy this I'm going to come over here so so the first one should be there's a date let me go ahead and check yes date and uh we do have an issue to remove the cons from here okay right and then this should be departure time ticket departure time it should work and and the last one number so I'm going to come over here indexes ticket remember how we accessed early in our example so if you have a list a map you can always use the keys to access the values and it looks like we have a bit of issue ticket number okay right so this is an INT and here it says the int cannot be subtype of string so we are passing int but this one accept strings over here this top text if you go and check top text is a string but we are passing int so this is an INT so how to solve this to solve this issue over here we can convert it to string and then the arrow should be gone and beautiful and right now all these things are all dynamic as you can see and beautiful so with this actually our ticket part and dynamic loading from Json is done but of course this is still dummy Json data in future we'll see how to load this even from server okay so these are step by step and the way we work okay so but we are making progress all right now we'll go ahead and uh work on our view all sections okay because earlier we just showed two items from the ticket but now we want to show all of them and we want to do them in sense of by clicking here okay now if you do remember where is this coming from this is uh coming from here app double text and uh we see that here we have this on tap function here we could go ahead and print something like this tapped all right and if we do see our terminal okay let's go ahead and uh see the terminal and click on this and we see that here it shows untapped so that's okay as well now what are we going to do we are going to actually create a new screen over here okay all right so inste the screens over here we are going to create something called all tickets dot Dart so let's go ahead and add that and uh I'm going to hide it looks like it's not hiding okay dead and then here we're going to do state class class we're going to call it old tickets and let's import the necessary dependencies so this is what actually we want to call okay now let's uh come to this class over here this one and we have this app double text so the thing we want to do we want to actually call from here right we want to call from here and how we are going to do that I mean when we click this button then this should go ahead and call this one right and how we going to do that now there a this would be a stepbystep process so first here we can use something called navigator navigator navigator dot well just go ahead and push that thing all right now I wrote this one because actually I wanted to pop up me a snippet of code over here and that code actually we are going to use let's see what part we have now here you do see that Navigator push context material page route Builder build context and you pass your uh page of screen so here I'm going to copy this but it's not always easy to remember and I'm going to push it here all right and you'll see that we're almost good uh let me go ahead and uh here we can call all tickets this one and the arrow should be gone and let's go ahead and run our app okay let's click on this and we have this uh screen over here uh so this is actually officially we did our first routing now the problem with this we cannot go back unless we restart our app so now let's come over here the first thing we want to do remove this and use a scaold scaold fold because we are we need to go ahead and uh go back to the earlier page when we click on this okay so that's why the skaffold comes in because we can get the app bar property from it all right and uh let's save it okay and then we can easily go back so if you want to go back and forth e scaold e can definitely help you otherwise it's difficult but of course there are other ways to do that all right now let's focus on this thing so what we did over here now this Navigator is an object actually this object has to do with navigation navigation means going from one place to another right and then here we are using this uh push method now this push method what it does it pushes a new screen on the stack so as you can see this is the new one actually it had this one the idea is when you click on this it's going to push something new this is the new this is the new UI so that's what it did over here so it pushed the new UI on our uh screen over here this is where navigation do or Navigator do push comes and play so here we are going to broaden our understanding of this Navigator and push and how they work together now let's hover over on this and see what it says that it's a widget that manages a set of child widgets with a stack discipline so it's saying that okay there's a widget and it manages a set of child widgets okay so and that those widgets are like in a stack that's what it says that and at the same same time it says that many maps have Navigator near the top of their widget hierarchy in order to display The Logical history using an overlay with the most recently visited Pages visually on top of the older Pages now how do understand this thing so here it's saying that while many apps they have a navigator near the top of their widget route hierarchy so many app will have a navigator object or a navigator widget near the widget route now how to understand this one okay we'll take a step and see how it works okay now here it says that using this pattern let's Navigator visually transition from one page to another by moving the widgets around the overlay so it's trying to say that well so you might have things like this where this is the root and at the root you will have routes like this and somehow they would be connected they would be in a back and here we'll have the Navigator object and Navigator object would move them around on a overlay so there would be an overlay so you can think of like overlay is like the screen over here okay so Navigator object would move them around now that's the basic understanding so let's go ahead and learn more about it now let's hover over on this and here there are different kind of API so our focus is right now here it says that mobile app typically reveal their contents bya full screen elements called screens or pages so we might have screens and pages and those are the ones that shows the content on the screen in flutter these elements are called routes and they are managed by a navigator object now this is where it's happening over here you see so this is our Navigator object and here we have routes okay now this routes are screens actually in flut they call them routes but in many other places they might call it just like say screens or pages so that's what it's saying it says that when your user interface fits this Paradigm of Stack where the user should be able to navigate back to an earlier element in the stack the use of routes and Navigator is appropriate so here what you're going to have like if you click on somewhere and go to a new page and then come back like this go back and come back in this situation using Navigator and stack makes more sense so that's what it's saying and of course here it says that on certain platforms such as Android the system UI will provide a back button and that will take the user to the earlier routes in your application stack so what is trying to say that so if this is your application if this is your Navigator and if you're here then from here you want to go to route two so route two will have a back button over here if you click the back button it going to come back to Route One or Route One or in root situation but then in some systems like iOS they don't have back button okay now in that case if you don't have back button we can use abar to do that and let's go ahead and see that it exactly says the same thing so on other platforms that don't have this Bolding navigation mechanism M that use of an abber which we have seen before so we can use that one now here let's continue to learn more although you create a navigator directly it's most common to use Navigator created by the router so we can create a navigator which is this one we can create this and how do we get this here it says that actually it's created automatically by router which itself is created on config fed by Widgets app or material app so the understanding here is well we can have a navigator object Navigator object would be created by router object or widget and then this router itself would be created and configured by material app now this is exactly what I'm trying to show over here so this is our we are in the root of our application and over there we will have material app and material will have route or route object or widget and then that will have Navigator object or widget and then this Navigator would help us to manage our stack so that's what it's saying now let's continue to read the document so here it says that a material if is the simplest way to set things up the material apps home screen become the route at the bottom of the Navigator stack now let's go ahead and see so here it says that home it becomes the route or default route so that's why actually you see I wrote here home because home is actually automatically assigned to each material app and that's stays at the bottom of the Navigator stack that's what it says so this is our navigator navigator is a stack where things are on the top of each other and home stays at the root at the bottom so the root could be the bottom thing okay of course remember this roote and this roote they're different this roote I'm referring over here the entry point point of our application and this route over here is our uh routes or screens the one that stays at the bottom now this one is automatically attached to this home property now of course here they have given an example and here it says that to push a new route on the stack you can create an instance of material page route with a builder function that creates whatever you want to appear on the screen so the idea is well we'll have Navigator object now the Navigator object will hold a lot of routes like a stack but then when you want to show a certain route screen on the AP on the screen on the user screen or app screen then actually that's need to be built that's need to be that needs to be done that's need to be worked out before we show on the screen so how does it happen here it's saying that it happens through material pag rout all right now let's go ahead and read it one more time so that it makes sense so here that's what it says that okay to push a new route on the stack you can create an instance of material page route with a builder function that creates whatever you want to appear on the screen so we want to appear say for example something like this and then this needs to appear on the screen and to appear in the screen we need to pass the screen or whatever it is to this Builder function okay and then it will build the screen build whatever is there whatever element is there and it would show us on the screen so actually that's how it works now hopefully after everything over here learning this it going to make sense to us and of course you can find this in the resources section all right so now after having a good understanding on this we can go ahead and actually code this all tickets this one over here and we already know that we have this e and within it over here we going to give it a title so let's go ahead and give it a title and then we're going to call it all tickets so here we say text toet all tickets and let's go Ahad and put const all right and and after that over here we are going to have body so let's go ahead and do body and um here we want list View and within list view we want children and then here we'll have single child scroll view then would be our child that would be our column let's go ahead and do that now if you see earlier one home screen over here you'll find interesting matches okay so let me go ahead and collapse this so that you know what I'm talking about so that's the container and there should be the first row container all right so just like this one we also have list View and single shell scroll view inside that we have row that's because we want to horizontal scrolling but actually over here we want vertical scrolling so that's why we are going to use column widget and that's what we have seen over here so we have column and then inside the column we'll have children go ahead and try children and then and we can directly access ticket list. map and then we can just simply passes by saying single ticket single ticket and just like last time here we can just simply pass ticket view this one and then single ticket and after that here we're going to convert it to to list and we are good to go now let's go ahead and save it and click on this and here we go so here we already see that our tickets are all available which we see and then of course the spacing the spacing doesn't look like that it's working well now how to work with this uh let me reformat the code so each of the T it over here is this one and we want to wrap this around something so let's go ahead and wrap around a container Widget the reason we are doing container widget because we would be able to apply certain constraint with it for example like uh say margin so we can assign margin into it and add insets do only and then bottom say 20 now let's save it and here we go so that part's working and then now we do see that there's this spacing issue right left and right is not working now if you do come over here and over here we do see that we are supposed to take 85% and then the contain itself on the right we are supposed to have 16 space over here okay now if you remove it to zero let's see let's go ahead and save it and now we see that it's much better and they're equal right now left and right but with this the problem would be here the to close and they connected so how can we work with this now luckily we can set condition over here so let's uh come over here and then here we can say final bow whole screen whole screen and then here this is what we'll have and then here we can also Define a value this do whole screen here is false okay okay so this is the default value and then how to work on this one so here we can check like this we can use a turnar operator whole screen okay if whole screen true than zero otherwise here we can use 16 and here we do have const let's remove that and it's going to work okay so the default value we gave it false right so it's going to use 16 let's go ahead and save it okay and if you go to homepage you'll see that okay homepage is fine but now here it's still uh not as we expected but what we could do this time here we can pass the value whole screen and here we can say true and it's beautiful as you can see over here and everything is aligning perfectly so once again over here we didn't do any kind of value passing for whole screen now for that reason over here it's using the false value if it is false then we use 16 otherwise we go ahead with zero and it's a beautiful match as you can see over here and the screen is completely scrollable so hopefully with this you understand how navigation works and how to work with this kind of layout all right so here we have this understanding of Navigator do push and we also learned that here we have this material page route which helps us to build a screen but now problem with this is that maral page route you always have to use every time everywhere if you want to go to and navigate to a new page which means you have to write this and you have to pass the screen there are two problem s with this the first problem is every time you have to write material pager out and second you also have to mention the screen now mentioning the screen is a problem because what if you want to change the screen then wherever you have used this one you have to go and everywhere this is what creates a problem now since it creates a problem actually there's a better way to do this thing now if we go and look our earlier example like here we said that okay here we have this home route right and then Navigator actually maintains a lot of them lot of the routes in a stack now this Home Route actually we know that this has been defined in our main. Dart class over here and if you do come over here you see that we already have this one okay now to avoid this kind of situation the situation that already has arised look at this one avoiding writing this and this everywhere actually we can Define over here so we have this routes property over here actually and routes property takes a map and this is what I was saying early that we can put our routes in a map and of course we have learned what is called map right map has to be in curly braces and that's what we see over here let's go ahead and hover over on this and of course here we do see that okay so this is a map and here it says when a named route is post to navigator that post name the route name is looked up in this map so it is trying to say that while earlier we are over here have used Navigator do push to push a route on on our stack but of course now we can go ahead and use Navigator do push named go ahead and say this Navigator push named so instead of Navigator push we are going to use Navigator push named now with this we' be looking them up from our map over here we'll look the routes map routes name from this map using the name once again we going to look up the route's name from this map using the name and that's what it says it the route name is looked up in this map if the name is present the associated widget Builder is used to construct a materal page route that performs an appropriate transition including hero animations to the new route so it it means that it can do uh lots of other different things so here it says that well if you do use push named material page route is going to be called automatically okay it's going to be called by widget Builder widget Builder will call it and build this material page out so we don't need to pass it explicitly so this is what we are going to do over here now one thing you could do over here look at this so here we can assign a name and what would be the name well earlier we have said all tickets right so here actually we could do all tickets just like this and then over here we can pass the context actually we need to pass the context so it's more like your calling a function okay in this case actually we are calling the widget itself or the class itself so all tickets okay and that should do the job and it looks like we have a bit of issues so here we need to remove this const over here here and it looks good let's go ahead and Define it and let's come over here and put a const in front of it and it's going to work okay so of course one may say what does it look like why it's like this if you do want actually here you could also do like this return and it's still going to work okay so even before you call this class using this route name if you want you can do data pre uh data preprocessing preprocessing if we need to do anything but in our case we not going to do any of this so we're just going to use this uh Arrow function to do it okay it's called fat Arrow now we already defined a route over here and then so over here inside the this double text actually we don't need this anymore okay we don't need this and actually we don't need any of this so here we can say push named this one we need to pass the context and then here we need to pass this one now if you do come over here you'll see that we need to pass con context and a route name and the route name itself what is it going to be the rout name itself is going to be a string as you can see over here so that's what we are going to do and then what do you pass you pass actually all tickets that's what you pass and now with this it looks clean simple and that's it okay so it looks very simpler with this right in fact if you want you can go ahead and take this and remove this from here and then we can just use Arrow function okay and look at this okay right it's still going to work but since it's an arrow function we don't need this semicolon all right now let's go ahead and restart our app from the beginning okay and remember our changes are here let me close others we don't need the other files okay so our changes are here and over here right so we already restarted our app of course we don't see any changes if we do go ahead and click on this looks like nothing is happening and let's look it up so here we have an issue here it says that okay couldn't find a generator for Route settings all tickets so the thing it's saying that it can't find all tickets this one the string over here now let's see what's going on here we have all tickets actually I think I have a typo CK ETS all tickets and now let's go ahead and run it and then here okay it's beautiful it works so the route is working and at the same time actually I want to remove part of this things over here we don't need this still printing the log all right okay cool so now let's go ahead and run it one more time and click on this and we do see that it works okay cool now let's come back over here again now what about this one home properties actually so this is our initial property right so one one thing we could do here we could do like this slash this slash actually is equivalent to home and then we can take this from here take this and then we can pass context put a comma and let's remove this let me go ahead and remove this and it's still going to work okay and of course we don't have any issue with this and we see that it works but of course you can't have home and slash at the same time you'll have error I mean you can go ahead and try you'll have error so you can either only use the slash or home property and the rest of the routes could be defined over here so now here we also see that earlier we have learned map and this is where exactly actually we are using map to work on our routes okay now of course I think by convention you can also put a slash over here and if you do if you do that you also need to I believe need to put it here as well let's go ahead and run and let's click on this and we see that it works so it's beautiful well with this we have deepen our understanding about route navigation and how mapping can help us okay now let's uh come to the homepage remember earlier we said that this is a reusable text and we want to reuse it so now let's come over here and put this uh and I think we can also put a little bit of distance so let's go ahead and use it here and save it and here we see this one right okay so here we are able to see all the tickets right and let's go ahead and change it change it to hotels that's what we are supposed to use it but now of course if you click over here it still takes you to the ticket page what's the reason the reason is over here you see that we have um this ontap event this is also called event and this is a hard coder right so whatever we call wherever we call this class from it's the same event is getting called so what we could do instead of passing it uh making it hardcoded here actually we can pass it through our and now here we can declare something like this so here it's saying that okay we are going to have a variable and the variable would be a function type of course that means that we have to pass a function and here we say that we may pass function we may not pass function I think it would also work without this now we of course need to have it here actually required uh let's come over here uh required required uh this. funk all right okay now the idea is because you see early that we can pass a string right we mention the string type and we pass the string itself so we could similarly we could also pass function okay so here we are saying that we are going to pass function and then uh we're going to call it funk okay like this as you can see over here we function Funk now in general the convention is uh over here you mention it as void call back like that okay now how to work with this so the first thing I'm going to do is I'm going to copy this actually I'm not going to delete the yes I'm going to copy this and of course here you see that we have issues because it wants more argument and what's the argument it should be Funk and you can pass this one and let's see what's going on invalid con so const could be a problem so remove that and here it wants you to import this Library as a package and arrow should be gone and here the same thing we remove const and then we do Funk and we pass what we had okay and of course the thing is that over here um we are passing the same function right okay so even before we change or do anything else so make sure the changes take effects so we are already passing function from here so this is our function and that's what we are passing and as we are passing this we can use the past one whatever we are passing so we passed the function and we are using that function remember this is already a function okay this already has a function body so you don't have to go ahead and do like this okay and it's not going to work right so you have to pass uh because I mean you have to use it like this because it's already the function that you are passing from here now let's go ahead and restart our app and let's click on this and we see it works right we don't have any issues so the first thing what we did over here that it became Dynamic I mean whatever you pass down to it it's going to work for example now we don't want to pass the same one we want to pass something different what do you want to pass uh an empty body that's all so let's go ahead and restart so this is a callback function we are passing we are passing this would work if you click on it so this function would get called so that's why we call it callback function and this is also a callback function work on this it works and you click on that nothing because it is nothing to do if you want you can print it so here it's a print hello there all right so let's go ahead and run and click on this and here we see hello there you see that right so it's it's working and it's being printed so hello there right and if you come over here we see our tickets and you can still go back so that's how it works actually so this part has been pretty Dynamic and beautiful so definitely we are progressing and improving this time we're going to go ahead and work on this section and and as you can see this would be also scrollable left and right and at the same time of course this is going to scroll with the whole app itself as you can see over here now from this You' understand that once again we'll have a container and inside the container we will have this image and container itself will have background color as you can see over here and then uh the size of this container would be a little more than 50% of the whole screen WID over here so these are the things that we need to remember now let's come over here and see how we can arrange the next part so as usual we're going to put it here actually and then here uh we going to put our text text or actually I wouldn't say text actually our widget now this is going to be here so we had this home screen so this is a screen and uh part of it over here would be uh widget actually so here I'm going to go ahead and create a directory and here we're going to call it widgets and inside this we are going to go ahead and create a file and then we're going to call it hotel. Dart okay like that okay now why I didn't put it somewhere else globally because this hotel itself just going to be used in this screen over here that's it over here it's not going to be used anywhere else so you can put it inside the screens widgets and hotel like this so let's go ahead and create a status class for now and we're going to call it hotel and let's go ahead and import the things that we need and since we have this one now over here we can simply go ahead and call hotel and let's import the things that we need okay cool and of course nothing will change over here I mean apart from this thing this box over here all right so here one thing we do first as I said that we're going to return a container because we are going to do a design like this and one of the thing you do understand from it here we're going to give it a width okay now say you're going to give it width uh 300 let's go ahead and do that and say then you're going to give it a height 350 and then let's go ahead and do uh color actually so here we can say colors. gray. shade uh 200 and most we also need the this one let's go ahead and save it okay so look like we don't see it here yet and what if we actually change the color so actually this is close to White so colors. red and let's save it and this is what we see so for now we're going to Cave it as it is and we're going to change it very soon and you see that we can already scroll up so that's the first part and of course we don't want the color like this the reason is because over here you see we have border right so we want to have decoration and box decoration and inside box decoration we can assign color and for now it would look like nothing has changed but instead of using this color we can here use our app Styles I think do primary color let's go ahead and save it this is what we want and then after that over here we're going to do border radius and Border radius do circular dot here say 2 4 let's save it and now it's more like looking like this one over here as you can see now of course this whole width looks like a little too much so we don't want to show it like this in that case we need to go ahead and create a variable so here final uh say size equal here we're going to do media quy media query media query. of context do size now here let's go ahead and take size do width and then we're going to take six or 6% of it so it become much smaller and in that case it will look like this one over here right so now over here you'll see that we have this and this and this and this so looks like all of them we can put in a column luckily right here we could do a child and inside child we can have column then we'll have children and let's put it everything like this and save this and of course no changes there and then over here we want to show the image now for the image itself we can do a container now the reason why we are going to do a container once again we'll have border over here as you can see so if you have container you can always assign border like that so I'm going to copy this and put it here now in this case instead of having border radius uh 24 we can have it as 12 and color is still primary color and if we save it of course nothing is visible over here and then here is this property which is called image and then we could do decoration image and then here we can do image and at the same time then we do asset image and then over here we can say image uh well let me me look at our resources folder and here we actually have media not as image so here so let's come over here and we would say well app media app media this one and app media while then we could actually say for example go ahead with logo and we might be able to see that but looks like we don't see it yet then in that case give it a height and give it a height of 180 and we see it here and of course it looks ugly this is not what we want to show remember earlier we had assets and I think uh this is the one that we want to show yeah this one okay this name is Hotel Rome so let's come over here and then you can just go ahead and copy this over here and we can we're going to call it hotel [Music] room and then let's see hotel room this is the image name let's save it let's remove this and then over here we'll have hotel room let's go ahead and save it well not sure we have an issue okay let's go ahead and reload it okay we already see that it's there but then it it's looking little weird so over here there are other properties that we can set so that property is called fit property fit fit so here we're going to fit something called box fit do cover so not cover or contain it should be cover let's go ahead and save it so now it is better so cover like cover letter or you know cover on a page or on an album okay so it looks better with this now this one over here we do see that it's not like this I mean here we do have this kind of extra background which it doesn't have now I do feel like uh keeping like this maybe better than this so I'm going to keep it as like this okay but if you do want you can also change it like this it's going to work anyway okay so now this part is so far so good and ready now in terms of this box with. cover and contain and fill you can try different of them and you'll see that uh whichever which one ever or which one fits your need okay it doesn't have to be just one single criteria so it could be any of them based on your needs okay so we're going to keep it as it is now we see so that part is all right working and then over here we could do say sized sized box height 10 all right and then over here we're going to show our text so this is the text that we want to show over here now how we going to do that so let's go ahead and put our text text and inside this what you want to say you want to say open space so let's go ahead and say open space all right and after that let's put styles to it and I guess we have app styles do headline 2 we're going to get headline two from it then copy with all right uh looks like copy with this one and inside this we want to actually set a different color remember whatever headline has already we can keep that color and all the properties of this but we just want to change the color of it okay now say colors. red let's go ahead and save it so we already see the color over here all right so so far so good and uh it's fine but this is not the color that we want to show so for this one let's go there and we set up a color over here we call it cocki color which actually matches with the design so we remove this and then here we can say uh I think that's the app star F Styles dot Kaki color let's save it and this is this matches better now let's go ahead and put it here now we do see that we have a bit of issues okay uh so the text itself the children they are like this text there should be a bit of spacing actually they should be on the on this side on the left on the left side but we don't see that they're on the left side so here we could set up property which is called uh cross access alignment cross access alignment Dost start now this looks fine so remember for column the cross AIS is horizontal AIS now of course this doesn't look like this one over here so that's also a problem now around wrap this around another widget so let's go ahead and wrap this around padding widget and then if you save it you'll already see that you're getting result but in this case we just going to do left so we're going to do only left 15 okay so which is much better looking right now all right so so far so good and then here what I'm going to do I'm going to copy this and put it here okay and if I do that you'll see now let's go ahead and check so all I need to do change this one so here 25 and uh what was it let me go ahead and check night now if you're going to show this dollar sign we need to have this erson I not erson this slash actually then you can only show the dollar and after that over here we can do sized box and height say five let's save it and we see it as it is is here okay and what about this text itself we also have another text over here I think we are putting the text itself should be three actually this should be three a little big okay let me go ahead and put one and see how things go okay actually this is what I was talking and then uh we can actually copy one of the other in fact not like this and go ahead and copy and put it here okay and let me have it as it is and then instead of this here we can sell London so here you see London but the color actually we can say colors. white so far we are okay with white color and I like this so here you can have three style three let's save it so yeah so that's pretty much it for now okay so this is what we have now and the first first thing you want to do is moving it to the left side over here now how to do that of course there is no mechanism over here that we can do it so we need to do it here now as you see that we are inside a column right so in general we could actually set up the property cross access alignment and cross access alignment do start remember for column cross access is uh this horizontal property how you align something horizontally and then you see that yeah it aligned up and then there is also a problem with this double text over here so looks like previously we are using uh this one as 20 so let's go ahead and use this so that we are pretty much same and save it okay cool of course this part is scrollable and then I also want to make a bit of change in the design because here the theme color is this bluish and this orange so we want to have a little bit of U bluish color now for this reason over here actually this is the container right we know that this container itself has this color okay this is the primary color right which is this one so this container is all of it right so inside this we want to create some empty space so we can always create empty space inside a container using padding so here we can use Ed inser St all and then over here save for now 0.8 sorry 8.0 let's save it and that's what we see now this border is a little too much okay so we don't want any border like that I mean it's a little too curved so we don't want that one we want a little bit sharp edge okay and this one actually I think I would be happy with 18 okay and this is perfect now with this it looks much better okay all right so let's go ahead and add a const modifier over it okay now let's come over here this is our hotel and right now currently we we just have only one hotel so what you want to do you want to do it like this the single child scroll view okay now uh as we saw earli that we also want to be able to scroll left and right so we need to wrap this around single child scroll view so let's go ahead and do that here we're going to do single child single child scroll view like this all right and with this the only problem is that we can only put one child so we might have many of them so over here this hotel actually we want to wrap it around another widget actually we want to wrap it around the row wiget and then here we might have 12 of this so let's go ahead and put two hotels I mean Hotel widget actually and this's the other one that we see okay now of course there is this horizontal issue over here okay so let's go ahead and uh I think we can assign the scroll Direction and here we do access do horizontal let's go ahead and save it and now it's gone we see that we are able to scroll it right but now the problem is there are too much close to each other so here for the first one we can wrap it around the container and then here we can actually assign a bit of margin to it so let's go ahead and do that here margin this one and then here Ed inserts uh let me go ahead and find Edge inserts oh let's see okay like this let me go ahead and copy this and let's put it here okay okay we don't have any conditions here like this so we're going to just put 16 and now it's separated just like this one and it looks beautiful but if you do see that over here ticket view we put this margin inside a container not really inside the scroll view so this hotel screen actually I think we can do the same over here so here we can do margin and you can have it and we can remove this condition let's save it but of course we see now more distance in that case we can just simply go ahead and remove all of this actually in fact we don't need uh like that we can just have to of [Music] this let's save it and then we see that it works in fact you can have a lot of of them and then it's still going to work okay all right so that's how you go ahead and scroll so we are scrolling all of them and beautiful so it's already looking very nice and that's what we wanted to see all right so in next section actually we're going to see how to load this data dynamically from our map okay so this time we're going to go ahead and work on our map data now as usual we need to come to our all Json over here now the name once again could be confusing because once you get your data from server side actually it' be already in Json format okay but if you do want you can change it to all map anyway so let me go ahead and put the data here so this is our hotel list and once again there is a list of map okay so that's why we have list and inside we have map okay so list of map so that's what we have now here everything is pretty much just set the only thing that we need to change I believe this uh this names actually the naming over here is not very correct so here we can change it to save for example well it says open space and I don't think we have one open space over here so let me go ahead and see so this is the City View and uh we might have hotel room this one so let me go ahead and change it to hotel room hotel room okay so this one is fine and then I think we need to have another one over here okay let me go ahead with CTV the second one [Music] CTV all right and the third one over here we can go ahead and do pull view pull view okay but looks like they are not going to be the same though here we have tallest building so here we can say best pool best pool in the city like that okay all right so this is what we'll have and let me save the data and that's fine okay and of course we don't need like this so we can remove all of this and we'll end up having one okay cool so it it would be just like this so what I'm going to do I'm going to copy this row over here okay and then let me just put it here and instead of ticket list we'll have hotel list H H hotel list okay and what do we have uh cannot be invoked on a constant expression so let me remove that and here we can say single Hotel you get the idea uh but in general the photos we are loading there might not be Hotel all of them but related to Hotel okay all right see single hotel and here we'll have hotel and rest of the things stays the same and uh now of course Hotel over here um doesn't match in a sense of course we didn't declare it so let me change it to hotel which is more readable and now let's come over here and declare it here final map okay and then string and D [Music] damic Dynamic and then here we're going to call it Hotel okay and dyamic we have an issue and then here Hotel require uh this do hotel okay all right so now let's go ahead and save it and we do see okay we already have two over here and the reason is because if you come over here we are taking two of them that's why it's showing two but in fact we are not changing any data but this is the time that we're going to go ahead and change our data so let's go ahead and do that and if we if you were to come over here inside this I believe so okay over here we're going to change our image first right and and uh how to change the image itself so now the image should be coming from our the actual image link is over here right this is the image link actually this is where the images are I believe they're uh sorted over here okay but we don't have those images we can't use any of this so we have to forget so for now in this case all we have to do we have to assume that we know the image path so in fact we know the image path here assets images all right like this and then here we'll have this uh dollar sign and then this one because we're going to put a variable which is hotel and inside this we'll have image okay and with this I think everything is going to work fine uh let's see so we have a con here let me go ahead and remove this so let's understand this one so over here this would be actually image path from server but of course in that case in future we have to replace asset image with network image okay and currently we know that our images are also stored over here inside assets images folder that's what we did right and the exact image name whatever the image itself the name is coming from this hotel image which eventually refers to to this image uh key over here so this is an image key okay so that's what I said and uh then all we need to do let's go ahead and save it and we'll see that if we can view new images let's restart it okay cool now here we already see that we have two new images and then we also have this text available over here uh but we need to change them but images have changed dynamically and if you want you can also remove that and try to load three of them and you will see it's there three of them are here okay all this images beautiful all right okay so our next job should be changing the text now over here we already have a text and but this is also hardcoded this is not what we want so we'll have Hotel here and then here we can just get this place variable which is this one place okay all right and then over here uh I think uh I have a typo sorry so this one should be here I think this is the first one and um the second one should be destination I believe destination we should be coming from here so Place destination and next one we're going to show prize over here now the price itself we are going to show a dollar sign remember so this one uh so this is for showing the dollar sign right and at the same time we'll have variable so to show show variable inside string we have to use another dollar sign and then this curly braces so this is the basic Dart thing you should know by this time and then here we'll say price and after that over here we can do this slash and here night okay now this part may be confusing to some of you so what I said over here is that okay okay so this dollar sign to show this dollar sign we using the first slash the first slash and then dollar sign which means that we' be able to see this one and then because hotel is a variable and we want to take value inside out of from it so that's why we have used and the dollar sign with curly braces okay that's how it works all right so let me go ahead and restart and then of course I believe that we have overflow issue like over here because some of this the um text is too long so in that case what we could do for now uh we can change the name to best City Pool let me go ahead and change it let's restart okay now we don't have any overflow issue and beautiful okay cool now after this over here if we come to home screen in fact we can actually here do take. two we just want to show two of them for example take two all right and then restart it and we'll see that we are only showing two of all right so that's working pretty cool and then next we might be working on this one where we're going to show all the hotels okay so next once we done with the which we have already done over here then we are going to work on the search page so this is the page that we want to work now as we are going to work on this uh so here instead of screens folder here we are going to create a new file over here well actually what we could do here we could do like this we can do a little bit of refractor search okay and then inside there we can create a new file and search screen dot dot like this but of course with this it looks like we also have to refractor okay and then over here this one we also want to put inside a new directory and actually we're going to call it home and we're going to move this one over here and we need to to refractor everything alongside this and here the same thing and I think all tickets should go there as well for now okay and let's see if we have issues or not and looks like we don't okay we have an issue so let's remove that and then we see where we need to import reimport so here we need to reimport everything okay all right now let's go ahead and run W one more time from scratch and okay it's working fine we don't have any issues we don't have any issues over here as well okay now over here we are going to uh work on this search screen this one over here now here we are going to create a stat list class and here we can say search screen okay let's go ahead and import the placeholder and related libraries okay now over here if we do come to this bottom tab uh instead of search like this we can use search screen search screen have it and we'll see that we might not have any changes but let's go ahead and restart it [Music] okay cool well after that actually we going to continue to work on this so the first thing we can do is remove this the const as well all right now and then let's go ahead and take a look at this one so this is once again scrollable so definitely we can use list view since this is going to be scrollable okay but before that we need to use SC F but otherwise we might not be able to color it all right and then here we'll have body color and then inside this all sorry body not body color list view so list view would help us to scroll it let's just save it let's come over here so it's this and everything else is gone and then we the first thing we need is setting the background color itself okay and let's go ahead and see the background color I don't think they look same so over here we need to use background color and app styles. BJ color let's go ahead and save it okay right this is the correct color that we are looking for Okay cool so the next thing we want is showing this text over here now while we learned that over here if it's a list view we'll have have children so inside children we want to show a text and the text itself is what what are you looking for this one okay let's go ahead and save it and we do say it here now we have this sln which means it's a new line and then we want to color it or style it so here style do F styles okay dot headline so we are going to use headline one let's go ahead and save it and we say it's pretty big and then here we're going to do copy with copy with and we want to change the color and the color itself uh we can use font size okay font size uh not sorry color font size actually 35 and it' be pretty big as you can see and that's what we have seen over here okay all right so now there is a little bit of space here so let's remove that and now with this they're very similar okay all right so now once again take a look at this and they do look a little bit different the way we see over here there is this padding right so but we don't have the padding over here but inside list view actually we can apply padding so Ed inserts do symmetric this one horizontal padding say 20 and vertical padding say 20 all right okay so symmetric puts a padding or margin on the left and right side at the same time but amount of padding and margin you want you can mention them separately but in this case just we are just putting padding now it's too close to the top section so here we could do size box and then in the side box we could do height and 40 and let's save it okay cool and with this we are looking very similar to this one we don't have any issues as you can see they're exactly the same thing now the tabs are not clickable but in future we'll make them clickable so we want to work on the tabs now for the tab self actually we want to put them over here just like this home widget so here we'll have directory and here we're going to call it uh widgets right and then file here we can call it app ticket tabs. Dart okay right then here we're going to make a stess class we're going to call it app ticket tabs all right so the first thing we want to do is go ahead and import library and as well as we also want to put it here so here we're going to call it app ticket tabs let's go ahead and import well looks like we are missing a semicolon over here okay right for now we're going to put const modifier and you save it you'll see like this and at the top of that actually we can give it a little bit of spacing over here so sized box here say height 20 and then I guess it's fine okay right okay so now we're going to focus on working on this beautiful uh UI section over here where it says airline tickets and hotel so definitely from here you understand that this is going to be a row wiget and then at the same time uh we going to have container so container container and then child row well the reason having container is that you see the Border style over here so every time you have to decorate or give border to a box it's better you go ahead and use container because within container you'll have decoration and then box decoration just like this border radius border radius do circular and then here we're going to have 50 go ahead and do color colors do red and we need material library in that case we might not need this one at all okay so let's go ahead and save it nothing is visible because our child we don't have this child is empty okay if you put a text over here insert children and the text high or H as you can see it's visible but this is something not that we want to put so over here we going to have a color so here we'll have color and we're going to call it o x ff4 f uh I think six FD this one so that's the color that we want uh let me see are we doing it correctly yes we are doing it correctly L but looks like it's still not visible is it visible I think it is visible but not that obvious though let's put another F okay so now it's visible and then we are fine well after this inside this actually we want to work with our first uh container so we remove that and then you may ask why container again because you see that part of it would be straight and the part would be like this border over here like radius so so we need container again so here we'll have container and inside the container now we need to give it a WID and size and how to get that so here we'll have final size media quy of context do size now if we do come over here inside this uh we could do okay I think we need to do like this all right and insert this over here we're going to have width and what would be our width so here size dot width and then whatever it is we are going to take 44% out of it okay right now once again nothing is there because nothing is visible okay right and then then over here inside this let's uh put a child over here for now a text and inside the text itself we can say airline tickets okay Air Line tickets let's go ahead and save it and we see that is already visible now over here all it doesn't look good so here we we could do padding so here as in sets only are actually symmetric and we're going to do it vertical top and bottom so let's give it seven and as you see that it already uh looking better the reason is because um in the top and bottom we have this uh padding over here okay cool and then inside this we can have a text where it's going to Center itself of course it's going to it's not going to come over here because as you see that this container may actually taking all of it within the Row the first container just takes 44% of the whole thing so that's why we see that it's um uh just coming over here not really inside the whole container and being over here so it's a row but the first element so it has to so row is like splitting like half and it's putting inside the midle hopefully it makes sense and then the other thing we could do we can just go ahead and copy this and let's put it here and let's save it and we do see that this is what we have and right now we can put hotels instead of this one so let's go ahead and do hotels just like this now if you do come over here inside this so let's go ahead and apply decoration and then we could do box decoration so now here we'll have border radius border radius do horizontal this one and then we want to apply the border to the left side so let's go ahead and do border to the left side so here we do left and then radius. circular R radius do circular and here we're going to do 50 now it looks like no changes at all over here one thing remember this color uh well for color itself we are going to change it very soon so let's go ahead and do colors so here we do colors. white now see H yes it's different and now if you don't give it border radius you will see that it becomes like this so that's why you also need to give another border radius okay hopefully it makes sense because this border radius now becoming same as the parent border radius okay so with this it should make more sense and I think let's put con wherever possible okay and I think we should also do it here okay now of course with all of this actually in fact I can copy this and come over here now this this one over here instead of white we could do transparent so whatever the background color it has we keep as it is otherwise if you put it white of course it doesn't make sense right so you want to have transparent now over here instead of having it on the left have it on the right even though they look like same is better you do it on the right even though this even transparent so it's just taking the background color of this container itself over here which is this one okay all right so these are the few things that we need to know and then over here we can have hotels okay so airline tickets and hotels so that's that's what pretty much we have and uh okay so hopefully you are able to make the reusable widget which was given as an assignment but anyway if you are not able to do that I'm going to do it and show you here how to do it well we can close this now as I said early in the instructions that we can create a new widget over here in this widgets folder we can create a new file that's one way to go and actually there's another way in fact we can create a new stateless class over here St class and we're going to call it we're going to call it app tabs okay now remember what we need over here if you open up which things are changing we see that uh pretty much uh left and right condition is changing okay so we have to know whether we are applying to the left or whether we are applying to the right okay so that one and as well as this um uh text itself so these two things are actually changing so now for them we can apply as we can declare them as a string the first one string okay tab string all right and then we can also do final uh bull and a tab border okay now of course it's uh creating noise over here it's saying that okay you need to give me values so all right tab string now okay actually we can also give it a default value over here and let's see remove okay if we give default value then we don't need required that's true and what else over here AA cannot be a b type okay I should do it tab string this one uh instead of calling it string let's call it text because string is too technical text makes more sense all right and then over here uh this Dot tab border and uh here by default is false okay these are the two conditions that we are going to use now what I'm going to do I'm going to copy this one over here and definitely put it here okay and looks like we also need to get this guy so I'm going to copy this and of course with this we'll have error and that's fine I'm going to put it here okay and after that so tab text so this is the text would be sent so here I can directly use this one tab text and uh we have const so we got to remove that part and what else now this one so whether we are applying to the left and right side we need to be careful okay so by default uh it's false so here we can say tab border border equal false okay if it is false then we are going to apply it to the left side which is already this one over here okay so it wants a const over here otherwise otherwise here we can uh actually copy this whole thing now once again we are using tary operator over here and then here we can say right okay so this is the only difference that we'll have let me reformat the code so that it's more readable okay so now by default is false if it is false that means we are going to apply to the left side if we send a value as by saying true then we're going to apply it to the right side which is over here everything else stays the same so now we can be smart and remove this too we don't need so in that case we can say app tab okay all right and you'll see that we can also do app tabs this one if you save it uh everything is gone and it's falling into default one right and it's ugly so here the first thing you can say app text what's the value of it uh the value of it is all I think all that was all tickets and that's what we see and then over here tab text hotels save it we see now the Border itself over here tab border we can pass true and let's save it and this is what we see now there is also a color issue though which we forgot to mention okay because this one and this one their colors are different right so this one we need to assign a transparent color where is this color coming from this box decoration color okay so we need to create another variable here we can say find bow tab color okay and then once again over here this dot tab color equal false let me reformat the code it looks better and then over here you say t color false then white otherwise wi here would say colors. transparent let's save it and of course in this case this one still doesn't work because we need to pass tab color true okay and then you'll see that it works perfectly beautiful so this we just built another reusable widget all right so the next thing we want to do is showing this one over here this two now for this two once again we'll be building reusable text widget so let's go ahead and do that now let's uh come over here and uh we were here inside this screens widgets right okay now here we are going to create uh well actually not this folder this one here we are going to create a new new file and we're going to call it app text icon so let's go ahead and name it app text icon dot Dart all right and then over here we are going to create a status class and we're going to call it app text icon app text icon okay so let's go ahead and do the necessary steps over here and let's go ahead and remove this and inside this we are going to have a container the reason that we are going to have container once again if you see over here we are going to have borders so you have to use a text uh container to do that so that gives us the idea that okay here we are going to use decoration and box decoration because we will have border radius so we can do border radius do circular over here and then the Border radius we're going to use 10 on this and at the same time here we're going to do color so here we could do colors. white let's go ahead and import it okay now let's save it and of course we don't see anything because we don't have a child now over here we are going to do a child and the child would be row and children okay now let's take a look why because here we have this two items right so we can put them in a row next to each other so uh that's why we have this and at the same time you'll see that okay first one is an icon and second one is a text so here for the first one itself we could use the icon widget okay and here we'll have icon okay now let's go ahead and save it let me restore it okay and let's come over here and of course we don't say it the reason is now let me close this search screen over here so here we could have uh const app text icon this one uh okay we don't want this app text icon okay we have a d there and which is wrong we don't want d That's a typo so let's go ahead and move that and now the arror is gone and let's save it and here you see there is an icon we see that so let's style it and here we could do sized box and then here we'll do height so height actually we could do 25 let's put it like this put it down okay beautiful now since it is here let's go ahead and apply padding so here we're going to do padding to it add insets dot we could do symetric first one is vertical so top and bottom vertical 12 and horizontal say 12 let's save it now it became bigger and which is cleaner and nicer okay now few things so this color itself uh we can Define it in our app Styles file so let's go ahead and open it app Styles okay all right so here we can say static color now let's take a look at this one so here we can say plain color plain because these are plain right plain color like this and then I think it wants a con to here let's go ahead and put a const and then over here we going to sorry so let's remove this and here we can use app styles and now it became Universal right after this we going to use text now here for now it's a [Music] departure this one and then here we could do Style app Styles dot text style this one now let's go ahead and save it and this what we see now these two are too close to each other and then here we could do sized box and we could do width actually withd say 10 and we have an issue all right and looks like we need a const over here otherwise we'll get these things okay at the same time we also need const over here now among all these things over here actually we want this icon and this one to be dynamic so here we could do final icon data icon final uh we can say string text and we need to put them in the Constructor required this. icon required this. text okay right now this icon would be actually sent from the uh this as a parameter right so we're going to pass it down the place where we call it from okay now where we are calling it from we are calling it from here and we have error so that's fine let's go ahead and pass the icon and here we do icons dot uh flight flight rounded this one I think we're going to do actually take off all right and then we also need the text itself so here it say D [Music] part beautiful AR is gone set con modifier now here we going to put it down over here and uh here instead of this we can use flight land rounded this one and here we can say arrival and then over here we're going to have const sign ized box height say 20 beautiful now let's go ahead and save it okay so with this we build another reusable uh widget app I context widget okay so all we needed to do we can uh we needed to pass this as a parameter so the idea is when you pass icon as an argument and accept it as a parameter over here you have to accept it using icon data okay so that's one thing and the other thing we learn that by default if you have items in a row they're all on the Left sided as you see this is the default so these are all on the left side okay this is the default property so if you don't change all going to be on the left side but of course if you want we can put this one here departure there all right so that's how it works so that which looks very much like this over here and I think so far so good while in next section we'll see how to work on this uh this is done now we can go ahead and work on this one of course this would be relatively simple over here now here we can create a new widget actually inside this ser SE one okay so here we're going to create new widget and we're going to call it find tickets okay find tickets. Dart and then once again we are going to create a stateless class and we're going to call it find tickets all right and then let's import it that's it and after that we're going to just go ahead and call it over here going to call it const find tickets find tickets this one and we are good to go let's save it and we see it here and obviously over here at the top we need to have con sized box and height say 25 all right okay cool so now let's come over here and remove this so we're going to have container and once again you understand that container is just for Border okay with container you can always apply border so now we are going to be here and then the first thing decoration box decoration and then border radius border radius do circular and then here we'll have 10 little bit less and at the same time Colum color con color over here We Do ox D 9 1 2 I guess or 1 one 3 C so that should be our color okay now we see that this is the color Okay so the color has been given and then after that here we're going to have a child let's go ahead and do child CH I the child and then over here we'll have text we say find tickets let's go ahead and save it and we say it and it's ugly but we can always change it using App Styles so here Style app styles this one dot Tex style and then copy with here we can use copy with color colors. white so with this we got to import this let's go ahead and do that uh let's reformat the code so that we have better visuals so let's save it and we say it here the next thing we want to do want to center it so let's go ahead and Center beautiful and after that over here we can apply padding so as inserts do symmetrical here vertical 18 horizontal 18 let's save it and beautiful okay and over here actually we can add this now once again this color we can easily move to our app Styles class over here the Beautiful thing about them is that you can easily change them later okay so find ticket color just like this and then come over here so here we are going to say find to get color rep styles that fine ticket color let's go ahead and save it and beautiful and everything else stays the same now in future if you want to change it we can pass more parameters and grab them in the Constructor and we would be good to go all right so now over here the code actually looks very beautiful very organized all right so the next one that we want to do is this one upcoming flights and regarding that one actually we already have our widgets so let's go to our home screen I guess home screen over here and inside this we have this one okay so you can directly copy this and then we're going to come over here and put it let's go ahead and uh import it as a package let's also import F routes okay for now we're going to import the same route in future we may change this it's already visible and then over here we could do cons to sized box size box and here we could do height 40 all right and let's save it and here we go and let's see this so okay exactly the same thing and of course we can view and go back all right beautiful so you can also do the same over here right go back and the same over here as well so it was working all right so this is another breakthrough actually all right so what is the next thing the next thing we want to do is this one so from here you see that this this would be a rollout and then over here uh this would be the first child and this would be the second child now within first child we will have column and second child itself would be a column so let's go ahead and continue to work on this so over here the first thing we could do say let's do row wiget right and at the top over here we could do con sized box height 10 or 15 all right and then children okay right and over here the first one once again we'll have container for this as you can see so this would be a container and inside the container we'll have column so let's go ahead and do container and we could do child and uh for now we'll say along in then the first thing we want to do inside is decoration box decoration and then here border radius border radius. circular and within it here we can do 20 20 pixel okay all right and color colors. white okay so let's go ahead and save it and we already see it over here and of course it's tiny text right okay so so one of the other thing that we have to do over here we have to use this okay looks like we don't have what we wanted but find a ticket so let's see not even this one F text icon not even this actually I'm looking for um what is it width and size okay looks like I don't have it there so here I'm going to declare final size and then over here we'll have [Music] media cy. off context do size okay all right so why so why we are going to have this one over here the reason is um this container itself this one the first child inside row this will have a certain width right so we need to get that wi so here we're going to do width and then size. width and then we're going to do uh 42% okay all right so we are going to almost taking half over here that's why we did that okay all right and uh what else okay so within it we actually want a little bit of padding like actually you see the white space it came because of padding uh padding so let's go ahead and do that so the padding itself over here would be adding sets do symmetric and horizontal 15 vertical 15 all right and beautiful okay right of course the text itself doesn't look exactly the same and we also have an image over here so we're going to work on that step by step okay right and then over here actually we also want to apply a little bit of box Shadow outside of this one okay and how to do that actually we are going to apply Shadow so it's called box Shadow and box Shadow actually takes a list if you hover over on this you say it's a list so we have to have this list thing over here so it takes list of Shadows the Shadows themselves are given through box Shadow this class and here color and here we could do colors. gray and then shade [Music] 200 so blow radius one and spread radius one all right so let's go ahead and work on this and you already see that there is this sh there's this uh Shadow over here okay now if you increase the them say for example five say it's it spreads outside and uh but of course if you increase the spread radius uh it becomes more spreading okay so in general spread radius is bigger than blur radius so you can also do the same like this okay and then over here we could do two okay but over here we also want to we don't want to do green which we want to do gray go and uh so it's it's there but not that visible okay let's take this and save it so there is a bit of change save it all right okay so you you you do this to apply Shadows around your container okay now uh we'll see more about this in future just remember if you have a container and in the container outside if you want to apply Shadow then you need to use box Shadow and now here you could have list of Shadows the reason is because you can also Define the direction but here we are not defining any direction we are just going as things are okay so just pretty much like everywhere so that's the idea so that's our box Shadow and then uh so with this we are done and after after that the thing we want to do over here we want to get a column children the reason is we want to get a column because you see this two the picture and text itself would be on the top of each other so that's why we have this and now at the same time you also see that the picture itself has also border so so whenever you see border you need to use container so that's what we are going to do so here once again decoration box decoration and and the only thing we're going to apply here border radius and Border radius do circular and over here we're going to apply 12 okay and after that um so this one also needs a little bit of height so here we're going to use 190 and as you can see it became bigger okay so this is pretty much for the text itself and now since we have this border radius we can also use use image and here we can use decoration image and inside this we'll have uh image again and then asset image asset image and inside this we can have our uh app media I guess this one app media dot uh okay app media dot what is it actually we don't is is I think we have uh let's let's go over there in our app media class okay so app media class we don't have much of the things so over here we need to Define our let's open this and looks like okay now it open it's pretty big image so here we want to declare a new image so let's go ahead and do that and here plain set plain set and we can call it plain set plane set all right let's save it okay cool and then over here we can do plain set let's go ahead and save it and looks like we need to restart we started let's come over here okay our image is not visible yet because we have wrong media type now here box fit dot cover we want to have it as a cover photo and it would look better and uh so what's going on okay it shouldn't be actually here box fit fit count in uh decoration image let's go ahead and save it and bful and with this we exactly look like this one over here okay all right so before I wrap up this section let's go ahead and this const modifier and with this it looks actually more beautiful all right cool okay so now we are going to show this one and how to do that well we are inside this ret and we had this container and inside the container we had column and then over here we'll have this uh container which was showing this image and things like that so over here we could do like say text and then here we can just simply do 20% discount on the early booking of this flight don't miss this one and then here we could just style and app styles do headline style to this one let's go ahead and save it and here we go we see that and at the same time here we could do sized box sized box and a height say 12 and we are good to go let's save it and that's what we see okay now this is so far so good and also working as we expected let's put a con modifier and we are good with this now this is the first uh item and then what you're going to do is uh this one but of course uh it looks like over here we do have bit of spacing so here we are so everything should be looking the same now to make this one exactly look like this uh we could also actually assign a height over here now here we see a lot of space so here actually we can skip part of it say 05 and I think that's fine so this is what we're going to have so with this the first part is done and the next part would be about this one over here okay so let's go ahead and do this one now here we do see a complex layout here we see this one actually this has been drawn by hand but we are going to Al I mean this is drawn by code not by hand actually code we'll do that first we're going to start off by doing this too okay and the background as well all right okay so now once again we are here inside this row Jet and then here we'll have columns so you can have column wiet inside row and it is completely fine okay all right and inside this once again now you should be able to know that whenever you see this border like this you have to have a container I without container in general you won't be able to apply border all right and here we do with size and then remember over here we had size dot I think we have a variable sized that with and then we want to get 44% all right in and uh after that over here definitely we're going to go decoration and box decoration once again we need that because of Border radius we want to apply border radius. circular and we're going to do 18 everywhere is going to do the job and at the same time over here do a height 2 one Z so we want to specifically control the height but anyway it didn't show up yet the reason is because we don't have any color now over here we can go ahead and Define a color so let's go ahead and do that const color and then Ox F FF 3 a 8888 I think yeah that's pretty much it so yes so this is the one that we had and we want it to have all right now we see the to together and then we can simply use the property over here uh main AIS alignment which is horizontally so here we do main access alignment do space between and it's beautiful so that's fine and what else now the next thing we want to show is the text itself this two texts but now you see inside this column there is this container is a child and the inside the container will have this two so this two on the top of each other so for that reason here we are going to send child and the child itself would be another column then we'll have children okay so after that over here inside this first we're going to do text just the thing that we want and then here we'll say discount and because we want a new line for survey that one and then over here we'll have Style app Styles dot headline 2 this one and uh then we're going to use copy with method because whatever is there with headline 2 we're going to keep that and then here we're going to change the font family then font actually we want font weight not font family font weight this one dot bold and then here we're going to do color colors. white let's go ahead and save it that's what we have but if we do remove this one we'll say it's different one so as you see copy with method we can apply the new things with it and that's what we did over here okay right and what else after that now here we're going to do size box size box and then height 10 because we want to put something new next to it so let's go ahead and copy it and then we're going to put it here like this okay but of course this is not what we want so we're going to remove this the first thing take the survey about our services and get discount all right and this one we don't want uh whatever is there we want to change a little bit so here w500 let's save it okay so it's smaller and then over here font size we can also set the font size 18 so it became much smaller now let's go ahead and hit con over here all right now of course this is disproportionate they're pretty much uh this one looks like actually centered and in fact this is centered too okay so the default property is centered I believe so let's go ahead and check this so here main access alignment uh okay it's not main actually cross access alignment which is horizontal so for column the horizontal property is Centered for column horizontal property is used by cross accessment as you see it's a center so this is the default property actually but we want to do start and as you can see it's working fine and now there's this problem the problem is we want space I think our background color has a bit of issue we'll also fix that they are not the same background color anyway so now if you do come over here uh this container itself which is holding everything over here and here inside this actually we can set up a padding so the padding should be on both side actually left and right right so here we could do add. symmetrical and here vertical say 15 and horizontal 15 so let's go ahead and do that now it looks much better now the background color doesn't look good actually it should be B8 and B B8 let's go ahead and save it now it's more clear right so with this we also done with part of this color over here and The Styling and it's almost looking very good as we are working on it so in next section actually we'll see how to go ahead and draw this on this beautiful line okay so now we are going to go ahead and uh show like this well we have the ticket app over here let me open this up and then we want to show this one now how to do that well we already have this column and inside this we have this container okay now this container is showing all of it actually we want to put another container inside this and we'll see how things go right so let's go ahead and use container okay and in this uh here we'll have decoration and the Box decoration and then let's go ahead and work like um give it a border okay so now we are not going to give it border radius we want to have border everywhere so here we can also use this one and with this the beautiful thing is even the Border itself you can give it color okay so here let's go ahead and do 18 and let's save it and we see that okay it showed up up here at the bottom and uh well uh let's continue to work on this this is not something that we wanted but anyway so let's go ahead and fix the color and here we can say const color o x FF 1899999 go and save it and this what we see okay and then we want to give it a special shape over here let's go ahead and do the shape property and instead this here we can do box shape dot uh Circle actually let's go ahead and do that and here we already see that we have a circle sitting up there and now let's go ahead and apply padding to it let's go ahead and do that and Andis only all over here let's go ahead and give it padding 30 let's see how it looks like and here we see it became big and that's how actually the padding works okay with padding you see that small so now padding is being applied from inside okay all right so this is like padding of 30 and uh we Al also have this decoration which actually applies border now of course this is very different than the one that we see over here and how to achieve this now the thing that we want to do over here this one and this one we want to overlap and how can we can do that now we want this children actually to overlap I mean this one could come over here or somewhere so for this reason actually this this two this two container we can wrap inside around another widget which is called stack Widget the stack widget also takes children so we're going to put them and let's see how things go and as you can see that it's already up here okay so they are already overlapping now of course in that case what we could do we can just go ahead and have this and uh remove that column and let's see how it goes and we have the stack widget and Okay so everything is fine so instead of column now we can just simply keep our stack widget now as we have stack widget of course this is not the position we have as you see that a stack weet puts everything from the beginning it's like uh left top okay everything starts from the left top now this one this one we want to put it over here so we can wrap this around another widget let's go ahead and do that and we're going to call it positioned Widget the position and stack widget they work together I mean if you use positioned you have to have stack as a parent or if you have stack most of the time you'd be using positioned otherwise this layout is quite messy so here on the right we want to say do zero so it went up so this is the right zero right but zero is not our Target so you can do or give negative coordinate as you see so now it's going beyond our this zero remember this is zero over here for right for right section this is zero and then we can also apply top and then here we could do 40 and let's save it and that's what we see beautiful so now with this we see exactly the similar over here and it looks like okay we might have an issue with this color now let's go ahead and work on the color itself okay now if we go ahead and conare the color doesn't really look quite the same the reason is I have one more n over there now it looks the same as this one now of course we can go ahead and copy this and we can find app Styles over here and then over here we could do static color circle color this one and then we can be here and we can say app styles do Circle color and yeah so that's how it works okay so first here we'll have understanding what is called FL stack widget now here you see while a layout and you can deem them as three different containers so each color represents a container now in general if we are just going to put them on a flutter application or in screen you can't put them like this they would definitely be like for example the first one is white the second one this little blue one would start from here okay and then this one would start from the end of or bottom of blue this rectangle or square now to achieve this kind of overlapping layout where one stays on the other one we need to use a stack widget so here we see stack okay if you put stack widget and if you put children inside stack widget like this would be stack widget then you can put them like in overlapping manner okay like inside column widget we also put children but they never overlap they always either on the top or on the bottom if you want your widgets to overlap you have to use stack widget and put the children inside the stack widget and that's how the stack widget works so now we're going to work on this since we are done with this section over here so we have this uh container and stack widget and over here we also have this all right now earlier we have seen that we didn't need the column but now we need the column because we want to put this one right below it and that's possible if we wrap it around column widget which you will understand soon so these are column widget we wrapped it around and the first one is a stack widget and inside this can have another container withget okay so let's go ahead and do that container because if you don't have this column we don't have actually a mechanism to put this stack and the coming container which is this one on the top of each other right it's not overlapping it's on the top of each other okay so that's why we need this thing okay so let's go ahead and Define width and then here we'll have size. width and 44% all right and after that here let's go ahead and assign a height to it and once again here we'll do decoration and box decoration and within box decoration itself we'll get a border radius border border radius border radius do circular then 18 okay all right now we already see that it went up a little bit and looks like it didn't align much over here and we'll fix that don't worry and then uh this container as you see over here it also needs a bit of padding so the top left and right right so that's why we can apply padding to it so here we're going to do padding add inces do symmetric vertical 15 horizontal 15 we don't have any of this yet I mean we don't have any child within it so looks like uh there is no change even if you I mean of course there is nothing there yet right we know that but now here we can go ahead and assign child to it so let's go ahead and do child and if you take a look so here this text and this uh images so there would be inside a column so let's go ahead and do that column and children and the first one is a text and it says take love let's go ahead and put it and this is what we see over here all right now this is the problem with this uh border uh background color so we don't have background color so here we can do color and con color Ox FF EC 65 45 that's the color that we want and we already have the color and beautiful now these two are getting together so in that case here we could go ahead and uh give it a size box size box height and say 15 and here we go put a comma we have mistakes so here we go now once again this is disturbing and the reason is because earlier over here you see earlier over here we had this so let's go ahead and change it to 25 and let's see how it goes okay looks like 35 was the best approach okay right now this container this one and here we also have container like this and inside we have the other one so and including the you know different kinds of padding they are now correctly aligned so let's go ahead and do the calculation so the first container is this one and we see that it has 435 okay so this is 435 now inside this we have this container 210 and then also we have the other one 210 so 420 and 15 so 435 and that's why they have the same height okay so as you can see over here so it makes sense that why we are doing 435 okay and anyway so over here we can apply style and then we could do EP styles. headline 2 let's go ahead and save it that's what we see and then let's go ahead and change the color and within it over here we do colors. y right save it and uh I think we need to assign the color properly okay right and let's go ahead and save it and what else uh let's see what property we have within this it already has bold so we don't need to assign anything else okay right so this part is so far so good and uh it's fine so now here we see that we are done with this page and we are running on Android device actually and we have tested well I mean on my side I have tested I don't have any issues so first so good and everything works perfectly as you can see and uh if we come over here click on this the same thing no issues so you can run it on an Android device now if your Android simulator is smaller than this you might get an issue of this one like this overflow but in general most of the phones are longer nowadays so you wouldn't really get a small Android phone okay so it's pretty standard actually so we will not have any issues this idea okay now here we are on search screen and over here we have this row and this row actually contains a lot of code now we want to separate them so in fact this whole row we're going to separate now to be able to do that inside this widgets over here we can create another new file and we're going to call it over here we can say ticket promotion dot dot because over here it's pretty much all about promotion So based on the feature okay and then I'm going to create a status class and we're going to call it ticket [Music] promotion all right so let's go ahead and import the stuff that we [Music] need okay and then I'm going to cut all of it from here and then I'm going to put it here now we might have some issues of importing some libraries so we can just go ahead and import them and most of the problem should be solved automatically let's go ahead and just import okay and over here is the same app Styles now let's open it up so there is only one variable size that's not being uh consistent so for this one we can just cut this one out from here and then we can put it here and with this the error is gone now of course here we can just simply call ticket promotion this one and that's it and most probably we can put a const modifier which is good for performance all right so and then we remove this file from here and this ones and this ones they are not needed on the same over here so let's go ahead and restart it and here we are so we don't see any issues over here okay so the next thing we want to do is showing it like this so this is the screen that actually we want to go Go and show this is our third tab so this was our home Tab and we have already worked on this and now we are going to work on this one all right now this would be actually our ticket screen okay pretty much our first ticket okay and that's the screen that we want to show over here okay and as you can see New York London the time and and departure time everything matches the first ticket and there are also some additional information which we'll fill up later okay now for this one we're going to come over here and set the screen and here we're going to create a directory and we're going to call it ticket okay and then inside this first we're going to create a file and then here we can call it ticket view. Dart okay and we know that we'd be needing some widgets so let's go ahead and create a directory widgets all right we'll see what we need Well for now we're just going to work with this right and at the same time the thing that now on we need to work and uh take here is this over here bottom NE bar over here we can replace this with ticket view ticket actually we can call it screen or view okay so I'm going to call it screen because I see here we have this one so let me go ahead and change the file name over here to toate screen because everything else is ticket everything else is the word screen okay now let's go ahead and imported ticket okay ticket screen ticket screen looks like not recognized okay well nothing is there most probably so let's go ahead and go ahead and import it okay now let's come over here and see whether yes this time we can recognize it all right so now let's go ahead and restart our app and if we come over here most probably we will see a placeholder now this placeholder is coming from here okay so the very first thing we want to do over here removing this and get over here a scaffold for us and uh here we're going to have return and then here we'll have body and then uh okay I think all right I guess we need to import material library and then body and then list view because we also want this to be scrollable and every time you want scrollable items you just simply go ahead with list View and then we want many children within it let's go ahead and save it okay right so one of the first thing that we want to do is doing this one so let's go ahead and check tickets this one so for this one we can simply go ahead and invoke our text and here we can say tickets and after that style and here we could say app styles. headline one this one and we good to go let's save it and we say it here and at the top here we could do sized box height 40 just like others we had now it once con let's go ahead and do that and it came down all right now of course this is too much to the left so so here this is the place that where we do go ahead and do this padding add ins sets. only symetric here horizontal 20 vertical 20 save it and looks beautiful okay right and then after this over here um this is the time that actually we go ahead and show this tabs over here right these are the tabs and now this Tabs are similar as the tabs we have seen over here so these are the same tabs that we want to use okay now look at our tabs see what we have then in our search screen so ticket tabs over here so let's see whether we can go ahead and utilize this so app ticket tabs now we are going to go ahead and uh use it here inside this and the first thing we want is working on this as a library let's save it and then now let's come over here so we do see the tabs right but of course our problem is these are right now hardcoded which we don't want at the same time the background color is an issue so let's go ahead and change the background color we know that app Styles and we might have BJ color it's this one save it so now it's very distinct within it and at the same time here we can do size box height 20 all right let's go ahead and put const on it now problem with this is everything is hardcoded over here as you can see all right so we don't want them to be hardcoded especially this strings over here okay so uh the thing you could do we can actually pass them right now so here we can have final first we do final string first tab okay then final string second tab like this and then we want them to be required required this. first tab required this do second tab all right now of course here we can just simply go ahead and replace them by tabs first tab first tab let's see what is okay so this const causing the problem remove that and then here we could do second tab okay second tab right so now here we get to pass first Tab and second tab so let's go ahead and do that first tab now let's take a look what is in our first tab is upcoming so let's go ahead and save upcoming and then second tab is previous and with this we can also put a const here but of course now we'll have errors in our other places like we already see in search screen we have this issue so it also wants tabs from you so here you could do first tab I think it was all tickets and then second tab was hotels let's save it and as you see here the first thing the error is gone and now if you go back and see it's still Dynamic so here all tickets hotels and here we see upcoming and previous so which means that this part is also working as we expected now this is the video of building reusable widget which we already did of course if you do want you can also uh pass different things from here if you want because we remember that we made it dynamic so you can also pass from here actually it's better to pass here rather than changing this conditions this conditions you don't want to change hardcoded here but for now it's fine because it it matches our design but in future if you want to add more conditions definitely you're going to pass through over here and then you have default value true false or whatever it is okay all right beautiful so now let's go back to our ticket screen over here here okay so now we want to show this this one over here now do remember that this one over here is actually same as this one including this uh uh circles over here I can say that they are same actually so it's all about changing color now of course we have this borders that we want to do a little bit differently but this whole section is actually pretty much just like this one the only difference would be the background color and as well as the Border okay so by saying that it's also true that we' be able to reuse the whole thing over here okay so we be able to reuse it so let's go ahead and get started now this is what we have and after that over here first thing over here we want to do is doing this we're going to do a const sized box and then here height say 20 so that's what we want to do and then over here we want to call our ticket list okay now how to go ahead and call this one well actually we're not going to call ticket list we are going to call the widget the one that we created over here I think we call it ticket view so this is the one that we want to go ahead and call okay so here ticket view this one let's go ahead and get that one and then over here if you hover over on this so it takes a parameter called argument called ticket and then here it needs a child or we need to provide value for it so here ticket list and get zero which means the first one and let's save it and we already see it here and beautiful okay and this is what we wanted to see okay now let's go ahead and uh wrap this around uh container and why we want to do that the reason is because we can apply some padding to it okay so let's go ahead and apply padding and if you come over here inside ticket View and we'll see that over here it has right margin over here 16 and that's the only thing that we have right now 16 so let's go ahead and do same over here so if it's a container so we are putting inside a container and then here we could do padding as insets and that only and we going to put it to the left and let's apply 16 and we see how it goes okay now it's more like centered so we have margin over here and padding over here do remember that the padding itself is being applied from uh this container which is outside of this ticket view right the ticket itself is inside the container so in fact the container you can give it a color so you'll know what I'm talking about colors. red okay so now as you see that it's very symmetrical so there's this container and inside this we have this padding if you remove the padding okay it goes up to there and if you have it so we'll set like this and ticket itself inside we just saw that there is another margin okay now that's also coming from outside okay so this is ticket it's taking outside and then we had the container inside container we had padding how will it makes sense that why we are doing it like this so let's put a con modifier and we are good to go now ticket view itself uh as you see okay let me remove the color as well okay all right so that's it now to get itself over here you see that we have a background color right the whole container over here uh it has two background color this one and this one but this color we want to actually hide them like this container itself over here we can see this different kind of colors so we want to change the colors and hide them okay now to be able to do that what we need to do over here attach a different parameter over here okay so now here we we have this whole screen and then we can attach another one final bll is color and well which which means that whether it's colorful or not okay now here we can say this is color equal null okay okay so or most probably let's see what it says remove initializer it would work like this because it's it's notable so it could be anything all right so that means that you may pass this value you may not pass this value well if you pass this value then it would be like if you if you don't pass this value if we don't pass this value then we're going to apply this one okay otherwise we'll use a different color so let's go ahead and check that so over here we say is color equal null because I said we said it could be null right if it is null which means that I'm not passing anything what do I mean by that so over here you see I'm not passing anything okay so I'm not passing anything the condition is remember this is a tary operator so we are keeping uh whatever value was there otherwise here we say colors do white okay so let's go ahead and save it okay so now over here we didn't pass anything but how about we pass say is color true save it and as you see that it changes immediately but of course it it disrupts our color pattern over here if you do and see come over here we also need to change the color right so that's what we need to do okay anyway so I'm going to remove this for now because we need to have the visual on the color itself but now this color is quite important okay that's why I'm going to go to over here I'm going to declare another color static color okay now well we had ticket blue ticket orange now here here we would say ticket white or ticket white or I can just say TI get color why because it could be any color that you want in future okay but for now it's colors. white why I'm doing it like this the reason is because in future you can just directly go ahead and change whatever you want to change here okay and it looks like we do have an issue so I can do like this o x FF and 1 2 3 4 5 6 so that's also equals to uh white color okay now then over here from here actually so this one would be calling this one from here okay so here we can say app Styles app styles do ticket color whatever the color you want okay all right let's save it and test it that it works so here we say is color is color true okay all right so it's looks like it works now if you want if we were to change this color over here say for example save it so let's go ahead and change it over here so now it's kind of yish okay so the idea is you can change it globally if you want that's the point so that's why we did that and let's reload it okay right so now we get the idea so we got to change CH everything over here based on this okay now even before we change this color actually I want to make the changes in other places otherwise if you set this condition to true it becomes white and my or other colors are gone but first let us go ahead and change those other colors okay that the places that we want to change now the first thing we want to change is this one over here like over here we have text sty third so this is a place that we want to change the color so let's go ahead and check over here so we have this one over here right now we can actually also pass this color over here so here we could say uh bow is so it could be Noble is color okay and then we also take it over here is color uh this dot is color this dot is color all right and let's see what's going on Final over here final okay cool all right so all we need to do we need to do this conditional check over here so just like earlier here we say is color null which means we didn't pass anything then we are going to use uh this one Whatever is there default one so all already what we have fine that would be based on if you don't pass anything if you don't don't pass anything it's like nothing has happened we are still keeping the original one but whenever we pass something then over here we could do like this uh app styles. headline 3 okay so that's the actually the earlier very earlier the style that we have set over here now this this one of course we are calling it from here right so over here this time we want to say pass this okay so here we say is color is color whatever you are passing so remember this ticket view would get called over here so from here we are passing right but of course tiet View also gets called from other places as well but since only we want changes over here we don't want the changes to take effect here we just want the changes to take effect here and this place is being called from here and then from here we are passing everything so is color over here we can say true which means I want to change the color okay and as you can see so we come over here we receive it whatever was being sent over here we first change the background color whether we are sending anything or not and the later down the road the same color we pass down to here hopefully it makes sense the logic that how we are doing okay right now over here we also have this big dots okay now we want to do the same over here okay so let's go ahead and Define a Conover here final bll is actually not const this one and then this dot is color and over here so let's go ahead and [Music] check is color null if which means we don't pass anything and then over here the dot itself okay so the other thing we could do actually first not really inside this we can directly change it over here is color null then we use this white color otherwise we use this color and let me remove this one first okay and most probably we need a conable for it let's save it okay and let's reformat the code right of course it didn't take place yet because right now we need to be in the ticket view Big Dot over here and here we say is color is color let's see invalid cons you can't have this on now let's save it and here we go our dots just appeared okay so remember these things they take the color whatever you are passing here from here it's very important okay for example if you pass nothing okay it will take the original form if you pass something where it is true at least you pass something then it's going to work like this hopefully it makes sense now Big Dot over here this one we also want to go to our app style class over here and then here static color dot color okay and now let's to get a screen to get view let's come over here where we [Music] were uh big actually let's go over there and over here F Styles dot do color go and save it and no other changes now let's come over here one more time and then we are here now we need to change the color over here so once again is color equal null then we use white otherwise we could do const color o x FF b a c CF7 so this is the color we want so let's go ahead remove the const let's reformat the code let's save it okay now we see it over here okay now once again let me go ahead and copy this the idea is you can always change all the colors here so here would say now we already have a plain color actually plain second color okay right now let's come over here app Styles dot plain Second [Music] Color all right and then over here Big Dot we already work on that is color is color is color let's REM that and beautiful so we already working step by step on this okay all right so now the same thing goes over here uh as you can see text Tex stle fourth so we had this one and I think we also had Tex stle three now let me go ahead and Define Tex 3 and over here I I think pretty much the same right so it the the condition would be same we go ahead and copy this and put it here and then is this dot is color right now over here is color no do this otherwise app styles. headline 4 you get the idea okay so it's going to work like this but of course we don't have any changes yet because um we I think I'm missing something over here I didn't didn't do that yet okay so even before I move somewhere else here is color is color let's save this okay now it appeared now over here the same thing is color is color let's save it we'll see this one okay all right and then let's come over here again is color is color beautiful so all this things slowly started to appear and the same over here is color is [Music] color so we almost done with this part okay now the next part actually should be pretty much the same okay so earlier we were done with this and now we are going to work on this circles and dots and that would refer to our uh circles over here and this dots okay all right so the first thing we want to check about this color so here if the color is null nothing is given then we'll use orange color so here is color null orange otherwise we are going to use use app styles do color white I guess do you have white color I think we should have color white looks like we don't have uh I think I have defined it the other day tiet color actually this one I didn't call it color white I called it ticket color okay let's have it as it is okay so now it's gone all right okay and now I want this big uh big circles over here now of course we also need to pass this one final bow is color and then over here the same changes actually like we did before is color now over here we're going to check is color equal null this one then we're going to use white or otherwise here going to use colors Dot gray shade 200 this one now let's come over here and inside this going to pass is color is color and it should be fine looks like we have a bit of issue over here is color is color okay what's going on invalid const okay this const is causing the problem let's save it and we kind of see it there and most we are not happy with it let me go ahead and check that if okay I think it should be the opposite save this and then let's compare with this okay well it's almost not visible okay the one that I think my original design might have some problem over here and this is the correct one and as you can see all right and then over here what the same thing is color is color Okay so let's go ahead and save and we see it on both sides okay all right now how about this one so so this part is going to be tricky well then the first thing we need to do this one over here once again so it's pretty much everywhere setting the color is color and then here is color okay and then the only place we need to change the color is inside this so is color equal null then we use this otherwise colors do gray. shade so go ahead and use the 300 and we have a const issue once again okay is is what we have and then over here all we need to do is is color is color let's save it and here we already see the the dots they have appeared if you see carefully that they already have appeared so that part is also working as we expected okay so now we're going to go down to this one over here and once again inside this over here actually so you have this color so let's go ahead and change the color is color equal null then we use this color whatever the given color otherwise Here app color do ticket color actually not app color is app Styles the ticket color this one let's go ahead and save it and we already see it's gone because we are not passing over here we are passing is color equal true so this condition is taking place and now how to work on this borders so here we go so in fact over here we want zero borders which means we don't want borders so over here is color this one is null then we have 21 otherwise zero and let me remove this and the same over here is color equal null okay let's go ahead and check and it's gone now since it's gone it's going to look like more like this okay now I know that we have this problem with the color which we will fix later so let's go ahead and work on them first all right and then the other color is over here this one okay so this is the color over here third so over here up to here we need to pass so first we are going to pass from here we are going to pass color to this one and then it's going to pass it to this one so just keep passing so let's come over here let's declare this declare a color final bull is color and then actually we can do it at the beginning no let's do it at the end oh actually sure it's here uh the this dot is color right I think we can reorganize the code this so it's more readable and then over here is color is color whatever it is you're passing the same over here is color is color now all I need to do from here to pass is color is color and you'll see that it already started to change over here the same goes here is color is color let's save it and then over here is color is color let's save it okay so with this our ticket has shown up so in next part we see how we are going to change this to lighter color now they're same black but I think they have to be lighter color just like this we had all right so now we need to go ahead and change this color look at this well let me go ahead and close all of this because we have too many of them we don't need this for now this we have ticket screen and we go to ticket view so the top part is okay like this row is okay and then the problem starts from here right this color like this one over here the color they show is the same as the top one now this is the fourth style color and over here actually let me reformat the code now if it is null then we we use default one of course which is this colors and if it is not null we go over here but there is this problem with the color actually we can add a new color inside this and it's going to work like this okay and most all we need to go ahead and import uh material color constant most we need to remove this go ahead and reformat the code and let's save it and if it didn't work so let's go ahead and restart our app and let's come over here yes so as you see that it works now and then what else so ticket view so this part is working flying time and over here that's fine and what else so we do have the big circle this one we good and then once again over here okay and once again the this third color that that we are using okay so okay this two right so this one this one refers to this two and this one refers to this two and this one refers to this two so how do we change well and over here we see that the first one is this one and the second one is this now of course they're using the same one actually we can change it to Fourth let's go ahead and see how it works is fourth is showing this color right so the first one is third which is this kind of heavy color the second one is the fourth and if we do change it and uh yes it worked okay so now previously there were the same but now they're different and it's working so with this we are done with this section okay so over here now we are going to continue to work on this and this work would be similar to this one actually over here and then we'll go down to this and everything else is the same and now this part actually would be doing later okay it's not important at this moment moment we're going to do it later all right so at this moment over here uh we need this one uh this line over here and how do we get that now this is something that we can skip for now hopefully it'll autoa here as we keep working on this so now let's go to our ticket screen over here and then we'll see that how it auto appears for example I mean this line to be appear it's easy way to do actually we'll use a trick and how to do it for example first here let's go ahead and work with a container and then of course as you see all these colors is white right so here we going use color and colors. white we can use that one but we already have of course app Styles dot uh package dot I think this is ticket color was that okay looks like we have the same color so we're going to use that one and then inside this over here let's take a look that how things work now for now we can forget about this one okay now over here we see that actually we can first use a column the reason we're going to use a column as you see like this thing is one piece this thing is another piss this thing is another one and this thing is another one so they are all in column format and in between we can also use rows okay so this is part of column but for children we will use row layout so first let's go ahead and Define a child and then here we will say column and then here we'll say children now as we have this one over here inside this the first thing as I said that we want to have row so let's go ahead and do that as usual we'll have children then we want to show this one and this one and it's easy to show why because we already have this actually layout ready which is this one so all we need to do let's go ahead and copy this and let's put it here but of course I guess we need to import it as a package now course this one doesn't have any validity over here so here we can say flutter DB and instead of date here we can say passenger and then is color is a color so if we don't have anything so here we can just simply send it true okay so that's the first first thing that we could do and then we can go ahead and copy this and put it here and if we do put it here as you see we have to have this and passwort the passwort itself so let's go ahead and copy that so that's the beauty of this thing because we have worked on them before so all we are doing pretty much a little bit of tweaking and uh say like this one and I do believe here we can have a space and after that over here we can say passport okay and then over here we can start it okay let's go ahead and save it and see how it goes okay now it already showed up but of course there are some deformation the first thing we want to do want to move the um the back this one over here so instead of doing this we could do end okay and as you see that it already showed up but this one didn't go to this end why not but this would be dictated by over here U main access alignment and Main access alignment do space between okay let's hit enter and now we see that okay it's working all right and but now speaking of this one this layout definitely doesn't look good it's overextended both left and right now since we are inside a column over here actually we can apply margin so let's go ahead and do margin and then add in sets dot uh symmetric and we could do horizontal and say horizontal 15 okay now it came as this white one left and right beautiful but inside it's still too much to the left and right so for this reason over here we can use the other one say padding Okay add inser do SYM mric over here we can use horizontal once again 15 and vertical say 20 okay so we'll have a lot more space and now it looks much better as you can see over here and it's beautiful so now let's go ahead and put const modifier looks like we need const for each of them it's going to work okay beautiful okay so our next step should be actually working on this distance because here we have a very tiny distance where we see there is a lot more distance okay so now we need to find where is this space coming from if we do come here we see a little bit of tiny space in that's one pixel but here it's way long it's more than that so where is this coming from all right so let's do a little bit of debugging so here inside this container so let's set up color over here and here is say colors. red let's save it and here we do see that so this container actually has extra margin outside okay so this is because of margin contain itself starts from here okay so this is the one that causing this extra space but of course it has children inside so one of the children is this one the very first one and let's go ahead and check the color with this here colors. blue okay let's go ahead and save it so here we do see that okay so in fact this container itself is causing this extra space now it has we do see that it has height so let's reduce the height to 180 and we see that it's gone well if it is gone then can we simply go ahead and do this sized box over here and say height to one okay and here we go we see that it appeared in that case we can just go ahead and remove this and then we can also remove this one from here okay now of course with this we don't have any changes over here it's just like the way it was it doesn't affect the design and of course nowhere else it's the same thing okay so here same and then is what we had over here okay all right so well we are looking great step by step okay so here we are we have this ticket screen and then we have this one over here the next part should be showing this right number of EET on booking code things like that now here we go this is the first row in the col column remember as we said early that everything would be in a column format here right so in the column the first row was showing this one now we're going to go for this right and before we go for this well definitely going to go ahead and do sized box and height 20 and then definitely as you can see what you have to do next you need to go ahead and show this one this lines over here okay now to this to show this lines actually we can come to ticket View and within the ticket view while we already have let me see where we are the dots okay this one so app layout Builder widget this one so this is the one that we want to call and now let's come over here so inste this let's go ahead and call this one and we know that we need uh few arguments to pass but first let's go and import and then random divider that one and what else okay so Random divider over here we're going to pass 15 what else we need and also we have width okay now this width is optional right but we want to pass a width over here so here we' say width equal five and then over here is color say is a color and let's see is a colorable so we get an issue most this const so let's go ahead and remove this let's have it and what else undefined is color well if it's not defined looks like tiet screen doesn't have it but it's okay we can pass false or true whatever as long as it has a value so as you see it already showed up over here beautiful and that's what exactly what we wanted and then over here let's go ahead and come over here once again I think we need a comma for this okay let's use a const modifiers so that we are clean okay beautiful and of course right after this actually we can once again copy this one as you understand that if we copy this we going to show like that right so here let's go ahead and put it and it would look like okay fine whatever it is okay so the first thing over here we want to change is this one so it's a random number ticket number so that and then say like that it's just a random number okay number of e ticket like this and and then over here pretty much the same so B1 125 like that and then over here booking code so let's go ahead and save it and beautiful and that's what exactly we wanted to see and that's also we see it over here okay of course this number over here we can make a little larger if you want box side it has a lot more digits on it okay right so this what we have and after the what else we have so here you see that we also have this one so that means we can just simply go ahead and copy this section and we can put it right after this row okay and here it showed up again beautiful now let's look at this one that how we are going to do this now once again definitely this is we can put inside a row but the problem with this is that uh here we need to introduce something new okay so let's go ahead and do the Row first okay I think uh so let me go ahead and take a look at this so we can copy one of this and then we're going to put it here let's save it it showed up but as you'll see that over here this one uh which is would be the second one over here we can keep as it is but we need to change this one because these are all text widget but here this is an image and other stuffs together okay so it has got a bit more complex layout anyway so let me work on this one first so over here we'll have 299.99 I guess and then what is the other thing we had price okay looks like it has got four so let's pour four and then here let me going to do price okay changed all right I need to work on this one and how do you going to work on this now let's go ahead and take a look at the basic thing that we want okay so this is definitely a column just like this because this is column right but this column doesn't support image so we'll have column and this is the first child and this is the second child but first child itself could be a row because this is actually an image okay and this is a text so hopefully you understand so here let me go ahead and put column and then children and of course we need this and after that over here we can have row and then we'll have children and as you have it over here first we want to show an image okay so here we could do image dot asset image this one and all we need to do pass the image name now let's come to [Music] our uh this one resources folder and then media actually instead this we have all these things and then at the same time if you do come over here there should be a Visa card image This One Visa card.png so let me go ahead and declare a new variable so here we could just simply do Visa card and then here we're going to do PNG and then this uh card that's it let me close this and then here we can say app media get this and uh Visa card this one and what else we have so we have a const issue somewhere looks like this cons just not permittable now this is gone so we need to put cons somewhere else okay now let's go ahead and run it let's see how it looks okay right now it should have over here but the thing is that it's way too big now over here let's do scale and for scaling use use something like this so it becom smaller actually okay and then what we can do after that actually since this is a row we need to show this this one over here this things okay so here we can simply go ahead and invoke text and uh it would be I guess three stars and two 4 4 62 and let's go ahead and apply style to it here app styles do headline go ahead with three let's put it in beautiful okay so this is a Visa card you get to just see the last four digits beautiful okay now inside the column uh this is the first child and then here we're going to have to have text again and then here we'll say pment method and after that let's do style so over here we'll have app Styles dot headline 4 this one let's go ahead and save it and beautiful so this exactly looks like this one over here wonderful and here actually we can create a little bit of spacing okay so here we do sized box height five and and save it okay now it looks better now all I need to do quickly go ahead and put const modifier now I'm going to be quick with this looks like all of them they need const modifier okay right so with this we're almost done and in the next section actually we would be focusing on how to go ahead and create this and then we'll be done with this [Music] page okay so now let's go ahead and work on this section so we have every part every other part is ready as you see over here so only part remained this and this okay so now to be able to work on this uh we are here let's take a look where we are right now so this is one of the containers that we had and right below this container will continue make sure that you the right place okay so right below this one so we're going to continue so here we'll have another container okay let's go ahead and do that and inside the container now let's see how to and uh the understanding this thing now so definitely this is the container okay all right this is the container and then it will have border right but only on the two sides it's not everywhere okay so here you can say bottom of the ticket detail section okay all right now over here so we understand that this has to be uh border so we know that here we must need decoration box decoration and then inside this here we can use border radius so border radius that only because when you use only you can use border on both I mean you can select borders so first one is bottom right and then radius do circular over here and we can use it 21 and then bottom left radius do circular 21 all right so let's go ahead and save it and of course it's not visible because we don't have any color yet but now let's go ahead and put color over here color so here app styles do ticket color this one so this is going to be white and I don't think we'll see anything yet because we don't have a child now insert this let's put a child over here and this child would be a container again now here we want to have a container why the reason is is because well if we have container padding top padding left and right padding they all become easy okay so that's why we need that now over here at the same time we see that we need to draw something like called uh it's okay it's so rectangular with border right it could be achiev with border radius but there is another widget we could do it we could use to achieve this so here we'll have child and then we will use clip RCT okay this one so it would be a rectangle but clipped so that's why we have this so here we say uh let's see what is that I think we can get border radius radius this one and then inside this we'll have border radius dot circular and then here we're going to have 15 let's see what's going on it should be actually clip arct this one and now it's okay let's go ahead and save it and yet nothing is visible yet now for this reason let's come over here and inside this we can do a child let's do text allow flutter flter let's go ahead and save it and here we see that it already showed up but of course that's a little ugly but as you see on the both sides right now for now you can wrap it around the center widget uh I think I got the wrong one let's go ahead and wrap it around a center widget so it would be Center so the first thing we want to do is removing this now removing this depends on this container because they're coming from here the pen container this container is just occupying this space over here all right so over here you could do margin and agences do symmetric this one and then we could do say well horizontal actually we can just simply do horizontal and 15 we might not need vertical now as you see it looks rounded this and this they all look rounded beautiful isn't it all right okay so that's the first thing we had okay now we'll go ahead and continue to work on this well the next thing we want to show inside this is actually this kind of barcode Now barcode actually we could go ahead and install it like this so flutter P add barcode widget and and f p get so this is the widget that we are going this is a plugin actually there the plugin that we are going to use if you do that then we'll be able to actually use this uh or generate this this kind of barcode okay now I believe we need to stop and restart because we have installed a plugin okay well it's not there yet but we're going to work on this so now over here instead of using this here we could say barcode barcode widget this one and inside this over here we'll have barcode and there is this class bar code and uh from it you can invoke this one okay now let's see what's going on uh so it wants the data so let's go ahead and give it a data the data is the one that actually so since this is a barcode so it wants you to give you a data which means that once you scan it it would show this website or information related to this string so that's why it needs data all right and we do see that it's already visible over here and that's what we wanted okay all right and then this one is of course I believe that this shows this vertical lines based on this one okay but of course this is not the way that we thought like this one so we need to work more on this now we saw that earlier this margin was helping to push it inside right but we now we are inside the container remember this container represents the whole barcode so we want to push the barcode inside more but within the container itself so we can use padding so over here we would use as inss only and do symmetric and here vertical 20 go ahead and use it okay so now it came down all right okay now let's come over here this container itself now here we could do padding now the padding we can do as insets do subm metric over here I think we could do something like 15 so it's going to push it inside more symmetric horizontal would do better okay right you see that okay so it's over here barcode is little too big so we don't want it like this so here we can assign height say 70 now it became much smaller okay so now this one doesn't look like once again over here this one so we have this borders over here now remember earlier I said that this would supposed to show up as you go ahead and scan then it should show up so here's another property do draw text so we don't want to show the text so hide the text and now as you see it's gone so if someone scans this hopefully to direct to this um website over here and then there are other properties that you could set up color app Styles uh dot I think text color this one we can assign this not much changes and then I think there is also called width double do Infinity so which means let it take all the available space okay so now with this we have a beautiful um ticket ready so which exactly looks like the one that we have over here okay so the next thing is just going go we need to go ahead and show this ticket over here and so let's make sure that we have this okay so one more thing is actually missing before we go ahead so there's this line over here so here we could just simply go ahead and do size box height one so we'll see one pixel of differences and beautiful all right so the next thing we want to show is actually kind of this ticket which one is this this ticket as so this one actually so all we need to do go ahead and copy this and then we need to put it here okay so we can say colorful ticket and then what does that mean over here let me put white and black ticket so colorful ticket means okay let me go ahead and put it here let's save it so definitely we see the color is here sorry the ticket is here right okay now at the same time over here we need to give it a little bit of space so let's go ahead and do that so size box High 20 let's save it that it came down and then we want to show the color so remove this color thing over here let's save it and beautiful this isn't it awesome just showed up just one line of thing it changes everywhere so here our tickets are working here everything is working we need to work on this one this is a bit slow and here of course our ticket working so everything is working as expected and if you have followed so far you've done a great job with this well done let's continue on our next section okay so let's continue the last part of the screen is having this two circles over here and of course definitely it makes it very beautiful so that's what we want to do and to do that one thing you have to understand is that now as you see however however used scroll this thing it looks like stock on this place I mean which stays on this place and which makes it beautiful so you see that this is overlapping this as on a certain position so we need to do that and how we are going to do that well for doing this we need to use special widget which we already have used before this is called stack widget okay now how is going to work so let me col Ops the code and so that we know that how it's going to work so so far we have list View and this list view is containing everything over here everything you see okay so we need another one that would get stuck somewhere here okay now since I said that this would be a simple overlapping so definitely we need to use stack widget now within stack widget we'll have list View and positioned widget and that's how they're going to overlap each other now over here let me go ahead and find stack widget looks like we don't have it here so I'm going to wrap it around column first and then I'm going to wrap it around Stack this stack wiget also takes children now you go ahead and restart definitely we won't see any changes this same thing right okay cool now inside this first we need to go ahead and uh draw or show our position widget so here position and the child would be a container let's go ahead and do that okay right and after this we need to give it even before we do anything else so let's go ahead and give it another child okay and the child would be circle of water we we want to draw something circular and circle over is the best one in this case Max radius four and then over here background color it takes background color F Styles dot uh I think text color this one so let's go ahead and save it and we already see that it's over there at the Top If you see that but this is the position we don't want so we need to give it a position so here let's go ahead and give it a position left and we give it pixel 22 and then we do see that it moved over here and then give it a top position now let's give it 295 and we see that it came down over here but of course it's too small and this is where the container comes in because we already have container the first thing we could do we can give it a padding and as inserts do all so all so container within it we'll have some empty space uh let's see okay now let's continue to work on this here we could do decoration and box decoration and then here we can have shape okay so this a box decoration instead of giving it border we can directly change it through box shape so box shape do Circle so let go ahead and save it and then after that give it border uh let's see so here border and then border do all okay give it width of two now let's see the magic so so this is the magic okay so it has a border outside and the Border itself is two and within this we have this white color which is the padding three but of course if you increase the padding it would look bigger okay but of course it doesn't look that good so we're going to put three within it and that's how it works and then once again let's see color if we can take color so here we do app Styles Dot text color let's go ahead and save it okay all right no changes and then over here one thing we could do let's go ahead and play around with this play this thing so here say 75 if you do that it might go up and then say 65 okay like this so you can try to set it which I haven't done done okay so it does look like a little bit like this it may suit perfectly so let's go ahead and do it like this and then over here we going to do the last part now to to do that last part over here now we can go ahead and just uh copy it but that's not good so what we need to do instead we need to come to this uh ticket screen over here and we have this widget folder now inside this here we can create a new file so the file name we can say ticket position Circle dot do and then over here we could do St straight list tiet put positioned circle now I'm going to remove this and put it here and uh let's go ahead and import whatever we need over here looks like we need coer Chino and we also need app style and then Circle over which can come from Material app then we we donate this so this way we become reusable wiet okay I'm missing one t okay all it looks beautiful copy this come over here and remove this okay and then let's go ahead and import it we should be good to go cool all right now let's come inside this we're going to and close the others we don't need them now the only thing we want to change over here is this one okay so we need to work on this position that whether it's going to be left or right okay so we want to make it reusable and then for this reason over here we can define a Boolean final Bull and then it could be say pause which means for position okay now here we could say this dot pause and that's it now we say that POS equal true if we pass true then we use 22 otherwise we use null now why we can use null here you see that it could be nullable okay and of course if you go ahead and restore it still works sorry uh this time it will not work and I think we might have an isue uh not issue though let's see because it's a knowable thing so here uh this is acting up because we need to assign it a true or false because right now it's knowable which means that I don't need to call it from here but if I don't call it from here then over here this condition is not true which means it becomes null then it doesn't work okay so what I need to do over here here I can send pause true and then you see that it works it came back to its position and then how about the other one now right condition for that one here we could do right if pause equal true then we use null otherwise 22 okay so let's go ahead and restart and we'll see that it doesn't affect us okay it doesn't affect us and here we go I mean this condition this newly added condition doesn't affect us the reason is if pause is true which currently it is true over here in this case so well true then 22 this one and for right this one is it true then it goes goes for null hopefully it makes sense now we can go ahead and copy this so let's go ahead and work on this so over here we can pass null and let's see how it goes and you see it showed up and it doesn't hamper any other de I mean position hopefully it makes sense that why it works because now for the second one you are already passing null if it is null then here it's 22 and of course if it is if it is null so over here this condition is false then it's still null okay so you need to think more to get your head around this thing but the condition is just like any other tary operator and the way we worked on them before right now we can go ahead and work on this profile screen but but even before we do work on profile screen I think we have to take care of few other parts like for example we have this viewall screen and we want to be click on this and go to a view like this but with Dynamic value we don't want hardcoded values for this so we want to have Dynamic values that's what we want to do and as well as after that we also want to go ahead and click on this and view all the hotels right now we just see two of them we can have more data and then view all them and then we can also go ahead and uh see the detail so here we'll cover the navigation section and then we'll also see how to see them in detail okay so currently we cannot do any of this so this is what we want to do okay so since we understand the concept what to do now now the first thing we need to do go ahead and work on this section so this all ticket screen and we know that this is our old ticket screen right so this is the ticket screen actually uh that's showing all of them and now we want to be able to click on them and go to a new page now how to do that previously we have seen the concept of gesture detector so here we have to have gesture detector so I'm going to go ahead and U convert this sorry not con convert this wrap it around using a widget which should be called gesture detector and looks like we don't have gesture detector so here I'm going to call it widget and then over here we could do gesture detector all right and then of course we know that the gesture detector has a property which is called on tap so here we are going to do this okay and one of the first thing here we do we're going to say um tapped okay we make sure that we have this uh thing that's getting printed okay I'm tapped all right now the next thing we want to do is as we click on each of them we want to get their index now why you want to get their index the reason is because if you see our ticket screen over here we'll see that let's go ahead and check our ticket screen so here you'll see that we have ticket View and ticket view is uh taking ticket list and then an index okay so we need to pass Dynamic index to it so what we'll do once we click any of the ticket view remember right now wherever you click that particular ticket view over here is getting clicked okay now if you don't understand it it will make sense very soon just bear with me and then as I click we need to grab the index which we didn't do yet so we'll grab the index of this one of the items and then we need to call call this ticket screen from here and as we call we need to pass the index we'll pass the index at the top and then over here you will see that um we would be able to pass that index the one that we are passing here to this place now that means that it's taking Dynamic index which means a different of them so as will be clicking on differently and different ticket view item it will get me different information with this it's more Dynamic and actual routing okay so now let's come back over here this is what we did now one of the other things that we need to do right now is getting the index because we need to know where we are clicking at least we have to know which one okay now to be able to do that inside this ontap function we can actually create a variable you can say ver and we can call it index and then over here we need to get this ticket list this is our map remember and within this there is a function which is called index of index of get this one and if you do see that if you have index off it takes an element an element could be of map type okay okay this is our map and we know that this is a map as well so we are passing exactly the same thing so let me go ahead and grab this and pass it here and then let's put a comma and then we can print I'm tapped on the ticket so here we can do index okay all right so let's go ahead and print it now you click on this so I'm tapped on ticket zero I'm tapped on ticket two which means these are index actually right because index always starts from zero so we have total six tickets so if I click on this we'll see that we are tapped on ticket five so so far so good so this is the thing that we are able to do just now that we are able to grab the index now since we are able to grab the IND index our job is to take this index and pass it to this ticket screen over here so that we are able to pass it down to this one now how to do that well there are many different ways to do that one of the ways we do using navigation okay now earlier we have seen that for navigation we need to use Navigator off context or Navigator dopost name like that those are the functions that we need to invoke so this is what we want to do now from here as we click on this we would be we need to go to new route or new screens right so just like last time we have seen before we need to Define them so the first thing we need to do in our app routes over here we can define static const ticket View and then here we do ticket view okay like this so now this would be our route name we can refer it from anywhere and now we need to register this route name with the routes uh argument over here as a map so let's go ahead and do that here we do app routes we don't want homepage we want here ticket View and then we pass the context and then we say const and then here we'll say ticket screen okay right so ticket screen this this page right now would be working as a route for us okay previously it was on the bottom screen and it is still on the bottom screen but when we click it would be like a new route okay all right so that's registering has been done but well even after that we still don't don't know how to pass the argument because we haven't seen anything like this so here let's go ahead and Define this one navigator navigator dot uh here Navigator post name this one and we pass context and our route name so what we can pass over here we can pass context we can pass rout name and we can pass arguments this three things now the route name should be like our routes name defined in the routes file so here we're going to call it ticket view okay all right and then from here let's see I think uh we might have an issue with the naming instead of uh ticket view we can call it ticket screen okay otherwise we might have problem with the naming and which is not good sorry for this so let's go ahead and just simply change very quickly okay I think this is a better way to naming all right okay right so we have this and then the other thing we need to do over here is you'll see here we have this one if you hover over on this you'll see that okay you also have to have if you want to pass something else you can pass it the name as argument so this is what it's saying and for this one you need to pass using this curly braces okay so this should be named route or named route here it means that the proper is UN named actually because we are giving it like this and this is also optional I think named optional arguments so this is how we are doing actually not named routes name optional arguments so we are naming them over here now here we're going to do like this so if you go ahead and hover on this here you will see that objects arguments okay and this one you have to pass within curly braces because this is optional optional and named so that's why you have name and curly braces so here would the arguments and do like this now within it over here you can Define your key value pair so in our case here we are doing say index and then we are passing index okay so this the only argument that we are going to pass because we grabbed the argument right okay so now let's go ahead and restart our app and let's come over here and this time if you'll click you'll see that we go to a new route or our ticket screen but of course the bottom navigation bar has gone with this we have another problem we don't have this what is it the our abar we don't have the ab bar so for now we are going to go ahead and create an Eber Eber for our ticket screen screen now currently we have body inside this ticket screen so to create an AB here we can just say abber and abber and then here you can say title and just pass the name so what is the name over here we want to pass tickets like this we don't want to pass anything else so now as you see that okay it created a a back button now we are able to go back okay now it does look a little bit of ugly so we can give it a quick fix over here so here it says that horizontal and vertical we have 20 and then we also have this one so for now I'm going to go ahead and comment this out let's go ahead and click on this yes it looks much better and at the same time we also Don need this for now so I'm going to comment this out as well okay now it looks better okay as you can see that okay and in fact we also May comment this out okay so let's go ahead and check that okay now the other thing we could do over here right now is uh doing a little bit of styling of this okay now if you do hover over on this here you might see different colors that you can apply so we have this background color okay so let's go ahead and apply background color and for now we're going to apply the same color over here okay right so now it looks much better okay so whenever you click on this we do see this okay in fact over here you can also take this out we don't need this one okay now this exactly looks like the other pages and with this our uh navigation is working but uh then this is still not dynamic as you see this this things are pretty hardcoded right but now we have very easy fix for them it's not fixed we need to continue to work on that so let's in next section we'll see how to grab this now to be able to grab this we need to come to this one over here and we need to make some changes what are the changes that you want so first we need to convert this to to uh State full widget so here I'm going to do this operation and then now after that it would become a stateful widget because you see that we have a new uh part of the code or statement that's been created over here and at the same time we are invoking this state class and which is an abstract class anyway so now let's move over here inside this there is something called the change dependencies we need to invoke this one so this is really used whenever you move from one screen to another screen and then at the at the same time you pass arguments or objects and you want to grab them to another class so we are coming here from our earlier screen like from here and then we want to pass something on this screen and grab it and for those purposes you do the change dependencies the screen you want to grab it you need to implement the change dependencies in that screen now within it you can declare variable ARS you can name it anything and after that here we'll have this okay so now this is a sentence that sorry not sentence a syntax that you need to use to grab arguments whenever you pass around arguments remember from here we are passing passing this things right we are passing arguments and you can obviously see that here settings. arguments now this is a very different thing which will not cover over here remember that when you pass arguments and you have to grab it you need to use this one and then here you can simply say as map okay right and then okay right we are missing something now over here that we are passing once again this thing as a map so that's why here we mentioned that okay this is coming as a map now within this map we have things for example we going to print say past our past index actually and then here we're going to print args and then here we'll have index okay all right so let's go ahead and save it okay I think we already saw something past this zero now let's come over here click on this here we'll see that past index three and from earlier screen we also see that here we have 3 three so this is what is aligning together okay right so it looks like this is working now if this is working we need to assign this to here our ticket View and how to do that for this first we need to go ahead and create a variable and this type is light okay we can say ticket index okay now you can give it a default value it doesn't really matter and let's see add annotation type okay so light in so it's saying that okay you need something okay now whenever we have a new value like for example from here we can pass it to this one and then here can do args dot I think I don't think we can do this so we still have to do index okay right so let's go ahead and save it hopefully we'll have no issues over here now since this has been done so you can take this take index and then we all we need to do pass it here so instead of being hardcoded we do like this okay of course you also need to do it over here at the bottom so let's go ahead and find it okay right over here index uh ticket index actually this one right so now let's save it and you might see that there are changes immediately but I think that was our first one so now let's come over here now let's see okay so the first one is 8 hours 30 minutes New York to London and New York to London 8 hour 30 minutes this is what we see now let's go ahead and click on the second one so Daka to Shanghai 4 hours 20 minutes so Daka to Shang High 4 hours 20 minutes and we see over here the same thing so this is awesome this is beautiful which which means that this is already being Dynamic now this is from New York to Beijing so 9 hours 30 9 hours 35 minutes New York to Beijing 9 hours and everything else is correct as even the date as you can see that 11th of May and departure time 10:53 so perfect so this part has been done so our app became more and more lively not just few hardcoded screen not only that we are able to pass things around and make it more Dynamic so that was uh first part of the navigation in next section we'll see how to go ahead and work on this and do exactly the same thing so now the other thing you could do right now is go ahead and work on this now to be able to work on this first we need to come over here and we have this hotel View and we know that we are we have printed before hello there so we want to go to a new screen from here just like other times so we have to do we have to go ahead and create a new route name so let's go ahead and do that and here we can say all hotels okay and let's go ahead and change it here we can say hotels right and then over here we can Define the routes now of course with this we will have an issue but first let's go ahead and copy this and here we can say do all all hotels right but then we don't have this all Hotel screen over here right so as you see early we had for home we have all ticket K and this and that so over here we can go ahead and create a new file and then we're going to call it all hotels do Dart okay all right okay so once you do that over here we're going to hit St stateless and then we're going to say we can say all hotels I think that's what we registered all hotels right so over here we're going to P pull all hotels all hotels right now of course with this we still have issue because we need to fix on this so let's go ahead and do that and then we need to import it let's go ahead and import it beautiful now let's go ahead and save it and we do see that we don't have any issues now all we need need to do we need to move over here and then we need to copy this one okay so Navigator push named context and our app routes okay so let's come over here go ahead and put it and instead of this yeah we going to say all hotels and it's going to work of course so that means we can click on this and we'll view this and it's very ugly so let's go ahead and change it instead of this over here we can have scaold okay and uh after that within the scafold itself here we'll have so let's go ahead and save it and then what the very first thing here we could do ab bar because we want to go back and then here title and then text we just text so here say all hotels okay let's go ahead and save it and this is what we see so this routing is working and then at the same time we can go ahead and do a background color for it and I do remember that app itself we had this background color so let's go ahead and copy this and we going to put it here and we need to import it let's go ahead and save this and then here we see that okay right now it is weird so here we going to do the same okay now it matches up correctly as with like our other styles over here as you can see beautiful so which means that this all hotels tab is working and our next step our next job would be showing this hotels over here okay so this is where we left of last time we were able to go ahead and create a route as you can see from here now since we go over there we want to display our hotels here just like we did for hotel but right now we want to do it a little bit different we don't want the exact same layout which I mean by like say take all this and put them here we don't want to do this okay we want to do it a little bit different layout and which is better okay now we need to make a lot of changes regarding this if we want to do that anyway so we are going to do that right now and then over here let's come to our old tickets and we'll learn some new Concepts along the way okay so let's go ahead and work with the body the concept that here we are going to introduce is called grid Builder and how it works okay so let's go ahead and do grid grid View and Builder okay right now so how does this grid view work well if you do use grid view. Builder you'll have layout like this okay and this is what is done using grid view well previously for each of this layout we have used single child scroll view now single child scroll view you can only get one type of horizontal or vertical layout what do I mean by that with single child scroll view as as you can see we only have this horizontal scroll view which is this one the same for the hotel so horizontal scroll view which is this one or you could do the other one single child scroll view we can also do vertical so it would be in that case just like this and there would be just one column and many rows if you do vertical layout with the single child scroll view in this case we have done horizontal layout with single shell scroll view so we got like something like this that will have only one row and many columns like for example it has two columns as you can see over here and if you go over here we see the opposite so here we see this kind of layout and it is still a single child scroll view okay so as you see that with single child scroll view you can only achieve either horizontal and vertical but whatever you achieve it will have have either one column many rows or one row many columns just like this one row and many columns okay or many rows for example here one column but with grid view buer actually it combines both at the same time so that's the essence of grid view Windler in terms of layout so if you want to have more items together next to each other you need to use grid view Builder which means that both in column and uh roll out and where each each of the direction which means horizontal and vertical in both Direction you will have many items okay hopefully it makes sense now of course here we need to change this things it doesn't work as simple as that it's a grid delegate so here we need to call this class which is called Silver G red delegate fixed cross access account so here actually this is a function that we need to use and here as you see that it says cross access item so here you need to mention that how many items you want horizontally like for example here we have seen that okay horizontally you have four items but in this case we'll just put two hopefully it makes sense all right okay so this is what you want to do and then there are other things that you need to do what is that so here you need to say cross access spacing cross access spacing would be as you can see from the name now of course here's the other thing you have to know if our cross AIS is like this then this cross AIS spacing it also be like this okay uh you have to remember that one because in general when we have this silver grid delegate with fixed cross access account or count actually when you use this U class or widget so in general cross access refers to the horizontal one okay horizontal So when you say cross AIS spacing instead of vertical it would be horizontal spacing so spacing between these two items okay so here you're going to say 16.0 and then main access spacing of course this would be the vertical one so vertical one meaning by the spacing between this two between this two okay all right the last one so child aspect ratio 0.7 so this tells you that the width and height of each item and what's the ratio so because we are not giving any WID and height of each item what do I mean by that like for example say this is like a container right now this doesn't we didn't assign any width or height so silver grid delegate would find it out on its own now as it does it it needs to know that okay you want it like a square or rectangle now for example here we want it more like a rectangle okay or more like a square so here we can change it later and a lot of time people might say 1.0 so with that it would end up being a perfect square but of course this is not a square in our case this is just a layout now in our mobile over here definitely we' be wanting a square okay so we want two squares next to each other so that's what we want so we would go ahead with this child aspect ratio okay now of course here the next of the thing is coming item Builder just like any other list view Builder so here you need to pass context and length so in this case say for example uh sorry not length it should be index so and put it as index and we're going to use it later like this so let's go ahead and return something what do you want to return say for example return container so let's go ahead and do that and say give it a color uh text say hello grid and then let's give it a color so here we would say color colors. red for now okay now let's go ahead and save it and as you can see that so here we have this it items horizontally 2x two and vertically a lot more okay now of course if you do want instead of this two here you could do four and as you can see it changes okay so that's the beauty of grid view which you can directly work with you don't need to create a special Loop for both horizontal and vertical layout grid view Builder would do it automatically for you now of course I know that it looks ugly but we are going to optimize it now one of the thing here we do wrapping around it padding widget and then let's apply padding like this so now it looks better so this is what we want to look like when we click on this we will take all the hotels and we would look like this now with this your understanding about grid view. Builder should be better so now now all we need to do instead of uh this thing over here uh we need to find our hotel list and count that and insert it here one thing we could do even before we go ahead and uh use our hotel list here we can say item count say 10 let's go ahead and see that so here you see we have 10 items so that's how exactly it works so in next section we'll grab our hotel list and and display it here so let's go ahead and continue with this so over here we want to display our hotel list and then here we know that we have this hotel so this is what we want to access and pass to it now we can grab this one this guy let's go ahead and do that and let's come over here so let's do that and Dot do we need to import it yes we need to okay right Hotel list. length Okay so let's give it a length and uh we'll see how many items we have so okay of course we have three items in our hotel list so that's the first step and then over here you do see that we have this hotel okay so we can grab this hotel and let's move over here can we can so in fact we can grab this let's go ahead and do that and and uh then over here we can put it like this but of course it will throw arrrow so we're going to fix that so the first one is ver single hotel and then we'll have hotel list this guy oh no not this hotel list and then we pass the index to it so this index will start from zero and then we need to import it we have an extra braces and now the arrow should be gone but of course this layout might not work as expected because I mean over here you will see that we have height and width this kind of stuff but which is not suitable for this screen but anyway we'll go ahead and pass this thing and we'll see how it looks like and then we'll change and of course as you see that it already showing the things now instead of four we're going to display two of course this would look better but we still have overflow issues so these are the things that we need to change now one thing like for example let's come over here say remove this height all and uh also remove this with now let's go ahead and see so because of this our image is not coming out but now this is without any issues right so there are a lot more things that we need to work on this section okay so in our next tutorial next section we'll continue to work on this so images and text and we'll also work on the layout for the both sides okay so this is what we did last time and uh we have to fix that and even before that I think we have another issue so let's go back and uh let's click on this and let's come over here okay we don't have any problem as you can see where where you click you see the correct index and correct data but then if you do click here and if you do try to restart the app we'll see that there would be a problem let's go ahead and check that so here we have this null is not subtype of map Dynamic and this okay so what is this and how to understand we see it here again now if you do flut programming You' see this kind of error a lot not only just in flut if you do react native and any sort of programming you'll see that it is there all the time now first thing it's saying that okay you are getting null null means there is no valid value okay in the memory and but it is expecting this one so that's the problem so it is getting this and expecting this so it is Str that that okay null is not subtype of this in type cost so whatever it got it cannot convert it to this remember the object we get we convert to map dynamic dynamic right that's what we do so right now we cannot do this so this is a problem okay now this could happen for many reasons the first reason most all you are getting network data and the data hasn't arrived the UI has built then you get this because in your UI most probably you are going to use values from here but this value hasn't arrived so it is still null and if it is null the UI cannot render anything and then you end up having this wrong value which helps you Crush the app so this is one thing regardless you read data from Json file like here we are reading data from Json file or even if you get data from Network whenever you don't have your data ready and your UI is trying to render that in that case you will have this issue you have to avoid that now there are many ways to avoid okay now this is causing a problem so if you click on this actually you can click on here or here eventually it'll take you here actually so actual problem is here and for that you see here this is all framework issues so from here it points to our code and then it goes to the top which is scaffold over here Bottom bar and of course it refers to eventually this one okay but anyway the actual problem is here so here this argument is null actually this argument is null and we can go ahead and uh prove that so here we can say if is null okay here we're going to say print the value is null okay right and as you see that here the value is null okay now why this happens because remember uh on our homepage Now homepage has changed remember in our last uh section we had this grid view thing we are doing and we'll we'll actually take care of that don't worry just bear with me because this issue we have encountered just now so we need to follow that but anyway so here over here when you go from here you don't have any issues but when your app runs the first time definitely you're not clicking any of this so it comes here and it cannot find any value because it didn't click anywhere so it do doesn't get any value so how to work with this so this is definitely null okay now here we could do like this one thing so we could do a conditional check if this is not null then we're going to do this okay if this is not null we're going to do this okay only if not null we are going to go ahead and do this that means that if you come over here and click on this this would get executed but very first time when you come to tab okay so this would not get executed because it is null right now if it doesn't get executed this would be the value so T ticket index is zero already given a zero value and zero means that actually here we can get the very first the very first one right so let's go ahead and click on this now let's come over here now let's click on this okay so we can see this and then if you come over here our app doesn't crash we can do one more check on this so click on this our app will not crash okay right okay so this part has been sold and the other part is over here so we had this old tickets and we are going over there right as you can see but going over there we have comment this out and this is what it's causing right so definitely we cannot change this one we cannot really make it directly reusable so we need to put it back so that our homepage stays the same okay so now let's go ahead and reload and this is back but now if you come over here it'll throw an error so how to solve this but for this one definitely we need to go ahead and introduce a new screen so I'm going to copy this from here all right and uh I'm gonna come over here okay so over here we can introduce a new screen okay here so whatever we had copied early from here I'm going to come over here and put it first and then I'm going to change the name to Hotel grid view okay uh let's go go ahead and change it need to make sure we make changes here and here as well okay now we'll make changes in this file okay so it's not going to conflict our homepage okay so homepage would stay the same but here it's now different now from now on actually we can go ahead and make changes that how it should look like okay so so one of the thing that we had over here is this one right now this is this has a height and then we say this thing over here the image itself okay so with the current setup we still get issues and overflow Let's uh work on them step by step first let's go ahead and change this aspect ratio let's change it to 0.9 which means there would be more width than height and then over here we can also make changes so we don't want a width like this so let's remove this one over here and uh over here also change it to eight so that we don't have much spacing uh on the right okay otherwise it's giving us a lot of spacing and then ins inside this this container itself we can wrap it around an spect ratio because we need to remove this let's go ahead and save it if you remove this because the container doesn't have any WID and height so that's why this image or this thing is just gone okay this container needs with an height otherwise it just doesn't work okay now we cannot give it within height I mean that would be hardcoded so for this reason we can go ahead and wrap it around a widget and we're going to call it aspect ratio now aspect ratio would try its best to match this or fill up this thing uh based on the aspect ratio so let's go ahead and do that and after some testing I found that we could use 1.2 and then over here it shows up but by saying that it also means we need to make some other changes now the first few changes that we could do over here we don't want such big line so we want two 3 and four okay so let's go ahead and use them and as you see that it really worked and then we still have bit of problem and these are all coming at the bottom now these two are causing this problem now these two elements I'm going to go ahead and do a cut and then here I'm going to introduce the row so we can put them one after another and then inste of this we can use height let's go ahead and save it okay right so we have already uh a lot of improvement is padding and then this is roll actually we don't need this one I think we can just simply remove this okay and as well as instead of headline two we can use headline three all right so I think which is uh already looking better and I think we are happy with this and now if you go ahead and remove this I think that' be gone let's go ahead and check this thing let's click on this okay right so we have already three of this awesome so this part is working just like here but of course here we can go ahead and click and find a certain ticket and then over here we cannot click them yet so our next step should be making them clickable we do see that it looks great but there is a bit of problem when you click on this the first problem we see is that here the spacing is not same as this now we know that this thing all hotels this body holds everything now what we could do we could go ahead and wrap it inside a container and then over here we could do margin and we can assign a margin to it so here we could do agent sets dot only and then here we could do left so over here we could do eight and let's go ahead and fix this now there are other ways we could fix it but this is one of the fixes that we could assign to it so now here of course we do see that if we click on this now we go ahead and view all these things the next thing actually we want to do well we're going to do it from here so we want to click any of this and then go to a new screen with detail information so that's what we want to do now here actually when we click on a hotel we want to go to a page like this where we'll have our hotel picture we don't have it currently don't worry this is what we want and then we'll have Hotel description and then at the same time we'll have some related images that's what we want now one thing you see that over here as you scroll up so this image that gets smaller and then over here we see a custom scroll bar and uh I mean this is what we see as a title and then as you come down the title gets down as well and as you see that it has some animation okay so as you see it has this animation so this is what we want to do with the hotel the complete Hotel view so this is what we want to do now to do that we need to learn a lot of new Concepts so this is what we are going to SC uh cover and uh I promise that this part would be exciting because as you click on a certain hotel it's going to take you to a new screen and that new screen will have detail information and then at the same time you you will see that it animates apart from that here you will have a button this button within this one you can do more or less okay all right so that's why it's very interesting so this is our all hotel and then over here we have this hotel grid View and then if we click any of the hotel we are supposed to go to a new place right and we learned that we're going to do it using new idea our Concepts now over here this Concepts we need to cover few new widgets so the first one is called custom scroll view now this is used to do the custom scrolling which we have seen before and at the same time within this we'll have sers slver abber and SLI list now the custom or the earlier widgets that we have seen the widgets we have seen none of them we just actually do any kind of Animation as it Scrolls because we have seen list View and list view doesn't do any scrolling I mean sorry list view doesn't do any kind of Animation if you use a custom scroll view as a widget then you have slivers a sers is like widgets because within it you hold sliver abar and sliver list so first we'll have custom scroll View and within it will'll have slivers and inside slivers we'll have sliver abber and then we'll have sliver list so these are nested inside each other and as you can see that sers will take a lot of slivers one of the sliver is sliver abers so SLI abber is a type of slivers and then sliver list is also type of slivers so this two we're going to Nest inside the sliver abber and then sliver abber definitely as you see it takes abar so our abar would be animated as we have seen already and at the same time over here you will see that we'll have sliver list within it actually we can put any kind of widget so that's what we are going to do now now after we do this we see that our hotel each of the hotel they will have animated View and lot of fun aspect of it now the first thing I want to do it over here actually I want to wrap it around another widget first and I'm going to call it gesture detector gesture detector and then within it here we'll have ontap event all right now our ontap event doesn't have any event so we can come over here inside this for now I'm still going to go ahead and create a new file and later on we'll refactor them and here we can say hotel detail Hotel detail dot Dart and then over here we're going to create a stateless class and we're going to call it Hotel detail and then over here let's go ahead and import that now we learned from our earlier lessons that we need to register them now to register we need to come here app routes and then over here we're going to say static const Hotel detail right so this is done and then over here we can come over here in our main do Dart and within it we can do app routes and hotel detail this one and then context Hotel detail now over here we need to put a comma and then we are good to go all right so since this is done now we can come over here and definitely we could do navigator navigator do push named and then here we pass the context and over here app routes and we don't want homepage we want Hotel detail this one and for now that's it okay let's go ahead and click on this I think we need to restart it because we have introduced uh new section of code and routing all right now let's click on this so this is what we see and beautiful and this is also expected now very first thing we want to do within it removing this we don't want to show this we all we want showing this scaold here we'll have body and within the body we'll have custom scroll view as I said early custom scroll View and uh let's do a return statement and let's save it and let's see this is an empty one and nothing is uh showing up okay so one of the very first thing I said that early that we need to show this slivers so right now we're going to write the sers so here we'll have slivers as you can see it takes list okay now if you hover over on this there's a lot of explanation over here you go ahead and check it on own but I have also an article about it I'll put the article link below so that you can find the article and also go through it but once again I'm going to go ahead and explain on my own now over here as you see that sers it takes a list and here says that yes you can put uh any kind of widget inside this thing okay so now over here what kind of widget you want to put since we are going to work with our animated Eber so here we want to have sliver abar rather than other other kind of abar so so let's go ahead and do that let's put it okay now we already see that we have a back button you CL click on this we can go back and this is awesome and this is already working okay and after that within it if you H over on this there are few properties that you can set okay so we going to set those properties one by one here we'll have expanded height and say 300 okay let's go ahead click on this save it okay of course you can see that nothing is visible yet so over here nothing is visible the reason is because we don't have any content within it so we need to put some content now to put content we want it to be flexible because we want to make it smaller and bigger as we scroll okay so that's why we need to use a property called flexible space now here we'll have flexible flexible space bar as you can see that flexible space bar which means it will make our abar flexible okay now within it the very first thing we want to do is a title and for now we'll say text and hotel title is the one that we're going to use and of course if you go and check nothing is visible yet and the last part here you need to set image as a background okay so if you see that here it says widget but of course we're going to put an image because we want our image to be here now to be able to do that over here we're going to write image. Network this one for now we're going to use Network image just for an example but later we're going to change this so here we're going to say https and then via now this is a website where you can go ahead and uh get their stuff for free online just write the write as I'm writing and then you are good to go so now let's go ahead and save it okay and as you can see that it already popped up now the image itself has uh over here width of 600 and then the height of 400 okay now this expanded widget is 300 which tells you that okay so this s abar this abar that I'm building that should take 300 from safe area so this is 300 but of course if you change say 600 it would come down okay so it's going to come down along with it all right so that's how it works now of course you can have any size you want it doesn't really matter so you can have uh one 1,000 by 400 it doesn't matter so but it changes because this is very Dynamic it changes based on the item and height you give so the actual one you need to do your own experiment for your images that what you want and how much you want to show but anyway so for now we're going to stick to 300 and 600 over here let's save them back okay and let's make it 300 and we are good to go now that's the first part and then as I said later on wein it we also need slavers uh sorry we need SL list this one and it takes a delegate property and within it we'll have slver child list delegate is what we want and it takes a list as you can see over here now within it here we could have a a lot of text let's go ahead and put them so here I have pasted some text and it's a lot of text now the magic will happen you will see that over here as we hover over it on top over here this image itself become smaller this image itself becomes smaller as you can see and it eventually disappears and then it starts scrolling which is very different than the earlier epur that we have worked with so SL UR is cool for doing animation and you could do a lot of control on this for example over here we do see that it goes up as you scroll up okay but we don't want to do it so here let's set up some property to set up the property over here we could do like this so floating false okay so we don't want it to float so let's see most probably we need another property to set which is also called pinned pinned true okay and then let's come over here let's click on this now we'll see the magic happens as you see that abber is still at the top and we do see it okay we do see the title okay and as you come down it it disappears I mean it comes down with you as you go up it it it stays at the top and fixed and this is what this two are doing over here of course there are a lot of other customization we need to do but you get the idea the idea is you we want our text to scroll automatically not only that we want our image to scroll now for this reason we have used custom scroll View and within it of course you have to use the property sers and then the other embedded properties that you need to to use slver Ab bur and SLI list okay all right so that's the first thing that we have done but of course we don't want the text to appear like this okay now let's go ahead and make some changes so I'm going to actually remove this we I don't want any of this text over here now within it over here I'm going to do padding so let's go ahead and do that and Ed inserts Ed inserts. all over here say 16.0 all right and then after that here we'll have child and text now within it I'm going to put some dummy text for now so you can put a long piece of text and this is what we see so of course this is getting better for now and and uh later down the road here we'll have a button called more or less and we'll work on that don't worry so that's the first thing and then well so since this is our widget and this widget is showing our text after that we want to put another widget over here and I'm going to do the same for now I'm going to do padding and then within it here we'll have Edge inserts and 16 add inserts do all 16.0 and then once again we'll have text over here and here we'll say more images okay here we want to show the images that's relate to our uh hotel and of course here we are missing child property let's go ahead and save it and this is what we see over here and now of course we need to go ahead and style about it so here we do Style Style and text style and within it here we'll have font size say 20 dot w and uh font weight all right and the font weight we are going to use Font weight bold okay all right like this let's go ahead and save it and this is what do we see now inside this we also want to show other images before we go ahead let's go and put some const modifier because my editor is screaming at me that you should do that and at the same time I'm going to go ahead and structure this format the code all right so as you see that so by this time you do understand that sliver List It Takes list and of course since it takes list it puts the L in more like column format okay so that's what we see over here now within this after this padding over here we want to have another container for now and say give it height say 200 for now okay forget about other stuff for now and then inside this we'll have child so let's go ahead and do that and then here we do child view dot Builder list view. Builder and here we want to have context and we want to pass index and then over here say I want to show some items okay and the item itself for now say we want to use Network image okay so here we're going to return return image.net image. Network can we return this okay we have two M's I believe that okay right now within it here we're going to do https and then via dopl holder.com and say 200 by 150 so this is what we want to return so now we are here and make sure that you do have kind of uh limitation item count if you don't mention it because it's requesting too many images because in general list be Builder creates infinite number of amounts infinite amounts of widgets so that's why you need to mention it over here otherwise your app will crash or it won't work okay now of course here we are seeing that this is scrollable okay now of course this is not how we want we want to change it here and let's change the scroll Direction and uh horizontal access. horizont onal I think I believe this is what we need to set okay beautiful all right so as you see that now it's fine so we can scroll left and right and we have 10 items I believe I feel like I've been scrolling for a long time okay right anyway so now as you see that it's working the scrolling is totally working make sure that before you run it first time you use limited number and lower the better after after all these are network images somehow these are all Network images they are coming from network but if you have unlimited number of them it's going to crash your app now of course within this you can change your items over here I mean the height and width it's all up to you now well here we do see that we have this issue of margin and and what is this so let me go ahead and wrap this thing around a container and let me reformat the code and then let's come over here and within it over here we're going to do margin and margin Ed inserts while all say for example value of eight and because we want to do debugging so here we can set of color colors. red so let's go ahead and save it and here we do see that okay hide and width here we have even the 200 but here this is an image and which is not matching with our proportion so that's why we do see that but of course if you reset to 200 which is square is going to take all this place and then of course of course this margin uh if we apply then we see that yes okay so it it works better like this and if you do want you can also do 16 like this like the earlier ones so left and right we all have margin but anyway you get the idea okay so if you want to show your images here they have to be uh especially optimized in terms of WID and height it's better whatever the WID and height you do here you do the same over here as well at least the images okay so now with this we have an understanding what is uh custom what is so we have an understanding of what is a custom scroll View and at the same time we have understanding how to work with SLI AB sliver list and then as well as list view Builder so we also learned that sliver C scroll views and slers and list view Builder they can all work together but yes this may sound little bit complicated but trust me this thing you're going to use again and again if you're in flutter abdb because this is very optimized anyway so we'll work next on the next tutorial but now here is your job so I'm going to assign an assignment to you so your job would be as we click on each of this images over here each of this images over here your job would be retrieve the title because as you can see there is always a title over here retrieve the title your job would be retrieved the title and show the title over here and at the same time you should be also able to grab the image and show it over here so this is what you need to do now there many ways that could be done one of the ways is that just passing the index of this so this hotel grid view now each of them they have an index okay so as you pass the index what you could do you could pass the index as you click on this like previously we have seen how to pass arguments so here you can pass grab the index and pass it here and as you pass it you have you will have access to the index over here but of course in that case you need to change this one and set the index and then you need to read the hotel list over here and as you read the hotel list you can go ahead and show the image so the idea is somehow try to grab the index and pass the index to this guy over here in the Constructor and then pass the index here and then when you go to hotel detail use it here and use hotel list and then use that index to grab one of the items from the hotel list and that's how it should work thank you all right so this is where we left of last time I mean we working on this assignment and hopefully you have done the assignment once again if you have problem understanding the assignment or doing it you can always leave questions below now as I assign the assignment actually I also gave an idea how to do that so the very first idea was uh passing around this Index right we said that we need to pass an index from here actually over here within this grid Builder we already have an index okay so we can grab that index so all we need to do here create a new argument and we call it index and then over here we want to grab it as a parameter so here we do final int index and then of course because these are the properties or Fields so we also need to put it inside this Constructor so over here we going to have required this do index and that's all okay all right so we have it and then the next thing is to go ahead and pass this one to this guy but before we pass over here let's go ahead and print my index is here index so because we are printing a variable over here so we don't need curly braces the dollar sign is enough now let's click on this so I do believe that I need to go ahead and restore it all right so my index is three and then my index is two like that okay all right so that's how it works okay beautiful so that means we can get the index now the next thing we want to do is passing it as an argument and we know that if you want to pass variables in the route you can always pass them using this argument ments property and we pass it as a map so here we're going to call it index you can call it actually anything and then assign this value the value that we have here now remember we are not using anywhere else we have we are injecting inside our Constructor in the object itself and then we are over here as we click we're going to pass it to this hotel detail now inside this hotel detail we can grab it so over here we need to convert it to a stateful widget okay so I'm on Mac over here option enter and it's going to work so and we learn that as we passed parameters or arguments from one screen to another screen then we need to go ahead and uh access it using did change dependencies so this is what we are going to do over here all right now here we can create a variable and we can call it arcs and within it over here we're going to use model route this one and then off context and then we will say that we have context and settings this one dot arguments so we getting the arguments as map all right so here this is called bang operator and with this you understand that we say okay uh the screen the screen will have context okay because context holds everything okay so that's why we are passing this context because when you move between screen and you want to grab your objects this and that like this one it is stored somewhere in the context context context is like a state or a special memory where you can grab it okay you can understand it like this anyway then over here we are going to print ARs and then here we are going to grab it as index okay so whatever you put inside this arguments whatever the key this is called key this called value whatever the key that is you always put key here okay because this is a map and in the earlier lessons we have learned that if we have a map we can access a map item using the key name all right so let's go ahead and save it and let's click on this and here we go we see that all right so we we are able to grab our stuff all right so here we're going to create a variable final light int index and then from here we're going to do index equal ARS index okay now with this we'll have index in this variable now we can also give it a default value so that whenever we are using it doesn't crash so always try to have a default value valid default value in this case this is zero all right so the very first thing we want to do over here is changing this but now we don't want to have Network image because right now these are coming from our Json data okay Json data the one that we have over here okay right so here image. asset going to do the job and then here we're going to do assets images and then here hotel list which we can access and and then we're going to access a certain item using the past index and then over here we'll have image item okay and I do believe that this is the correct one and if it is not that's the correct path I believe oh assets image yes right so images let me go ahead and fix that images and then we have the slash okay all right so let's go ahead and restart our app now here we do see let's go ahead and check on this okay right the image has already shown up over here as you can see at the Top If You click on this this is a new image that I have inserted and this is an old image so yes the image is a little bit different now this image is not wide enough so that's the problem but you get the idea okay so you it should be more about width anyway so now over here we can also change this so here we could do hotel list we can access this one and then here index dot not DOT it's called Place uh remember that these are starts with place okay all right so let's go ahead and uh use this over here and let's go ahead and change this so you see the best hotel this is the name best city pool but of course this still needs some uh reassignment of the name so that we can see the images correctly and the name correctly but you get the idea so it's already working okay so this is where we left last time and then there are few problems here that we want to take care one of the problem that we want to start with this background button this is not the button color that we want the arrow button is okay but we want to give it a background now to be able to be give it a background inside this SLE R Bar we can use another property the property is called leading property okay now inside this here we want to use gesture detector and then here we'll have ontap event gesture detector is always used for navigation or going back and forth okay so this is where we put our route or navigation but anyway now let's move on here we can also assign a child now the child itself here we do container okay so if you don't know how many properties this leading uh or what is this leading you can actually always look up here any kind of widget if you don't know what it does you can always hover over on that widget and it will give you all the properties and here it says this okay well this leading is a type of widget okay and then that widget means most of the time you can use a text you can use a container like that there are a few other out there as well and container text sized box these are the most common type of widgets okay anyway so now inside this actually we want to work now the first thing here we want to do is decoration why because we want to give it a background color the background color for this arrow button currently we don't have now to be able to give it a background color definitely we need to use container container has decoration and then it has box decoration property and within it here we want to give it a shape now here there is a property called box shape and it has other properties and we're going to use a circle the reason is we want to give it a circle background okay all right and now let's go ahead and save it okay and it looks like it's gone and don't worry about it and over here let's give it color and here we would use app styles do not primary color let's see okay so now it already showed up over here as you can see that but of course uh now it doesn't work okay the reason is because whenever you use leading whenever you use leading property you have to specifically mention the back button earlier we didn't have leading so it was okay and there was AB back Buton but now once you use the leading property you need to go ahead and then mention the route or the back button automatically and to do that in general here we could do Navigator dop okay Navigator dop let's go ahead and do that and then here you need to pass the context and once you do that here you'll have this uh you will see that the popup button works okay okay now we see that it already works okay cool now after that of course it's still very ugly because this thing over here the butter itself is not shown so for this reason here we can use another property child which is inside this container and then we can use icon icon is like another kind of widget okay if you hover over on this you'll know that this is icon and lot of different stuffs and of course uh the container itself also takes widgets like as a child and icon itself is a widget and inside this here we could use icons do array back arrowback this one now of course uh what I does you can always see from it now here there's this property I do believe the first one okay the first one itself okay because it doesn't take any name so you can directly go ahead and use it okay so whenever you see something like this without curly braces or outside of curly braces you can actually go ahead and use that without any name of course in that case you have to know what kind of property you are using like for example here container right you see that container the decoration right so over here you see decoration this one inside this curly braces okay this second curly braces so anything that's inside curly braces if you want to use that you need to get their name anything that is not inside curly braces you can directly use their properties anyway so now here we are going to go ahead and uh say for example color okay here we could use color colors. white okay so let's go ahead and save it and we already see that and of course it's working and now there are other problems as well the problem is it's too big we don't want it to be so big now inside this over here this gesture detector this clickable widget we want to wrap it around padding okay so that we look good now we can give it padding of eight okay now it BEC smaller and with this we see that it's looking much better all right so we were done with this and the next step we want to go ahead and do is working on this the things over here as well as you will see that uh in some cases this doesn't fill out the screen and which is very ugly so these are the things that we need to take here now to be able to do that we need to put our Focus over here inside this uh flexible space bar this background image okay well the first thing here we would do is changing this image property okay so let's go ahead and change it the image property itself like we can come over here and put a comma and come down and within it here there is a property called fit okay box fit. cover so we want to use it as cover now if you go there okay it looks like already covered and the top as well and then here left right and which is beautiful actually and here as well so with this the problem has been solved so in general uh if you have image widget and the image itself you want to fill up left right top or bottom it doesn't matter how many directions the image box feed could help a lot okay so that that's how you should go ahead and work now after that there is another big problem that we need to solve you'll see that this guy first thing it's not very visible and this position actually changes it's not always there it changes based on you know this length uh or width so we want to give it a background color as well as keep it in a fixed place so that we don't need to change it or keep changing all the time okay so we want to give it a fixed position okay now here once again we are going to work with our uh stack widget okay because within stack widget over here we can control the position itself so every time you want to control the position of certain widget on your UI it's better you should wrap it around using uh what is that called stack widget okay all right now to be able to do that so we have our image widget I'm going to cut it over here and then here I'm going to have stack widget and we know that stack widget takes a lot of children so that's why we have this one and then inside this uh we can use position and here position itself will take this image the one that we had early okay let me go ahead and refractor the code so that it becomes more readable right let's go ahead and save it now of course it distorts everything that's the problem here we could also use a fill property it's going to fill it okay now it's the problem solved okay this is another trick that you could use with positioned widget which resides inside stack widget The Fill property is going to fill up everything whatever the child it holds because it holds this child over here now this is the first position widget okay now image itself we don't want to work on any kind of positioning now because if you have stack widget within stack widget everything you have to put using positioned widget otherwise you will get error okay so that's why we did that even though we are not changing any position over there all right so now here actually we want to take care of this title we don't want to use the title this one okay we want to put the title here okay now one thing I could do I can go ahead and copy this and put it here and uh I can comment this out okay let's go ahead and save it all immediately you see that it it it's like that it's gone okay it's most probably here at the top because we need to change the position now since we are using positioned widget this is the time we can go ahead and change the position now to do that say for example you change it to bottom bottom 20 okay and looks like it didn't show up and it doesn't matter and then also asign left okay okay right and here we do see that it showed up but if you do want that you can also use write okay so this could be a perfect place from left side from right side 20 rather than here okay all right now over here we don't see that it looks good so this text widget we want to wrap it around container so that we can give it a transparent background okay we need to do that because otherwise this text is not very readable now the very first thing here we could do is color and then here um we could do say for example colors dot black and then with opacity say 0.5 because we don't want complete Black okay the background itself we want a little bit of opacity like for example we can see the chair within it right okay well that's the first thing and then at the same time the text itself is not very clear so we want to change the text now in this case we are not going to use any kind of predefined custom wiget that one we built because we want to apply Shadow to it okay so for this reason then inside this text widget over here we're going to use the property called style okay style and then here text style and the text style itself will have color so let's go ahead and do color and then colors. white okay now we do see that it has a color something called White okay okay all right so now it is visible and another thing that we could do here is the padding Edge inserts do symmetric so with this we' be able to place padding horizontally and vertically just using two numbers okay because this is symmetric so here horizontal say eight now here you see left and right we have a little bit of space right so left and right and then top and bottom for that one we can use vertical and say for example for this you use four and now it gotten better okay now back to style again so this time over here uh we may use the font okay so what is the font size say font font size we're going to use the this one and we can use 24 and now it would stand out and which is much better and clearer okay all right and if you do want you can give it more transparency okay like this okay but I think 0.5 looks perfect okay all right and then over here within this for now we can put a const modifier and over here we could do the same for now let's go ahead and save it all right now since we use this style over here and here you see that you might have something called decoration or Shadow actually not really decoration we are looking for something called Shadow this one so our style text could be shadowed I mean the text itself could have Shadow Shadow so that's why here we use shadows and shadows takes list of Shadows if you hover over on this you'll say it's a list so whenever you see a list in general you want to use this too okay and inside this you could put as many items as you want blur radius okay so inside this we're going to do uh shadow shadow okay I think it should be is small okay I think I have't typ sorry Shadow okay right now inside this the first thing we want to do is called blur radius and then here 10.0 and then color and here app colors app Styles app Styles Dot primary now here we do have a const so that's going to cause the problem so let's remove that because if you use const you can't use Dynamic so this is dynamic this value is red on the Fly and then over here we can use upset okay and then upset would be upset okay now let's go go ahead and save it okay so well it doesn't look like that we have a lot of changes but with Shadow if you do apply a shadow for example if you remove this so there might be small changes okay let's go ahead and check that let's uh click on this and let's come over here so this is what we have and then let's come over here this is the other thing we have okay and now let's to put the shadow back all right okay now with this with everything it looks much better design not like the earlier one which was very sloppy okay well in next section we'll explain how the Shadows work