InputDecoration class

The border, labels, icons, and styles used to decorate a Material Design text field.

The TextField and InputDecorator classes use InputDecoration objects to describe their decoration. (In fact, this class is merely the configuration of an InputDecorator, which does all the heavy lifting.)

This sample shows how to style a TextField using an InputDecorator. The TextField displays a "send message" icon to the left of the input area, which is surrounded by a border an all sides. It displays the hintText inside the input area to help the user understand what input is required. It displays the helperText and counterText below the input area.

link

To create a local project with this code sample, run:
flutter create --sample=material.InputDecoration.1 mysample

This sample shows how to style a "collapsed" TextField using an InputDecorator. The collapsed TextField surrounds the hint text and input area with a border, but does not add padding around them.

link

To create a local project with this code sample, run:
flutter create --sample=material.InputDecoration.2 mysample

This sample shows how to create a TextField with hint text, a red border on all sides, and an error message. To display a red border and error message, provide errorText to the InputDecoration constructor.

link

To create a local project with this code sample, run:
flutter create --sample=material.InputDecoration.3 mysample

This sample shows how to style a TextField with a round border and additional text before and after the input area. It displays "Prefix" before the input area, and "Suffix" after the input area.

link

To create a local project with this code sample, run:
flutter create --sample=material.InputDecoration.4 mysample

This sample shows how to style a TextField with a prefixIcon that changes color based on the MaterialState. The color defaults to gray and is green while focused.
link

To create a local project with this code sample, run:
flutter create --sample=material.InputDecoration.5 mysample

This sample shows how to style a TextField with a prefixIcon that changes color based on the MaterialState through the use of ThemeData. The color defaults to gray, be blue while focused and red if in an error state.
link

To create a local project with this code sample, run:
flutter create --sample=material.InputDecoration.6 mysample

See also:

Annotations

Constructors

InputDecoration({Widget? icon, Color? iconColor, Widget? label, String? labelText, TextStyle? labelStyle, TextStyle? floatingLabelStyle, Widget? helper, String? helperText, TextStyle? helperStyle, int? helperMaxLines, String? hintText, TextStyle? hintStyle, TextDirection? hintTextDirection, int? hintMaxLines, Duration? hintFadeDuration, Widget? error, String? errorText, TextStyle? errorStyle, int? errorMaxLines, FloatingLabelBehavior? floatingLabelBehavior, FloatingLabelAlignment? floatingLabelAlignment, bool? isCollapsed, bool? isDense, EdgeInsetsGeometry? contentPadding, Widget? prefixIcon, BoxConstraints? prefixIconConstraints, Widget? prefix, String? prefixText, TextStyle? prefixStyle, Color? prefixIconColor, Widget? suffixIcon, Widget? suffix, String? suffixText, TextStyle? suffixStyle, Color? suffixIconColor, BoxConstraints? suffixIconConstraints, Widget? counter, String? counterText, TextStyle? counterStyle, bool? filled, Color? fillColor, Color? focusColor, Color? hoverColor, InputBorder? errorBorder, InputBorder? focusedBorder, InputBorder? focusedErrorBorder, InputBorder? disabledBorder, InputBorder? enabledBorder, InputBorder? border, bool enabled = true, String? semanticCounterText, bool? alignLabelWithHint, BoxConstraints? constraints})
Creates a bundle of the border, labels, icons, and styles used to decorate a Material Design text field.
const
InputDecoration.collapsed({required String? hintText, FloatingLabelBehavior? floatingLabelBehavior, FloatingLabelAlignment? floatingLabelAlignment, TextStyle? hintStyle, TextDirection? hintTextDirection, bool? filled = false, Color? fillColor, Color? focusColor, Color? hoverColor, InputBorder? border = InputBorder.none, bool enabled = true})
Defines an InputDecorator that is the same size as the input field.
const

Properties

