Unlock Full Potential of Flutter with MVC Architecture | Mastering MVC in Flutter The Ultimate Guide

welcome to another video so the today topic is to describe the structure of the MVC n structure what is the NY structure in the flutter and how we can interact with the MC structure so in the second last video we I just described the MVB M pattern by using the provider section this section has been done in the last video we have done it okay so in this video we are just going to about to discuss the gex structure and then uh by the using of the gex package we will describe the MVC pattern so what is the difference between that the first difference is that uh we have just input into the views and in the gex we just uh input into the controller what does it means it means that the we are just putting the all the informations we are just gaing from the users we are we just put into the views and then view into view uh just go to the view model to rendering or to uh to performing some jobs on it or authenticate or or something like that because we are just calling the API into the view model so that this data will be authenticated by this model and this model is uh this view this controller is also send the uh data to the model uh you can see simultaneously this model uh rendering the data and Performing some jobs on it and update the model and update the view as a at a single clock or simultaneously okay so uh in the in the gex what it does perform it performs basically uh models controller and view you can see you have to know about that what is the what is the difference between okay so we are just putting on the gex gex what uh gex is basically we are just using for those purposes uh we are just uh small F we just moving on the small apps or like authentications apps in the the GX we are just used to the MVC structure and in this MVC structure we have the three modules like that and uh we have the view controller and then the portal what it does the difference between you you can say there's input we are taking in the to the controller and the the input we are taking in the controller as I as I told you uh the about the provider okay so in the gex we are just putting the input into the controller what does it means it justes means it it it is very simple it is means we are just taking the data into the controller and rendering the controller and rendering performing the data into the controller and then update the model and then update the view both are doing same jobs it controllers update the model same time and update the view same time this in this model this view model update the model same time and update the view same time but the difference is the Performing the jobs and getting the data what it means uh this means that uh we are just putting the taking the input from the user into the controller same time same time on the on the same time uh it's performing the API calling right now okay so in this model this model is very pretty fast provider is pretty fast so in this model we are taking the user inputs all the user inputs user inputs belongs to the um uh text form Fields user belongs to the authentications user field basically belongs to the on button listener on button events it's it's about all the things which belongs to the user UI so user UI related the data is handled by The View and then view uh is sent to the view model then view model is come back to the view view so these this in this controllers handles all the situations single single by single hand okay okay so it it's it's handl all the suu by single hand yeah it's get the input it's strengthen it's uh perform some jobs it's authenticate from the model it's update the model and update the views all the responsibilities of the controller it is but here it is VI model is just not taking the data from the user it just rering the data then and and Performing some jobs and Performing some actions and and then return to the Views and return to the model but in this model this controller takes the input and R bring the whole data and Performing some jobs some operations and then this controller will update the models and then this controller will update the view so this is very time taken because it's a single and it is a single and to perform the jobs but it is we have the two uh two notes here to perform the jobs here okay so this is pretty fast so and so usually we are just moving for the giant size of applications we we must prefer for the MVM pattern for this for this architecture okay so uh in the the small things we are just putting this uh architecture so uh we will we will very uh pretty for that okay uh so the in the Builder in the wiget Builder we have just two different things as as we know now as we know that in the getex we are just take the input from into the controller okay so uh you can see this is a this is an image uh we have the Builder here g g Builder here we have the provide we have the controller basically this is this is the Bic controller not the product provider this basically this is basically a controller here and uh uh similarly we just take we just take the two uh objects here what what it is it is a init and then it is a builder we just uh thly discussed about we are just getting the input into the controller so inet state is just pointed out to the controller you are you are or you have created the state of it okay so this will be point out this controller and in it state is basically refer to the initializing something initializing the controller so uh so you are just navigating to the view model and you are just navigating from one screen to another screen so you will pass the reference to the view but it will automatically call the controller any distate will call the controller first then this Builder view Builder will be performed okay so so uh we are just taking the input automatically into the controller are you getting me I'm just saying that if we are just moving to the from one screen to another screen like uh from product to product retail product basically goes to the product retail View and product reviews what it does it basically calls the uh controller product dail controller of in by the inate inat renders first and it's complete then Builder so it means that the controller runs first controller this controller runs first and then the view this Builder will perform your action okay so if we were talking about the this architecture so what it does it does basically takes the input into the view so don't we need to go get don't we uh need to uh put the in in it uh in action here so we just put the Builder here and then it will done the job for us that's it okay so uh just go for the current code and let's see in the discuss in the Deep so what they are okay so so I just putting the it's it's based on the provider in the second last video I just completed on the provider okay so I am just putting the gex controller gex and then up upget okay so it's uh has been uploaded so so and after that we have just made the changes getex uh and remove the provider and in the main file in the main file we just Pro uh inject the chain Notifier provider so we don't need the injections for the gex so uh dependence injection so we are just removing it and uh by putting the some like that or and we are just remove this provider so we don't need to do anymore with the provider so the main file is okay is the main file is done now the third is your controller file controller file you you notice that we just go with the provider so we are just going with the gex so I am just put the get G Builder here okay so first of all extends and then gex controller and then we have already uh functions in the in the life cycle of the G life cycles we will discuss about the life cycles in the in the future video so uh just just uh just uh uh just remember uh we are we are just calling the on ready function in uh in the gex so it's just called in the life cycles as just life cycles calls okay so onr functions because basically calls when the all the operations were done and then on functions will be performed so then we will remove the change Notifier we don't need to change notify because we are just nor going to the provider so remove this up and we need the update update is basically update the uh update call this API and then after the API calling this will update automatically the state and this state is if this State updates so it will update the view automatically okay so we don't need then uh our our controller has been done and uh we are just going to the product view product view gex here and then in the gex we are just have the gex Builder in the previous in the previous one we are just putting the consumer here you know uh and we have we don't have this and we we have just three parameters like that like that we just have three parameters and the consumers we don't not we don't have the in it so I can see you uh uh provider view this is the last one last class code I just made for you and uh you can see yeah this is this one is this one is okay so we have the product wi you can see in the project provider we just have the consumer and then have the Builder so in the CeX we don't need to the any consumer any provider we just gex has own its Builder so we are just putting the Builder and get the product view or a product provider or it's a controller it's basically a controll class and init the controller class and then the Builder okay so here is a difference between that this is this two lines has as this two lines has a difference okay so our our gex is ready so let's check it out and if have any error okay we don't have any error about we have this warning so

Channel: BugsBunny

Views: 65

Keywords: flutter shared preferences, button, figma tutorial, figma tutorial for beginners, figma tutorial app design, figma, figma for beginners, flutter, flutter ui, figma to flutter, figma ui convert to flutter ui, how, to, create, design, tutorials, basic tutorials, flutter tutorials, flutter for beginners, flutter tutorial for beginners, flutter tutorial, ui design, flutter crash course, routing in flutter, routing, navigation, navigation in flutter, slidable navigation, 100 mystery buttons

Id: BWfVCT-rQPA

Length: 12min 55sec (775 seconds)

Published: Thu Oct 19 2023