November 07, 2024

Flutter Form Validation (A Basic Guide)

When developing mobile applications with Flutter, one of the most common requirements is handling form data submissions and validating user input. Get an insight into how to efficiently validate forms in Flutter with code examples.

Flutter Form Validation

Form validation ensures that the data a user has entered is correct and complete before processing and submitting the form. Besides data integrity, form validation also ensures that invalid or malicious data is not submitted to the back-end and provides a better user experience. In this post, we will explore how to perform Flutter form validation with some real code examples.

 

How to Validate Forms in Flutter (Form, TextFormField, FormState, TextEditingController)

Flutter provides an easy way to validate form fields using Form, TextFormField and FormState along with TextEditingController for every field in the form. We will create a stateful Flutter widget, BasicForm and validate the email and password fields. The code can be explained as:

  • Create a StatefulWidget with the BasicForm name.
  • Add a GlobalKey variable _formKey for our FormState, which is used to identify and manage the state of the form.
  • Add TextEditingController variables _emailController and _passwordController for the email and password fields.
  • In the build of the widget, use Flutter's Form widget and assign the _formKey to identify the form.
  • Add two fields using the TextFormField widget, one for email and the other for password.
  • Assign the _emailController to the controller parameter of the email field.
  • Assign _passwordController to the controller parameter of the password field.
  • Implement validation logic in the function assigned to the validator parameter of both fields. Both fields are required i.e. should not be empty. The email field implements a regular expression check, whereas the password field implements a minimum of 6 characters required logic.
  • Add a form submission button using the ElevatedButton widget of Flutter.
  • Check the form state in the function assigned to the onPressed parameter of the ElevatedButton widget.
class BasicForm extends StatefulWidget {
  @override
  _BasicFormState createState() => _BasicFormState();
}

class _BasicFormState extends State<BasicForm> {
  // This key will identify the form
  final _formKey = GlobalKey<FormState>(); 

  // Controllers to retrieve values from text fields
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey, // Key to access form state
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            controller: _emailController,
            decoration: InputDecoration(labelText: 'Email'),
            keyboardType: TextInputType.emailAddress,
            // Validator for email
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter an email';
              }
              if (!RegExp(r"^[a-zA-Z0-9]+@([a-zA-Z0-9]+\.)+[a-zA-Z]{2,}$").hasMatch(value)) {
                return 'Please enter a valid email address';
              }
              return null; // No error
            },
          ),
          TextFormField(
            controller: _passwordController,
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            // Validator for password
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter a password';
              }
              if (value.length < 6) {
                return 'Password must be at least 6 characters';
              }
              return null; // No error
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid
                if (_formKey.currentState!.validate()) {
                  // Form is valid
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Processing Data')),
                  );
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}
In addition to the above-explained code, the following are the key points that must be followed for smooth Flutter form validation and user experience.
  • Always use GlobalKey<FormState> to manage the state and validate the form.
  • Use the validator property for built-in validation like empty fields, emails, and passwords.
  • For custom logic, advanced validation rules can be created using regex or compare fields.
  • Show a notification via Snackbar or AlertDialog to the user whether the form submission was successful or not.

We demonstrated a basic Flutter form validation with a code example. Flutter makes it easy to create and validate a form using built-in Form and TextFormField widgets. The example above can be further customized based on Flutter application requirements.

Home