labelWidget property

Overrides the default label widget which is Text(label).

This widget is only displayed in the open dropdown menu. When an item is selected, the menu closes and the text field displays the plain text of the label.

The dropdown menu's closed state is a text field or a read-only text field on mobile, which can only display text. While custom widgets like icons or images can be shown in labelWidget when the menu is open, the text field will only show the label string upon selection.

To control the text that appears in the text field for a selected item, set the label property to a descriptive string.

This sample shows how to override the default label Text widget with one that forces the menu entry to appear on one line by specifying Text.maxLines and Text.overflow.

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

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for the [DropdownMenuEntry] `labelWidget` property.

enum ColorItem {
  blue('Blue', Colors.blue),
  pink('Pink', Colors.pink),
  green('Green', Colors.green),
  yellow('Yellow', Colors.yellow),
  grey('Grey', Colors.grey);

  const ColorItem(this.label, this.color);
  final String label;
  final Color color;
}

class DropdownMenuEntryLabelWidgetExample extends StatefulWidget {
  const DropdownMenuEntryLabelWidgetExample({super.key});

  @override
  State<DropdownMenuEntryLabelWidgetExample> createState() =>
      _DropdownMenuEntryLabelWidgetExampleState();
}

class _DropdownMenuEntryLabelWidgetExampleState
    extends State<DropdownMenuEntryLabelWidgetExample> {
  late final TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Created by Google Bard from 'create a lyrical phrase of about 25 words that begins with "is a color"'.
    const String longText =
        'is a color that sings of hope, A hue that shines like gold. It is the color of dreams, A shade that never grows old.';

    return Scaffold(
      body: Center(
        child: DropdownMenu<ColorItem>(
          width: 300,
          controller: controller,
          initialSelection: ColorItem.green,
          label: const Text('Color'),
          onSelected: (ColorItem? color) {
            print('Selected $color');
          },
          dropdownMenuEntries: ColorItem.values
              .map<DropdownMenuEntry<ColorItem>>((ColorItem item) {
                final String labelText = '${item.label} $longText\n';
                return DropdownMenuEntry<ColorItem>(
                  value: item,
                  label: labelText,
                  // Try commenting the labelWidget out or changing
                  // the labelWidget's Text parameters.
                  labelWidget: Text(
                    labelText,
                    maxLines: 1,
                    overflow: .ellipsis,
                  ),
                );
              })
              .toList(),
        ),
      ),
    );
  }
}

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

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

void main() {
  runApp(const DropdownMenuEntryLabelWidgetExampleApp());
}

Implementation

DropdownMenuEntry class