Flutter – Textfield Validation

If you are building the sign-in or sign-up page in Android application, then Obviously you need to validate the Text field. otherwise, it can be null or empty. This will cause save the null values into the database. Then further make the application less impact. So to overcome this problem we need to prior check that there can not be a empty text field. So that null value can not be saved into the database. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
   runApp(RunMyApp());
}

Step 3: Creating stateful Widget

Now we have to make a stateful widget and then return the materialApp widget which allows us the set the title and theme and many more or default values. 

Step 4: Create the text editing controller

Create the text editing controller to retrieve the text from the Text field. You can refer to this article to Retrieve the text from the text field.

final _text = TextEditingController();  //texteditingcontroller
bool _validate = false;  //variable to store the bool value

Step 5: Check the text field is empty or not while pressing the button.

ElevatedButton(
                 onPressed: () {
                   setState(() {
                     _text.text.isEmpty ? _validate = true : _validate = false;
                   });
                 },
                 child: Text('Submit'),
               )

Here , _text.text.isEmpty  we are checking using the text editing controller. If empty validate variable will assign with false otherwise assign with true. And finally according to the value of validate we can raise the error in the text field as shown in the output video.

Final Code

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyHomePage());
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  final _text = TextEditingController();
  bool _validate = false;

  @override
  void dispose() {
    _text.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Validation'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(300.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Error Showed if Field is Empty on Submit button Pressed'),
                TextField(
                  controller: _text,
                  decoration: InputDecoration(
                    labelText: 'Enter the Value',
                    errorText: _validate ? 'Value Can't Be Empty' : null,
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _text.text.isEmpty ? _validate = true : _validate = false;
                    });
                  },
                  child: Text('Submit'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output