close

Textfield validation in Flutter

Hello Guys How are you all? Hope you all are fine. I am working on Flutter TextField widget. I want to show an error message below the TextField widget if the user does not fill that TextField. I only have to use TextField Widget not TextFormField in this case. So we are going to learn Textfield validation in Flutter Here.

Textfield validation in Flutter

  1. How to make Textfield validation in Flutter?

    To make Textfield validation in Flutter. First of all, make Text Field. same as below. And assign a controller to TextField. TextField has InputDecoration and InputDecoration has errorText property. So give errorText that you want to display. Now make submit button. when you click on the button if your textField value is empty then errorText should be displayed. We are going to use raised button here.

  2. Textfield validation in Flutter

    To make Textfield validation in Flutter. First of all, make Text Field. same as below. And assign a controller to TextField. TextField has InputDecoration and InputDecoration has errorText property. So give errorText that you want to display. Now make submit button. when you click on the button if your textField value is empty then errorText should be displayed. We are going to use raised button here.

1. Make Text Field

First of all, make Text Field. same as below. And assign a controller to TextField.

  final _text = TextEditingController();
              TextField(
                controller: _text,
                decoration: InputDecoration(
                  labelText: 'Enter your username',
                ),
              ),

2. Define Hint Text

TextField has InputDecoration and InputDecoration has errorText property. So give errorText that you want to display.

              TextField(
                controller: _text,
                decoration: InputDecoration(
                  labelText: 'Enter your username',
                  errorText: 'Username Can\'t Be Empty',
                ),
              ),

3. Make Submit Button

Now make submit button. when you click on the button if your textField value is empty then errorText should be displayed. We are going to use raised button here.

              RaisedButton(
                onPressed: () {
},
                child: Text('Submit'),
                textColor: Colors.white,
                color: Colors.blueAccent,
              )

4. Check empty value on press button

Now make the bool value named _validate and set the default value as false.

  bool _validate = false;

Now, when anyone presses on button then we will check if the value is empty then we will set _validate to true. We will use our Controller to check textField value.

              RaisedButton(
                onPressed: () {
                  setState(() {
                    _text.text.isEmpty ? _validate = true : _validate = false;
                  });
                },
                child: Text('Submit'),
                textColor: Colors.white,
                color: Colors.blueAccent,
              )

Then we will use _validate in our errorText if _validate = true then errorText will be displayed.

errorText: _validate ? 'Username Can\'t Be Empty' : null,

Full Source Code

import 'package:flutter/material.dart ';

void main() {
  runApp(
    new MaterialApp(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

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 Scaffold(
      appBar: AppBar(
        title: Text('TextField Validation FlutterCorner.com'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: _text,
                decoration: InputDecoration(
                  labelText: 'Enter your username',
                  errorText: _validate ? 'Username Can\'t Be Empty' : null,
                ),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _text.text.isEmpty ? _validate = true : _validate = false;
                  });
                },
                child: Text('Submit'),
                textColor: Colors.white,
                color: Colors.blueAccent,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Output

Textfield validation in Flutter,
textfield validation,
text field validation flutter,
validation in flutter,
Textfield validation flutter

Summery

So, It’s All About this tutorial. I hope this tutorial helps you to Solve your error. Please Comment Below if You stucks anywhere with my code. And please comment below on which solution worked for you. Thank You.

Also Check Out Below Tutorials

Leave a Comment

%d bloggers like this: