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