#Google Flutter: Form Validation using basic methods, Provider and BLoC state management patterns.

hello everyone in this video we are going to learn about how to do form validations in flutter in three different ways first one using the basic beginner method without any State Management libraries the second one using the provider State Management library and the third one using the block statement State Management Library let's start with the basic one first as usual I'll be starting with an empty container as home the bobspect don't have any third-party libraries added as of now let me create basic folders needed for this tutorial we will need a utils folder with its folder and then the basic providers and the blog folder or the three sections of this video first let's go ahead and create a custom form field widget so our custom form field is a stateless widget let me remove those two lines and import the material package I am also creating one more file which is called exports where we'll be keeping all our Imports to make the code cleaner let me import it here and also in the custom form field widget as well so let's go back to our custom form field and remove the placeholder and create our widgets the first parameter is going to be the hint text the second parameter is going to be the text input format is which is a list and the third one is a function which accepts a string parameter is a validator it's a validator function and the final one is on change callback function let's pass in the parameters in the Constructor of this custom form field now let's replace the placeholder with our actual widget implementation the child is going to be text form field with input format is which is our parameter and validator and let's set the index and also the on change callback now let's go back to our basic and create a folder named screens and we are going to create a form screen that server forms UI so that's going to be a stateful widget let me import the our exports file here so that that includes all the Imports for needed for this file so let me um replace the main the build implementation with the scaffold the title is going to say form validation and it's going to have a body and it will hold our form so so body with the padding of 30 and the child is going to be form widget so you know that from widget can help us with the form validation so form we did with the column and three Fields mainly the first one is going to be the name with hint text name and the second one is email and third one is form the phone number for this example now let's pass in the validator functions so validator and it's going to accept a parameter and return null if it is validated so now we will just return now let's do the same thing for all the fields will be coming back to this in a short time so the input format is going to be let me format let me add some formatters here so that's a formidable name let me copy those two and put it in the exports so we don't need three Imports here and Export Services package all right now let's go back to our utils folder and let me create a file named extensions which will have free Extinction functions you're gonna extend a string so extension I'm going to name it string extension on string and three methods the first one is is valid email second one is valid name and third one is valid four so these are going to be the three validated functions so let me paste in some prefix expressions for validating okay now let's go back to our main dot file and replace a home with our home screen so that going to be a let me put it at the top level constant export it all right now let's go back to validator which is for the name and we are going to check if the value not equal to null and also if it is not a valid phone number sorry if it is not a valid name we're going to return an error message enter valid name so similarly we are going to do the same for the email and the phone number so for email it's going to be is valid email and the phone number is is valid phone all right now we need to submit a form right so for that we can create a couple of buttons the first one is going to be a submit button and second one is going to be a reset button that will reset the form and submit will submit the form so let's create two buttons what is it perfect let me give some spacing in between them all right okay now let's create a variable form key which is going to be a global key of type form state so this this key is going to help us in validating the form so for that set the key or the form to be the form key and in the summit function we're gonna write if formkey dot current state DOT validate so if the form validation is successful it's going to come inside this if condition and in the reset you're gonna call form dot current state DOT reset so let's try that so the formulation is working and it's showing the proper error messages that we set for each form field correct now let's try entering the proper values for each form field and see the validation is working or not let me add the name and try submitting so that way the name validation is working the email validation is also working now let's do the phone so that's also working now let me create a screen so when the form validation is successful we will navigate to this new screen let me call it success screen let's use our exports here okay let's let's create a dummy success screen for this form validation the title would be success and let's now let's create another file now utils and I'll write a function to navigate to this new screen so when the form validation is successful we'll be navigating to that new screen and in the constants we're gonna create a navigator key which we are going to use for the navigation so this is of the type Navigator state and we need to supply this key in the material app which is our root of the application and let's make the form screen constant and in the navigation utils let's say navigator.push and pass in the context which is our Navigator key and I'll get the key dot current context and the material route and pass in the success screen let's make it a constant so when the form is validated we'll be moving to the success screen okay now let me do some organizing here let me let's try it out John Wick JB gmail.com and the phone number the submit it goes to the next screen and reset is also working fine all right now let's see how we can do the same thing with the provider package so let me copy the form screen from the the first part and uh let me create a folder called state and create a file I'm gonna name it form Notifier Dot and this is going to be a form Notifier which extends change Notifier we haven't added the provided packet yet so let's go ahead and add the package make sure to call the flutter packages kit to install the package now let's go to the root file the main dot file and duplicate the build method and I'm gonna wrap the form screen with a multi provider so if you have more than one provider you can use multiple provider or a simple provider is enough so we have only one provider here so wrap it user change Notifier and return the form Notifier from there and child is going to be our form screen all right now let's go to the screen and copy the form key and paste it in the notify class so let's access the provider here which is context.watch and pass in the form Notifier now we need to access the phone key from the state variable but before that let's go to the Note 5 class and write a getter and the setup for the phone key so if you can remove the underscore you can just directly access it okay so let's replace the same thing everywhere now we can make our form screen a stateless widget because we are moving the state out of this screen which is a UI to the form notify class the next thing we are going to do is to remove the validator logic which is in the name email and phone number to our form not fair class okay so for that we need to have some model classes so I'm going to create a folder called models and create a class called form item so let's create it models and the file name is form underscore item Dot and this class is going to have a hint text error message list of text input formatters now let's create a Constructor accepting the hind text which is by default empty and the format is and the error message now let's create a variable for the form item which is the title I'm going to say form validation and similarly for the name phone number and the submit button and one for the reset button and let's change the index to name please enter name and the format is so similarly for the email phone number submit button and the reset for the submit button we don't need other fields we just need the index which is which we are going to use it as the title for the button let's write the Getters for all the fields email name phone number submit button and reset now let's write the validators first one is for the name that's going to accept the value from the text box name field and the value is not equal to null and if the value is not valid we are going to return by error message for from the name object or we can just write like this this is also acceptable so we can do it in one line so similarly for the email that's valid email is valid email and for the phone that's going to be let me change that to that that was an error sorry so that's a phone number okay now we have the valid it is now let's write the method to validate the form so that's going to be formkey dot current state DOT validate and return go home so if it is a success we are going to the success screen right now reset form which is going to just do form dot comkey dot current state DOT reset which is going to reset the form all right so the next thing is we need to use this um values in our UI file which is of on screen okay let's go to the form screen which is inside our provider folder let me move this to the exports file and we're gonna change one by one the first one is going to be the name which is state.name dot in text and the format is estate.name Dot formatters and the validator is going to be return state DOT name dot error message and you can do the similar for the email State on email Dot rmsas and similarly for the phone return state DOT font dot error message and for the submit Button as well just use the hind text for the title that's it all right now if the button is pressed if the submit button is pressed we are going to call the summit sorry what was the method name validate form right okay let's change that to Summit form and call State DOT submit file so similarly for the reset reset form great so we can make it an arrow function for the validators here okay great much cleaner for the reset button as well okay let's see it's working John Wick okay it's it's properly showing there I'm gonna say this okay now it's it's working it's going to the success screen and the reset is also working great all right now let's change the before go to change the title so you can change it like this so that there are no hard coding in our file anymore so everything is controlled in this change notify class so all our state is in the change Notifier class so our screens are completely stateless right now okay so that's that's how we can do for validation with providers now let's see how we can do the same thing with blocks so let me create a form sorry the folder called block which is going to have a form block from events and form state [Music] so block will have a event and its state so every new event fired will will return a new state so that's how blocks work so if you are not familiar with the blocks please sort of from my previous tutorial on blocks so we have the screen as well so let's create a model class similar to what we did in the previous provider tutorial so let's add the flutter block and the equator equatable package so let's go ahead and create the model class I'm gonna name it block underscore form underscore item dot dot and the class name is block form item it's going to have the string value error and the block form item Constructor the value is empty by default and pass in the error as well also we need a copy with Constructor also we need a copy with function to copy the current state and return a new block form item so return clock form item value is going to be the first value or get the current state value and error is going to the current error or the the current state error let me make it nullable okay now we have the model class now we need to create a basic classes for the form to work so it needs a block class estate addition and then event class so let's create the form block with the extents block will accept and even end state let me import the block here foreign class so that coins that's going to be an abstract class I'm going to name it form screen event you can name it whatever you want extends equitable and a Constructor now let's override the props further and return empty for now let's create other events that we can use since form screen even is an abstract class we cannot create objects out of it so any payment and the next payment is going to be the first one name change event it's going to have a member variable final block form item let's name it name and pass it in the Constructor make it required so similarly let's override the props as well and to turn the name okay so let's similarly we need to do the same thing for the email just change the variable name and the last one is from phone change the event let's change hit the phone okay all right and the fourth one is going to be the form Summit event and we need one more which is a form reset event so our UI will be triggering the event and the block will return a new state so let's write the state so class form state extends equitable similarly export the sorry override the props state is going to have the three states the name email and phone and let's write the Constructor which accepts these three platform item name sorry this dot email is equal to constant block form item let's give it a default values similarly for the email and phone number let's write a copy with method to copy the state if you want sub log form item name email phone number so this is similar to what we did in the form the blog form item class and we also need the form key here let me rename the class name to avoid conflict so form state is from the flutter SDK let me make it nullable so if we use the State Farm key here we can remove the form key from the UI itself we don't need a variable there now return a form State here a new form state with the current state or whatever is passed in copy that or get the current state that's the idea the phone it is not passed get the current state value and for the formkey as well okay great now return the States here the name email phone and the form key all right we have all the variables required now let's pass in the state sorry the event and the state here which is going to be the form screen event and the second on the class the state is going to be from screen State let's rename so it will be easy to understand foreign some methods here the first one let's write a Constructor so that's going to accept an initial state now let's write our methods so on which event so the first event is going to be the init event which is going to be fired at first so what happens when an Unity event is fired so let's write the method in it form state which is going to be an asynchronous method and that's going to accept a event which is a init event a diameter with a Farm screen state and then let's name it emit and name it so let's return the initial State from here let me initialize a form key in the form block itself solve the initial in its state is fired we are going to return the form key in the state right so emit stay dot copy with formkey so that's going to initialize the form key which is by default null because others have the default values and that's going to initialize the form key in the UI which helps with the validation so let me duplicate a duplicate the bill method here and simulate what we did for the providers we need to wrap the root widget with the job provider and we need to wrap our UI which is going to listen to this block with a block with a block Builder so whenever so here when the form block is initialized we are going to fire the event as well the unit event so that will state with the new form key so that will inspace the UI with the new form key so that's how this is going to work so if you now we can change the well now we need to wrap the like I said we need to wrap the UI with the block Builder and uh return the return our UI from there and the block Builder is going to let's set the type which is a form block and the form state so if you have multiple blocks uh this is how you need to specify which form block which block you are going to use now we can make this class a stateless widget because we are moving all these states up to the block so the block will be handling all the logic and the UI will be cleaner just like what we did for the provider so State the function will be state.com so now we will be moving all the validation logic as well to the block so similarly we need form State a third we need to have other methods for the name email and phone and even for the name he's named Steven and that's going to return a new state for the name field so name block form item the value is going to be even dot name dot value and error it can be null or a string so even dot name dot is valid name if it is valid just return a so the so the UI will not show the error what's the hierarchy is okay sorry so that's value dot his valid name and this is going to emit the new state after validating so you can see the values there so that's the member variables we had so similarly for the name change we need to have one for the email and the phone and the event is going to be email changed event and rename the variables accordingly and the third one is going to be phone changed event and make sure it retains the validation as well so the methods is let's add the event here when the name changed even is fired we are going to call the unchanged on name changed and email changed event is going to call on email changed okay so that's for the fuels so made a couple of mistakes here this should be is valid email and this should be his valid phone all right now um we need couple of more events for the summit and reset buttons so let's write that on that's form submit event I'm gonna write a new method on form submitted and on form reset event on form reset so let me copy that change the change the let me remove the body first and change the function name to on form submitted and even should be form Summit event and it should validate the file if form dot current state DOT validate then go home it should be go to such a screen or something like that uh but yeah our limit error whatever error you want on phone reset that should be on um reset event and just reset the form yeah so yeah that's it that's how you can validate a form with block now let's see if this is working so the first thing is working let me that maintains the validator to our validator so let me write on change event and get the block that should be form block dot add event on name change even because I'm writing on because it's a name change even I'm writing it on the on change and validator should be State node name dot error and similarly for the email and the phone number for the email it should be email changed even and for the phone number it should be phone change we went and pass and before the validator it's state DOT font dot error and for the buttons it should be the event is form submit event and the for the reset button it should be the form reset event yep so that's that's a whole Let's test it out okay the validations are working okay the email validation is also working all right so that got cleared and the form is submitted perfect reset is also working good so yeah so that's how you can you can make the screen the UI completely stateless and move the state block and do the validation or whatever logic you can keep all the logic in the blog and keep the UI stateless and clean and you can you know the business logic should be outside the UI so it's all working good now so I have shown you three different ways of formula form validation with the basic set State and then using provider State Management then now with the block yeah so it's showing the proper error whatever error you want you can change that as well right so that's the submit even mutuality centricity when that will reset the form so I'm just adding a couple of more things to the uh the model which is the syntax just like we did for the provider so in text so you can get the hind text from the state itself you can set the in text just like what we did previously so you can use this index to show the hint when the page loads and in the UI you can just say in text if it is not empty or whatever you want so we can remove all the hard coding if you want to move the formatters also to the model you can do that as well just like in we did for the providers so that there is no hard coding in the UI everything is controlled by the state management Library whichever you are using yeah so you can you can so move everything to your state so that's the whole idea and keep the business logic in the state in the block itself here and yeah so that's the whole idea if you like this video please don't forget to like subscribe and share also the link to the source code is in the description and you can comment below if you have any doubt and I'll try my best to clear it so thanks for watching and we'll see in the next video bye

Channel: Mobile Programmer

Views: 4,489

Keywords: Flutter, Google, Android, iOS, Tutorials, Code, Study code, SQLite, Cross Platform, Dart, Null Safety, Flutter. dart

Id: xVb0CrEno3o

Length: 36min 37sec (2197 seconds)

Published: Sun Jul 16 2023