// Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. // Flutter code sample for DropdownButton.selectedItemBuilder import 'package:flutter/material.dart'; 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: MainAxisAlignment.center, children: <Widget>[ Text('Select a city:', style: Theme.of(context).textTheme.bodyLarge), Padding( padding: const EdgeInsets.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:Alignment.centerLeft, constraints: const BoxConstraints(minWidth: 100), child: Text( item, style: const TextStyle(color: Colors.blue, fontWeight: FontWeight.w600), ), ); }).toList(); }, items: cities.keys.map<DropdownMenuItem<String>>((String item) { return DropdownMenuItem<String>( value: item, child: Text(item), ); }).toList(), ), ), ], ), ); } }