A visual guide to Input Decorations for Flutter TextField

Suragch
Suragch
Feb 17 · 6 min read

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: Colors.red,)
),
),

You could make the widget change based on the number of characters that have been entered.

Style

This example shows hintStyle, but it works the same to set a TextStyle for labelStyle, counterStyle, errorStyle, prefixStyle, suffixStyle, and helperStyle.

TextField(
decoration: InputDecoration(
hintText: 'Hello',
hintStyle: TextStyle(color: Colors.green),
),
),

Max lines

The example here shows hintMaxLines, but helperMaxLines and errorMaxLines work similarly.

TextField(
decoration: InputDecoration(
hintMaxLines: 2,
hintText: 'This is a very long hint string that would normally span three lines but it cannot.',
),
),

The default is one line:

TextField(
decoration: InputDecoration(
hintText: 'This is a very long hint string that would normally span three lines but it cannot.',
),
),

Hint text direction

Left-to-right

TextField(
decoration: InputDecoration(
hintText: 'Hello שלום',
hintTextDirection: TextDirection.ltr,
),
),

Right-to-left

TextField(
decoration: InputDecoration(
hintText: 'Hello שלום',
hintTextDirection: TextDirection.rtl,
),
),

Floating label behavior

Auto

TextField(
decoration: InputDecoration(
labelText: 'Hello',
floatingLabelBehavior: FloatingLabelBehavior.auto,
),
),

Always

TextField(
decoration: InputDecoration(
labelText: 'Hello',
floatingLabelBehavior: FloatingLabelBehavior.always,
),
),

Never

TextField(
decoration: InputDecoration(
labelText: 'Hello',
floatingLabelBehavior: FloatingLabelBehavior.never,
),
),

Border

None

TextField(
decoration: InputDecoration(
border: InputBorder.none,
),
),

Underline

TextField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
),
),

Outline

TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),

Outline with border radius

TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
),

Specific border behavior

The border is the general case, but you can also modify that for specific situations by setting focusedBorder, enabledBorder, disabledBorder, errorBorder, and focusedErrorBorder.

TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.purple,
width: 2.0,
),
),
),
),

Filled

TextField(
decoration: InputDecoration(
filled: true,
),
),

Color

TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.blue.shade100,
),
),

Color and border

TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.blue.shade100,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide.none,
)
),
),

Hover color

TextField(
decoration: InputDecoration(
filled: true,
hoverColor: Colors.blue.shade100,
border: OutlineInputBorder(),
),
),

Enabled

true

TextField(
decoration: InputDecoration(
enabled: true,
hintText: 'hint',
helperText: 'helper',
labelText: 'label',
counterText: 'counter'
),
),

false

TextField(
decoration: InputDecoration(
enabled: false,
hintText: 'hint',
helperText: 'helper',
labelText: 'label',
counterText: 'counter'
),
),

Condensed

The yellow container is there to show you the size of the TextField.

false

Container(
color: Colors.yellow,
child: TextField(
decoration: InputDecoration(
isCollapsed: false,
hintText: 'hello',
),
),
),

true

color: Colors.yellow,
child: TextField(
decoration: InputDecoration(
isCollapsed: true,
hintText: 'hello',
),
),
),

Combined effects

TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.blue.shade100,
border: OutlineInputBorder(),
labelText: 'label',
hintText: 'hint',
helperText: 'help',
counterText: 'counter',
icon: Icon(Icons.star),
prefixIcon: Icon(Icons.favorite),
suffixIcon: Icon(Icons.park),
),
),

Dense

TextField(
decoration: InputDecoration(
isDense: true,
filled: true,
fillColor: Colors.blue.shade100,
border: OutlineInputBorder(),
labelText: 'label',
hintText: 'hint',
helperText: 'help',
counterText: 'counter',
icon: Icon(Icons.star),
prefixIcon: Icon(Icons.favorite),
suffixIcon: Icon(Icons.park),
),
),

Content padding

TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(40),
filled: true,
fillColor: Colors.blue.shade100,
border: OutlineInputBorder(),
labelText: 'label',
hintText: 'hint',
helperText: 'help',
counterText: 'counter',
icon: Icon(Icons.star),
prefixIcon: Icon(Icons.favorite),
suffixIcon: Icon(Icons.park),
),
),

Mystery

I couldn’t figure these two out:

  • alignLabelWithHint
  • focusColor

Feel free to leave a comment.

See also

Flutter Community

Articles and Stories from the Flutter Community

Suragch

Written by

Suragch

A Flutter and Dart developer. Follow me on Twitter @suragch1 to get updates of new articles.

Flutter Community

Articles and Stories from the Flutter Community

Suragch

Written by

Suragch

A Flutter and Dart developer. Follow me on Twitter @suragch1 to get updates of new articles.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store