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

Icon

Prefix icon

Suffix icon

Prefix

This can be any widget.

Prefix text

Hint text

Suffix text

Label text

Unfocused

Focused

Helper text

Error text

Counter text

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

Counter

This could be any widget.

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.

Max lines

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

The default is one line:

Hint text direction

Left-to-right

Right-to-left

Floating label behavior

Auto

Always

Never

Border

None

Underline

Outline

Outline with border radius

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.

Filled

Color

Color and border

Hover color

Enabled

true

false

Condensed

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

false

true

Combined effects

Dense

Content padding

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

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