A visual guide to Input Decorations for Flutter TextField

A thousand pictures is worth a word

Image for post
Image for post

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

Image for post
Image for post

Icon

Image for post
Image for post

Prefix icon

Image for post
Image for post

Suffix icon

Image for post
Image for post

Prefix

This can be any widget.

Image for post
Image for post

Prefix text

Image for post
Image for post

Hint text

Image for post
Image for post

Suffix text

Image for post
Image for post

Label text

Image for post
Image for post
Image for post
Image for post

Helper text

Image for post
Image for post

Error text

Image for post
Image for post

Counter text

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

Image for post
Image for post

Counter

This could be any widget.

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

Image for post
Image for post

Style

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

Image for post
Image for post

Max lines

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

Image for post
Image for post

The default is one line:

Image for post
Image for post

Hint text direction

Image for post
Image for post
Image for post
Image for post

Floating label behavior

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Border

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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

Image for post
Image for post

Filled

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Enabled

Image for post
Image for post
Image for post
Image for post

Condensed

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

Image for post
Image for post
Image for post
Image for post

Combined effects

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Mystery

I couldn’t figure these two out:

  • alignLabelWithHint
  • focusColor

Feel free to leave a comment.

See also

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

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