Android, iOS Form Validation Using Flutter || Tutorial on Flutter Login Design

 

Flutter form validation :

Flutter form validation is a basic process which every app needs to have as a initial criteria, so lets see in the flutter way of doing it.

In this part of the tutorial you will learn a basic flutter form validation in a simple steps so even a novice can easily understand and know the flutter way of dealing a form.

In general you might have been worked on android form’s previously where the first step is to design an xml file before getting on to the main logical java coding.

Now in flutter this is a combination of design as well as logic together which will help you in further stages of app development where you deal with multiple screens in android.

Flutter form validation

main.dart:

As you all are well aware of the MainActivity in android and this file is same compared.

 

Let’s begin

 

This is the basic step, import the flutter package its the initial step towards app development

import 'package:flutter/material.dart';

 

Declare a void main and this is where the execution of the file begins

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

 

Declare a class MyApp which extends StatelessWidget

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }
  
}

 

Now instead of returning null return a material theme

return MaterialApp(
  
);

 

Add a title and design it with using Scaffold and add body using a class called MyCustomForm().

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

 

This class comprises of the body, extends StatefulWidget

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

 

Creating a TextFormField

Within textformfield we have InputDecoration using which we can design the textfield according to our requirement, currently we use “hints” to show the field name to the user

decoration: InputDecoration(
hintText: 'enter username'
),

 

And then the validaton of the field using a validator, here i am just checking for empty condition

validator: (value) {
if (value.isEmpty) {
return 'Please enter username';
}

 

TextFormField With both attributes

 

TextFormField(
  decoration: InputDecoration(
      hintText: 'enter username'
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter username';
    }

  },
),

 

Now we will add some padding in between two text fields username and password in vertical

Padding(
  padding: const EdgeInsets.symmetric(vertical: 10.0),
),

 

then a simple button to process the inputs and show a snack bar

snack bar

showSnackBar(SnackBar(content: Text('Login-in')))

 

Add some padding from text fields and declared raised button as shown below

 padding: const EdgeInsets.symmetric(vertical: 100, horizontal: 100.0),

 

We have initially declared a form key in the FirstPage  class on validating the form s a snack bar is show

key: _formKey,

if (_formKey.currentState.validate()) {
  Scaffold.of(context)
      .showSnackBar(SnackBar(content: Text('Login-in')));
}

 

This validation is done on clicking the button using

onPressed: () {

},

 

as

Padding(
  padding: const EdgeInsets.symmetric(vertical: 100, horizontal: 100.0),
  child: RaisedButton(
    onPressed: () {

      if (_formKey.currentState.validate()) {
        Scaffold.of(context)
            .showSnackBar(SnackBar(content: Text('Login-in')));
      }
    },
    child: Text('Submit'),
  ),

 

Full Code:

Providing the full code for flutter form validation implementation

import 'package:flutter/material.dart';

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

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

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

// Create a Form Widget
class MyCustomForm extends StatefulWidget {
  @override
  FirstPage createState() {
    return FirstPage();
  }
}


class FirstPage extends State<MyCustomForm> {

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {

    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[

          Padding(
            padding: const EdgeInsets.symmetric(vertical: 10.0),
          ),

          // Username Field

          TextFormField(
            decoration: InputDecoration(
                hintText: 'enter username'
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter username';
              }

            },
          ),

          // Adding a padding in between username and padding

          Padding(
            padding: const EdgeInsets.symmetric(vertical: 2.0),
          ),

          // Adding a padding in between username and padding

          // Password Field

          TextFormField(
            decoration: InputDecoration(
                hintText: 'enter password'
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter password';
              }
            },
          ),


          // Adding a button to validate form

          Padding(
            padding: const EdgeInsets.symmetric(vertical: 100, horizontal: 120.0),
            child: RaisedButton(
              onPressed: () {


              },
              child: Text('Submit'),
            ),



          ),
        ],

      ),

    );
  }
}

 

 

 

 

Output :

This screen depicts the implementation of flutter form validation

 

If there is any query in this tutorial on flutter form validation do let us know in the comment section, do like and share this tutorial for more interesting updates.