#Google's Flutter Tutorial - Easy State Management using Providers in Flutter (coderzheaven.com)

hello and welcome back to on the flutter tutorial in this video we will see how to easily manage state using Providence multi providers change notify providers and consumers okay so let's start this is my main hotel where I have set the home as an empty container with a white background okay now let's go ahead and create some screens so let me create a new file home screen door dot import the material package and class home screen so this is going to be a stateless Whichard so this does not hold a state of its own but it does have a pull method so a scaffold with dhaba the title and the container with child a column okay so we will add children later so let me go to the main door tar file and set the home screen as our home okay we start that okay yeah so that should be returned all right so that's our home screen now let's create a shopping list for this demo so for that I'm gonna need a new screen so let me take a copy of the home screen and rename it to add item screen okay now let's go to the home screen and add an icon button in the kaabah so that's a plus button so clicking on the plus button will navigate to the hand item screen and navigator dot push with the context and a new material page route to take the Builder and we need to return the screen which we are going to navigate to okay so that's not had item screen all right now let me set it to a full screen dialog so first thing dialogue to true okay so that's navigating okay so what we are going to do is we will add a hitch field and a button in the add item screen and by clicking on the button it will get the data from the text field and send it back to the home screen where we will add that data to El list okay so let's add the text field and setting a Content padding to 15 and the in text I'm going to say item name and we will also need a button so a race button okay so let me create a text editing controller for the text field okay so controller is equal to item name controller okay and one press with a button you're going to check if the text is empty then we are going to return otherwise we will just close the screen so for that now we'll get a dot pop with context okay so right now we are not sending the data is just closing the screen okay so that's working all right okay I have a warning here okay I need to set the text editing controller to final because it's a stateless widget right okay so the warning is gone now to get the item name and send it back to the home screen I'm gonna need a model class so I am naming it item dot dot with class item and string item name so I'm keeping it as simple as possible with a constructor that accepts the item name all right and I'm gonna create one more class I'm gonna name it item add notifier I'll tell you what this class is going to do okay so let me import the material package and the item dot dot file so class item and notifier so this is going to hold the list of items so initially it is empty and we will write a method add item that is going to accept the item name and add it to the list so item is equal to new item with item name and add that value to the list all right okay now let's go to the home screen not not the home screen we will need the add item screen so so what we are gonna do is we will need something like this so item add notifier is equal to new item add modifier and item and notify dot add item with a value from the text field right but there is no bill to send it back to the home screen and set the stayed in the home screen right so let's remove this and we will do it in a different way with the help of providers so we need to add the package provider so let me check that so we will need only this package they provide a package so make sure to get the latest version so right now it's 4.0.4 okay so once you have added it called flutter packages get that will download the packages and add it to the project alright so once you have done that go to your notify class and extend change notifier and don't forget to call and notify listeners okay so the notify listeners is going to notify us about the data changes but we don't have a listen I get right in our case the homescreen need to listen to it correct so what we are going to do is we will wrap the home screen with change notify provider so that's going to take a builder and we need to return the proper model here they notify here ok and so it will be our home screen right restart that but I have done something wrong here and I will show you what it is and how to solve it ok so so we need to send the data from an item screen right so let's go to the hand item screen so let's let me open it ok so here from here we need to send the data back to the home screen right so for that we need the provider class and I'm going to call provider dot off so let me import the provider first so import provider dot dot all right then call provide a dot of context and here we need to send the proper notify class ok then we will have access to all our methods in that class so add item with the text field data and that's going to notify the listeners and that will come here but I have an issue here I think the build my third they build a property is deprecated so add the create property and return the item and notifier okay alright so the home screen need to consume it right so for that let's import the provider in the home screen and go to the pill method and add a widget called consumer and make sure you add the right notifier here and the filter property will have the context and the second parameter is what we are interested in and third parameter we're just ignoring it so that's a child which can be used for optimization purposes okay so let's go down a builder so a list view dot builder from here and the item builder will have the context and the index okay so we need to return the list view row here so return so I'm going to return a pad immediate okay and with the padding edge in sense at all 15 D child which is a text with value so we have the item add not fair or the--there so that will be item and not fair dot we have the item list of index dot item name right okay all right now let me sit some style with the font size of 20 and color black okay now let's open the add item screen okay all right so we are sending the data from here that's going to notify the listeners and our home screen will consume it right so that's a flow so let's go to the home screen again and see what happens there so the data will go to the home screen and the consumer widget will consume it so I have I didn't set the ID account here so let me set it so I don't and not if I dot item less dot length right so that's going to set the data in the ListView okay so let's run the app and see if that's working so I had an item here okay so it's not navigating back so let's see what is the error here okay so let's clear the console and try to restart the app and try again okay so it's saying set the listen to false okay let's try that first so listen false okay all right make a 1 ok still there is some issue so here is the real issue so it's same ensure the provider IQ might not occur here is an ancestor of this add item screen widget right we have already wrapped the home screen with the change notify provider right but we have not wrapped the hand item screen with the changed auto care provider all right so it's complaining that so you can see the Hat item screen he is not a descendant of the home screen it's just navigating from the home screen the Hat item screen is a descendant of the metal lab the route app right so this is a common mistake so make sure you don't do this after watching this video so we are going to fix it by wrapping the material widget which is a root widget with the teens notify provider okay so I'm gonna remove this widget and wrap the material widget with the change notify provider and you need to have the create property and return the item add notify from here okay okay so that's it so let's try again alright restart the app alright so everything is set click the Add button item 1 add item so you can see now we have received the data in the home screen and the consumer widget is concerned in it and updating the list right perfect now for example let's say we have lots of screens in our applications and we want to update this shopping list from a screen deep inside our application okay so let's simulate that so let me add one more button to the add item screen ok and on click off the button I'm gonna open the add item screen again ok so okay we need to navigate to the add item screen again so let me go to the home screen and get the navigation code copy it and paste it ok so this is going to open the add item screen in a team okay so let's assume we are updating the data from the third screen so if you go to the home screen you'll see that item 3 has been added so let me open some more strains okay and let me add I jump for and click on add item and item five okay I'm close all the screens you can see that it's been added to the shopping list right so that means you can update data from anywhere to the application and wherever you have consumers with a proper notify a model is going to consume it and you can do whatever you want with the data okay so that was easy now in a real-world application you may have more than one not a model right so let's say I want to update the shop name okay so for that I need another nautical model right so let me create a new file so I'm going to copy the item and notifier and create a new file okay I'm gonna name it shop name notifier so here I just need the shop name so string sharpening initialize it to empty and the method update shop name that's going to accept the shop name as parameter and set the shop name and call notify listeners and let's write the consumer for this notifier so in the home screen below the list view I'm gonna write another consumer with a shop name not fire with the Builder context and second parameter is a shop name notifier and we are gonna return just a text widget with a value shop name shop name not a dot shop name right okay so we can ignore the error for now because we have not completed it yet right so let's go to the an item screen and add one more text field and the controller let's create a new one I'm gonna name it shop name controller alright now we need to have a button so let me add one more button and I'm going to say update shop and that will be shop named nautical and update shop name with the value from the text field right okay all right now let's go to the main door dot file and we need to add one more notify here right so how do we do it so this can be achieved with the help of nu which had called multi providers so that's going to accept a list of providers okay so let me copy that and gonna remove everything from inside the multi provider okay and the providers let's add the first provider so that so the child will be a mom with your budget right okay okay and the first provider is our item and notifier right so build a context and return the item and notify so similarly we need to return the shop name notify okay perfect now the error is gone and also make sure you set the proper type or each notify provider so the first one is the item and notify and second one is the shop name notify okay we start the app let's go to the add item screen and item 1 okay that's good now let's update the shop name so let me say McDonald's and update shop ok let me check what is the issue here ok there is no error so that must be some logical mistake ok ok so I the controller is wrong the textfield controller is founded by taking the wrong control ok now let's open the item screen again and item screen again and update the shop name ok you can see that the shop name has been updated ok now let's try opening flow screens and update the shop name ok so you can see that now it's updated to shop - okay so it's updating the same way as we did in the shopping list right so so from anywhere in your application you can do this so wherever you have the proper consumer that's going to consume it and do accordingly so make sure you have added the proper change notify provider in the tree so if it is added to the rule it should be available to the whole application ok so so you can see that you have not used said state in our application and we are using provider to change the values in the UI ok so that one is is that so whenever you call the provider to update a widget probably that consumer which it will be updated and note the hole which our tree in that way ok so that's a good performance improvement as well since a hole with the tree is not rebuilt okay so providers are an easy way to manage state in your whole Africa without much complexity in the code okay so that's all in this video if you liked the video please don't forget to Like subscribe and share hit up a like and for notifications about my new videos thanks for watching and see you in the next video until then bye

Channel: Mobile Programmer

Views: 13,962

Keywords: flutter tutorials, flutter state management, flutter examples, flutter provider tutorial, flutter provider consumer, flutter provider vs bloc, flutter state management redux, flutter provider package, flutter provider architecture, flutter android tutorial, flutter ios tutorial, flutter google, flutter dart, google dart, flutter learn

Id: lR4abtROTIc

Length: 21min 51sec (1311 seconds)

Published: Sun Mar 15 2020