prefixIcon property Null safety

Widget? prefixIcon

An icon that appears before the prefix or prefixText and before the editable part of the text field, within the decoration's container.

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

The prefix 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 left edge of the input and leading edge of the prefix icon. The following snippet shows how to pad the leading edge of the prefix icon:

prefixIcon: Padding(
  padding: const EdgeInsetsDirectional.only(start: 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.
  • prefix and prefixText, which are other ways to show content before the text field (but after the icon).
  • suffixIcon, which is the same but on the trailing edge.


final Widget? prefixIcon;