A visual guide to Input Decorations for Flutter TextField

A thousand pictures is worth a word

Consider this a visual supplement the InputDecoration documentation. Sometimes it’s easier to just see and understand rather than reading a long description.

No decoration

TextField(),

Icon

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.star),
  ),
),

Prefix icon

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.star),
  ),
),

Suffix icon

TextField(
  decoration: InputDecoration(
    suffixIcon: Icon(Icons.star),
  ),
),

Prefix

This can be any widget.

TextField(
  decoration: InputDecoration(
    prefix: Container(width: 10, height: 10, color: Colors.red,)
  ),
),

Prefix text

TextField(
  decoration: InputDecoration(
    prefixText: 'Hello'
  ),
),

Hint text

TextField(
  decoration: InputDecoration(
    hintText: 'Hello',
  ),
),

Suffix text

TextField(
  decoration: InputDecoration(
    suffixText: 'Hello',
  ),
),

Label text

TextField(
  decoration: InputDecoration(
    labelText: 'Hello',
  ),
),

Unfocused

Focused

Helper text

TextField(
  decoration: InputDecoration(
    helperText: 'Hello',
  ),
),

Error text

TextField(
  decoration: InputDecoration(
    errorText: 'Hello',
  ),
),

Counter text

TextField(
  decoration: InputDecoration(
    counterText: 'Hello',
  ),
),

You could replace that text with a character count and rebuild when the input changes.

Counter

This could be any widget.

TextField(
  decoration: InputDecoration(
    counter: Container(width: 10, height: 10, color…