Flutter Form Validation Example – In this tutorial we see how validate flutter forms like input textbox, radio button, checkbox. Validation is very important than concept. Because when we miss validation, users are may be give duplicate data like invalid email id or mobile number. Nowadays every website and app has give validation, they are understand the user problems.

Based on programming language validation level will be changed. In flutter we develop attractive form validation with easy code. When we use java, need to write more code for validate the form. Flutter widget based framework that’s why we easily complete the work without facing difficulties.

Flutter Form Validation

So let’s see how build a form with validation. If the user are give correct information, the next page will be opened. Otherwise it will be redirected from same page with showing validation errors. Actually validation has two types,

1. Client Side Validation
2. Server Side Validation

Both validations are validate the forms. But selection option is our wish, client side validation give results for without loading the page. When we do server side validation, it will go and check server database table. So the pages are loading, if correct it will go or back with previous page. Already i published one article which is helped for how connect firebase database into flutter dart language.

Validation Steps

Follow below steps to make validate the forms. They are,

1. First add three or four TextFormField to give user name, email id, password, mobile number etc.
2. Then Create Form with GlobalKey
3. After that create one button for Submit form

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: MyCustomForm(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false
                // otherwise.
                if (_formKey.currentState.validate()) {
                  // If the form is valid, display a Snackbar.
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

For more information read flutter official instruction to know about documentation steps. After working this example, try our other tutorial of performing Flutter CRUD Operation.

Source Code

I hope above explanations are understand the concept. Here give full source code flutter form validation example free download. If you are facing any issue on this article, share your thoughts below, I will fix your issues.