Provider state management in flutter with Todo Application

hi friends I'm mother from easy approach and this video we're gonna discuss provider estate management and flutter and we'll discuss what actually provider is why we need it and how can the implement provider estate management to make a simple application so suppose we have an application that you can see on the screen and that's actually showing the user information on the screen and the application definitely has a data model as well which is in our case a user model and the current screen of this application is using this user model to show the details of the user but suppose if one of the feeds from this user model gets scenes like job title would it change the UI the simple answer is no because in flutter you cannot directly change or mutate the UI what you need to do you need to call this set a state and in the set state you need to change the data and that would change the UI but using this sad state is not a good idea because as the application grows you need to use this sad state so many times manually and second thing the data model is shared between many screens or different part of the UI so you need to explicitly pass the data from one widget to another or from one part to another manually and that becomes so horrific as the application grows so there exists a better way than this what you can do you can make your user model a change notifier which is from provider and then you don't need to call the steady state anymore because if something is a change modifier and some of its fields gets changed what you can do it you just simply call your diff our listeners and it will notify all the listeners of this user model it means it will modify all those part of the screen they're actually using this user model and all those parts will get Sri render to show the latest result but like but that's not the only difference between provider and the normal sad state there's one more thing that in change notify in provider actually you can share the change notifier very easily without without doing so many worry and as I say in the that estate when whenever you want to share at the model between different screens you need to share it why constructor button change notifier you can easily share the user model or the data model which you want to share without doing so many code so this is why we need to use this provider and it's too simple to implement and but you effective for the simple application so that's all from the detail now we will implement the provider and we'll make our to-do application so that we can have a better understanding so now let's move forward let's take a look at the UI and the project structure first I have used here a scaffold widget and in the scaffold widget I have by user navbar and in a body I have used column widget for layouting and in the column I have two widget the first one is a column visit again which is for which is to show this clock and it's just a hard-coded clock and this is actually the main thing an expanded container which actually contains a list view and this list view will show all the tasks that been inserted by the user but for now it's just showing a constant value here I have given two item count one initially and some constants the constant data that's why it's showing a constant task here but it will change it later so what we need to do actually whenever the user will click on this Add button we firstly need to add the task and to our to do so this that's the first thing what we need to do and the second thing is whenever the task would be inserted into the task list we need to update the UI accordingly here we need to add the task that's been added by and that's been added by a user and show in this list view so basically we need to do two things first to add the task into task list and second to show the changes so here I have make two models as well to save the time the first one is the task model it just a single ice it just contain a single test so here I have two fields the first one is a task title and the second one is the detail of the task so these are two string fields that I have in my task model and there are two getters as well and there is another data model which I have made here and that's that to do model and what it does it contains a task list which will in which all the tasks that's given by the user will be inserted in this task list and I have made a Chad task list method as well which will take tasks from the input from the user and it will add all the tasks that's been given by user in this task list so these are this these are all from the data from the project is structured but one more thing I have added dependencies at the spent dependency as well to use the provider you need to add this provider cap three-point 1.0 + 1 so these are all from the project structure and the dependency that we need to act so now let's move forward and do our faust hang this to do model is actually being changed by the user because whenever the user will insert a task this to do model will ever get changed so what you need to do you need to make it change notify as we discussed while discussing the provider now what we need to do whenever the user will give us it has to add we need to add the task in this task list and notify all the listeners so that all the parts of the UI which is in our case is just a ListView will get rerender to show the latest result so we will just take the task from the user but now as to save the dam I am NOT taking the test from the imp on the user and just making a constant task and and just added into a chart list so what i'm doing here i'm creating a task model with some random values here you first need to give the title so i am giving here title and I'm here giving at the task list count [Music] [Music] sorry it's Lent and the second thing that we need to give is the task detail so this is so these are just the constant or the random values it will just say create a sequence of tasks 1-2-3 and we'll just add this task model into our task list how we can do we just call task list dot add and in here we'll pass this task model now the main thing has come now we need to notify the listeners because we have added one task into our task model into our to-do model so how can we do it just simply call notify listeners and it will notify all the listeners all the UI parts which is in our case is just a list view and it will at the list view will get rerender and will show the latest result so go in main door dark cell and now what you need to do firstly we need to make this button functional and whenever they use / click on this Add button we need to access this add task and list method I need to ask add the test and after that we'll work on on the changes that we need to show here so now firstly we need to add a task in the task list when the user will click on this Add button so how can you access your to-do model list which is a change modifier in your main door darts out to do so you can use a change to notify provider change notify provider actually provides you the instance of your change notifier where you want to access it so we need to access at the change notify provider to add the task into our to-do model in this main door dart file so what we'll do we'll simply wrap this column visit will simply grab this homepage visit to a change notify provider so just go here at the top and call change modifier provider and it will provide you your change notify to the descendant of the child that you will give here so what I'm doing here firstly firstly you need to call this builder and in here you need to pass the contact context and you just return the instance of your to-do model which is a change notified and now in the child you just paste I you just give your my home page and what it will do it will do it will provide this scenes notifier which is a tool model here you have given to the to this to the child of the change modifier provider so you can access this change notifier provider in this whole widget tree so now we need to add a task into our to-do model here whenever the user will click on this Add button so I am going here where I have defined the button here I have the button and in the on press I'll access this to do model and I'll add details into the list so to do so you'll just simply call here provider dot off in order to get your change or defer here and you need to pass here the type of your change modifier as well to do model and now you can access all the functions and all the fields that are available in here and your tenure to do model so now we need we just need to call the add task unless matter to add the test into the test and to the test list so we have done the first part we have added the task whenever the user will click on this head button we have will add the task into the task list now we need to do the second part we need to make changes accordingly whenever the task being inserted being inserted into the task list we need to make the changes here into task list so what you'll do you'll just wrap the changeable thing the thing individual actually which is being changed after the after the change modifier change you just wrap this widget into consumer rigid which is actually from provider and you pass here the type of your change notified as well and you'll just simply make hair a builder and in the Builder you have three things the first one is a context and the second thing is your to do which is the latest instance of your to do model and the third thing is a child now you'll just simply return here your list view so this is how you need to this is what you need to do in order to make changes in our list view now what it will do whenever the data in the change notifier gets updated it will rebuild all the things that's available in the Builder and here you have the context like that you have in every build in every builder and you have a to do it is the latest instance of your to do model after the changing and this child is just for optimization we are not using this now what we need to do we need to change the ListView data according to our to do so firstly what I'm I'm giving the to-do item count I'm giving the item count to to-do list actually hand passing here the size of um yeah here I have a task list and as just pass here the length now what we need to do we need to change the tax as well so I'm just simply writing here to do door task list and [Music] here I need to access the current task by passing your index and now you can access the title and detail now I'll just pass here the title and in here and it'll pass the detail now let's run this file now the application has run successfully now we will add the task into our task list it should add the task and show here on the screen so you can see here the add the newly added task here now we can add the number of tasks that we want to add so this is it from this video so we have learned the provider state management and we have seen three things basically first we need to make a change notifier of the data which actually being changed and the second thing we need to access this change notifier to call the to update the change notifier like we have added here by calling this add task and list and after that whenever the task whenever some data has been changed whatever the change notifier has been changed you need to call the notify listeners and it will notify all the listeners which actually observing the changes in this change mode effect and which is in our case is this part the consumer part so this consumer part is actually the part that's been observing that's actually observing the changes in the change notify and when whatever in the Builder is in whatever is in the Builder gets a rebuild gets a rebuild or gets rerender whenever the change or the fire exchange and this to do is the latest to do instance so this is how you can use a provider to make simple applications and flutter it's quite simple but effective and you can make so many application by using this simple technique so this is it from this video if you liked the video please share please subscribe my channel and share the video thank you for watching

Channel: Easy Approach

Views: 82,915

Keywords: flutter, state management, flutter state management, flutter tutorial, flutter redux, flutter state, flutter provider, provider, flutter todo application, flutter state management redux, flutter state manegment, flutter redux tutorial, flutter ui, flutter sdk, provider flutter, flutter widgets, flutter ui design, flutter todo app, flutter development, learn flutter, flutter io, flutter tutorials, flutter app, flutter with redux, flutter bloc

Id: Md_zBZgVyJo

Length: 15min 13sec (913 seconds)

Published: Sun Nov 24 2019