prefixIcon property Null safety

Widget? prefixIcon
final

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

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

link
This example shows how the prefix 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.prefixIcon.1 mysample

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

Implementation

final Widget? prefixIcon;