How To Change Flutter Textfield Error Text – Easy Flutter Code Example

In this tutorial, we’ll learn how to properly use and customize Flutter textfield error text by using practical Flutter code examples.

Introduction: Flutter Textfield Error Text

Flutter textfield error text is the text that is shown at bottom left of the Flutter textfield underline border. It is shown whenever a wrong input is given to the Flutter textfield. A logic is implemented like in the email field if the user input some blank space inside the email text then we can show the Flutter textfield error text. Let’s now see how we can show the error text in Flutter textfield.

Implementing Flutter Textfield Error Text(4 Steps)

To show the Flutter textfield error text, we have to use the decoration constructor of the Flutter textfield, then passing it the input decoration class and after that we have to use the error text constructor which takes a string. See the below code:

 TextField(
            decoration: InputDecoration(
                  errorText: 'This is an error text',
                ),
              )

You can see in the above image the error text is implemented in Flutter textfield. It changes the color of the underline border and error text color to red.

Let’s now implement error text using a proper logic in which we will have a condition that if user enters a blank space then the error will be shown. Let’s implement it step by step:

Step 1

String errorTextvalue = '';

First we have to define a simple empty string, by using that we will decide whether to show the Flutter textfield error text or not.

Step 2

 onChanged: (value) {
               setState(() {
                     if (value.contains(' ')) {
                      errorTextvalue = value;
                    } 
                     else {
                      errorTextvalue = '';
                    }
                  });
                }

We have used the onchanged constructor, the reason is that it updates whenever the user input or remove something from the Flutter textfield. The inputted value is stored in its value parameter. We have used an if else condition in which we specified that if the value contains a blank space then set this value to error text value variable. The reason is that if the error text is non null then it will show the error text in Flutter textfield.

In the else condition we have specified that make the error text value string empty means if the value doesn’t contain any empty spaces then make it empty which will remove the Flutter textfield error text. Let’s see how it will remove the error text from Flutter textfield.

Step 3

errorText: errorTextvalue.isEmpty ? null : 'Don\'t use blank spaces'

Using the error text constructor, we have implemented a logic that when the error text value is empty then make the error text null which in turn will remove the error text and if it is not empty then show the text that is mentioned in the above code line. You can specify any other text.

So these are the steps that you should follow to show the Flutter textfield error text logically. Now you have a practical understanding of how Flutter textfield error text is implemented and customized.

Click here if you want to practically understand how to style error text.

If you still have any queries regarding Flutter textfield hint text customization then do let me know in the comment section. I would love to answer them.

Now as a treat, I have created a customized beautiful Flutter textfield design in which Flutter textfield error text is also implemented logically and for borders error text border and focused error text border is also customized.

The complete source code is available in the next section.

Custom Flutter Textfield Error Text Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  String errorTextvalue = '';
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: TextField(
                onChanged: (value) {
                  setState(() {
                    if (value.contains(' ')) {
                      errorTextvalue = value;
                    } else {
                      errorTextvalue = '';
                    }
                  });
                },
                decoration: InputDecoration(
                  border: InputBorder.none,
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(50),
                      borderSide: BorderSide(color: Colors.green)),
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(50),
                      borderSide: BorderSide(color: Colors.green)),
                  errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(50),
                    borderSide: BorderSide(color: Colors.red)),
                  focusedErrorBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(50),
                      borderSide: BorderSide(color: Colors.red)),
                  errorText:
                      errorTextvalue.isEmpty ? null : 'Don\'t use blank spaces',
                ),
              ))),
    ));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement and customize Flutter textfield error text. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.