Make the UI interactive with InputDecoration widget in Flutter


Use InputDecoration widget has many thing to offer, from Helper text to Error catching conditional statement.

Every Flutter widget has reason to be served, InputDecoration widget allow us to dress up input form with label, helper text, Error text and many more. Here is sample TextField Decoration

TextField(          style: inStyle,
                    controller: projectDesc,
                    decoration: InputDecoration(
                      labelText: 'Description',
                      hintText: 'eg :SQL Server project',
                      helperText: 'Description',
                      errorText='I got some error for you'
                      border: OutlineInputBorder(),
                    )),

The labelText placed at the top, helpertext below the TextField widget, hintText showing inside the box like placeholder in HTML/CSS, border for placing some fancy border which also showing label while in editing mode.

Treat errorText programmatically

To display some error based on validation widget should able to detect change in siblings, which means the widget should be a StatefullWidget and then use it as follows

errorText:
    numberError ? 'It can't be blank' : null)

Also you need to use setState as follows in a Event of your choice

   setState(() {
                              numberTxt.text.isEmpty
                                  ? numberError = true
                                 })
                         

Saving words for another post….. lol

1 thought on “Make the UI interactive with InputDecoration widget in Flutter

  1. Pingback: Flutter : Showing errorText programmatically in a StatefullWidget | 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.