prefixIcon property

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 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 alignment can be changed using Align with a fixed widthFactor and heightFactor.

This example shows how the prefix icon alignment can be changed using Align with a fixed widthFactor and heightFactor.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [InputDecorator].

void main() => runApp(const PrefixIconExampleApp());

class PrefixIconExampleApp extends StatelessWidget {
  const PrefixIconExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: InputDecoratorExample()));
  }
}

class InputDecoratorExample extends StatelessWidget {
  const InputDecoratorExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Enter name',
        prefixIcon: Align(
          widthFactor: 1.0,
          heightFactor: 1.0,
          child: Icon(Icons.person),
        ),
      ),
    );
  }
}

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

// TODO(framework): Replace the following block with a @dartpad directive
// when it's supported. https://github.com/dart-lang/dartdoc/issues/4123
/// {@macro material_ui.dartpad_guide}
///
/// {@example /example/lib/input_decorator/input_decoration.prefix_icon.0.dart#body}
///
/// </callout-box>
///
/// 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.
final Widget? prefixIcon;