What is the Difference Between TextFormField and TextField In Flutter ?

TextField Widget is used to get data from users and perform the desired operation. When we talk about Flutter we can use TextFormField as well. So in this article, we will learn what is the difference between TextFormField and TextField in flutter.

What is the Difference Between TextFormField and TextField In Flutter?

TextFormField, which integrates with the Form Widget. This is a convenience widget that wraps a TextField widget in a FormField.

A Form ancestor is not required. The Form simply makes it easier to save, reset, or validate multiple fields at once.

To use without a Form, pass a GlobalKey to the constructor and use GlobalKey.currentState to save or reset the form field.

So the sample code snippet will look like below:

TextFormField(
 autovalidateMode: AutovalidateMode.always,
 decoration: const InputDecoration(
   icon: Icon(Icons.person),
   hintText: 'What do people call you?',
   labelText: 'Name *',
 ),
 onSaved: (String? value) {
   // This optional block of code can be used to run
   // code when the user saves the form.
 },
 validator: (String? value) {
   if (value == null) {
     return value;
   }
   return value.contains('@') ? 'Do not use the @ char.' : null;
 },
)

TextField, which is the underlying text field without the Form integration.

The text field calls the onChanged callback whenever the user changes the text in the field. If the user indicates that they are done typing in the field e.g. by pressing a button on the soft keyboard, the text field calls the onSubmitted callback.

TextField

Using TextField is an easy way to allow user input.

TextField(
  decoration: InputDecoration(
    hintText: 'Name'
  ),
);

So we will get output like the below:

To get the text that the user entered, you can either get notified every time there is a change like this:

TextField(
  decoration: InputDecoration(
      hintText: 'Name'
  ),
  onChanged: (text) {
    // do something with text
  },
),

Or you can use a TextEditingController, as described here. This will give you access to the text state.

TextFormField

If you find yourself needing to validate user text input before you save it, you might consider using a TextFormField. Imagine something like this:

There are lots of validation checks that you might want to do on a username and password.

Of course, you could still just use a couple of TextFields, but TextFormField has extra built-in functionality that will make your life easier. So generally, you will only use a TextFormField when you are using it inside of a Form Widget though that isn’t a strict requirement.

So the code snippet will look like the below:

class MyCustomForm extends StatefulWidget {
 @override
 MyCustomFormState createState() {
   return MyCustomFormState();
 }
}

class MyCustomFormState extends State<MyCustomForm> {
 final _formKey = GlobalKey<FormState>();

 @override
 Widget build(BuildContext context) {
   return Form(
     key: _formKey,
     child: Column(
       children: <Widget>[
         TextFormField(
           validator: (value) {
             // validation logic
           },
         ),
         ElevatedButton(
           child: Text('Submit'),
           onPressed: () {
             if (_formKey.currentState?.validate() ?? false) {
               // text in form is valid
             }
           },
         ),
       ],
     ),
   );
 }
}

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So today, we learned what is the difference between TextFormField and TextField in flutter.

Kindly drop your suggestion/feedback to serve you much better.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.