"Develop an iOS & Android App with the BLoC Pattern & Flutter - Part 1"

hello everyone assalamualaikum so here I have this app and this is the UI and this UI and app are built using flutter get X rubber put and block so I built three versions of this app so over here the first one is getex this is riverpod and this is block this is actually a complete app it has both backend so it does have API and backend and notification and chattings so all these features have been done using all these three State Management Systems anyway so I'm gonna allow for this one get X and this is a riverpod and this is uh block okay now of course in terms of UI and visual effect there is no change so here I'm gonna do click on this for get X and here I see that we can get started and this is where it takes us and this one is for riverpod and let's get started and the same happens here here all right now for each of them we could log in or sign up now for River get X itself actually I have signed up so I'm going to login using my credentials over here and after that actually would be able to use the app otherwise we are not going to able to use this app so I'm going to log in over here and we'll see that it's trying to log in because it's connected with the server so data is coming from server and here we logged in now over here we have logged in using uh get X now I don't have account for this too so I'm going to go up and go ahead and sign up over here now first one over here I'm going to use the username as device best stack and I'm going to the email address and here I'll do Dylan at the best tag.com and I'll in terms of password I'll keep it just as simple and I'm going to sign up over here and let's see okay so we see that we have some response and it says that user account already exists okay now in that case we are going to use a different one let's go ahead and sign up all right so here it says that an email has been sent to verify to my account which is my email account so that means that I'm going to go ahead and verify the email address so here I've got the link and I'm going to click on this and verify this email address and we should be good to go let's wait for it because the Firebase verifies our email address in our app we have used email address verification and for this mechanism we have used Firebase now here it says that your email has been verified as you can see so now here we are and inside this we are going to use the email address the one that we have just used to log in so I'm going to click over here login so here we are logged in using riverpod now for Block itself we are going to use Google login obviously you could do email of course you could do email login but here we'll go ahead and do Google login so here we are doing Google login so it means that our app supports custom login as well as Google login Facebook login and apple login as you have seen earlier here at the top we had this apple login now we should be logged in using Google now as you see over here you can also use apple to log in okay beautiful so our apps are ready now this part of this app has been done using block so let's go ahead and take a very quick look so here is the search section and here is this courses so if we have a lot of courses you'd be able to see them from here and then over here we could also do chatting and this is our profile section so that was the getex version now let's see the riverpod version over here so once again this is our search section and the course section and message as well as our profile section okay great now block section should be the same as you can see over here so now here you could also go ahead and click on this section where it says go and see your lessons of course here you'd be able to play videos now here I put random videos all the videos are same though all right so the videos are same but you get the idea so the teacher will be able to upload these videos from backend how let's take a look at this uh message section using get X over here we do see that we would be able to send messages here with the hey there hey there and send messages and of course we'll have this send images and file section okay so that's what we would be able to do here we'll see how this uh payment section works so it will take you to this course section earlier we have seen that you can view them uh as a video right but you could also go ahead and buy the course but the course should be uploaded by the teacher from the back end as you can see it's loading so here we have integrated a stripe payment so you'd be able to your users would be able to pay through Visa card Union card and MasterCard all right so of course on virtual machine like this we are not going to do that and over here uh user would be able to see all the courses that been uploaded by the people in this platform but of course this one we also have over here now hello everyone assalamualaikum so first we'll start everything by creating a new flutter project here I am on Android Studio I'm going to use Android Studio to do that you can also do it on vs code or any other preferred editor the idea is same so as my Android Studio is open so at the top I'm going to select file and then here I'm going to select new flutter project now with this I'll be able to create a new flutter project and then over here I'm going to click next and over here I'm going to give it a name so as our app has to do with the learning and the theme of this app is you learning so here I'm going to do you learning and you learning app just like this and over here we're not going to select this because we are not going to do it for web app and any other versions we are just going to do it for our two mobile platform one is Android and another is IOS and everything else stays the same and over here I'm going to use the module name as this one you can use the same now the organization I want it to be different for you so make sure it's Unique so because I have a domain so I'm going to use the best tech now later on later down the road Android and iOS they would create package name and bundle identifier name based on this one of course it would combine this organization name and your module name together to create a new package name and bundle identifier now this section has to be unique right after com so you can use any unique name make sure it's Unique otherwise you'll have problem submitting this app in the app store so let's go ahead and click finish all right so here my new flutter project is being created and I'm going to open it up on new window all right okay so let's get it organized and looks like everything is ready now over here I'm going to wait for it to be initialized because it may take a bit of seconds or I'm going to close this all right now at the top I'm going to select one of this simulator so I'm going to select iPhone Pro this one all right and we don't need any dependencies for now all right and then I'm going to run this and make sure that everything is okay with this okay now here we are ready with this app and this is the basic page which looks like this and we can interact with this app okay so over here we can click on this and increase this and right over here you will see that we have this lib folder and inside the lib folder we'll have this main.dart file which is this one main.dart and over here everything resides that helps us to interact with this app the one we have over here so whatever we see on this page happening that's because of the code in main.dart and then over here we are going to use pubspec.yml file now this file is for loading your resources I mean downloading your resources from the internet like third-party packages so if we are going to use any kind of packages then we should be uh mentioning the packages over here as dependencies and if we have something just for development then we'll mention the package name as Dev dependencies and then we do pop get all right so these are the basic things now of course if we have some iOS related change we have to do inside over here and if we have Android related change we have to do over here which would be doing a lot actually because we are going to build this app using both Android Studio for Android and iOS all right I'm going to close this and now over here one thing we do see that as we click on this button so it gets changed now this is happening because of this class over here my home page and inside this we have this class my homepage State and it extends State now state is a class actually now this class helps us to maintain the state of this app now this is the value variable that's being stateful in a sense that it keeps a state which means that it keeps its current status so you can always add more stuff on the top of it now we can make it a little more interesting over here so as you can see we have this Floating Action button so we can take this Floating Action button and we can merge it to Floating Action buttons so that's why over here we'll have row and after this we'll have children and then we're gonna put one Floating Action button like this and then we're gonna put another Floating Action button like this now let's save it all right so it looks like we need to restart our app so let's go ahead and do that okay now of course we can change them you can change them from anywhere you want but let's work on this style a little bit now since we are inside row over here we could do like this cross access main access alignment main access alignment space around this one with this it'll look better and we have to restart it one more time okay great now the second Floating Action button over here what it does instead of increment we could do it decrement over here we can say let's decrement okay so increment decrement now we don't have this function over here the earlier function which is this one this is responsible for actually adding a new value to it why the earlier value is zero when we start initially and then when we call this function increment counter actually we increase the value increase the value of this variable over here as we click it again and again it gets increased again and again now we just created another button and this button we want to do a different kind of uh value change like decrement right so I'm going to copy this and then over here I'm going to put decrement decrement all right so the function is ready now we do minus now before we make any changes let's go ahead and make changes over here so we would do minus I can minus well I think we don't have icon minus so we need to do icon remove remove all right okay great and over here tool tip decrement so that we get organized all right now let's now let's restart our app okay so over here we'll be able to increase the value over here we would be able to decrease the value all right great now we have this function both of this function actually share one common variable which is a counter so the variable value is being persisted so wherever you call it from we can grab that current value and change it the way we want okay so this value is being stateful or this value is being shared or this value has been persisted okay so this is called shared State and this is the state that we want to manage because you might your app might be very complex it might have many many pages and a lot of complex thing or interaction made going on so whatever goes on we still want to manage our state so this is called managing state or otherwise State Management now over here we just have two buttons and it just deals with one variable and the variable also inside this class in the same file so it becomes much easier to manage it but we might have a lot of variables and custom objects or custom list and very different type of objects that we need to deal with now in that case managing state is like this would be scary because as your app gets bigger it'll just get bigger and bigger and you'll see that your code is all over the places this kind of code and it's hard to manage while we can use a package using this package this kind of logic this is called business logic we can put it in a separate file put all of them in a separate file and then put them in a separate file and if we do that we'll see that it becomes much more readable okay and it's easy to manage because it would be separating our files and doing different things we'll be separating our business logic and call the business logic from the UI okay now for this reason over here actually we are going to use one very popular extremely popular state management package which is called block flutter block so that's what we want to do well the next step first we'll see how to change this one to flutter block page flutter block State Management okay let's go ahead and do that all right so to be able to work with this first we need to go ahead and install flutter block package now to do that I'm going to come over here in the terminal and then I'm going to run this command First Source to clear and then I'm going to run this command flutter Pub add flutter block and hit enter and it has downloaded the dependencies and the package so let's check it our uh in our pubspect.winl file and this is the latest version that we are going to use so if you're using in the future and if you're watching this tutorial in the future make sure that your version is this one well if you have if you want to control the version manually you can also type it directly here flutter block and do pop get and you're good to go this is the version that we want to do anyway so now after this over here we want to First separate this state variable which is counter we don't want to put it here and eventually all these methods they would not be here now first approach is I'm going to create a simple file over here and I'm gonna call it app States and then over here we'll have like the class the file type is Dart insert this will declare a class and the class name will call it app States and for now it would be a dummy example and inside this will declare our variable which is counter now this counter variable would be that similar as this one the one declared over here and then while we can either go ahead like this or actually we could do it through Constructor so here we'll have Constructor and inside this we'll have required this dot counter now by the time this class would be used this class would make sure that the value is initialized and actually it would be given a value so that's why over here we say required so you have to give it a value other way we could have done it over here just put counter equals zero now we'll go ahead and create another class over here and we'll call it init States now this classes extend our app State class now this is the App State class actually that would be called initially and this value it got initialized how we do that so here we'll have init State and then because we are extending this class so we need to call the Constructor of this class The Constructor of this class is Upstate but we can call it using super the super and because it's a required parameter over here so we need to mention the variable name so this is the variable name we have to mention it over here so that's what we did and then we're going to put it like this and you're good to go so first somehow we'll call this one and as we call this one well this Constructor will get called the super Constructor would also get cold and then as super Constructor gets cold this counter value would be initialized if we call this one first so that would be initialized now that's how we actually separated the state variable over here from here to here now I know it looks like a lot of work but trust me if your app is large then this way you'd be able to maintain your state variables which is counter separately and more maintainable and after that inside this we're going to create another class we'll call it app events dot Dart now in Block everything happens through States and events we have to add an event then we'll emit a state emit means over here you have to give a state so stated to change things and then UI would get the updated value so that's how it works now over here we need to declare our events well we'll have two events one for adding another is for uh well one is incrementing and that is for decrementing right so here we do class and then here we'll call it app events all right so this is an empty class I mean it doesn't have any body over here and we'll extend this class and make another two classes and then we'll be able to use those classes as events so here we do increment increment and then here we do extends and then here it say app events that's it now this class is not going to do anything special but they're like a marker or like a sign when I call this class then something should happen so that's the point that's why we are writing like this because apart from that right now they don't need to do anything else decrement extends app events now over here before we change the variable value counter variable value we have to first call one of these events and this events are different so we could do different things as I said that there would be marker so when I call increment most probably I would increase the value when I call decrement I would decrease the value of this counter variable so that's how they are connected and they should be connected but actually they are not directly connected we need to make it happen and how we do that so over here we are going to create another class and that class we'll call it app blocks you can actually name it anything it doesn't really matter here we'll create a class and here we'll call it app blocks and then this will extend the block library that we are talking about so far that will help us to manage the state and it takes your States events and States so our events name is app events and the state's name is app States this one all right okay now we need to import this Library let's go ahead and do that now over here it says that I'm going to call Super Constructor let's do it like this but actually we are not going to do like this so we do our way and here would cut super and then we would call init States now when this class gets cold this init state would get cold if init States get cold which is this one this value for counter would be assigned so the zero would be assigned to this counter and that's how actually it works so of course we need to find a way to call this class well we'll see that we'll see that later all right now over here we need to register events as I said that these two are the markers like assign so we need to register over here and we'll use this two events from our UI using this app Block class and we'll see that how we do that so that's why first here we need to register it so there is a method which is called on method so we need to call that one now of course on method should be right after this inside this Constructor body super class Constructor body now over here we need to call this on method now on method actually takes a type of event now over here we created an event which is increment so this is a type so here we could simply say increment that's it and after that actually it takes an anonymous function which takes the two arguments one is event and there is imit actually you can call them anything you don't have to call them uh Emit and we'll see that that you can call actually anything but this convention is to call them event and emit anyway so right after this inside when you call this one we want it to do something what do you want it to do something we want uh to increase the value remember from our UI we need to call this event which is increment so actually it's also calling this on method but we don't call using on we have to call it increment because on is a general method so any kind of method could use this one so that's why we're here from our UI we'll call increment now here we'll have emit Now using this emit argument actually you can access the values from here and we'll see how to do that and that's as simple as that one so over here we'll have this imit now imit could be as a function so we call this emit function and emit function if you hover over on this let's see if we get anything or not so actually it's an object of emitter class okay now I have a tutorial on that what is emitter it means you emit things what do you want to emit emit means here doing things you have to actually do things so here I want to do one thing what I want to do I want to call this class which is called the App State I want to call this one because I know inside this it is a variable which is counter and I wanna access that one so let's come over here over here I would call app States this one and we know that App State if I call this class I mean what I'm doing I'm calling the Constructor which is this one right so let's go ahead and do that and but the Constructor has a recurred parameter which is counter so we have to assign a value to it if you do that now what is the value now over here you could do state dot counter plus one I mean that means that whatever there is a value which is a variable actually get that one and do plus one now to to be able to access any of this values over here from this class you also have to use the state variable now State variable is assigned automatically as a part of this app State class as you can see that upstates get State now the state variable is a getter now it Returns the value of this variable okay so we have to get that one and whatever the current value is there we get that one and then we do plus one with that so because of State actually you'd be able to access this variable and then assigned to this counter variable and that's how it works and that's how the state is persisted now this state is the state variable is very special because in your app blocks and we'll also see in our UI we can directly access this one through some mechanism we will have mechanism and then we can access the state and if we can do that over here we can access the variable and then we can change their value as well so having this state the idea is that you have to access the fields or the variables inside a class all right now it's it still looks like a lot of idea just to transform this one to more readable and maintainable yes I know but once again it pays off in the long term so that's why people use this anyway so we have used this one so when we call this uh event then its value would get incremented okay now we could work on this one later so first what do we do go ahead in our app class now right now over here so this material app method which is actually the entry point right now we have to wrap it around something called a block provider okay in that case I guess we don't need this now let's go ahead and call block provider now with block provider actually you inject your blocks so what is our block our block is app blocks this class and over here we have our events registered so this is what I was talking about we register over here but your app has to know it at the very initial point of your starting point of your app when app boots up and everything gets initialized at that moment it has to know what is your block now inside this you need to pass context context and then over here just simply call your app blocks just like that and that's it and after that here you will have to child and as a child whatever we had we can just simply have that one and now you can put a const variable now if we go ahead and restart I guess nothing will change but this triode gone because everything uh falls back to this one so far because even though we created this three classes but we didn't use them but yes we are going to use them so now let's reformat the code and it looks like this so if there's our blocks bin actually injected and so this is something called dependency injection now this is a child our child needs to use this block value now over here in the child just right inside this widget which is column widget actually let me remove this we don't need this comment section so over here this counter value we want to change the value and currently this one is being referred from here right okay so this is the value that we want to change now we have done one thing so far which is called dependence injection we have done that and before we are going to use this value this counter variable when you have one more step now over here we need to wrap this widget using another widget which is called block Builder so our app has the blocks but we need to be able to use them and we do that using block Builder so in general you want to wrap your widget using block Builder widget block Builder right over here now inside this you need to mention your blocks and states so here we do app States just like this and then you have to return like this and here we'll have Builder property and Builder property takes a context and state you can name them actually anything and over here you need to return the widget the one that you had early now you need to import this Upstate class all right okay now with this would be able to access this value this one now what did what would be the initial value if we access definitely better to be zero right because over here we assign 0 to it but how do you access it previously because this variable this one was defined I mean everything is defined in this class so it was easy for us to access but now this counter is in another class and how do we access that one okay we already built the mechanism you have to have this one first you have to wrap your widget using block Builder and after that over here to get the value actually you need to use something one more time called block provider now we need to pass the context to it and after that we can just simply do like this State and then we can get counter so that's how you access this state variable which is counter from your UI so all you need to do you need to mention your uh block provider and then your blocks okay and over here we need to do like this inside this inside this double quotation and curly braces now our app blocks contains all the blocks and when I say all the blocks actually it refers to this events over here as well as the states over here as you see that we especially pass the state to it not really any kind of events events are already here and we also want to access the states so that's why I also pass this state variables and this is the state class as you can see now with this we are going to be ready to use this one now let's go ahead and start start it over here restart and we see that it's zero now if you come over here your um initial value over here which is inside this class we pass to it there now we could do -2 and net let's restart now and here we see that over here we have -2 that means that our blocks already working and we are reading the value State variable from somewhere else using this state variable and this state classes is in the state object okay so whatever you define over here whatever you define inside this class let's get initialized first and of course we also Define the initial value so you can assign any kind of value so since this app over here app blocks get injected at the top so our blocks are ready and the initial values they all get initialized now what if we return what if we just simply have this like this you remove this you cut this and then you also remove this one and just assign it the child over here now let's do that okay all right let's restore it and we restart it one more time say yes of course you can access this value the one that over here assign in your UI okay and what else you could do you could also call the method so right now we have this method that's defined over here the method when I say that's actually increment method or our event we can go ahead and call that one too and let's go ahead and call this now over here I'm just going to Simply remove this and we are going to do over here block provider blog provider dot off and then once again you need to mention your app blocks and then you need to pass the context and then after that over here you need to add the event and what is our event our event is increment increment increment all right and over here you need to call it like this okay you're good to go all right now let's restart our app one more time and then let's increase the value we are calling this so this events get cold this event gets cold actually then we are over here let's print something so print I am getting called let's see let's save this and let's see if we can print this one or not so you see that this is being called but the variable is not being updated over here now let's cut this one over here or remove that and over here you can just simply say print.state.counter Revel let's do it now okay hot reload and okay I guess we need to restart everything okay now let's start it so we see that the value has been increased but we don't see it on the UI and this is where the block Builder comes well yes I had the block Builder I removed it I had the block Builder over here I removed it just to show you that we need the block Builder to actually see the updated value on the UI okay so now we know that we need block Builder so I'm going to wrap this around block Builder so that we are reactive in a sense that because whatever changes happens you're going to see them immediately so that's what we want to do so here we'll have block Builder so here we'll have block Builder block Builder now here we'll have a blocks and app States and then just go ahead with Builder properly and then give it context and state and after that we can just simply do a return statement and like this and you are good to go now let's save it okay and it looks like we need to hot restart or restart our app okay now let's go ahead and do this and you see that the values have increased immediately now this button doesn't work because over here we just have only one uh event registered so we can go ahead and copy it and put it here and in this case we'll call it decrement and the counter value we can decrease and we'll uh save it and after that over here we're just gonna copy this one and replace this okay and in this case just decrement all right okay and let's see if it works no we need to restart the app because it's a big change all right and you could do decrease minus I mean yeah just like this awesome so we have removed this one and just put them in a separate file and it works now this could be even better than this for example over here you see that my home page this one is a stateful class so what if I don't want it to be a stateful class now stateful class in general takes more memory than stateless class or stateless widget now since we are using get X to do it already we might not need anything like that so we can just simply go ahead and remove that and we can create a stateless class over here we can say St and my home page now this class is stateless class and whatever we have copied early we can just put it here and let's see we do have a problem with title so we don't we don't need to pass a title we can just simply go ahead and do flutter demo home page right and we can also remove it from here and we are good to go all right now once again this is a big change so let's reload our app and you say it still works but with this your class is a stateless class and it's very simple and it just has a build method inside okay not like a stateful class which looked very complicated so with this you can save memory and you could looks cleaner now over here app blocks we see that so we have to have events in app blocks so the first thing when you create app blocks you'll have to extend the block class and then you have to assign events and app States or states and then somehow you need to initialize your State variable now over here we have done it through this super Constructor which means that when we extend this class we have to call the Constructor of this class and we do that using super and as we do that we can pass the so inside this actually we can pass pretty much anything we like so over here we can we call this function which is this class and the value gets initialized okay so you have to make sure that you have a value and that gets initialized and after that you also have to make sure your events are registered like this now as I said this name could be changed as you can see I already changed the name they don't have to be like this like for example here you could do serve and here you could do serve as well it doesn't really matter the name could be totally different it's just a convention to call them whatever you want okay but make sure the the name whatever you change here you change it back over here as well and this way it should not have any problem as you can see we don't have any error we can do whatever we want all right so the one learning is that you want to make your app stateful in that case you have to separate the states in a separate class and you have to have at least two classes and that's how it works better and the second class should extend the first class and then your events are just like markers they don't really do much at least for now and in blocks you combine them together and that's how it works and as well as in our main.app main.file you have to inject it using block provider you must inject at the beginning with get hex we do that just put the controller name at the top and it gets injected and at the same time you have to say where is the block so this is our block you need to do that because once you have done this one actually your children in the tree right for the certain your children in the widget tree they can access all the blocks and States now in our case this is the child and over here we are mentioning now inside this we must have I mean we need to use block Builder now if you see however on this actually it's uh over here it says it's a flutter block widget so block Builder flutter block widget which takes your blocks and states and then you need to pass this context and state now State we haven't used it will in future we'll see that we directly use it to do conditional check as well over here we just use it to access the variable okay so the idea is somehow you have to access your app blocks and app States from your UI and then you would be able to access everything that resides inside this class so what is residing inside this class your events and state so you'll be able to access all of them from UI so that's our takeaway now this is how we have done the basic structure but in future we'll still do like this it will have a bit of change okay now with this we are so far so good and next we want to do this one actually so since we have this basic idea how block State management works so this time would be actually doing the UI using block now we're here first when it shows up so it would be onboarding screen or welcome screen so you'd be able to slide through them or you could also click next next and get started we'll also have dots over here well in this demo we don't have dots but I'll have the dots so that it becomes more obvious that how we use block State Management package and then once we are done sliding through this three slides then I would do get started now get started over here of course we would login and then we'll go to homepage for logging in of course we have to sign up right so we do the sign up now signup could be using username and email address or you can also log in using social accounts like this all right so without further Ado let's go for the next section all right so to get started with this new page which is onboarding Page over here inside this first we are going to create a new folder and we'll name it pages and inside the pages we are going to create a new folder and we'll call it welcome and inside this we're going to create another new folder actually not new file uh here we do new folder and we'll call it block and inside this will create a file as well and we'll call it welcome dot dot okay great and inside this will actually have our three files which is blocks events and States those are the things that we want to keep inside this so this is how we separate the business logic from UI so over here this would be our UI and this would be our business logic now inside this I'm going to create a new file first and we'll call it welcome States dot Dart and then I'm going to create another two files welcome events.dart and then after that we are going to create another file welcome blocks dot Dart like that so over here logic inside the S3 files would be like that okay we'll keep them so far all right now right inside this we are going to create a stateful class and we'll call it uh welcome now we could have done it without stateful class but because we also would be doing navigation later so that's why we need this anyway so after this we are going to import this Cupertino Library and we should be good to go all right right inside this here we have this container and we'll keep the container as it is all right and uh over here we want to assign a child to it so let's go ahead and do that and it would do child as scaffold scaffold all right now that's because with this we can also Define a background color like a white or color colors.white something that's beyond scaffold okay so it means that the whole screen would be white and that's what we want all right uh anyway so inside this we'll have another uh property which is called body and then we'll have container and inside the container we're going to use width now for now the width we're gonna use 775 point w now what is this and where is this coming from now for this one actually we need to install go ahead and install a package so we'll do it in our pubspect.yml file so let's find this one over here all right so over here is a flutter let's just screen you to this one okay and we do forget all right and now let's check our welcome.dart over here hopefully that should be installed and we can use this screen util now with this it gets the package now because of this W width so it it tries to read just everything on your screen so it makes it more like responsive so that's why we want to use this one so it's not actually fixed at 375. it's based on different device screen it would adjust itself okay so it'll make it better looking on different devices but of course it doesn't do the job of quite a responsive thing like you want to run the same thing on a web app now of course that's not going to help you so this is just for mobile app and with this you become more responsive for mobile devices hopefully it makes sense all right and after that over here we're gonna use another child inside this and this time we're going to use stack widget because we're going to put a lot of stuff and we're going to put them on the top of each other Okay the reason we'll have stack widget most importantly that's because we'll have the whole page and on the top of it we'll have dots over here this is the main reason that y will have stack widget all right and with the stack widget you get a better control on the position like where you want to put your things all right now instead children over here we are going to do page view because we want to scroll we want to go left and right so that's why we want to do page view and the page view gives you this opportunities and inside this over here we are going to use the children let's go ahead and do that now inside children will have a column the reason is is the item this one and the text over here you see we're going to put them on the top of each other that's why we need column now inside this we already have children over here we do sized box let's go ahead and do that and inside this we'll have width and width 345.w and after that we'll have height so 345 the W with this we get something like a square now we get this one that's because actually we want to show this image in the middle but of course it doesn't look like middle we do that it will show how how it becomes like a middle now inside this we'll have child and then here we'll have say for example a text for now we're just gonna put a text here it's a image one like that okay so that's what we want to do now so far we have came along like this and what we could do actually we want to see what's happening on our screen right away so we can come over here inside this and over here simply we can just replace this one with welcome class the one that we have created and with this we'll be able to see the changes immediately so let's go ahead and import it okay great now let's see our removal device and it looks like it's not running so I'm going to run it and I think it was the app over here now for this one we can just go ahead and cut this and inside this we can use screen you till in it this one all right now it takes the Builder properly now actually for Builder property you can return your material widget or material app and what to return in general if you see however on it you might get the idea so you need to return for Builder you need to return well first you need to supply it with context and and widget okay and then you should return so over here we'll remove this and then here with the context and the widget widget name is a child and then we'll just simply put our material app and looks like we have an issue okay so let's remove the const all right and over here we can put a const right here and it should be good now let's restart it okay right now everything is back to normal and we say it over here okay we see that it says page one page one at the top all right so the size box itself is working now we don't want it so much at the top so for this reason actually inside the scaffold over here and we can apply it uh margin so as for container let's apply it to margin here with the add-in sets only and here with the top and then top could be 34.h all right let's save it okay it looks much better now right so right after this inside over here we can use another container and that container would be for showing the text uh let me see my other simulator okay this one so the text as well now the image we don't have will show it we'll use the image a little later so let us work on this preview first or the text itself now once again here would have child and then we do text and then we can just simply say first see learning first C learning and then would here use style and text Style and we can use the color all right now inside this we're going to use college.blackcolors Dot black okay for now we'd be using colors like this but very soon we'll separate them in a different file so here we do font size and font size24.sp now we use W or H for height or width now SP is for font so that's how you separate them and then here we do font weight and font weight dot normal just like this okay now take a look at our UI over here let's save it now what I'm missing over here the problem is like this I'm not supposed to have it like this but I missed the column widget so what I'm going to do I'm going to cut this one and put it inside a column widget and we want to show them at the top of each other that's what we have said first so here we'll have children like this now for now let's go ahead and put const modifier let's save it and now we see that we are on the same page right and we are going to work on this section over here this text now so far we can just simply go ahead and copy this and then we're gonna put it here and definitely we want to change this one first style we are going to use 14 and then font with normal and colors here we do okay now don't forget about don't worry about this kind of layout because we are going to change all of them very soon now for the text itself this one we can apply a bit of styling and padding over here as well as merging so how to do that first we're gonna do padding and then let's do Edge insets Edge inserts dot only this one and left 30w and right 30w now with this it would be pretty much centered all right and with this we can also give it a width so so that it's always inside certain box because we are trying to do it just for mobile devices and okay so first of good this one is fine and now the image itself we are still not going to work on this so far because we don't have the image yet once we have it will actually look good because it's just a matter of styling now this column we can right after this actually we can create another widget inside this column and that would be for showing this button over here so that would be inside the same column now right here we are going to do container and then we'll give it width definitely we need width for that so 325 dot w and we'll give it a height and height we could give it 50. h and right now if you give it color let's give it a color and we'll see that it's already visible colors.red okay it is visible okay now we could do a bit of uh starting over here which is about margin so here we do edit this only and then only and top we could have a bit of distance with the top sections okay great and we could also do left say 25.w and right 25 dot w okay now with this we are more organized and arrive to this actually we can go ahead and do decoration and here we do box decoration and if you do box decoration the color section actually you have to put inside this box decoration and after that let's do border radius and Border radius Dot all and then radius Dot circular and here we do 15 dot w so with this we'll get rounded border and which is awesome and right after this we could also apply box Shadow to it so here we do a list of Shadows actually just a one but you have to do it with list operator which is this one now inside there's here we could do color and here we do colors dot Gray dot with opacity 0.1 and spread radius 1 and blur radius 2. in general they're pretty close to each other and we'll have offset and offset is for zero one now zero refers to the x-axis and Y one refers to the y-axis now of course nothing is visible yet now let's make it bigger so that we know what's happening for the shadow itself and we still don't see the shadow now let's move it on the y-axis and move it much more and at the same time let's change the opacity here let's do it five now as you see so this is our y-axis and this is our x-axis so on the y-axis we have a lot more shadow you could do 10 so to get a better idea all right so that's how it works now let's do it like this okay now it's much more visible right now now in general you should have your spread radius rather than smaller than your blur radius and that's how it works but of course the shadow itself you can move left and right now you could do 10 over here so on the on this x-axis it would be 10. now in general uh positive one refers to the left side right right side of this x-axis and positive y refers to the bottom side of this y-axis but if you do minus then you'll see it it goes up all right and if you do minus over here you see that it goes to the left side so plus minus you can control the direction that where it should be going but anyway we don't want so much we just want something on the y-axis but not at the top we want at the bottom all right like this and uh now very soon I'm going to change this color to gray color or blue color like go ahead and do that with blue all right okay so we'll we'll keep here very small uh radius and Shadow so that it looks uh better on mobile devices on the actual devices anyway so with this this section is done now of course we want to show a text over here so up inside this container right after this box widget here we could do child and then here we could do Center and then we'll do another child and then we do text and we can just simply say next all right now it's already visible as you can see and the style is not the one that we want so we can kind of copy it from somewhere so let's say this is the style let's go ahead and copy that all right and definitely not 14 we're gonna use six not 24 we're gonna use 16 and not a black we're gonna use here White yeah so so for this is looking great now what we have done previously we have seen that actually we want to have three of them now so far we have one and this column actually could be reusable so we're gonna separate it to a different file and we'll see then later on we just passed this as arguments and then we'll be able to reuse we don't need to copy it three times well okay now we're going to copy this one actually I'm going to cut this and then right over here I'm going to create a method inside the class and it will return us a widget so the return type is widget and we can call it page right so this is the method and then it'll just simply return us whatever we had so it'll return us that one but now since we want to make it Dynamic so of course we need to provide it with many of the arguments all right now here we are and if we restart it of course nothing will change and we'll do the same thing we will see the same thing and that's what we see so far nothing has changed but because we want to slide it three times so left and right so we need to have three of this we can have it like this so let me copy it from here and then put it three times okay let's restart it now we see yes we can slide like this and it's beautiful but some of these things that we wanna make them actually Dynamic not like really not really like this all right so we have to pass a lot of things inside so first uh definitely we want to pass the index so here it is int index we're going to pass that one and we also want to pass build context so pass that one context we also want to pass a string button name that one we also want to pass this title so over here we'll have string title and then string subtitle and then we also need our image path that should be at the string so that's uh image path like that so these are the things that we need to give it here one by one so definitely the first one int index is one and we assign a context to it and after that the button name so we can just simply go ahead and do next and the title for this one first see learning and then second one whatever was there so forget about four of whatever is that paper all knowledge in one learning right after this we also want to give it the image path now image path we don't have we just say image path now with this looks like the error is gone now I'm going to replace them put it here like this and put it here one more time and then we can just simply change the index like that okay all right now definitely uh one of the things we could say over here get started like this let's save it now you scroll through it and the last one well looks like it didn't take effect the reason is because over here these are all still um is fixed so the over here for the text itself we can say title and for this one we can say sub title I guess we have and this one over here we just simply say button name and so far so good this is the things that we need to save all right so now let's scroll through it and we'll see that it's working so yeah definitely it's pretty Dynamic now okay so this section as is good and actually it has worked now over here we passed this index and we'll see why we did that we also passed this context and we'll see why we did that now to be able to look good for one of the other thing that I want to do first over here uh so I want to change this text over here so here it says Connect with everyone and then over here we're going to change this we don't need this so let's go ahead and do that always keep in touch with your tutor and friend let's get connected all right and let's see the next one always a fascinated learning so we're gonna remove this one over here we can say always fascinated learning and then over here going to remove this anywhere anytime the time is it our disc Gray shun so study whenever you want okay great let's save this and now look at this I think it has already changed and it's beautiful there are a lot more things to do with this and we know that would be doing that step by step okay so this is so far so good and what's gonna do next so next actually we are going to put buttons over here now those buttons would be actually right below this page widget over here right over here okay now to be able to do that we need to find our pop spec yml file and over here we're gonna use dots indicator dots indicator Let's see we have okay the first one right now we do pop get because it provides us with beautiful uh it's a beautiful package for loading and showing the dots over here all right now let's come over here and we can close this one we don't need this all right great so since this is a stack widget so we're gonna we're gonna use the position widget position widget all right now inside position widget would use child as a child we're gonna use a dots indicator this one all right now looks like we need to import the package let's go ahead well I think it's already Auto imported so that's why here it says that we should use this dot counts and let's save it and we'll say the dots are at the top over there as you can see now we can also give it position over here so we could do bottom 100 dot h let's go ahead and save it now we say it over here now one thing we could do I'll let you we can do a lot of things over here now first you could set up main access alignment and Main access alignment Dot Center so let's see if we can Center everything looks like it's still not centered and over here we can set up the alignment property for this one and alignment well let's see alignment dot top Center now over here this is what we have but of course if you remove the bottom section then you'll see it would go up very at the at the very top okay so that's why we have this bottom over here now because of this one we get actually positioned from the bottom okay right okay now of course the bottom is not style yet and it's not being reactive so let's uh first decorate this ah this dots over here so here we'd use decorator property and then here we do dots decorator this one all right and right after this here we could use color and colors.blue let's go ahead and do that all right and we're gonna definitely change them very soon because we'll have a dedicated color file and here is size.square and 8.0 all right and after this over here we could do active size now here exercise const and size 0 8.0 [Music] and right after this we could do active shape over here active shape and inside there's a rounded rectangle border this one because we want a bit of rectangle border not exactly Square all right and so that's why here we could do border radius and then border radius dot circular and then we could do 5.0 all right and looks like we do have a bit of issues over here const size active size what's the problem let's hover over on it so that should be size actually not color now let's save it okay and we can put a const over here so that's the color but we also need to Define active color so here active color would say colors.blue [Music] okay and here colors.gray for now all right and uh let's save it okay of course these buttons are not clickable but with this we are done with the styling but we want them to be responsive as we work on this right okay great now how to do that and we already see that we have this classes that we created now so far over here we didn't really do anything related to State Management and this is what we are going to do now so over here we'll declare a class that would be a state class would Define events and we'll put them together which would be our block okay so here we're gonna Define our state and we'll create a new class and this time we'll see we are doing it a bit differently and different than earlier example here we'll create a class and then we do Welcome State and then over here inside this I'll have a variable which is int and we'll call it page and after that I'm going to create a Constructor over here and the Constructor would take a argument so the argument is this Dot page over here and well we can assign a value to it so we don't need the value over here so when this gets called The Constructor or when you create an object from it it would get called automatically and then the value would be initialized all right now let's reformat the code okay like this now this is a bit different than the earlier example in our earlier example we have done States like this so if you take a look first we had a class and then that class was extended by another class and then we have called this one do we need our state and later on we'll call it this one to change our state now this could also be done in simpler way like this no it has its own benefits it will selector now for a welcome class like this where we just want to change this dots so we don't need that complex so with this it would get the job done so all we need to do we need to call this one okay and it will initialize the variable and next time we're going to change the value we call it again that's it that's as simple as that one create new objects and that new object will hold our state all right so I'm going to close this one and then over here events so for events here we could do class welcome event like this and that's as simple as that one there's nothing else let's keep it like this and now here we have this block now the block would also be a bit simple this time here with create class and we'll call it welcome block and then it extends block over here and then we'll have welcome blog uh well that should be welcome events actually event and Welcome State this one all right and after this over here we're going to call the Constructor Constructor of this class and the Constructor of this uh superclass so over here we do welcome blog and then Super now inside this actually we can go ahead and call welcome State this one over this our state would be initialized and after that we can register our event all right so right now we just have only one event and that is uh welcome welcome event this one and then inside this we could do event and emit now you can name them anything it doesn't really matter we have learned it before now over here we just emit our state when this event is called we can just emit our state and how to do that so over here one more time Emit and then we'll call Welcome State this one and over here page and state DOT page this one and that's it so whenever we call this event we'll have a value which is state DOT page value which means that page will have a new value somehow we'll have the value and we just emitted the new value so with this our state would be updated and that's what we want now of course this time it looks much simpler than earlier ways while we have done that we'll see so before we were using abstract class and after that we just extended that class but this is much simpler format okay all right now with this our block is ready now we should be able to go ahead and use them directly now over here right now we need to come to our uh mender Dart and over here let's inject it so we'll call it welcome and then uh welcome blog actually welcome blog and then after this everything else stays the same let's import it and the error should be gone okay so with this the dependence the injection will be done and now we're gonna use this created block in our app over here now we see that the page view actually is more responsive and as well as this one so we can actually wrap this container around our block Builder widget so I'm going to cut this one and then here do block Builder block Builder and then inside this we say welcome block and we'll have Welcome State welcome state okay and let's have this imported I guess we need to import it and then over here just simply have this uh well we already have Builder so here we need to pass contacts and State so that contract should be related to welcome block and statute related to welcome block as well now inside this we just return our container the container we had early okay now with this we are going to be fully reactive having a reactive State now let's go ahead and restart our app and make sure that nothing is wrong there all right now so for this is what it looks like nothing changes here yet okay now the changes should be coming from here first uh well here's one thing that we need to know so if you open up page view now instead of page review while we have many children and we have another property we can use this called on change and it takes an index all right and then over here actually we can print the index so index value is next value is index all right so what I'm trying to show you let's see all right so index value is 1 index value is 2 well that's it of course it starts from zero because whenever we are over here the already index assigned to this one is zero so when you move to the next one it gets indexed as one and next one should be two and after that we don't have anything now why I'm showing you now this index we can get automatically we can grab the value through this function okay this is a callback function when you interact with this this function gets cold and the index value we get out but how about changing over here that's why we need this index because we get it automatically now we need to save it save it somewhere that our app can use it anywhere we are able to access this index and this is what we do using State Management and this is what we have designed so far okay all right now we need to save this index okay and how to do that well first over here we know that this current value is zero and uh that's okay actually that current value it has not much to do with our value that we are going to have now but since we are inside this block Builder using welcome block and Welcome State we can access the state using the state variable which is actually coming from here we already have one so here we'll have state DOT page and then here we can assign index now index whatever is there it would be assigned to this page value so that means that it would be saved that also means that it would be able to access it now we know this would be saved because we are assigning it to the state variable State variable holds all the variables and we can find them and assign individual value that's what we have done now we need to access this now where to access actually whatever the value is saved there we want to access for this dots okay all right now we need to come back to our dots indicator down here where we have this positioned widget now dots indicator have a property which is called position now inside this we can access State variable and page and that's it and well we have to change it to double because position takes a variable value which is double but this one page is integer so we convert it to double but of course if you want you can also assign this one as double over here it doesn't really matter now we are able to access this state object inside this position why that's because you see page view and position they are all wrapped inside my block Builder which takes my events which is welcome event and welcome straight so as long as they're wrapped around us widget like this we can always access the state properly now let's go ahead and restart it now let's change okay so it looks like we are not being reactive okay well the reason is even though we are trying to assign like this and I forgot to do one thing we are trying to assume like this yes we are changing the value but we are not really let block know that you should update the latest value on the UI I mean it is updated but we don't see that but we need to update it and let the UI know that the updated value is there and update the UI and how to do that now to be able to do that over here we could do like this we can go ahead block provider dot off and then you pass the block name which is welcome block and then over here past the context and then here we just simply add an event so to add event we need to call add function and what is our event welcome event welcome event this one and that's it so once this is called once this is called so this will come event one this would be cold and which is registered over here it would find From the Block and and execute whatever inside this so inside this we have said hey there is a new state go ahead and update it Because by the time it reaches over here the index when I switch like this from 0 to 1 would be reflected over here so that reflected value is this one and then we just assign this new updated value which is page I mean we assigned to this page variable and if we can do that now over here inside this welcome does it get updated as well like over here right okay so I was missing that part now let's go ahead and do that as you see it changed yes and this is awesome so so far we are doing great I know I've learned a lot about block and a little bit different way now over here we still have this event but before event we change the value now we change this index value I mean this page value over here but there's definitely there's other way to do it we'll see in future how to do it differently not just using this way we can do it many different ways and you are good to go all right so so far this section is working now let's see if we can change this active size because right now looks like the active size is not that big so over here we could do 18 let's save it sorry not 108 just 18. all right now this way it looks much better all right great now without after after this actually we can go ahead and update our image now to be able to get the resources open up your browser and type in this one the besttech.com resources you learn resources dot zip make sure that you spell it correctly and hit enter and the necessary resources would be downloaded here so I'm going to wait for it to be downloaded and then it would open up for us and here we are so we'll have a folder which is called you learn resources and here we have a common folder and as well as assets folder okay now within the assets folder you have all the images you need and within the common folder you have some basic entities which means that models that we'll be needing in our app later on because this is a lot of unnecessary work so I didn't want you to do them because there are a lot of tools that you can generate to them or you can write to them usually by your hands so anyway now how to work with them open up your browser Android Studio or vs code now I'm going to open up the project Explorer right here and uh let's see how we place them now this one assets actually directly we're gonna drag and drop inside this root folder over here so let's drag and drop and so we're going to we are going to copy everything inside this all right and we'll be seeing that it is there so it's moving okay all right so these are the images there that and including the resources and phones which would be needing very soon all right and we can close them we don't need this right now we'll be using them later okay well that's the first one and now inside this lib folder we need to also drag and drop our resources which is this one the common folder so that should be inside this lib folder and refactor everything now with this we after dragging it to the left folder we see we have a lot of Errors just because some of these packages they need some dependencies so we're going to open up our pop Specter yml file one more time and then right over here we are going to install first package Intel I think they call it until this one the first one this one we need for our time format as well as the locale and then cloud firestore the first one so let's go let's go ahead and do pop get all right and if we can get that get the resources the error should be gone yes errors are gone and with this we are good now let me close this [Music] okay well now we also need to find our pop spec.yml file over here and now right after this actually we need to mention where our resources are now our resources are as assets so that's what we mentioned over here and we have a folder which is assets folder inside the root folder so that's what we are saying so that's the first one and for the images after assets come to the images so that's what we have over here make sure that your format is correct otherwise you'll get error okay all right with this our resources are ready everything is in this directory and now we can open up our file over here which is welcome to Dart and inside this we need to assign the image path all right so this log we don't need it anymore okay all right now here is this image path now images are in images folder and then sorry assets assets images and then we can mention the image name now the first image that we are going to use for the first slide is so we are going to use this one as a first image so let's go ahead and do that so reading.png okay and I don't think we need the first slash let's keep it like this and for the second one here we are going to use assets images boy dot PNG all right and this is the third one let's go ahead and do that as it's images men dot PNG right so these are the images and now we need to find this one let's go to the definition over here now ins instead of image instead of text over here we could do image dot assets over here and then we can just simply mention our image path over here image path all right okay now we need to remove const modifier now let's restart our app and make sure that we run everything and it's already looking better as you can see awesome beautiful so we have come so far and we have done a great job and over here we cannot I think mention either properly to look it better most probably so here we can do fit box fit box fit boxfit.cover let's see this is what we want but looks like no changes so originally and with this one uh we are good all right so if you want to play with this image properly like for example over here you could also do different kind of stuff like fill let's see okay and we can restart so they might have a little bit different effect how the look on the UI so I'm going to go ahead with cover all right so with this we are pretty much done with the first section where we have this sliders okay all right and in next section we'll see actually how to go to a new page once we are done we're here we need to actually go to a new page and what's the mechanism for that one okay we said that we're gonna go to a new page from here right so for this reason first we need to wrap this container which is this button over here which is right under this inside this page widget inside the column the last container so we're going to wrap it around a widget and we'll call it gesture detector gesture detector just sure to this one and it will have on tap event that's what we want to use okay so on the butt because so far if you click on this actually it doesn't work so because the button is not there so here we are gonna introduce on tap and then right inside this we are going to introduce a new conditional check now we need to know where we are right now and which index we are doing so that's what we want to do so first here we say index and if in this less than three we do one thing otherwise we do another thing now over here we'll have else right and here jump to a new page so that's one so here within 0 to 2 index like that okay now over here we want to do animation animation right so what kind of Animation we want to do now to do animation first we want to be able to actually clear page controller over here because we want to click on this and change the pages just now we are swiping directly click on this but on bottom plate if you want to do that so let's declare a new variable which is Page controller and we'll declare the variable as page controller and then we'll create an object out of it and we'll say initial value is zero so which means that the first page of this screen is zero well it yeah so far it's been working without this but because we want to do animation and swipe so that's why we need to declare this one and after this over here we also need to register our page controller so let's do that page so here the properties controller and Page controller the one that we have declared so this is the registration all right now let's come over here inside this and here we need this for registration we already did the registration actually and now we need to use a special property of this page controller which is called animation okay so pagecontroller dot animate2 and you make two page so this is the one the second one we want to use so we want to go to a certain index or page and also we want to define the duration for that and the animation type you want you also need to mention that one so over here if less than index whatever the index is there just take that one so once we swipe that actually you don't know the next index and it would go to the next index automatically now here duration here we could do const duration duration and here we could do milliseconds say 500 milliseconds and now the animation type you can use any kind of Animation type here we do curves curves dot decelerate okay right now let's relaunch our app and we'll see how it goes all right okay now let's click on this you'll see that now we can swipe okay but of course if you are Beyond index 3 less than three or equal to three I mean if your index is equal to 3 we are not doing anything because we fall back to this condition all right so let's say it one more time like this now the animation might not look very obvious but if you do if you give it a more higher values for transition you'll see that actually this is what you wanted so in this silver rates okay slowly it's first it was speedy and slowly it slows down but of course you could do the opposite over here I think they should have accelerate also they don't have accelerate you can just do linear this is a very common one and over here linear to ease out is in let's check it so this is good for animation uh let's start it one more time okay so it slowly speeds up right so you can do this one so anyway here I would do one second and is in all right okay great and you can also do like this left and right so everything is working great okay now this is the place where we want to implement go to a new page where do you want to go well you remember previously we have worked on this page the page we had that was like called uh inside this main.dart actually the same class my home page so for now uh we since we are still learning our blogs so we're gonna move to this this one this page from our option conditional option from here okay all right so how to do that well first over here I have to do Navigator Navigator dot off and then we need to pass the context and after that over here we do say push this one and then material route page this one and after this we'll have here going to pass build context or we can just simply pass context and then we can return like this over here you can say my home page this one the one we that had early the one in our main.dart okay so this is where we want to go all right so let's restart our app okay and let's see how things go let's click on this it changes and one thing I want to do before we further move ahead so let's find our gesture detector at the top so instead of like that we can just do this one 500 millisecond and this would be quick actually it's up to you how you do the animation all right so this is from where we want to go somewhere else and we see an error over here now there can be many reasons the first thing that it says it can't find the build context and over here definitely we do see that some Arrows with the provider now why is this happening if you come over here main.dart now main.dart inside this my home page actually over here it also deals with this okay it also deals this blog provider dot of context but we really don't have any provider for this or any blocks actually I would say I mean over here we say that look for this one but we didn't wrap it around first we didn't inject the blocks for this one which is AD blocks we didn't inject that as well as we also didn't wrap it around oh we did we did wrap it on block Builder widget but we didn't create the block for it so that's why it gets this error now how to work with this and this wear actually first time we'll see how to work with multi-block providers okay so right now we have one provider over here and we're going to convert it to multi-block provider because this is one block provider and we have another one so we need to put all of them together so in general we're gonna do it like this so instead of block provider you would use multi-block provider all right multi blog provider this one all right and over here it might ask you to override providers we have to do that all right and then actually the child whatever was there it stays the same child doesn't change and insert this you can just go ahead and copy this one all right and let's see is it the create property okay we still need to wrap it out on block provider so let's go ahead and do that if you hover over on this you see multiple provider providers block provider block provider so anyway if you ever forget you can always go through the documentation because you don't want to memorize things right you don't want to do that you want to understand how things work block provider and then inside this we can have this one all right so that is our first block provider or with this we inject the first block and now we'll have app blocks up blocks okay right so we now you already have two blocks or two blocks provider that creates a blocks for us so actually the idea is same but the way I understand when you do like this it creates blocks for you okay and then it also becomes a provider because it creates it so it gives you it creates the blocks and gives you when it creates the blocks it means that it has created the events and States go ahead and use them okay that's the idea all right now this time we're going to restart it one more time and we'll see how things go this time all right okay and now we do see that uh here there are multiple Heroes that share the same tag so let's go ahead and solve this one now why we have this problem this problem we are having because we are using multiple floating action buttons over here as you can see now each of the button you can give them different tag so over here we'd say hero tag here there is a tag called hero tag and you can give it a name you can give it hey hero tag one and with this I thought it would be able to differentiate between them hero tag and hero tag two all right now let's restart our app and we'll see that it be gone okay let's scroll through them push through them all right and as you see that this time we don't have any error it's gone so if you have the arrow just to go ahead and give it hero tag name and you are good to go alright so hero Tech actually since inside the floating action button it happens if you have multiple Floating Action buttons anyway now over here looks like this is also working multiple or multi-block providers all right now over here of course can we go ahead and use that and yes we have seen that before so it still works as you can see now you can go back to earlier page all right yeah and you can go back again and the state still persist as you can see and it's a beautiful and awesome this is happening so far so good and we are happy about our progress and so at the same time we learned what is called multiple block providers and if you have a lot of blocks then you can inject them inside this provider's list and we still have to use block provider hello everyone assalamualaikum here we'll see what is called lazy block loading now right now I have one block over here which is welcome block and welcome block is this one I just have an event and this is the event and inside this I have a log which is called Welcome block now this is injected right over here and I have a child for that so I'm going to restart that and we'll see how it goes all right so as the app listers actually did already so we see that it printed welcome block which is coming from here all right now in our case in this situation we just have only one block which is welcome block and it got created automatically now here is a extra parameter inside this block provider now let's go ahead and set it so this is called lazy Now the default value is actually true you can justify that okay let's go ahead and check that now let's go ahead and set it to false now let's see how it works all right so regardless whether you set it to true or false it's the same if you have only one block if you set it to true the idea is it says well do it lazily do it whenever I need but the problem is if you just have only one block provider it doesn't matter what you set it to it works the same if you can do it lazy true of course that's memory efficient and fast now we'll see this example how it works for multi-block provider here we see that we have multi-block provider inside this provider's list we have two provider one is welcome block and there is app Block and welcome blog actually is used in this welcome class now let's go ahead and restart our app now over here we see that okay our welcome Blog has been created yeah and but this app blocks didn't get created well it all get created if we go to the next page you'll see that here it says that App log created where is this coming from this is coming from here now the idea is if you have multiple providers multiple block providers only one of them will get created immediately and in general is the first one okay it doesn't matter whether you're going to use this block provider or not after getting injected after creating this block it doesn't really matter you're going to use it or not if it's the first one it will always get created so that's the idea but we can override this now in our case over here we can use the property which we set early we know that that's called lazy load it quickly false means that as soon as possible set it to false and it says that load it as soon as possible create the blocks as soon as possible now let's go ahead and check our log over here now here we see the log just changed so first app blocks let's get created and then welcome block so if you have multiple block providers and you want to control which block provider should be created first which means that which block should be created first you can play around with this lazy this one lazy set it to false and of course at the same time you also have to make sure the order if you have a lot of them of course the the earlier one would get created first for example now if I set it to false as well lazy now we'll see that this will welcome ball welcome block would get created first all right okay so yes with lazy you can make sure you can you can ask flutter block to create your block first but if you have a lot of them together then you have to make sure the order that which order you want them to be created yeah so that's how lazy block loading works and it's very memory efficient all right so while we can just remove them for now we don't need this uh this is let's go ahead with the full Behavior and that's what we want anyway so now if you click on this let's go ahead and check we see we can come over here and then we can go back again well it may look interesting but this is not what we want actually once you are done with this page over here once you are done playing here you can do left and right it doesn't really matter and after that when you are here you don't want to go back you don't want to see this go back button now how to work with this now we do see that in our welcome to Dart class over here so this is the place where it goes to new page two right so once I'm here when I click on this actually this gesture detector gets triggered and we fall to this condition and this is the condition that takes me to that page now we need to make changes here and how to make change while definitely the first thing we want to go to a different route okay and then we want to remember we want to forget the earlier routes we don't need any of them now for this reason what we need to do we can just comment this out over here and let's come over here and we'll Define a new route over here I mean new way of doing routing we still use navigator.off and then we'll use context and after that here we'll use push push named and remove until this one okay so over here you need to mention your router name so what's my route name here my route name is my home page all right and this one in general you want to set it to false it doesn't really matter well with this it makes sure that until you hit this one every other route is removed okay so this is called I think they call it predicate so which means that until you hit this one okay keep removing all the routes okay now of course if we go ahead and run this we'll hit error because the problem is this route name over here is not defined anywhere else in our app so flutter really doesn't know where to find this route okay so for this reason if you use push named and remove until you have to Define your app routes and how can we do that definitely we can do it inside this material app over here now we already have a home page Define so over here we can use the routes properly and which takes a list of routes so here you just simply mention your route name my home page and that's your route name and then over here you need to pass the context and after passing the context the route related page or screen you need to mention and that's my home page and that's it and let's work on this okay now in this case const you can't use and the arrow should be gone you may use const here and which could be helpful and good for uh compile okay anyway so now let's go ahead and hit this button now we'll see how it works so we're gonna go ahead and click on them then this is the button now yes we do hit another error okay so here it says that well we do have problem with this so just let's remove the Slash let's try it one more time okay beautiful now over here you see that there is no go back button and this is the default behavior of an app where you have onboarding screen and once you're done with onboarding screen you can remove all of your routes the earlier routes okay and they are all removed and you can do it using the flutter native way which is using push named and remove until all right so in this section here we'll see how to show up your signing page which I mean by like this so if you start up the page and then you click on the next next and get started here we want to see a sign in page and that page actually would look like this and inside this first we'll have this login text and there's three icons and the text and text button and like this so that's what we want to do now first we're going to work with this login section login text anyway so right inside this page is over here I'm going to create a new folder and I'll call it sign in so let's go ahead and do that here I would say sign in now inside the sign in folder I'll have uh file over here and I'll call it sign in dot Dart and of course right inside this I'll have another folder and I'll let it be a folder and we'll call it widgets now although we just related to the sign in page we'll put inside this folder and right now we have this one okay great now here we'll create a stateful class and we'll call it sign in let's import dependencies and we should be good to go all right and over here inside this well now even before we go ahead and do anything here let me change the route over here now this would be our signing route now inside this I'm going to have another route over here now we can Define all the routes inside this routes map so this is more like taking a map like if you hover over on it so it is map of routes which means that you need to put a lot of routes in key value properly so here we'll call it sign in and then we'll pass the context and then here we do const and sign in all right and let's see we get I think we need to import it okay all right now if we come to this welcome over here now inside this up until now we are going to my homepage route which refer to this page we can just simply change this and over here we can say sign in now let's save it while saving might not work so in that case we just have to restart again and let's go all right and looks like we might have an issue it might not find okay I was missing an n let's see that okay let's do it okay great now of course it's all blank now the reason is blank because we don't have any scaffold over here all right now inside this one thing I should do I could go ahead and set up color instead of scaffold so here we do colors Dot white now for this colors we need to import Metro Library let's go ahead and do that and save it and we are good to go now inside this we'll have child for child will have safe area I think safe area might have also child now this one we're gonna use skiff scaffold for this and let's see what we have over here okay we can just simply invoke this const over here okay great and yeah that's it now inside the scaffold we're gonna use ever now Amber itself let's see if we can use uh app bar a bar all right now here we could do title and for the title here we can just do text and it would say log in and right after this we're going to use style for that so we'll do text style and we are good to go and inside this we do color colors Dot black all right let's see we might have any issue somewhere so here we have const so we need to remove that okay great and then um over here we could do font size and then we do 16.sp and I want to wait want to wait dot normal all right now for SP itself let's import the library and let's save it okay and we say it all right now with this the problem is there are a few problems so the first thing you see this is white but the scaffold background color is not white so you can set the background color as white so here we do colors.white now we'll have same background color all right now over here if you see that there is this underline if you see carefully there is this line over here the color is not that visible but there is a line so we want to do that as well so we're going to have a little line now how do you do that now here there is a property which is called bottom we can set up that one now for bottom we need to use preferred size widget let's go ahead and do that and insert this you have another property which is also called preferred size and here we could do const and size Dot from height and for now we do 1.0 all right and let's see you also need child for this all right now child itself we need a container and you can it could be actually any kind of widget but here we are using container here we do color and colors.grade that with opacity 0.5 all right and then we also need to give it a height actually if you save it let's see how it goes now here you also need to give it a height 1.0 all right and then looks like we need to have this okay now let's save it and we do say this all right now some of you might not have this one exactly like this and if you don't have this actually you should do one thing which I've actually done like here you need to set up this theme over here so it is the whole apps ever theme like for example if you remove this inside the screen YouTube and now let's save it and let's save it one more time if it is not then just do hot reload and you should be good to go all right and here you see it's like this okay now if it's not working then you're gonna do it like this okay after this you're gonna do hot reload or restart and then it's gone so you have to have this one so inside this you have to set up this upper theme theme data which means the theme of this whole app and over here we are mentioning how our app should look like the app bar should look like all right then you should be good to go all right so with this we are basically done over here and how to set up this app bar like in our preferred way but actually here we'll have a lot of code so we want to separate the code and then over here we can create a new file okay you can say sign and widget dot Dart now insert this we'll just have some method so what I'm going to do I'm going to cut this from here and then I'm going to put it over here and we're going to write it like this amp bar and the return type should be upper and we can call it build a bar so this is a function and the function would return us an amber okay great and of course here we need to import metro library and we are good to go and we also need to import this one all right now if you come over here all you need to do you just need to go ahead and call build Emperor that's all so let's save it and you'll see that all the error is gone and we still see the same now with this of course our class looks much cleaner because we are using less code in this main section so other code is right in another place all right so these are the widgets now this class would be using for writing our widgets all the time okay we just for sign in page great so now we are software so good with this line so we don't want to change this and the next thing we want to do is drawing these things over here like this lines okay all right so how to do that uh well actually before we go ahead and do it I need to I think I need to change a bit of this distance over here so let's go ahead and restart and make sure the distance is correct uh we are over here here and here okay great the distance is correct now inside this we are going to make another widget and that widget would be responsible for returning us this icons the one that we have seen so here we'd call it Widget the return type and it will call it build a third party login like that and for now all you need to do we'll just pass build context and context to it and why because we are working with the block so with the block because if you want to access later our blocks we need to work with the context so that's why we need to do that now first inside this we are going to use container return container all right okay so here I can make a note that we need context for accessing block yeah right okay and I think we could also do some good practice over here height defines the thickness of the line all right okay so these are some good practice that we can do all right apart from that we are good over here now our time our job is to go ahead and call this one from our uh assigned a dart class Okay Google all right now over here this is our assign the dart and after this we could do what we could do actually I think I have removed the body section so let's go ahead and do that one more time single child scroll View and then inside this will have child and then we'll have column and then we'll have children and after that right into this we can call build third party login all right so that's what we're going to do now okay now let's go ahead and save it and here we do see that Google and beautiful as you can see over here all right now if this is a container of course if you want to center it so you can also do like this um over here you can wrap it around central region let's go ahead and do that and it looks like it's not working all right center widget all right so we'll see that it's centered so I just wanted to show you that you can Center like this a text inside a container using Center widget anyway so I'm going to remove that we don't need this like over here so first we want to have this row section why because we know that these are all going to be in row right so each of the buttons they would be in row so let's go ahead and do the row thing first all right now I'm going to remove this error just for an example that it's working all right now over here the first thing we want to do we want to do gesture detector because all of this button will be clickable so we want to gesture detector and we'll have on tap event but for now on Tab event would be empty because we didn't build our sign-in block yet so that's why it would be empty now inside this we'll have another child and we could use a container and right into the Container we could do width and height so here we do with uh this one and height for the W with this we're gonna we're gonna get uh more like this Square size icon for Google it's not Square actually that should be round anyway so over here we'll use image dot asset so to show the image now our images are inside this assets folder and then icons folder and then google.png all right if you don't know where's this coming from so I can show you over here so if you open it up and come inside this you'll see that icons and inside this will have a lot of them and one of them should be Google all right there's one now because there might be some unnecessary images you can just delete them uh because I just dragged and dropped one of my folders where pretty much I keep everything that I use throughout the projects anyway so there are images that you can also save for your next projects and because you get them for free anyway all right so let's go ahead and work on this so now let's save it all right and looks like I hit a wrong button all right so here we see that uh sets okay assets icons google.png looks like it couldn't find it now one of the ways to go ahead and confirm that the path is correct restart your app there's a lot of time when you first show your image first time even if the image path is correct but it can't find okay well looks like yes we do have problem now over here let's open up our pop spec.waml file and we'll see that how things go now right over here actually we can assign this assets icons okay so because they are not in images directory they are in icons directory now let's save it yes we do see that so yeah anyway so if you use image it's always uh good to restart first time after having the path defined all right anyway so okay so first so good this is this cool one and then over here we can go ahead and copy this thing so let's go ahead and copy so over here all right now next one what we can do we can instead of Google we can just simply go ahead and use apple all right okay great now the way it's going on so one thing we could do instead of repeating like this actually we can just simply go ahead and build a reusable widget and then we just call it from here and that'd be better okay so now how to do that over here we could just say widget and reusable icons all right now insert this first thing what I could say that definitely we need to send this image path or this icon name okay so how to do that over here we can just simply go ahead and do string and icon name like that okay all right great now what I could do I can just get one of this which I already copied and put it here I think I do have a slight mistake so I'm going to cop it from here now and put it here and of course we have to use this return statement all right okay great now the error is gone and like this let's reorganize our code I'm on a Mac option command L makes it reorganized all right so over here what we want to do we want to use the icon name whatever we pass so since inside we are string so we need to use this interpolation operator and then we can just simply go ahead and do icon name and we should be good to go all right let's see well it says that you don't need that brushes you can work like this so we can work like this all right now over here what I'm going to do I'm going to remove this and I'm just simply going to go ahead and call reusable widget but now this widget is actually private to this class over here or this file so I'm going to use underscore because we are not going to really use it from any anywhere else now what's the icon name over here we can just simply go ahead and do apple let's save it and we see that it still works now I'm going to copy this one one more time and then over here I'm going to remove this and then we could do Google over here all right okay now let's save it and the error should be gone or actually no errors at all and right after this we copy this one and inside this instead of this one we can just simply go ahead and say Facebook and that's how actually you reuse your widgets all right okay now with this so far so good and we have some other problems that actually we can take here now The Styling is not really working like this because they're all together now the first thing we could do inside this row let's reorganize our code inside this row we could set up the main axis alignment and then we do main access alignment and then we do space between our space around should work as well okay right okay now over here the top actually we could do a bit of margin so let's go ahead and do that and here we do add-in sets Edge insets dot only now with this we could do top part and keeping some space from this underline so here we do top and 40.h so we'll have very good spacing from that and as well as we could also do bottom over here 20.h right now of course we don't have anything below this but we'll have things below it so we'll see that later down the road actually there is a space because we already defined it all right okay great now with this our button all become reusable and this class looks beautiful and everything is organized over here okay great so with this we have to reduce the number of code but of course later on as we click on this we need to pass a callback function so that it works anyway so in the so far it looks great so our next section would be working with this text and text like this or text like this uh this kind of text they will all make them reusable and we'll see how to do that okay well now the first thing once again over here we said that this was reusable icon this was for both third-party login and right over here we could also do a widget one more time widget and a reusable text okay and then here it's a string text all right that's it and right inside this we are going to use first time uh container and we'll see how it goes and then inside this we're going to use margin while even before that we have to return actually I was too fast return all right over here use a bit of margin and here it's adding says dot top or only actually dot only over here and here we do bottom and 5.h and for now we're gonna go ahead with this all right now as I said that it is reusable so we have to put it over here and let's go ahead and open it up and of course we are inside this column but one thing uh for this one you'll see that actually so this is right after it so we can just go ahead and simply call it so over here we'll call it reusable text reusable reusable okay we need to remove that because otherwise it would be private if you remove the underscore it becomes public reusable reusable text this one and now right inside there so you could say all use your email account to log in just like this so we're going to go ahead and save it and okay all right and it looks like we don't set now let's come over here because we don't have any text that we are grabbing okay all right so anyway now right after this over here we'll have child and for the child itself we're going to use the text and then we can use the text properly for it the text property that we have and it looks like we have a bit of issues expected to find and we were here and we were here and this is the variable that we are passing so let me see where we are doing wrong okay well this one over here now there is gone and we say it there of course now since this text we want to reuse over here we can also do a style over here so that we can use it next time so here we do style and the text style and we can use pretty much everything about it so over here we can say color and then colors. gray with opacity with opacity 0.2 let's go ahead and save it so we see that that's very light so we can just simply go ahead and remove that and make it a little bit higher like this and this is more visible or we can just do like this okay use your account to log in so anyway but this all of this would be changing very soon trust me we'll have organized file and it will know what color to use I didn't do it so far because I want to get excited about what we're going to do very soon so font weight over here font weight Dot we could do normal and right after this here we could also do font size font size we could do 14.sp all right let's save it okay looks like not much change and that's okay all right so this is what we have so far and great all right now what is the next thing you want to do the next thing you want to do is working this this this and this so we already worked part of it using reusable widgets so all you need to do go ahead and use it but one thing we have to know that well these are actually all in one section over here so this out should be in one column so we'll have another column inside there so let's go ahead and do that so over here we do column even before column actually we need to have container now you can ask why we need to have container the reason is that over here you see that we have a bit of spacing between these two texts we kind of apply space inside directly inside the column or for column so if we use a container then we can apply margin and that's why you want to do that okay all right now inside this over here actually you can have a child and for child itself you can use a column right now and that should be good and then let's go ahead and use the first child now this time once again we can go ahead and use this reusable text over here all right now instead of this one we can just simply go ahead and call it email and we'll see how it goes all right we see the email over here right okay great and then as I said that we want to create a spacing at the top go ahead and do that and how to do that so first we do margin and then here we do agencies only and we want to First apply space into top so over here we could do 66.h and we'll see that um looks like we need to import it okay great and it came down a lot okay great now we are insert this column over here so we can set up this cross access alignment cross access element dot start because we're going to start from uh this side over here from this left side okay now our job is to make it on the left side right now here we are inside two columns actually so this is really not working so if you even leave it down so it's not going to work I mean anyway it's not going to work because we're inside these two columns so one of the ways to work with this over here you could do a cross axis alignment and cross access alignment dot start so everything you start from the left side now with this the problem is this one also moves as well so but we don't want that now we know that that this reusable widget inside a container right so since this is a container re usable I think I have a type over here let's fix that so anyway this is inside a container so we can always wrap it around Center widget to center it all right so we need to do that and let's fix this typo before that all right and over here we're gonna do the same reuse a bowl all right great so since this is wrapped around inside a container so we can wrap it around Center widget and we'll see that this is centered and perfect and what about this section over here now for this one we want to put it a little bit on the right so here we can apply padding to it so let's do that and add inserts only and let's apply padding so here we could do left padding and here we do 25 dot w and we'll see that it has moved over here and this is what we wanted and beautiful okay all right so for now we are going to remove this and we'll see in future if we need that or not all right after this over here actually one thing we want to do we want to show this uh text field over here where you can type in so over here you will have icon and this text as you can see so they they are going to have to be in a row right so this is one thing we have to remember now since this this would be reusable so let's go ahead and Define that all right so we are going to uh put it here okay so let's go ahead and create one now over here we are going to create a new function and we can say re or over here we can just say uh build text field we can tag reusable but we can also we may not tag it as well okay now for now we're here we just are going to pass a string and over here we'll say text type and this would make more sense over here well text and another one is uh text type so here you could have email or you could also have password so that's why we are doing like this and definitely first as usual we are going to return a container and here we'll say hi and for this one we can just simply put a child tag for this and we are good to go all right right after this we can just simply come over here and over here we can do it so we can just simply call build text field the second one all right now first one we can say email and email so for now we're gonna pass them but we're not sure how we're going to use them so as we work on that we'll decide that how we are going to use them all right okay so this is what we are supposed to see less hot reload and we say it over here and once again uh well this is not what we expected but yeah so the first thing I want to do over here definitely uh we're going to give it a width and height so let's go ahead and do that here with say width because this would be the width of our text field so 200 325 W and give it a height now here we also give it a height 50 dot h now one of the ways that I like to work I want to give it a color and see how it looks so yeah it looks like this okay great now let's see um looks like our email has moved to the center and if it is so over here we could do another one cross access alignment cross access alignment Dot start let's see okay great now they all start from the same place so actually it looks like it's needed okay great so it looks like both of them are needed anyway now let's come over here so I like this visualization when you work with containers or text flow because it gives you a better idea that how you are changing and where you are changing all right now from this we also see that here is weird so here also should be 25 right now this was coming from this padding left and right padding so we can just simply go ahead and put right padding 25 dot w and we'll see that it looks better and more aligned great and right after this since this is a container over here we want to have a decoration so let's go ahead and do that so here I would say decoration box decoration because we need a rounded border so that's why we need box decoration for now I'm gonna put the colors red back because if you're inside container and if you have a box decoration the color should be inside box decoration and we know that now over here we can apply border radius so border radius we're going to use border radius.hall properly and then inside radius.circular Ray radius dot circular and around everywhere we're gonna use 15.w so that should be our radius and it already looks better and that's beautiful okay and uh what else now we can also give it a border color actually so let's go ahead and do that so here we'll have border and Border dot all I'm inside this we can set up color properly and here we'd say colors.black for now okay and let's see we do have a bit of issues over here okay so instead of box shadow it has to be border all right let's go ahead and save it and we already see that we have black one okay great okay now as I was saying that everything has to be inside the row because the icon and the text itself now over here inside for this text we want don't want to have this text we want to have a row and inside the Row the first one we want to have a container because we're going to show an image and over here we can use a child so let's go ahead and do that and for child itself we can use image dot asset and inside this assets icons user.png so this is what we have and this is what we want to use let's say that and we see it's already there and it's beautiful now of course I do red color looking ugly but once again this is for better visualization we are going to change it very soon of course we don't want to have such ugly UI but now we are in debug debugging mode anyway so here we could do with with 16.w and height 16.w all right now let's go ahead and save it now it become much smaller and that's what we wanted and right after this over here we can also apply a margin to it because we don't want so close so over here we could do agencies only and then only and then we can just do left and we could do 17.w all right and it looks better and this is what we wanted okay so so far so good with this and what is the next one the next one is another container for text fill itself because you see it's not text filled yet so far so over here we are going to use another container and once again this is this would be a text fill so Define within height so here we do Define it with this one and height same as the parent height which is 50. let's save it once again we do see that there is more like an issue of this overflow okay so here it says that overflowed by 5.3 now for this container let's reduce the size to 270 and then the overall place should be solved and smaller is okay that's fine and now okay over here we're gonna have a child and the child is a text field and that's what we were actually waiting for so long and uh yeah we already see that we are already in editable mode okay great all right now inside this there are a lot of things to set up now first I'm gonna set up keyword type and text input type all right so here I'm going to choose multi-line if your email address is too long then you can go for multi-line all right and over here decoration now this decoration is not box decoration but it's like box decoration and we call it input decoration which goes for actually always for text field now inside this there are many properties that we can set one of the properties is this called hint text hint text instead of hint Style hint text over here all right now hint text we can say for now enter your email address okay so that's what we'll have but we'll make it Dynamic don't worry okay and it looks like this one instead of this we can go ahead with size box and the arrow should be gone otherwise it's annoying all right now here there are different the borders that we want to set up so let's go ahead and do that now here it's the outline border or outline input border and here we'll have Border Side okay this proper uh not this one Border Side this one now let's see so it just like the border that how they should look like Border Side this one and inside this we can set up color properly and here I would say colors.transparent transparent so we're gonna use this one pretty much for all kind of styling so the first one is border and then let me put it here so pretty much we don't have any border so here enable border the second one okay that is also transparent and okay for now put a const modifier but soon we change that otherwise it is annoying now now inside this we're gonna also use disable border so let's remove this properly disable border and let's save that okay so you see that now it's looking better and better but we still have a few other issues okay if you just come like this right now you'll see that with this view setup it got much better yes okay but of course if you remove this and save it let's go ahead and do that and let's remove this one again okay so there are already you see that different kind of borders over here so all we are doing removing them we just want to keep everything clean in this design okay anyway and there is another one that's called focused one now that focused is actually coming from if you put like this you see it becomes focused so we also want to remove this focused border focused border this one all right let's save it and you see that it's gone over here okay all right great now there's another property that we're gonna set up that's called a hint style the one that we had and here would say text style and then inside this we can just simply go ahead and set up the color for this and for now here we'd say gray with opacity 0.5 all right all right now this is the time actually we can take down our and we have an issue because we have constant the top so we need to remove that otherwise we'll have an issue okay all right so but you can put const for modifier for other properties and it's okay just let me copy this and put it here I think this way it's easier all right great now this is the time that we remove this uh a border here we had this red so you can just simply remove this now let's take a look so we're gonna put white for this background for now and once again once we are ready to refactor our code then we'll do the way we want looks like I got stock over here okay great now here colors.white all right now let's save it and we already looking much better and that's beautiful and that's what you wanted great now there are other styles that we want to apply over here it says Style okay let's remove this and let's come out of this text decoration because I think we were inside this decoration all right and now after this here we can apply style okay so here we do text flow text Style and the color here we do colors.black and then over here font family font family once again Avenue this one and then font weight font weight dot normal and then font size equal 12 dot SP alright so that's what we'll have okay great and so far so good it's working okay now this is textile that you don't want it's too small all right great wonderful and now this should be reusable and how to reuse that uh okay now the first one is a text over here and we also looks like we need icon so over here string icon name okay now for Icon name over here we're gonna pass down from where we call it so I can name all right but if you save it now of course we'll have an error because over here we are supposed to pass icon name so here I can name is user let's go ahead and save it now the error is gone okay now over here we are saying that uh enter your email address okay and if we come down here now insert this text decoration we can just simply remove this we can say whatever the variable that we are passing down and what is that that is a text now for this one we can actually call the hint text and this would make more sense and we can replace this and text let's save it and we see that it works because there's no error with this great and what else so so far so good of course we also need to work on if it's password we need to work a bit differently now over here we can check it okay and copy it and here enter your password enter your password let's save this and we'll say it's right there and we can also call this reusable email to here and then we can just simply go ahead and call it as password this beautiful okay right and of course we need a bit of spacing at the top now here we want to create a spacing and how to do that well one thing you could do because since this is reusable over here we can just simply go ahead and set up a margin let's do that and since it's a container so we could edit this only and bottom 20.h and let's save it we see that it came down uh at the same time over here right below it we can also set up a bit of sized box which would help us and here we do height 5.h and you are good to go let's save it so there is also a bit of spacing and I'm going to copy this and put it here as well so that it looks better okay great now well so far it's working and we are happy with this and there are other properties that we can also set up over here for this uh text field if you close this and right after this over here we can say autocorrect or to correct to correct false all right now obscure text true or false so that's the problem now here you see that we are passing the type okay so one is email and there is a password okay now if it's a password type then we obscure it otherwise we don't okay so here we could do like this uh text type text type equal password if it is true obscure obscure recall true otherwise false so that's how it's reusable okay great now here of course you can try a.a.com and password one two three four five six so you see it works now of course we also need to change the icon for this because we are using um the same icon now let's come over here and let's open it up icons and let's see if we have a password icon or not of course we don't have password icon but we have a lock icon so we can go ahead and use that one so this lock icon okay all right now as we are calling it from here so the icon we need to send it as lock l-o-c-k now it changed and it's beautiful okay so so far we built a lot of reusable widgets for our sign-in page but some of them I think I'm gonna move them out later and put them in global file because text field would be reusable in many other places but anyway so so far we have done a great job and learned a lot okay well next we are going to work with this uh text over here now apparently this text in this text will be very different so I'm not going to create a reusable widget but we are going to have one widget but that's not reusable I mean we can't really use this one over here so you're gonna create a new one and here we'll call it widget and name it forget password like that okay all right and so for let's go ahead with this and then simply return a container and once again here we do with say 260 Dot W and height we're gonna do 44.h and then child because it would be clickable so we're gonna wrap it around the gesture detector let's go ahead and do that and untap event for now it's empty and right below it over here we're gonna do a child and then child is a text and inside this we're gonna use the text itself so here we'll say for get password all right and then here let's see if we can use like well we don't need that but we can just we already have cross access alignment start so that's going to help us anyway so here we're gonna use the color okay actually we need to style for that textile color colors.black colors.black okay great now let's come over here and we are going to put it here and we we're gonna call it for got password just like this let's save it and we do see that we have an issue now the issue could be originated from here all right now we already see that that over here it's like this okay now let's see about this alignment over here we start this one was third party and login and over here okay right and we do have this widget over here now into this we can simply go ahead and use padding or margin actually because we wanna out of this container margin applied outside of a container okay all right so here we could do add instance only Dot only and left 25 Dot H or HW now we are aligned okay great and let's see the design how it was there okay yeah right and right after this we need to set up other properties let's do that and here actually you can apply a decoration to it decoration and with this we'll be able to apply underline to it so here we did talks text decoration dot underline and then let's save it and the last property that we could use font size and 12 dot SP all right okay now over here we can also use a color for decoration color so that correlation color and colors.blue let's go ahead and use that okay so this is the underlying color and because of this color actually and these two properties because of this two properties uh we are not able to make this text uh usable in this case so that was the problem okay anyway so now with this we are done so next section would be about building these two buttons so this would be also a reusable widget so over here we're going to create a new one widget and here we'll say build log in and reg button just like this and of course over here we want to have string button name like that so far we'll have this and then we're going to return gesture detector since we want to be clickable and child would be a container and let's have this and then after this over here we are going to use uh on tap event we don't have all right okay and right over here inside there's we're going to use width now this which should be the one that we have used early 325 the W and height 50.h so whatever we have done before like this over here well they're similar right so in our case they would be similar as well so let's go ahead and do that now instead over here first one is decoration and the Box decoration once again we need this for our border so here we do color and then colors Dot colors.blue colors Dot like that and we want it to be visible right away so that's why here we're gonna call build login and reg button and first button is login okay all right and we already see that it appeared and we do have a bit of problem but I think would be able to take care of this okay all right and uh for this one definitely we're going to use margin okay so let's go ahead and do that margin and add inserts Edge insets only and only left 25 dot w and it should help us and at the right we also do the same 25.w and it would look better okay so now they are more aligned over here and we also want a bit of spacing from the top as well so here we do top 100.h and it's going to help us well looks like it came down so much and in that case okay good we'll go ahead with this so far and then over here border radius border or a radius and border radius Dot I think we can directly with circular around 15. and let's see okay this is much better and then we can give it a bit of box shadow box shadow box shadow and spread radius one blur radius two offset now we talked about this before so we are not going to repeat and the color s.gray dot with opacity 0.1 so this is what it will have so far and uh right after this one we can assign our child the child as a text over here so child and then we'll have this text and then we can just simply do button name I think that's what we are passing so we have this one and we can wrap it around a center widget and then we are good to go okay and I do think we also need a bit of styling with this so let's go ahead and do that okay style so text Style and then font size we could do 16 dot SP and okay it got bigger and then font weight font weight dot normal in the color s.white would do so far okay great so now it is reusable now we can just go ahead and copy this one from here and we can we'll call it log register capital letter and then register all right now of course this button looks like we have a lot more space over here now one of the things we could do over here mention the type so here login and over here you could do register like that now because it's not here so we get this error strain button type now over here this is this this place that we can work based on this button type so here we see that it's so much to the top here we could do ternary operator button type button type equal login then we just do 40 dot h otherwise 20.h all right let's save it and we see that they are very close okay great now so far so good but of course we have a lot of other changes that we need to do in next section we'll see how to refactor our code especially the color section and we'll have dedicated color file and from that page we're going to use all this color so that we get organized hello everyone so in this section we are going to refactor our code and do the coloring as well and we'll create a color file one thing though because I'm in China right now and it's a stormy over here the place where I am so you might hear a lot of noise air breezing and a lot of noise of storms so if you hear that forgive me because I just wanted to continue recording the video anyway so now over here to do the coloring first we need to come inside our folder where this is it says this common folder and the right inside common folder we're going to go ahead and create a new folder and we'll call it values all right now inside this we are going to create a new file and we are going to create the file name as colors.dart okay now over here we need to put our colors all the colors that we want to use okay and the color should be globally available and how to do that so you need to come inside this uh link over here and this is the link that we use for getting resources and view everything over here and the one it does anyway so inside this over here I have this color so I'm going to copy them and after copying we're gonna put it in our file okay so let's go ahead and do that so I'm going to copy it and copy all of it and then I'm going to put it here and as you can see now this is just a class name and inside class name we have static variables as colors so they should be globally available in our class using just this class name okay all right now what are we going to do next so first we are going to start changing from here this is the place that where we want to change first all right now the color over here for this container and the line over here we see we just had a random black color or gray color so now we are going to remove that and over here first we're gonna invoke our class name okay looks like it got stuck okay right so here our class name is app colors and then over here we are going to use primary secondary background color primary secondary background color there's as our container color this one all right okay let's save it okay all right now there is still a line but it is very very thin but if you sit carefully there is a line okay that's what we wanted okay so that's the first color and then over here we have this text color as well okay so we're gonna change this one now here it is app colors app colors dot primary color primary text so this is the main color for text as well so this text what you see over here okay great all right and let me reformat the code so I'm on Max 100 Studio Mac Android Studio so I do caption option command and L makes it reformat and which looks good all right okay so that's the first section has been done all right now we are going to work on this login button let's see where is our login button okay this one over here so for this one over here we are going to use as app colors Dot primary element this one all right and let's save it and we'll see we'll have a big change and that's what actually we wanted all right and what else let's see now we're gonna go ahead and work on this text color as well now login this one uh let me see the text okay this is the button name and the color is here I'm going to reformat the code one more time okay looks like that's it they already do or already did for us and over here app colors dot primary background color primary primary background this one all right so let's go ahead and save it all right so most probably this is still white color so that's why we don't have much change over here all right okay okay now the problem is if we see our earlier button they do have different colors in the sections right so how to work with this because they have different color now for this reason we need to do this conditional check over here like if we are a button of uh login then one thing or one color otherwise we use a different color like for example here we could do like this so we could do a conditional check using our ternary operator so here button type equal login if this is a true then use whatever this color we had primary element color go ahead and use that one otherwise we can use app colors Dot I have colors dot primary background color but of course with this it would become more white and that also means that the color for our text has gone now over here we also need to do the same conditional check so I'm just going to copy this and put it here if this is login use this color otherwise over here we're gonna use different colors so app colors dot primary text pry primary text this one all right let's save it okay great now it works as well but of course we have to also work with the Border color over here so right now if you see that uh in inside our box decoration there is no border color over here so we need to work on this one and for this one we could also use this ternary operator now let's go ahead and invoke this inside this box decoration because we are still inside this box decoration border now once again I'm going to just click on this if this is a login button then what are we going to do we are going to use the colors dot transparent which means that there is no border color and I think not like this let's see border and inside this uh okay let me remove this one the better way to do it I think that would be border dot all this one and then fall back to this next line and over here we could do color okay right now this is just for border so now we could do this conditional check and here we do colors dot transparent otherwise over here we could use a border color now that border collar would be coming from App colors dot primary Four Element text primary Four Element text this one and let's go ahead and save it yes we already say this so this ternary operator is very useful and you can use it in anywhere as a conditional check before you assign kind of value to it okay now let's put it like this so that in future is more readable otherwise you may get confused that where it starts and where it ends all right okay so over here we could do check for registration button border color while here you can hear the noise and it's stormy actually anyway so yeah this is beautiful in one sense okay all right so we know that now this way it is more readable okay otherwise the line is pretty long so pretty much we use Turner operator inside our UI code to assign actually Dart code so this ternary operators they are also Dart code and what's happening over here one thing about this so if the button is logging we use border color transparent which means that no color okay so hopefully it should make sense and everything else should be okay all right now we're gonna close this one I think we're done with this there isn't much uh check over here now we're gonna go ahead and do this for this one over here okay now for this one as you can see over here we can apply a color because we are just doing black app colors dot primary primary for element test so this is the same background color that we are going to use that is very light now let's go ahead and work with this style over here which we also have I think hint so hint color for our text box so here app colors Dot now primary secondary element text this one we're going to use let me see do we need any const before that well yes it wants const okay and so that if you remove it now sorry okay let's come over here if you remove it yeah the color changed all right okay and the text style and there was this color one more time so we are going to change this one as well app colors dot primary text this one since this is our text there is a primary text okay so these are primary text color which is same as this one I write and I think that's it in this case and there is the last one that we also need to change and this one the forget password password I think we have a type over here let's go ahead and fix that password okay now with this typo we also need to change there we'll change it Now text the color over here now for this one app colors dot primary text okay and now decoration color actually it would be kind of black so we can still use app colors Dot in the primary text now we have this issue that's because over here we have a typo w o r d alright okay great so with this uh well this color should be white anyway now this one looks good uh I mean just like this as you can see over here they look pretty much the same yes I know there's a little bit like this one is little s thinner than this one it would also work on this now the next first thing we want to do is like this so once we restart our app so this colors go ahead and let's change it I want to change them inside from this uh welcome button alright so the storm is still going on so that's why it's still noisy out here so forgive me if it is too noisy anyway now we're going to work on this so we need to work on this widget and make it uh colorful the way we want for now we are just using for text itself we are using uh as you can see black color so we don't want that we want our app colors and then primary text but of course this is also black I believe all right okay as you can see it's still black and then over here this one we can just simply do app colors dot primary secondary text color or primary secondary element text and let's save it okay well I believe it changed a little bit okay now over here we are inside this box decoration and let me see which one is this okay yes so we are inside this button where we actually go ahead and click on them because we insert the gesture detector now we first need to change this decoration color all right now this color should be same as the one that we had over here early our login button so let's go ahead and check the login button now for login button so over here we use the primary element color Okay so let's go ahead and use this one over here primary element so you just directly replace this and we save it oh sorry I used it for box Shadow we don't want it for box Shadow we want it for here all right okay now it changed all right and then that's it and we also have this dots operator that we want to change in dots operator is inside this positioned widget okay all right now over here this is the active color that we want to change and for this one here we do app F colors Dot uh well let's see this one let's save it okay all right let me see what was the earlier one well I can't see that anymore because the app is there let me change this one over here so over here we could do app colors dot primary this one and then over here we could do colors dot primary text and all right so yeah like this okay great there is a typo with this so I want to fix this I don't want to actually the naming is wrong it's a primary third color I think it makes more sense in that case so I'm going to open up this and replace the spelling where here we have uh this one okay and then over here we also want to change it to fourth instead of four third element okay I think I need one e there all right but of course does it cause some issues so here th okay great and let's see over here as well th okay that's it and whether we have any issues here not okay in welcome third element okay e all right now with this all the issues should be gone let's run it to make sure that we didn't have any errors okay great and wonderful our app is already looking better now we also need to work on the sizes because they're a bit different than our original version all right so one of the things right now I want to take care of this distance over here because it's too much and this is blocking this button over here because we are right inside the safe area so we want to take care of this one and how to do that now to be able to do that we need to find this section uh where it gives us with an uh actually the top uh height so I think it was somewhere here so instead of uh this we can use 36 and we should be good to go now it looks much better and these three buttons there should also stay close to each other now for this one over here inside this as you see currently we are using well if you didn't have this one padding left and right all right so over here in this third Pretty button we see that we have left and right like this so what we could do we can put here 25 and here 25. and then it would make them like squeezed together and actually which is much better okay so with this this section more looks like the earlier design and we are happy with this so I'm going to finish this over here and next section we'll see how to work on the block block for sign in so let's go ahead and do that all right now to be able to do that over here uh inside this um Pages folder we need we already have a folder which is called a sign in now inside this we're going to create another folder and we'll call it a block all right okay let's make sure that we are same as this okay great now inside this we're going to first create a file and the file name is uh um sign in States dot Dart like that okay great now inside this we are going to create a class and this class would be responsible for holding our states actually and there will be some variables and once we change the variable and things like that it means that the state would change all right so let's go ahead and do that over here we are going to use a class the class name is sign in state and over here inside this we are going to create some variables and what are the variables so final drawing email and then over here we do final string password because we need them for our sign-in all right okay now here we do have this either you have to initialize them now or you have to use a light modifier but we are not going to do any of them so here we'll have a Constructor and the Constructor is signed in state and then inside this we have this required prices so with this which means that we have to have them and here we do this dot email and the first time when we initiate our state so this is all empty and this is better okay so now with this our state class is ready and I'm going to reformat the code over here right okay anyway so right now we have this email and password and they would be during initialization and they are all empty but of course we you are not sending empty email or password you have to send some value so we have to grab the value somehow from our UI and then we change it okay for changing actually we're going to create a method over here but the method type would be uh this one sign in the class itself and the method name is copy with now you don't have to call it copy with you can call it anything but the convention is calling it copy with because you change value so you take a value copy the value and change it okay so that's why they call it copy with you don't have to call it copyright now over here inside this we're gonna have this string and our string should be type email and then we'll also have another parameter which is string and that should be password all right okay now let's see what's going on okay well it says that we have to have this required keyword either we could do required over here or we could make it optional like this so with this it becomes more like optional that there could be a value or there might not be a value now over here it's saying that okay you need to return a statement otherwise we'll have this error all right so now this is what we have after formatting and this looks much better and here we'll just simply return sign in state to this class itself and inside this we have to assign the parameters well more like an argument you call the Constructor and how to do that because here we we are doing this required so what we're going to do here we're going to mention the name I think they're named parameters as you can see over here they're named parameter so whatever the email is there go ahead and use that email all right and then what are you gonna do you're gonna use the password and whatever the password has been given use that one as well okay now we do have error over here now the reason is because it says the string optional cannot be assigned to the parameter type string okay so the problem is here you say optional so which means that you may send the value or you may not send the value now for that reason here you're going to confirm like this if it is not empty use whatever is there if it is empty use the other value use the previous one that was here inside this email variable okay so that makes sense once again if you don't send this one it's going to use whatever the value was there in earlier State use that one but if you assign it value use that value this is the meaning all right and then over here this dot password okay and with this our Arrow should be gone okay now with this our Welcome State class is ready next we'll go ahead and create our I mean sorry it's not welcome State sign in state the next we'll go ahead and create our sign-in event class okay now let's go ahead and create a new class inside this block folder I mean a new file and we'll call it sign in Block sign in events actually not Block events blocks are the next file anyway so inside this first we are going to declare a class over here abstract and then the class name we could do that sort of class and we can call it sign in sign in event and here we'll also Focus why we need an abstract class which is quite important to have one but why we'll say it from the architectural Viewpoint of block and over here I will have a Constructors a const sign and event that's all all right and for now we don't have anything and based on this we're going to create a new class and we'll call it email event which means when email changes then or we type in email and then we use this one okay so we'll extend sign in event this one all right and right after this over here we're going to declare a variable and we'll call the variable as a string email final and then we'll have our Constructor over here so here we do const email event and then we do this dot email and that's as simple as that one okay great now this is for email you can just copy it and we're gonna put it here and over here we're gonna call it password event so that would be used for password and over here password and this dot password all right okay sorry not disturb this is this that password and here we'll have password event password all right okay great the arrows are gone all right so now why we have this abstract class well no that's because the way a block is designed the way uh events are emitted events are triggered actually not emitted or the way events are registered so that's why we need this abstract class and we'll sit more in this section where we create a new file and register our event so let's go ahead and do that and over here we're gonna call it's like sign sign in blocks dot Dart all right now inside this over here we're going to create a class and we'll call it sign in block and extends over here definite 2x in block and then here we'll have our event so what's the event class name the main class which is called a sign-in event to this one well there are others that you can also think of there are others but why we are using this one once again I'm going to explain them right after finishing this uh uh class over here because that would make more sense at that moment otherwise it's not going to make sense all right so here we have to have uh Constructors sign in Block all right and then here would call Super and uh pass Here sign in state so in the Constructor you always have to realize this uh initial state so initial State you have to have one now into this we're going to have two methods to own methods actually and then the first one is the email event email event this one all right now here we could do like this so it's going to give us event and the state all right then we return it so that's for triggering email changes and then the other one is where you would do password event and then once again event and the state all right let's go ahead and do that okay now the actual body over here we don't have this for these two methods yet but now this is where we focus by understanding why we need to have this abstract class over here now first if you see the block class itself over here so here it says that it takes event and State all right so they both take them as classes so they are classes actually so you have to have two classes one representing event the other representing state or whatever they represent they have to be different this is the idea okay so you have to have two different classes but since our purpose is state so for this one the one that we assign over here that's for State class this for event class and that's what we did over here actually one is event and the estate well of course that still didn't answer a question our question was why we have this abstract class over here now we're going to break down it from here by the way while we have this class over here signing even this is a class so what we did we already used it here right which means that in this place now let's take a look at this uh on method how it works now instead on method you see that you have to pass well if you see like this so that's definitely a class because a class can extend another class so that means our event was a class event has to be a class it cannot be just a method or a variable it has to be a class because only a class can extend another class so this is where the first this class idea comes where we have to use classes as events not uh methods or not Fields so this is where it makes more sense okay all right so that's the first thing we'll learn about it so you have to use classes for events now back to this on method over here so which is here and here we do see that e is a class and it extends event which is another class so Class A is extending Class B like that okay or if this is Class B which extends Class A or the parent class like that so here whenever you pass uh parameter type to this it has to be a class and that class is that class extends another class but what classes the event class even class is the cloud itself that we see over here inside this block okay so this is the class that's being extended over here the one we that the one that we see okay all right so this is exactly the same thing we did our in our event class with the events so this is the class that we use here and that should that is being extended over here right because we know that this class extends this one so by saying that one actually you can also write like this I mean if you didn't want to extend this over here well you can also do like this over here okay e extends events if you want you can actually go ahead and do like this in your case like here and of course we have to make a bit of change but this what this is what gives us the idea over here that we have to have an abstract class in our event class okay why because that abstract class is extended over here and that's what we also do in our events over here because if there is an abstract class then how can you extend that class so because we have an abstract class over here this class could be extended by another class and that another class we can use as our events so hopefully with this we have better understanding why first we have to use classes and why we have to use abstract class and we have to extend that and then we're going to use them in our block together hopefully it makes more sense okay so that's great and now well there's one issue though if we are inside this registered body like this is uh registration of our events and well this is the Handler actually so this section is the Handler now if we are in the Handler itself right after this on method which I mean by that inside this Constructor body then we can't really name it State otherwise we'll have error inside this we have to name it emit when you're out of it you can name it different things as you want and that works and I'll also accent more and see okay so now if we are on this email event over here if this one gets triggered then we want to emit a state and of course we're going to change something first all right so first we need to use this emit and inside image we can use State and then we can do copy with like this now here we'll have email because copied method takes email and where is this email value coming from it would be coming from event and then we'll pass the email object for it so how is this gonna work this that would be very interesting why while from our UI we will trigger this event and as a trigger event actually will pass the email but of course a trigger event we can't really pass email directly we passing actually an event and inside that event will have email now that email would hold the data that we are supposed to pass or update us or renew so that's how we can grab that now one more time if you come to this email object over here email class you'll see that it takes a variable so the variable is in the Constructor itself so we'll call this event as a recall inside this will pass our email so that's how we would be passing all right anyway so now let's come over here so you get the idea okay now we're gonna do the same for password over here so I'm going to copy this and put it here but of course this time we're gonna send a password all right okay so now with this the error we don't have any error we are good so as we call event so this would be send actually and instead this will have email or inside this will have password okay now as I said earlier that earlier sessions few sessions early I've said that you can call it anything you want yes it's true but how do you verify that now you see over here this is a method on method and it takes the Handler so it's this is called actually Handler event handler the body is right after this on method the same here but in fact we can separate them and separating them is better because with this it looks clean now for that one we need to come out of this and over here we can Define method the type is void and here we'll have private method and we call it email event okay now insert this we need to pass two arguments one is the event actually the actual event event email event this one and we'll call it the object we'll call it event and then for State class we also need to send another class which is called emitter now emitter is a state class but it actually takes the exact State what is the exact state in this case so that is sign in event so sine in state actually not event and then we'll call it emit over here and after this you come over here and then you can use emit Dot well it's not emit I mean not even Dot and then we do state copy with and then email and then event dot email all right great now you may ask what's happening over here okay the first thing I could do right now right away I can remove this Handler body over here I can just call email event okay all right so here you see for on method the event handler the name is here so the Handler's body is defined over here now we could do the same for this one so let's copy this and put it here and we can say password event password event okay and we can also remove the Handler body from here and we are good to go and then we're gonna call it password event all right and it looks like we do have issues over here the I think argument type so in this case here you should have password and let's see password event and here we could do password okay it looks like we still have this issue here pass okay and one more s all right okay well now for now we have separated the Handler from the on method we defined it outside of this Constructor okay great okay great now we are talking about this image and we said that you can name it anything now to understand how we can name it anything here the emitter this one this is called a callable class so here you say that an emitter is a class which is capable of anything you state of course it emits the new States and this is what we have seen earlier we always see emit emit emit but what exactly does it Emit and how does it happen now it happens because of this emitter class so we get the idea like if you go our welcome blocks over here we also have emit but we really didn't have much idea what is this object now we get the idea that it's an object of emitter class of course it takes a certain type of the state class that's true and okay now if you define your Handler like this of course you have to have event animator class and you can name this parameters anything well for example here I don't want to say emit I can say for example PHP just say that and copy this and you can it will put it here as well and it still work you see we don't have any error and if we run it we'll still not have any error now how does it work like that now let's go ahead and say this emitter class because this is an abstract class and it has to have a certain State type and that's what we have done over here we mentioned the state as you can see all right and at the bottom we have a method actually you have to implement the method because it just have a name but it doesn't have any definition so here we see it says call now it doesn't have the body over here so we have to realize the body or implement the body but I can even see over here that it takes a state type and so there has to be a variable that is created for it now when a class has a method like this which is called call and this kind of class in Dart is called callable classes now the idea is if you when you have these callable classes and you create an instance like over here we created an instance of this class now we call this class using this instance so you call this class using this instance is like a method so over here we are calling emitter class actually but we are calling it more like a function just like you call this function right so this is a function as well so we are calling this function from here so over here we are calling this class as a function using this instance and it is possible that's because over here we have this callable property so because of this one we can call a class as a function and that's what flutter block uses internally to image state so it uses the function the class itself to call itself and then it emits States now we saw that already that inside we have to pass like a state object and that's what we did over here so copy with this is a state object that's coming from this state variable itself over here so everything inside this state classes over here this variable this method they're all state objects of course you can pass any of them but in this case we are just passing copy with function and we pass down to it all right so yeah that's called callable object and that's also called image function or actually this is a callable class instance anyway so since the convention is called image so I'm going to put back imit over here instead of calling PHP or any strange name now with this all block is ready so we'll be able to use them okay well now we're gonna take a look at this on method one more time and have a better and deep understanding one more time from a different Prospect anyway so we know that on method has a type of class which is actually event class now at the same time it takes even Handler and we know this is the event handler and even Handler has two parameters one is event another is the image State class like that or straight class now if you go over there well so we know that this one actually is represented over here and over here we have done it more in detail where we have an event and we have a state class or even class over here now if we click on this you will see interestingly of course we already talked about this one early okay because this is the class as well this is over here our abstract class and this is the actual class with what we called email event anyway so at the same time we have seen the Handler so this is the Handler this Handler is actually I'm talking about this one or this one okay so this becomes our Handler the whole thing becomes our Handler now if you see over here Handler itself has type what is a class which is e and a state the E is the event we know that email event okay all right not the sign-in event in our case signing event is this event class and this is our email event one more time so sign an event and email event so hopefully it makes sense all right so in our even a Handler we have this two classes that we have to have one is your event class and the state class and that's what we see over here so when we call a Handler so over here we are calling a Handler so we are passing this toward this classes with their own instances and that's what we did all right okay so now it should make more sense how block works and how and why actually you have to have so many classes defined and how to work with them hopefully it makes sense thank you okay well now we're gonna take a look at this on method one more time and have a better and deep understanding one more time from a different Prospect anyway so we know that on method has a type of class which is actually event class now at the same time it takes even Handler and we know this is the event handler and even Handler has two parameters one is event another is the image State class like that or state class now if you go over there well so we know that this one actually is represented over here and over here we have done it more in detail where we have an event and we have a state class or even class over here if we click on this you will see interestingly of course we already talked about this one early okay because this is a class as well this is over here our abstract class and this is the actual class with what we called email event anyway so at the same time we have seen the Handler so this is the Handler this Handler is actually I'm talking about this one or this one okay so this becomes our Handler the whole thing becomes our Handler now if you see over here Handler itself has type what is a class which is e and state the E is the event we know that email event okay all right not at the sign-in event in our case signing event is this event class and this is our uh email event one more time so sign in event and email event so hopefully it makes sense all right so in our event handler we have this two classes that we have to have one is your event class and the state class and that's what we see over here so when we call a Handler so over here we are calling a Handler so we are passing this 12 this classes with their own instances and that's what we did all right okay so now it should make more sense how block works and how and why actually you have to have so many classes defined and how to work with them hopefully it makes sense thank you okay well we have a very good understanding how block works and we have seen on method and in middle class and the event classes a lot of things and there are a lot more things to learn but anyway after learning all these things is the time we go ahead and Implement our block the one that we have created over here so I'm going to open up the folder and inside this sign in folder I'm going to create another class and we'll call it sign in controller like that okay I think it's not the same it should be signed in controller dot Dart like that so over here we'll have just pure Dart code and that would be pretty much all about our class and methods the the one that would be calling from our UI and then this UI and this methods over here we'll be talking to this sign-in blocks that we have created early like that so anyway let's go ahead and create a class and we'll call it sign in controller yeah just like a class like that and instead there's actually we'll have Constructor the const and then whenever we call this class actually we are going to pass an object to it and over here we'll make it required so here we record this dot context all right okay well of course it doesn't exist variables so one thing you could do first to go ahead and declare one so final build context context so we'll be passing the context since we are using block so we have to manage our own context over here now when you call this controller we'd be passing that through this Constructor over here then we will have access to this context all right and right after this we can create a method over here and we'll call it void handle sign in and so here we'd be doing sign in and for now here it will take a type of parameter that it takes because this one would be passing as an argument from where we call this so we know what kind of login we are doing whether we are doing social login or email and password and this is what we are doing actually okay right anyway so right after it over here we're going to do try catch clause and then inside this we're gonna check if type equal email so if we are going to do email login or not like that and then inside this over here of course we have to have our well since we are try catch colors so here for now I'm going to have this all right and the error should be gone all right and right after this inside here we're going to create a variable and we'll call it state now here we do context.read r-e-a-d red and then over here we'll have sine in Block the one that we created and based on that we will we're gonna get an object which is called State object all right now let's see over here so it wants us to import flutter block if you can do that then you can access this read method now of course previously we have seen that we could do the same using block provider dot off and then you'll have your sign sign in Block and then then we'll have this context and after that you access the state object now if you don't want to use block provider you can also use context dot read to access your context or block actually and then from that block you get your State's idea is same all right so previously we did like this and now we are extending our knowledge you can also use context dot read to access the block the one that you created so we created this block over here and we're going to access this in our UI so for this reason over here we are using context.read to use the block all right now we know that once you use access the block actually you can access all the properties with it so here we know that there is a state variable like as you can see this one so you can access this one if you want you can access all the other things from here from sign in controller okay great now we know that if we can access state that means that we're accessing the state class over here which is the sign-in state right and this class has two fields which is email and password that means we can also access them and that's beautiful okay and why it's beautiful because when we call this method then we'll be able to grab that email and password from the state using the state variable the one that we created here all right so here I'm going to declare like this email address and then over here we do state DOT email like you see since we can access State object we can access everything while I mean everything that has in our block like events and states and related properties and everything so accessing the state is very important anyway now here we'll have password okay now here we'll have state DOT password just like this you see already able to access our password and email based on this state object of course you can name it state or anything you want it doesn't really matter now here we do first uh like email address is not or is empty here we'll have some message over here but would use a package to do that we'll we'll do that later now here we'll have um password is empty and then here will have this one as well so here we'll have warning or message all right now anyway so once we have this email address actually we want to verify and confirm with our Firebase uh server that hey I want to use Firebase okay now this weird actually things get more interesting and complicated as well okay great and how to do that now first we need to come to a terminal over here and we need to do well we need to be in our project root folder PWD you learning app I'm in the root folder and here we could do flutter Pub add and the package would be if Firebase auth like that okay because we want to use this as for Authentication so that's why we need to download it so you go ahead and download and you'll see that it's already in your pub spec.waml file and this is the version that we are going to use now a lot of you might not have this one it's okay because I'm not using this one yet okay all right now over here so it is installed make sure this is the version if you are following this in the future now we have this now after having this actually we could use this email address and password to see whether a user exists or not in our Firebase okay and that's what we want to do so since we are using Firebase over here we want to get to create a variable uh well let's do try catch Clause one more time because uh if things go wrong because since this is Network issue network issues in general should be inside try catch clothes so that you can grab the error now we're going to get credential credential credential means your information personal information and here I'm going to use a weight and then here we do Firebase off this one this is the one that we want and then from there we get the instance and from that we could invoke sign in with email and password this one so this is the one that we want and right below it we can actually get more organized all right and over here we could do email address email address and password it looks like we have a weight over here so let's add this async modifier and we should be good right after this over here we do a reformat of our code okay all right so we get the credentials whether how we can get a user based on this information whatever we have gotten from our user all right and right after this here we could also do if here credential dot user if there is user if there is no user which means null if it returns null we'll say something over here so that's one thing and there is could be there's another option because we are going to use email verification so credential user make sure the user exists and then there is an object which is called email verified this one over here so we also have to make sure now if it is verified that's one if it is not verified so we are using negation over here negative operator remember this is a bang operator in Dart okay all right so here I would say something like this that you didn't verify your email anyway so if you're using this one first time so you have to know that if you want to use Firebase authentication it could be using social network or it could be using email address it doesn't matter you have to have this package the one that we have installed and then you have to get this class and then get the instance so it gets as a single tone class it's a Singleton class so you get its instance and then using that instance we call the all the methods that inside this class the one that we need single tone means that you can't uh well whatever the instance is there you have to use that one you can't create a new one and this instance is a getter okay so if you click on this you will see that it says it's a getter so it gives you an app instance and in your whole app you can only have one instance which is this one and it it returns you this one all right so of course it does a little more thing before returning over here you can see so this instance is a getter and we get this Firebase auth instance and as I said there is a Singleton now this is the pattern that tells you that this is a single tone now in general single tones The Constructor has this underscore right after the dot okay all right so this is the Constructor and over here we created uh I mean it's a flutter framework not me they created an instance and which is called instance variable actually not instance instance variable they created and that's a getter and it gives us the Firebase auth object hopefully it makes sense anyway so over here we if the email is not verified we're gonna say something to our user that you are not verified all right so first check either exist or not user may exist but user didn't verify the email so we want to use verification all right so one more time we get the Firebase alt object and then we save it over here now at the same time before we get we assign our email address and password then we get a response back from the server we get that one and then we check if the user because credential it returns a lot of things first we check the user object if it is null then we will give warning if the user exists but the user didn't verify the email will still give warning or error like that and next over here we're going to create a variable and here we'll call it ver and then over here we could do credential dot user all right okay great now we'll say one more time we'll check if user not null then we're going to do a lot of stuff over here all right so when we are inside this over here which means that we got verified user from Firebase that's the idea okay so these are the things that we need to do okay so over here we have error getting user from Firebase like that okay well these are the things that we need to do next and now what we need to do next we need to go ahead and open up our Firebase service from Firebase console and to do that first definitely we need to register Firebase project so let's go ahead and open up your Firebase so this is my Firebase and over here I'm going to create a new project okay and I'm gonna call it you learning app like that okay you can name it anything you like and then I'm going to disable this we don't need this now some of you may also do it using CLI using Firebase command line I'll I'll put the link tutorial uh sorry tutorial link below in this description so you can find that now a lot of people can't do but what I found manually doing is suitable for everyone so that's why I'm going to do it manually so that we don't have any problem okay because a lot of you I found it based on earlier tutorials can't do it using CLI but some of you can anyway so first we are going to create an iOS project and now here it's important your app bundle now how to get this app bundle get this app bundle over here you need to come to your iOS folder over here and then just click any of the files over here and if you click and select then over here it will show you that opening X module okay so let's open it in X module yeah iOS module in xcode actually sorry so we're gonna open that and I think it's opening yes so once it's opened uh we'll see it's a bundler so let's select this and this is my um bundler over here bundler name well I feel like I can't copy it let me go ahead and copy it from here I think yes from here so remember this has to be unique especially after com this one which I have told you early now we'll come over here and put it there and the app itself could be anything so you learning all right then we don't need anything else then we'll just register the app and with iOS actually is pretty straightforward and simple all right of course we need to download this one all right and it says that after downloading it you have to drag and drop inside this uh my application folder where info dot plist reside so we need to do that together so let's go ahead and open it up where it is wherever it is and then over here I will have this uh xcode now xcode would help me to drag and drop this one let me find my xcode so come inside this Runner we could do it over here and uh we're going to drag and drop this one over here and I'm gonna do this one like this and it is right there so it does the iOS setting is pretty much done and all you need to do next and we don't need this one actually and for Swift UI it says that go ahead and added this one in your app delegate so yes we need to find our uh file where it says okay connect first initially main entry I'm going to copy all of this from here and then we're gonna come over here and inside this we'll have this Runner folder inside Runner will have this one and this is where it wants you to have this changes so I'm going to replace this all of this and we are going to have this one okay so yeah now there are other changes that we need to do we'll do that later okay and after that we do next console okay right now we're going to add another app right now and that would be our Android app now for Android we also need to find this uh package name now for Android to find the packaging image pretty straightforward so let's come inside this inside Main and then androidmanifest.xml over here now we are going to copy this one from here and then we are going to put it here all right and here we can also give it you learning uh app I think that was iOS name anyway so we need to download it and here it says that after downloading we need to have this app inside app folder we need to put it inside app folder it could be Android app folder so I'm going to open this up and then over here you see Android app so I'm going to drag and drop inside this okay and we need to click on this okay so the file is there and then we are going to continue like this there are a few other properties that we need to change first we need to go to our build project and build that Gradle file and these are the settings we need to do in general these are all defaults so I'm going to only copy this one so we need to go to Project build.gradle file now over here this is our project Android project and build.gradle so I'm going to open that up and then these options are actually here so you don't need to manually add anything and as always here these are the options so the only thing we need to do inside this dependencies and that's what it was saying so bottom and top are already there even though it says you should go ahead and copy but these are all there so we don't need to we just copy this one the class path all right and then I'm going to put it here okay so that's the first step and then over here it says that the project app module build Gradle so we also need to find that one and that in that case I'm going to copy this one Android application okay let's go ahead and find it so this should be a new Builder Gradle file that should be inside this app and this one okay now there are a few places that we need to change okay the first one it says that go ahead and copy this one where you add com dot Android application now in our case actually is already added but of course it's added as a plugin because we are in flutter so that's the thing and then it says that we should go ahead and add this one so I'm going to copy this and put it here below it and instead of ID we're gonna just say this one okay all right but if you use CLI to do that it does everything for you you don't need to really do this manually but CLI is not well configured for everyone with Mac it works very well with Windows it might have problem now over here I'm going to copy this one so and we need to put it in the dependencies section let's go ahead and do that where is our dependencies okay right here okay now with this our configuration should be done and I'm going to do next next okay so with this we are ready over here and one more thing before we leave this thing now here we need to work on this authentication tab and then get started all right so since we are doing email and password login we need to enable that here you enable um so we don't do that so we just enable this one okay so now I would be able to log in using our email and password anyway so I'm going to close this we don't need this anymore we need to come back to this one a little later so uh here we are okay great so what we need to do we need to connect this one connect this one somehow to our one of our UI and then from there we need to call this function where it says handle sign in and as we call of course we need to work on this build context as well we need to send context and based on that we'll use this one anyway so we want to run our app and test it that Firebase whether it works or not even before really logging in whether we can connect with Firebase or not to be able to do that first to go ahead in your main.dart and have this two lines and with this you'll be able to test your Firebase connection and in general without doing anything else right before even changing any kind of code about Firebase if you have this section in your code and make sure that your import Firebase core Library or the package actually then runny wrap and then it should be going okay all right now I did this one and after that I also made a change over here I wanted to have this class path right at the top okay this one so this is our Android build Gradle which is this file okay come to this file previously we put it at the bottom and you should put it at the top over here all right okay yeah so do that and after that have this code over here and then go ahead and run and I ran the program and I got this issue so I think you'll also get the same one and it says that go to your Android app buildgradle and here change the minimum SDK to 19. now it's asking us to go to Android buildgrade over here this file which is inside app directory and inside that it wants us to change the minimum sdq version over here we want to have 19. as it suggested and we also see that we have new errors over here as we expected now there are a few other things that we need to work on uh well one of the things that I can see from this error so it says that you should enable multi-desk support yeah let's do that in general you enable multi-disc support inside this default config file which is right inside this app build Gradle here you do like this multi multi multi-desk enabled true hopefully I spelled it correctly and then run it and we'll see how it goes and this time looks like it's compiling well so let's go ahead and check our app uh the one that we have designed so far and right now of course we are in Android Studio all right and looks like it is here and as you can see it showed up and like this okay and uh yeah so that's what we have so far and so far it's working and let's see um okay all right so I just went back and I will start it one more time it should be well right now and uh let me open it up from here you're learning okay great yes we do see that we have this problem over here so yes we also need to take care of that all right so far so good all right so next section is about iOS because we need to work on this iOS application where it didn't run previously so I'm going to stop this one over here and then I'm going to choose this file okay and we'll see how it goes uh yes and we still see that it says we have some error now over here on the terminal um I'm gonna go to iOS folder and here it's a pod install right now it's going to install I think Firebase dependencies uh because we had those things we just installed as a plugin earlier now let's go ahead and check on this and we'll see whether it works or not okay and so far we are good over here and we didn't have any issues looks like um okay fine now in that case we can run it one more time okay and it ran on iOS so it which means that on our main.dart file over here we didn't have any problem as we run it from IOS as well all right great and so this is the time actually we test our app with Firebase and we do it a little bit differently but anyway the first thing we want to do is to uh come to this main.dart over here and inside this we're gonna inject our sign-in block the one that we created just now so here we do block provider and then uh well we don't have to create them so early so I am just gonna have to use the default property over here and here I'm gonna pass context and then after that we'll after that we'll have our block over here so what's our block name so the block name is sign in Block sign in sign in Block this one okay great make sure that you import it at the top sign in Block okay sign in all right sign in Block okay great so it is here ready and now we need to come to our signing class over here and there and so this will have this container now we need to wrap this container around block Builder widget because from this is the place where we'll be playing with block context and passing the context so here we do block provider sorry block Builder remember we use block Builder to access that context though that's been created for us so here we need to pass a sign in sign in Block as well as sign in State the one that we had and right after this we'll have this block Builder and then we'll have this on and insert this as usual we have to pass the context and the state object and then we return and then we put what we cut early like this okay so now with this one more time go ahead and restore it okay all right we're good let's click on this and we see here we are okay great so over here we have this method some over here this widgets actually we built now if you see this text field actually this text field over here has a on tap event inside if you come over here there's a text field all right now actually it doesn't have on tap it is unchanged I think this one all right and we need to work with this unchanged in general you have to have a function over here where you save the changed value now for us is going to be something that being passed down from here now what is it so now over here we are going to pass down a function and the function would be value over here it'll take an argument as a value and insert this over here we'll have context dot read and then here we do sign in Block and after that over here we need to we need to add events add and that so inside this we're going to add our event what is our event so over here this is an email event email event and then inside this we pass value that value would be actually our email value okay and after that we return like this but of course will have an issue over here well first thing we need to come over here I'm going to come back to that very soon but to get rid of this error over here we need to do one thing so we'll also have to have a function over here because we are passing a function and in general when you pass function you want to do like this void function and then your function name all right but in our case we're also pass in data so that's a string value we have to have this one and now if you come over here this error should be gone or most probably we also need to import this one now we're going to copy this and put it over here as well and then over here we're gonna have to have this one but this time instead of email and we're gonna pass password all right so as we come over here go over there and then the function is actually passed down as you can see over here and that passed down function we're gonna use inside this unchanged well if you didn't have unchanged inside this text field go ahead and write unchanged and then here you have to have a value and after that here it will have your function so this one and inside this you need to pass the value as well okay and here you need to make sure that it's not null so that's how it works and that's how you're gonna pass value so with this first we are passing a function and the function actually has to grab value so of course when from here from this perspective we are not passing anything but actually when it's arrived and when it becomes reactive it has to grab a value inside the function so that's the value we are giving why grabbing actually that's the value we are grabbing and once we grab the value over here you can see that we trigger an event what and what is this event the event is either we are passing our email or password because over here this unchanged method this is a callback function it gets triggered every time you type or do things now of course we are calling this function over here twice this widget actually not function so each of them they have different function that we are passing one is passing password the other one is value so what happens over here when we come over here and one we are typing done each of them will have a different value stored over here and that's stored value because it's a callback function eventually would trigger an event over here because it's a callback function it would get cold inside whatever is inside this that event or that function would get called so in our case an event is getting cold as the event is getting cold so over here for the email as we know that we are passing an email so this event receives email and as this event receives email this is what I was telling you early over here we can grab that value because this is remember this is an email event which is connected with this class and we know this class receives email event so this is the Handler the Handler can receive that event that's how block is designed if you ask why how it can well this is how it is designed so if you pass some value to it it can pass that value down to this Handover and a Handler can grab that since we are passing an email to it so we get that value and we assign that value over here so that's how it works okay another same for this password event over here by the way there is a type over it's not type of mistake it should be password because we are dealing with password events so we need to change password not email so hopefully it should make sense so we are passing a callback function but this gets triggered after we do things and as it gets triggered it add events as it add events it adds value to this email class filled email event fields and eventually in blocks over here those value you can grab that and that's how it works beautiful all right okay so that's the first thing that we do and actually what we could do right now let's go ahead and see if we could restart or not and let's go ahead and click over here and let's get started and actually now if you come over here inside this events and so there's blocks actually it'll be able to print value I believe so here what are you gonna do my email is event well here event dot email okay right now here we're gonna do print my password is over here event dot password event dot password that's how it works all right and first I'm going to type in here and we'll see you see that as I'm typing in an event is getting triggered and it's being added and each time it is being added of course over here you see that we are copying with so in this case maybe we're just changing email so it changes the get the value change it and returns us a new object and that's how it works you keep typing oh sorry not here here a.com and beautiful see and that's how block works here in our case and this should be better example when you type in and you pass an event and then it works over here okay and that's beautiful okay and the same thing we could do over here as well if you type in password like one two three as you can see so it becomes a reactive but of course we don't have this on tap event if we tap it nothing's gonna happen because well uh we don't have the method but after this we are sure one thing that as a type in events gets triggered and state changes that means that those values in the state they are saved which means that when we come over here we'll be able to grab them when you click on button because the states are saved and I can prove that you can put one more M over here and you see it saved the earlier State and added a new M over here and over here you can do whatever you want you see the state is being saved every time you're typing in there's nothing to do with the password you can type in 4 4 and you'll see that it is over here so what does it mean it means that as we're working our step is state is being saved that means that when I click on this button I'll be able to grab all this value and if I can grab them that means that I'm going to be able to hold all the data and send it to the backend server and it's beautiful

Channel: dbestech

Views: 93,258

Keywords: flutter app development full course, flutter app development tutorial for beginners, flutter app development for free, flutter tutorial for beginners, flutter bloc state management, flutter tutorial, flutter tutorial 2023, flutter complete course, flutter course for free, flutter course free, flutter mobile app development

Id: fD7JL4Q5-Bk

Length: 275min 26sec (16526 seconds)

Published: Fri Apr 07 2023