MVVM Structure in flutter by using Provider | Unlock the Power of MVVM Structure in Flutter NOW!

hey friends welcome to my channel again the topic is the is discuss about the structures what is the structures and structure you know is the most important thing without this not supposed to go forward any other languages or with the dot or with the flutter or or with any other framework so uh the today topic is the structure is most important video so uh please keep for with till end and it will be very helpful to you to understand about the structure in the FL we are here to discuss about the two uh most common models model view controller and second is the model view and then view model why we are calling the model view controller model view and view model so basically we use two packages here uh for that purpose view model view controller we are using just gex we are just using the gex package and uh for that purpose we are using the provider here so basically uh the model view model and view this this structure and this structure is a little bit different with the functionality to to interact with the model Let Me Clear in detail so a model basically here in the gex or in the view model controller model is basically interact with the controller and model also interact with the view and in the controller also interact with the view okay uh you can say loophole because the controller is also communicating with the view and this controller is also communicating with the model so these controller is simultaneously communicate with the view and the model uh takes the model and communicate with the view so if we we are talking about the view and the model is getting uh written the value written the model to The View and controller also WR The View so these model and in controllers these two parts these two parts returning the values to the same uh Viewpoint MVP model we you can say this is the loophole if you are going to the large applications so you you have to follow this pattern because you have to large data to handle throughout the app so uh this model is basically interact with the view model and then the uh model view and then view model model view basically interact once at once uh with the view and model is also inct with the one simp view view model so we are taking the input in the views and in the gex or in the MVC program we are getting the inputs into into the controller and controller Returns the value to The View and then model and then uh we are returning the model into the controller and we are just calling the model into the controller okay so uh in the in the MVP mvvm model we are just taking the input Into The View using the model into the view or calling the model into the view before using this model into the view we are just put the values put the values from this model put the values from this model and we are calling basically uh suppose that we have the g g API and uh we are just creating the model according to this API so we are just calling the API into the view model and then call the model and put the all these values into the model and this model is calling by the view this model is written the basically a value values to the view which we want to show to the user let me explain I can show you the this part of the uh image and this part we we will discuss in the in the later videos okay so now we are just going to the MVP pattern Let's see we have three classes here what the three classes we have the product controller we have the product model and we have the product view okay so I am defining here here model view and view model view model is basically a product controller okay so first of all we are just going to the view model view model is basically this this is the view models okay into the view model we have the product count dot do product count do do VI okay so in the file we are just creating the uh product list here and this is the this is my API I just calling and this is my API I'm just calling this a base URL base URL I'm getting from the EnV file this is the way to get the base Ur from the EnV so I'm just getting and uh if the status C is 200 and I'm returning the data uh the response okay so uh we are just getting the response and save the response into the data and this product data is basically we are on this product data we are map the and we are map another list which into uh into another list we are just calling the model and this model we are just put the values which we have got from the API okay which we have got from the API we are just calling the model and into the map function map function is basically what it does it it replicates the list or uh it creates another list uh based on your response okay so we are just creating the list and uh product data product data do map then product data and then into the product data this is the function this is the call back functions we are calling as a parameter into the map because the map takes the functions call by functions okay so then we are just returning the product model this is the model we are we have the model this is the product product is the product model OKAY product model what it what it is what what it can be it it should be in the ID uh in the title price description category and just this all the values of the structor we need okay so I am just returning here ID title price descriptions category and image okay so these uh we are just we are just putting these data into the product model clear about it what I am saying this data and this product data is basically we are getting from the API and this product data ID we are just putting into the this model ID and this model ID we I'm just calling the this uh model and putting the ID title price descriptions category and image uh which we are getting from the API okay so this this is the product model and now this part is complete uh sorry this part is complete your part is complete and we are just moving to the part of the model view now the the view view model called the API and put the result into the model view model basically this is the view model view model and this view model call this API and this API the results into the product data map the we map another list and uh into the map function calling the model and this model we are just putting the values according to the model we have designed the next part what the next part is the next part is basically the product view okay now the things has clear we have just put the data into the model okay we have put all Thea now the turn is what theun what what the remaining part model view part okay so the remaining part is view model part okay so so uh we are just going to the to fetch the data um from the model okay so now we have an and this widget we are just creating the state and this state is basically calling the API function which is product list and into the product list we are just filling out the uh model by getting the response from the API okay so uh and then is then we have the we have the return and uh we we are just have the consumer consumer is basically what the consumer does Consumer is basically a vet which Returns the state of which return the required state which required State you are just mentioned here this consumer I need to get the pro product provider this product provider class which which functions I am calling from here so this should be same with this okay so I just uh consumed the product provider consume and then this consumer needs a builder and this builder needs a function call function and then build uh and then in this and this Builder functions takes three steps three uh arguments first is a context you are building from and this is a context you are building and uh this is the value or this is the response um or state you can say this is the state and which which returning from product product provider and then this is the wi so we we don't need this so we are just mentioning here we are just mentioning here so we don't need this we just need the context and then the state here okay so if you print the value so you have to get all all the data from the uh from the API okay so that remove that this is not necessary okay I am just creating the straight if the if if it's empty so this is this a kind of loader if this product is empty so loader loader will be appear and if this is not uh and the the product list is not empty so the list view Builder will appear here Will be in action okay so uh this is basically what this is the semicolon we are mentioning is the straight this is semicolon is basically a straight and straight do products do length product what is the product product is the straet uh product is defined in the state what is the state state is the product provider I am just uh creating the a variable list type variable and to the product provider okay so what is the next thing uh a string URL is basically getting the we are just getting the image URL so product products has the access of the model class just just just hold down you can see this product I'm s just saving this product model into this products okay this list has a products and this list has a product and this model I am just saving this model into this products so if I if I have if I want to get the data so I need to access this products list it will automatically access this all the things with all the stuff okay so into this part we are uh I am just getting the product index and an image okay so this is the list and you you have uh you are just you are just know if the data enter the list we just need to the uh to get the index index by index we are getting the data from the list okay so into the list we have then object so this this I can I can design for you this list I can design for you let's suppose we have a list products okay so it has some type of data like this okay so uh if I just copy it and paste it and then copy okay so this product is basically you have the list of type of product this list is similar with this list you are just putting into the model okay so basically you are just creating the model you are just putting the values in the model it's it's like that it's like that so if you get the list you use this square brackets to access the index of the list okay if you have the curly presses so we need to uh access dot dot we we have to if you want to access this image you you need to use the dot dot operator okay so if you want to need to access this index so you need to uh Define this Ty this thing okay clear it I hope this this quite clear it's I know this is so so boring thing but uh uh I this is my job to clear all the things for you guys so I hope this is clear for you okay so so we are just getting this product list it is it is very similar to this kind of list okay so I'm just getting this this image from this type of list okay quite clear then then we are just put filling out the all the data like that uh we can I can I can see you okay title descriptions title descriptions URL and all the all the stuff we I just getting from from this model OKAY from this model I am just getting all the stuff like that products this basically we have the model and this model on every index we are just getting the title on every index of the model we are just getting the title okay so as similar uh we uh we have the model into the products and every single uh every single model index we are just creting descriptions okay so I hope these all the stuff these all the things you are getting much more and uh in the next video we are just move to the gex functions and moves to the uh MVC pattern and uh we will deeply dive into the MVC model then uh so that we can understand better pattern it is very useful in the to get the job uh to from any into the into into an industry so this is very useful for us and this is very important to this is very important concept for us okay so thank you so much for subscribing if this video is very helpful for you so please like me thumbs up and share it and don't forget for two subscriber we will uh I will get I will get more to you so don't don't forget to subscribe okay thank you so much

Channel: BugsBunny

Views: 444

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: akQIzYHSiEE

Length: 18min 40sec (1120 seconds)

Published: Fri Oct 13 2023