Flutter : Showing errorText programmatically in a StatefullWidget


Flutter let us display error message based on the wrong input. This is possible with InputDecoration. Using the widget we can pass Error message as follows.

TextField(
                  style: inStyle,                   
                   decoration: InputDecoration(
                    errorText: 'Date can\'t be empty',
                    labelText: 'Expected Completion Date',                    
                    border: OutlineInputBorder(),
                  ),
                ),

How to display Error programmatically

In StatefullWidget we can use setState method to update the UI. We can do update UI based on the error we found by doing the following

  • Create variable in your State class, say bool dateError
  • Use the variable in the errorText of the InputDecoration
  • Update the variable in a event like Onpressed or OnTap of a widget.

The Error variable

The Error variable can be declared in the State portion of the widget as follows

class _HomePageState extends State<HomePage> {
   //Error variables
     bool dateError = false;
......

Checking the Error on errorText

We can check on the variable for showing errorText message using the conditional operator and the dateError variable .

TextField(                
                   decoration: InputDecoration(
                    errorText: dateError ? 'Date can\'t be empty', : null
                    labelText: 'Expected Completion Date',                    
                    border: OutlineInputBorder(),
                  ),
                ),

Every time we a change the errorDate variable to true the message will appear. How do we change it? The Flutter Statefull widget can only detect change in a variable by using state, so it can update the UI.

Updating the dateError

Using an event listener and setState () we can update the dateError. The UI only detect change while it is done with setState ().

onPressed: () {
                          try {
                            setState(() {
                              txtDate.text.isEmpty
                                  ? dateError = true
                                  : dateError = false;
                        )
                       }
}

Here txtDate is a TextFieldEditingcontroller used to capture the input value from TextField.

As you can see the UI only show errorText while the dateError set to true .

The following list of posts may help you.

1 thought on “Flutter : Showing errorText programmatically in a StatefullWidget

  1. Pingback: Conditionally place a widget in Flutter | Manoj's blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.