suffixIcon property Null safety

Widget? suffixIcon

An icon that appears after the editable part of the text field and after the suffix or suffixText, within the decoration's container.

The size and color of the suffix icon is configured automatically using an IconTheme and therefore does not need to be explicitly given in the icon widget.

The suffix icon is constrained with a minimum size of 48px by 48px, but can be expanded beyond that. Anything larger than 24px will require additional padding to ensure it matches the material spec of 12px padding between the right edge of the input and trailing edge of the prefix icon. The following snippet shows how to pad the trailing edge of the suffix icon:

suffixIcon: Padding(
  padding: const EdgeInsetsDirectional.only(end: 12.0),
  child: myIcon, // myIcon is a 48px-wide widget.

The decoration's container is the area which is filled if filled is true and bordered per the border. It's the area adjacent to icon and above the widgets that contain helperText, errorText, and counterText.

See also:

  • Icon and ImageIcon, which are typically used to show icons.
  • suffix and suffixText, which are other ways to show content after the text field (but before the icon).
  • prefixIcon, which is the same but on the leading edge.


final Widget? suffixIcon;