selectedItemBuilder property

A builder to customize the dropdown buttons corresponding to the DropdownMenuItems in items.

When a DropdownMenuItem is selected, the widget that will be displayed from the list corresponds to the DropdownMenuItem of the same index in items.

This sample shows a DropdownButton with a button with Text that corresponds to but is unique from DropdownMenuItem.

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

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [DropdownButton.selectedItemBuilder].

Map<String, String> cities = <String, String>{
  'New York': 'NYC',
  'Los Angeles': 'LA',
  'San Francisco': 'SF',
  'Chicago': 'CH',
  'Miami': 'MI',
};

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DropdownButton Sample')),
        body: const Center(child: DropdownButtonExample()),
      ),
    );
  }
}

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

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String selectedItem = cities.keys.first;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: .center,
        children: <Widget>[
          Text('Select a city:', style: Theme.of(context).textTheme.bodyLarge),
          Padding(
            padding: const .symmetric(horizontal: 8.0),
            child: DropdownButton<String>(
              value: selectedItem,
              onChanged: (String? value) {
                // This is called when the user selects an item.
                setState(() => selectedItem = value!);
              },
              selectedItemBuilder: (BuildContext context) {
                return cities.values.map<Widget>((String item) {
                  // This is the widget that will be shown when you select an item.
                  // Here custom text style, alignment and layout size can be applied
                  // to selected item string.
                  return Container(
                    alignment: .centerLeft,
                    constraints: const BoxConstraints(minWidth: 100),
                    child: Text(
                      item,
                      style: const TextStyle(
                        color: Colors.blue,
                        fontWeight: .w600,
                      ),
                    ),
                  );
                }).toList();
              },
              items: cities.keys.map<DropdownMenuItem<String>>((String item) {
                return DropdownMenuItem<String>(value: item, child: Text(item));
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}

If this callback is null, the DropdownMenuItem from items that matches value will be displayed.

The list of widgets returned by this builder must be exactly the same length as the items list.

Implementation

DropdownButton class