suffixIcon property Null safety

Widget? suffixIcon
final

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 Design 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.

The suffix icon aligment can be changed using Align with a fixed widthFactor and heightFactor.

link
This example shows how the suffix icon alignment can be changed using Align with a fixed widthFactor and heightFactor.
To create a local project with this code sample, run:
flutter create --sample=material.InputDecoration.suffixIcon.1 mysample

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.
  • Align A widget that aligns its child within itself and optionally sizes itself based on the child's size.

Implementation

final Widget? suffixIcon;