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

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

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

   setState(() {
                                  ? numberError = true

Saving words for another post….. lol

Published by


A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

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

Leave a Reply

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

You are commenting using your 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.