A visual guide to Input Decorations for Flutter TextField

Published in

Flutter Community

6 min readFeb 17, 2021

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…