Flutter 34: Implementing Provider for state management

uh welcome guys in this video this is the 34th video in this uh where we are going to implement the provider for the State Management so uh provider State Management it is uh recommended by Google as well so mainly uh provide your central point to manage the state and write format uh front end Aussie okay it is used so it has three components provider also has three components so uh before starting that let's go to the provider so a package and provider uh it's I think this is that and yeah that's perfect so this is the provider so you can easily uh read in your native language and I I don't know other languages so I okay so yeah so these are the providers so let's start making this thing so uh you can go through the documentation so in this video we are going to make a simple application in with the help provider okay so uh provider have three components first is change modifier change notify provider and the consumer thing so uh for every screen of flutter application we make a central uh Central Point for uh for managing state which is called change Notifier okay which is just an ordinary task that exchange Notifier graph it contains all this state data that are being used by different part of corresponding screen now if something is changed notified under some of the data gets changed it notifies the framework the screen which is using the change notify need to be rebuilt for an example uh you press the button so change Notifier will modify the screen that the UI has been changed so you have to update the UI also so uh change 25 if you have uh let's uh let's do one thing for the implementation let's consider scenario let's say a person wanted to apply for the voting 14 machine so that uh they have to be above 18 years for both in in country so they have to sim form uh yeah they have to Fair a simple form in which they have the fill that uh what you can see the details all their age that he or the user is eligible for the vote voting criteria or not so the criteria of the Voting is simply 18 years so for that we uh what we are doing it so in our strata application would be a single screen application okay on which there would be a simple form container text field two extra widgets on screen as well one is circle which is let's say green by default but after submitting form if the user is eligible it would turn into let's say uh uh let's say white if it is not applicable it will turn into red okay so and secondly the text widget at the bottom which will show the status that is available it is but that the person is eligible or not so what we are going to do is Let's uh create our application UI so at the left first of all before that let's create a simple form okay so I mean it's uncommented and let's see new file screen dot dot import package sweater material.str ID seconded okay State full widget s t f aithful widget and it let's say screen simply Let's uh asking I don't know what you can say voting let's name it voting let's name it voting will be great so at the voting uh first of all we need a Hardware we need a controller text editing controller so that we can easily verify the age okay so what we are going to do is final age 14 is equal to text editing controller simple okay so at the cons I need a scaffold scaffold SCA scaffold at the scaffold I want a body body will be a container container let's say padding okay padding I think that counts Edge and this dot all this is Extreme so uh if you don't know what does the padding does it will give the space from all the sites like all instances or all from top left bottom right okay so a child will be formed perform child is required let's try this column for that column the column I need a main access alignment to be Center for support see mean access alignment to Center mean access so Center and there's the children I need a container so that uh because I want that yellow or what you can say the circle okay green circle so decoration will be box separation and the shape I want box shape dot Circle and the color I want let's say colors dot let's say nutrient what is uh neutral columns let's see let's search for neutral color and let's um let's think great okay the gray will be great okay great okay it is just a random and search for height and width to be typically okay height will be 50. and breadth will be shipped and this let's uh so after the container I'll just have a simple size box so that we can easily height okay different so here I need a text from field form field the text form field it is required a controller controller will be a voting age voting age and at the decoration I'll have input decoration and the input decoration index is let's say enter your age let's see and I think so that is it in the text form field and say I also need us another font size box after that and I need a container now so that we can easily uh check that okay so let's say container with let's say double dot Infinity it will take almost Hardware put this every width okay double dot Infinity child will be let's say a button flat button is let's say raise the button okay elevated button edit button and the elevated button child will be safe text there can check if can Boot and say color will be blue I first of all it need on pressure on press will be let's say empty right now simple on press and I think so background color will be okay wait a second I limit your button so yeah uh let's it is good so what we're going to do right now so first of all we will uh and I need a text view also text so that we can easily holder we can easily say that yes you are eligible to vote okay so I need a text also so what we're gonna do is I'll have a text and here I'll say input your data or can say that please input our h to check it can go too much and so what I'm going to know is I'll go to the mean and I just wait a second screen so I'll import the screen thing okay uh no no no no nothing okay working I have to change the name is and yes comes and let's run the application in the Chrome uh what we have what we have done till now is simply uh we simply created an UI okay so uh above code is for the eligibility screen without provider okay we have not used any provider till now so we have done that UI part and now we can make the change Notifier against above screen so what we're going to do is we are going to check that if the user is eligible or if the user is not eligible for the voting thing so I think it is running same enter your age check if inward entries input as if you can check if you can go to so uh I'll do one thing I'll just uh debug false all right so at the screen part what we have to do is uh I'll have a eligibility message that eligibility message will be put right here and let's do one thing and at the controller I'll have a string it's eligibility I'll pli LGBT message because let's say thus like 10 apps I'm testing and the Bool is eligible it's false or non non-level so false false let's say you are not eligible till now okay let's see you are uh from the starting you are not eligible so uh I'll create a function void check eligibility legibility wait a second eligibility oh sorry for my uh I'm explaining mistakes I if that age or voting age is greater than equal to 18. except that's greater than equal to 18 I can't Define texture controller okay wait a second uh I think age controller real okay so let's say age is required so we have not get it any age right now okay um I'll do one thing uh let's do this thing the age controller is this and the controller each controller we have already given the texture technical so at the cons to context we have to check that the eligibility criteria so that we can easily see that the person is eligible or not for the voting thing so if the age is greater than 18 let's say uh I'll not say anything let's say a is greater than 80 so age is not defined I'll we will Define it later so uh eligible eligible for voting it uh we have to create a function I'll create a function else not else I'll say that else not eligible not Ali Gibble for voting okay so here is this there are some warning which is showing us that uh eligible is not defined so first what we're going to do is we are going to check that we are going to create that and avoid Ali I'll copy it copy and paste it here void if it is eligible okay so I'll have eligibility message is equals to u r eligible for voting and I'll say is eligible is equal to simple okay till now you have not created any Notifier okay like we have not used any provider things so what we will do is we are going to go to the dependencies or out of this or go to the provider and let's implement it right now copy provider copy and let that dependence part let's put it here so it will automatically get the provider for us let's copy and paste it here so provider does not like that it doesn't matter so uh just give it some time the provider will come here and so it will provide the provider provider key but you know icons or provide equal version solving field with a second copy it write about provider I need a provider thing so do this thing because provider depends on providers words and solving create okay let's resolve this error so what okay uh the issue has been solved so uh there was the very silly issue I can see uh the issue was that the name of the app which you can say that popsback.com the name of that app was provider and the thing which we are overriding or which you can say we are getting the provider also so it has it collided itself so I'll do one thing let me get back to it again so provider and let's say setup of AD and see it is showing me an error at the line 17 the package may not let itself as a dependency so this is the name I if I'll just change the name of that app and let's just set up object and so this is the error so I think naming convention is very very important for this so yeah so uh what we are going to do is is eligible is true so I'll do nothing I'll just say notify listeners and notify no T5 listeners listeners is not defined so I'll we will define it okay so I'll do one thing uh let's say vote for not eligible for voting uh avoid and that's 20. point not eligible for voting and eligibility message will be you are not eligible and is eligible to false you are you are not you are not you are not eligible for voting and impressive to false and notify listeners notify listeners so let's say string eligibility message will be eligibility message so it will be like this this and this and it will be eligibility message I think this is how it is done let's fix it and I think this has happened [Music] and board is eligible to be is eligible okay okay no no no no it has to be like this so we are going to assign that value right now okay so uh what we're going to do is I just do one thing and spring string get eligibility Eli GI eligibility message eligibility message and string or it will be pool L is equal to is eligible so now in the above change Notifier that we have made against the LED eligibility screen has two State data in its first string eligibility message which is showing message after processing the user age and the bull eligibility fly which you can say which is to change the color of the circle status indicator in a change Notifier we made a method called check eligibility which take A's for the parameter and after performing the logic it changes state that is the user is eligible it is eligible for the voting it is not eligible it is not eligible for the vote okay so the most important thing is calling notify listeners whenever you change the state in the change Notifier if you will not call this method the change state would not be reflect in the UI so this method change modifier tells of letter to rebuild this screen which is using the change Notifier okay so uh let's uh learn more about the change modifier provider as we have made the eligibility screen provider against the eligibility screen now we have to connect this provider with this screen or we have to use this providing the eligibility skills for this we have to change Notifier provider a widget that provide the instance for the change notify Let's uh do it practically and then we will understand what is going to happen so I'll do one thing provider is imported so providers okay States and the okay so 3.5 provide eligible screen provider so yeah I'll do one thing uh for this thing which we have created here I'll just put that thing in the next screen or which you can say the class I'll create a class called let's say eligible disk screen provider LED capability screen eligibility screen say screen Dot it have import package automatic Dot and it will have a class eligibility screen provider provider it extends it will change notify change Notifier change modifier the notify listener now you can easily access those things so I'll do one thing I'll just uh string that LGBT message till this thing and let's cut it and let's paste it here yep okay so uh I think that notify distance is this copy I I get so age is greater than zero so I have to let's see let's say age is zero okay so uh end is okay wait a second H is zero so yeah so in the screen part you have created a class and then we are going to extend those things so in the eligibility screen offers you can say the voting screen it extends uh context and it will return the change Notifier provider okay so uh what is going to happen is I uh it will return a scaffold also but before that it will return a change Notifier so I'll do one thing it will uh till the scaffold let's do one thing it will return change notify provider okay and the change with fire provider uh provider we will create an eligibility screen provider Le cheap little screen provider so that whenever the set changes it should reflect it also okay so at the create I'll have a context context and the context will be eligible to screen provider and discount provider and I think this and it need I think it needs a builder also okay it need a child wait a second I think this okay uh I think it need a child really Builder and the Builder I need a builder dot context with this screen and this it will return something it is completely null but we have to return something so it will at the here it will return our scaffold step four yup and the code which we have written in this container body thing which will which will copy here so I'll do one thing I'll just follow those things body scaffold and copy all the control X and Ctrl Y and let's see if there are any errors expected this then don't expect anything like that so let's uh edit our the Circle okay box shape dot Circle we have already created so if color okay so I have to change that color okay so I'll do one thing so that we can easily intend those things so the color part what we can do is remember check provider provider is eligible um okay at the Builder I also need something the context Builder I need wait a second and the child is a consumer is also there form okay at this Square fold it okay and this scaffold yeah in this scaffold I need a consumer and the form the consumer is good and the form is good and the corner I need a okay at the form I think there is something which I have to change so that I can easily access those changes which is going which is going to set so I'll do one thing I'll have a form in the form oh wait a second I'll do anything contains escort from Child and here I need consumer consumer and the consumer it will be uh eligibility scan provider and right there I need this Builder it will have a context comma provider comma side and it will return us the column it will return the column column yep I think that is it okay so uh the column I I'll just do one thing I'll just copy paste all of these things man just don't worry I'll just all we have to do is I'll just copy paste all of these things and control X Ctrl Y and the column it will be deleted so here I do one thing I will have a provider now provider Jeff provider dot is eligible as eligible then do do nothing null then if it is expected and identifier I know I expected so color dot orange accent let's see colors dot if it is null or we have not putted anything so I'll just say colors.create okay else provider dot s eligible then do on the color dot green or else if it is not eligible anymore I think that is it yes cannot be also will say that is it I think so so uh what I am to do is I'll just uh each file I have to uh put that provider thing so that you can easily change those things okay so I'll do one thing at the check part check if you can board and the on pressed I'll have a integer value the final end H ormone int dot parse par simply means I'm going to get the age from that source so I'll have 8 controller I think so we have a controller control dot text Dot trip so that your frame is good and provider.check eligibility provider dot check eligibility yep and here we will pass the each I'll say wait a second check eligibility and here it will get the age and H and I think this is yep it will get the each okay at the as we will check the eligibility and that here comes I'll have provider Dot eligibility message and yep we are good to go now so what I'm going to do is tracker run minus C Chrome let's see what we will get dot dot stmi is not required till then I'll just uh remove all those comments that it has not made it and this thing and before running so uh is a quick uh go to this course and just check that it is available to each and every platform and let's see that if uh so tell now that it is not eligible so it is right let's say we I put a 12 and check you are not eligible for voting let's let's say 20 and I hope that color is yep so see if I put it null it is doing nothing okay let's say zero I'm not running it so this is uh your is your food so that is it let me just go through it real quick and I'll show you what uh what happened so we have only created a single screen this is a single screen so at the eligibility we are just checking whenever uh we are pressing any button so we are going to check that if the text which we have created is uh above 18 or something like eligibly criteria then it will notify all the changes okay so let's go through it the UI part and see what we have did till now so this is simply a change modifier provider so it will notify us when there is any changes in the UI or not okay uh ignore and necessary yeah so that is if the video at the class we are simply change the Notifier and the notification simply uh do that that it will create the end in is eligible is to true and is eligible to false if you are eligible for voting or not so it will notify the listener which means when it is triggered it will change the element in the UI so yeah that is it for the video hope you like it please if you like it please do uh like share subscribe and we will meet in the next video in the next video we are going to uh learn more about I think video 35 River Podium for this Advanced State Management and statement using block pattern letter Redux and manual and after that we will use that API using Duo packages it is very good thing and Firebase integration is also very uh good thing how can do it like testing debugging performance it is yeah it is pretty much pretty much so uh for from now I think that uh here's an important message that uh from now on ah every one day Gap the video will come and the video of the app right is the update it is almost done it is on the aerated part so I have to add it at the cut like some of the sections so yeah that is um sorry for me that is it for the video hope you like it and if you have any query related to this video or any other videos you can comment right now so we will meet in the next video till then keep running keep exploring and keep productive bye

Channel: FlutterWithRaman

Views: 21

Keywords: FlutterTutorial, CrossPlatformAppDevelopment, FlutterSeries, MobileAppDevelopment, FlutterUI, FlutterAdvantages, NativeFeel, CodeOnceRunEverywhere, FlutterFramework, GoogleFlutter, DartProgramming, UIWidgets, FlutterAnimation, FlutterWidgets, FlutterPerformance, FlutterApp, FlutterDevelopment, FlutterCoding, MobileUI, WebUI, DesktopUI, FlutterBeginner, FlutterAdvanced, FlutterTipsAndTricks, FlutterCommunity, FlutterLearning, FlutterApps, FlutterProjects, AppDevelopmentTutorial

Id: kr9hE-CfY3Y

Length: 35min 13sec (2113 seconds)

Published: Sun Sep 24 2023