How To Change Flutter Textformfield Error Text

Flutter textformfield error text customization. In this post, I will be implementing Flutter textformfield error text in Flutter textformfield. I will be explaining it step by step using proper Flutter example easy code so you can have a practical and complete understanding of how to change Flutter textformfield error text in Flutter textformfield.

Outline

What is Flutter Textformfield Error Text?
Implementing Flutter Textformfield Error Text(All Steps)
Beautiful Flutter Textformfield Design Source Code
Conclusion

What is Flutter Textformfield Error Text?

Flutter textformfield error text is the text that is shown at bottom left of the Flutter textformfield underline border. It is shown whenever a wrong input is given to the Flutter textformfield. 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 textformfield error text. Let’s now see how we can show the error text in Flutter textformfield.

Implementing Flutter Textformfield Error Text(All Steps)

To show the Flutter textformfield error text, we have to use the decoration constructor of the Flutter textformfield, 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:

 TextFormField(
            decoration: InputDecoration(
                  errorText: 'This is the error text',
                ),
              )

You can see in the above image the error text is implemented in Flutter textformfield. 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 textformfield 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 textformfield. 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 textformfield.

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 textformfield error text. Let’s see how it will remove the error text from Flutter textformfield.

Step 3

errorText: errorTextvalue.isEmpty ? null : 'This is the error text'

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 textformfield error text logically. Now you have a practical understanding of how Flutter textformfield error text is implemented and customized. If you still have any queries regarding Flutter textformfield 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 textformfield design in which Flutter textformfield 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.

Beautiful Flutter Textformfield Design 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: TextFormField(
                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.purple)),
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(50),
                      borderSide: BorderSide(color: Colors.purple)),
                  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

In conclusion, we have learned how to implement and customize Flutter textformfield error text logically. I’d enjoy your feedback and encourage you to have a look at my other articles on Flutter app development, Flutter widgets, amazing Flutter templates, Flutter animations and many more, links to some of those articles are listed below. That’s it for this particular post. Thanks for reading.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.