Sitemap
Flutter Community

Articles and Stories from the Flutter Community

Member-only story

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…

--

--

Flutter Community
Flutter Community

Published in Flutter Community

Articles and Stories from the Flutter Community

Suragch
Suragch

Written by Suragch

Flutter and Dart developer. Twitter: @suragch1, Email: suragch@suragch.dev

Responses (11)