How to create and validate forms in Flutter
Vložit
- čas přidán 25. 07. 2024
- Almost every app requires some user input and validation. This video will show you how easy it is to create forms Flutter and validate user input.
00:00 - Intro
00:30 - Discussing existing code
01:00 - Creating the form
07:54 - Adding validation to a TextFormField
10:08 - Calling the validate() method
12:28 - Sorry about the editing error here :)
14:28 - validate the email field
17:03 - Setting specific keyboard types for different inputs
18:40 - Validating a number by parsing a string
21:03 - Controlling the length of characters (max/min)
21:34 - Testing a valid form
💻Get the Code: github.com/theflutterfactory/...
⚡Connect on Facebook: / flutterfactory
⚡Connect on Twitter: / flutterfactory - Jak na to + styl
If you want to add multiple widgets in the same row, just add them to a Row widget to get the desired look. Leave a thumbs up if this video was helpful. I will be posting more Flutter videos in the near future.
Great video thanks so much! You covered a lot of bases!
Very nicely explained. Keep it up!
thanks a lot..it really helped me
thanks this helped me!
thanks for the help :)
bro thank you for this video.. how can i add the post API for this i have URL on my test woocommerce site and i want to create registration form following ur tutorial, the part where im stuck is the last part sending it to the actual url :
Can you please make a video where we can upload mutiple files(maxlimit:4-5), to the server using flutter. I have used file_picker but finding the multi_file_picker difficult.
Heya, what is the best way to stop the form fields spreading out when there is an invalid field? I tried putting a sized box between them, but it the error label doesn't fill that space it adds to it.
How Can i send the Input to a database or Mail ?
sir i was a created a app how can separate user and admin if user login to show page another page and admin login to show another page
Thanks Bro
Thanks sir
hai gays,,, great videos,, can u help me how to bring cursor to empty texfromfield area when klik submit ? thank you
Appreciated
Nice if u make it into a listview because it may overflowed pixles
Can You Show how to add validation to check boxes in flutter
But, if I need to prefilll theses fields? Or filll some fileds based in calculations with another fields?
You have access to the values in all the input fields via controllers
Thanks great video, how to keep submit button disabled untill all th evalidation passed.
good , but How Can i send the Input to a mysql database or Mail ?.....
@cheetah coding..I have done similarly for add form but am facing issue in edit
What's the issue?
its cleaner to just build 1 function to build the various input forms, and then pass as arguments the different parameters
Actually I see what you're saying. Have a single function and pass in the arguments to the a single text. That would work but almost every input has different property values, plus I wouldn't like the look of passing in functions for the validation and save properties. Plus if I ever want to change the look of one specific input, I don't have to do any refactoring. There's no right answer. Do whatever works for you.
At level, or at what doc root, do you add code to the new git branch? At form_screen.dart? at lib? or at CWC_FLUTTER?
All flutter code lives in the lib folder
The argument type 'String? Function(String)' can't be assigned to the parameter type 'String? Function(String?)?'.dart
what is this error
i would like the validation to work as I type instead of after submit. How can we do this. Thanks for your videos. Very helpful.
I won't always be able to cover every scenario that a user might have in these videos. These are just to help you with the basic concepts. Always check the documentation or do a quick Google search first. It's likely that many of people have asked and answered this question online already. I've already Googled it for you -> api.flutter.dev/flutter/widgets/Form/autovalidate.html
I think you can use OnChanged event if its textbox
Try filter on textfield, you can apply regex there
You need to use BLOC with stream..
u didnt mention that u removed "=>" in 11:00
i spent 5 mins figuring out why "return" is red
Thank youuuu didnt notice either :((
@@ojgg14 not at all
We beginners always have these issues
Thanks for sharing, however the elements are deprecated and the way to write the code has changed. Could you please update the content?
i want to display all the details on a differernt page, what should i do
Use a state management solution 😀. Provider, Bloc, GetX, etc. I created videos about each of those on the channel already. "State" is a way for different widgets to access the same data store in your app (NOT the same as persistent data storage). Each of them are slightly different in their approach. Once you learn about them, it's up to you to think about which one makes the most sense. GetX is my personal favorite as an all-around state management solution.
i have a question:
can you please replay about what purpose do you put 'return null' on the last of the video
I don't know which part of the video you are talking about. A timestamp would help a lot
@@TheFlutterFactory I'm really sorry, this video is very helpful for me, it's a mistake
So for the passwords, what if I have ints inside?
Look at the TextInputType class in the docs. There are many options
GOOD
is validate a built in method or did you make a validate method?
nvm found the problem XD thanks for the vid man helped me a lot
👌
Hello!
I'm from Brazil.
I need an example, to create a form, where I will send emails without the need to use the gmail platform.
Have an example of how to do it using API's
Nope. I've never done anything like that before. You can easily find the info on Google. Just Google 'React native email'
After a quick search.. blog.mailtrap.io/react-native-send-email/
Please tell a optimised code with dynamic textfield
What do you mean by "dynamic textfield"?
is this a good coding for dart flutter? just asking. im new in dart.
This channel assumes that you already know the basics of Dart programming.
I am a bit surprised there no reusable input widgets for different types of inputs. It would extremely tedious to _build* widget for every input
Sounds like a good opportunity to make an open source library. If you need something like that it would be eaay to make
@@TheFlutterFactory Thank you for the response and for the video. I definitely would find it very useful. I am slightly surprised if it does exists already. I think for the start input widget will accept setter as parameter (in addition to validation parameters) and will keep state updated once whenever input changed and is valid.
Nice, but what about phone number, some validations wwere missed
It's not meant to be a complete app. I didn't want to focus on all possible validations. I just want to show where you put your validations and where validations would occur. You can easily find a regex online for phone numbers if you need one.
great video, but so many things have changed since it was released. I have to dive into flutter.dev every 3 min to fix errors of null safety and other shit ;)
That's the life of a software developer :) Null saftey is a HUGE improvement for dart though. Learn, Use it, and don't look back.
Does this tutorial need to be updated. My ide complains about this code, requiring me to '?', '?.' or '!'.
Yeah this is pretty outdated now. Flutter 2 -> 3 was a major shift in the framework. If you already understand null safety it shouldn't be involve too many changes. I'll be getting back to making new videos soon.
How to add red asterisk in label of textformfield
like,
First Name *
the * should be in red
Also your github code has many errors in it when I try to run it...
Hi, This doesn't work for me. Are you able to check the code?
This is very outdated since 3.0 got released. I'll probably remake a lot of these videos in the near future. If you understand null safety, updating this code is pretty straightforward
Would be a lot nicer if you just started with the basics of how a form works rather than immediately adding decorations and validators...