alignLabelWithHint bool?
Typically set to true when the InputDecorator contains a multiline TextField (TextField.maxLines is null or > 1) to override the default behavior of aligning the label with the center of the TextField.
final
border InputBorder?
The shape of the border to draw around the decoration's container.
final
constraints BoxConstraints?
Defines minimum and maximum sizes for the InputDecorator.
final
contentPadding EdgeInsetsGeometry?
The padding for the input decoration's container.
final
counter Widget?
Optional custom counter widget to go in the place otherwise occupied by counterText. If this property is non null, then counterText is ignored.
final
counterStyle TextStyle?
The style to use for the counterText.
final
counterText String?
Optional text to place below the line as a character count.
final
disabledBorder InputBorder?
The border to display when the InputDecorator is disabled and is not showing an error.
final
enabled bool
If false helperText,errorText, and counterText are not displayed, and the opacity of the remaining visual elements is reduced.
final
enabledBorder InputBorder?
The border to display when the InputDecorator is enabled and is not showing an error.
final
error Widget?
Optional widget that appears below the InputDecorator.child and the border.
final
errorBorder InputBorder?
The border to display when the InputDecorator does not have the focus and is showing an error.
final
errorMaxLines int?
The maximum number of lines the errorText can occupy.
final
errorStyle TextStyle?
The style to use for the InputDecoration.errorText.
final
errorText String?
Text that appears below the InputDecorator.child and the border.
final
fillColor Color?
The base fill color of the decoration's container color.
final
filled bool?
If true the decoration's container is filled with fillColor.
final
floatingLabelAlignment FloatingLabelAlignment?
Defines where the floating label should be displayed.
final
floatingLabelBehavior FloatingLabelBehavior?
Defines how the floating label should behave.
final
floatingLabelStyle TextStyle?
The style to use for InputDecoration.labelText when the label is above (i.e., vertically adjacent to) the input field.
final
focusColor Color?
The fill color of the decoration's container when it has the input focus.
final
focusedBorder InputBorder?
The border to display when the InputDecorator has the focus and is not showing an error.
final
focusedErrorBorder InputBorder?
The border to display when the InputDecorator has the focus and is showing an error.
final
hashCode int
The hash code for this object.
no setteroverride
helper Widget?
Optional widget that appears below the InputDecorator.child.
final
helperMaxLines int?
The maximum number of lines the helperText can occupy.
final
helperStyle TextStyle?
The style to use for the helperText.
final
helperText String?
Text that provides context about the InputDecorator.child's value, such as how the value will be used.
final
hintFadeDuration Duration?
The duration of the hintText fade in and fade out animations.
final
hintMaxLines int?
The maximum number of lines the hintText can occupy.
final
hintStyle TextStyle?
The style to use for the hintText.
final
hintText String?
Text that suggests what sort of input the field accepts.
final
hintTextDirection TextDirection?
The direction to use for the hintText.
final
hoverColor Color?
The color of the highlight for the decoration shown if the container is being hovered over by a mouse.
final
icon Widget?
An icon to show before the input field and outside of the decoration's container.
final
iconColor Color?
The color of the icon.
final
isCollapsed bool?
Whether the decoration is the same size as the input field.
final
isDense bool?
Whether the InputDecorator.child is part of a dense form (i.e., uses less vertical space).
final
label Widget?
Optional widget that describes the input field.
final
labelStyle TextStyle?
The style to use for InputDecoration.labelText when the label is on top of the input field.
final
labelText String?
Optional text that describes the input field.
final
prefix Widget?
Optional widget to place on the line before the input.
final
prefixIcon Widget?
An icon that appears before the prefix or prefixText and before the editable part of the text field, within the decoration's container.
final
prefixIconColor Color?
Optional color of the prefixIcon
final
prefixIconConstraints BoxConstraints?
The constraints for the prefix icon.
final
prefixStyle TextStyle?
The style to use for the prefixText.
final
prefixText String?
Optional text prefix to place on the line before the input.
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
semanticCounterText String?
A semantic label for the counterText.
final
suffix Widget?
Optional widget to place on the line after the input.
final
suffixIcon Widget?
An icon that appears after the editable part of the text field and after the suffix or suffixText, within the decoration's container.
final
suffixIconColor Color?
Optional color of the suffixIcon.
final
suffixIconConstraints BoxConstraints?
The constraints for the suffix icon.
final
suffixStyle TextStyle?
The style to use for the suffixText.
final
suffixText String?
Optional text suffix to place on the line after the input.
final

Methods

applyDefaults(InputDecorationTheme theme) InputDecoration
Used by widgets like TextField and InputDecorator to create a new InputDecoration with default values taken from the theme.
copyWith({Widget? icon, Color? iconColor, Widget? label, String? labelText, TextStyle? labelStyle, TextStyle? floatingLabelStyle, Widget? helper, String? helperText, TextStyle? helperStyle, int? helperMaxLines, String? hintText, TextStyle? hintStyle, TextDirection? hintTextDirection, Duration? hintFadeDuration, int? hintMaxLines, Widget? error, String? errorText, TextStyle? errorStyle, int? errorMaxLines, FloatingLabelBehavior? floatingLabelBehavior, FloatingLabelAlignment? floatingLabelAlignment, bool? isCollapsed, bool? isDense, EdgeInsetsGeometry? contentPadding, Widget? prefixIcon, Widget? prefix, String? prefixText, BoxConstraints? prefixIconConstraints, TextStyle? prefixStyle, Color? prefixIconColor, Widget? suffixIcon, Widget? suffix, String? suffixText, TextStyle? suffixStyle, Color? suffixIconColor, BoxConstraints? suffixIconConstraints, Widget? counter, String? counterText, TextStyle? counterStyle, bool? filled, Color? fillColor, Color? focusColor, Color? hoverColor, InputBorder? errorBorder, InputBorder? focusedBorder, InputBorder? focusedErrorBorder, InputBorder? disabledBorder, InputBorder? enabledBorder, InputBorder? border, bool? enabled, String? semanticCounterText, bool? alignLabelWithHint, BoxConstraints? constraints}) InputDecoration
Creates a copy of this input decoration with the given fields replaced by the new values.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() String
A string representation of this object.
override

Operators

operator ==(Object other) bool
The equality operator.
override