How to Do Textfield Validation In Flutter ??

· 6 min read
How to Do Textfield Validation In Flutter
How to Do Textfield Validation In Flutter

TextField Widget is used to get data from users and perform the desired operation…So, in this article, we will go through how to do Textfield Validation In Flutter.

How to Do Textfield Validation In Flutter??

A Minimal Example of what you want:

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 Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            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,
              ),
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _text.text.isEmpty ? _validate = true : _validate = false;
                });
              },
              child: Text('Submit'),
              textColor: Colors.white,
              color: Colors.blueAccent,
            )
          ],
        ),
      ),
    );
  }
}

TextFormField is also a better option for validation. Flutter handles error text itself, so we don’t require to use variable _validate. It will check at runtime whether you satisfied the condition or not.

final confirmPassword = TextFormField(
  controller: widget.confirmPasswordController,
  obscureText: true,
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.lock_open, color: Colors.grey),
    hintText: 'Confirm Password',
    errorText: validatePassword(widget.confirmPasswordController.text),
    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
  ),
);

String validatePassword(String value) {
  if (!(value.length > 5) && value.isNotEmpty) {
    return "Password should contain more than 5 characters";
  }
  return null;
}

Note: The user must add at least one character to get this error message. Using a TextFormField with a validator.

class MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextFormField validator'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                hintText: 'Enter text',
              ),
              textAlign: TextAlign.center,
              validator: (text) {
                if (text == null || text.isEmpty) {
                  return 'Text is empty';
                }
                return null;
              },
            ),
            RaisedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  // TODO submit
                }
              },
              child: Text('Submit'),
            )
          ],
        ),
      ),
    );
  }
}

You can do something like this

class _validateTextField extends State<validateTextField> {
  TextEditingController userNameController = TextEditingController();
  bool userNameValidate = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextField(
                  controller: userNameController,
                  decoration: InputDecoration(
                      labelText: 'Enter Username',
                      errorText: isUserNameValidate ? 'Please enter a Username' : null
                  ),
                ),
                SizedBox(height: 50,),
                OutlineButton(
                  onPressed: () {
                    validateTextField(userNameController.text);
                  },
                  child: Text('Validate'),
                  textColor: Colors.blue,
                ),
              ]
          )
      ),
    );
  }
}

Create Function – This function will validate whether the value you entered is validate or not. And call it at the click of a submit or validate button.

bool validateTextField(String userInput) {
  if (userInput.isEmpty) {
    setState(() {
      isUserNameValidate = true;
    });
    return false;
  }
  setState(() {
    isUserNameValidate = false;
  });
  return true;
}

The above code will give us output like the below:

validation in a textfield
validation in a textfield
  • If you use TextFormField then you could easily implement ‘Error below your text fields’.
  • You can do this without using _validate or any other flags.
  • In this example, I have used the validator method of the TextFormField Widget. This makes the work a lot easier and readable at the same time.
  • I also used FormState to make the work easier.
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final _form = GlobalKey<FormState>(); //for storing form state.

//saving form after validation  
void _saveForm() {
    final isValid = _form.currentState.validate();
    if (!isValid) {
      return;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Form(
          key: _form, //assigning key to form

          child: ListView(
            children: <Widget>[

              TextFormField(
                decoration: InputDecoration(labelText: 'Full Name'),
                validator: (text) {
                  if (!(text.length > 5) && text.isNotEmpty) {
                    return "Enter valid name of more then 5 characters!";
                  }
                  return null;
                },
              ),

              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (text) {
                  if (!(text.contains('@')) && text.isNotEmpty) {
                    return "Enter a valid email address!";
                  }
                  return null;
                },
              ),

              RaisedButton(
                child: Text('Submit'),
                onPressed: () => _saveForm(),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Stay connected for more articles like flutter textfield validation without form, password validation in flutter, flutter form( autovalidate), flutter regex validation, flutter form validation bloc, flutter registration form, flutter form builder, textformfield flutter, etc.

Conclusion:

Thanks for being with us on a Flutter Journey !!! Hope you have learned about How to Do Textfield Validation In Flutter.

Keep Learning !!! Keep Fluttering !!!

So in this article, we have been through How to Do Textfield Validation In Flutter.

Drop us your valuable suggestion/feedback in the comments.

If you are still confused about something in Flutter development!! Do let us know…we would love to assist

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply