1// Copyright 2014 The Flutter Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import 'package:collection/collection.dart';
6import 'package:flutter/material.dart';
7
8// Flutter code sample for [DropdownMenu]s. The first dropdown menu
9// has the default outlined border and demos using the
10// [DropdownMenuEntry] style parameter to customize its appearance.
11// The second dropdown menu customizes the appearance of the dropdown
12// menu's text field with its [DropdownMenu.inputDecorationTheme] parameter.
13
14void main() {
15 runApp(const DropdownMenuExample());
16}
17
18typedef ColorEntry = DropdownMenuEntry<ColorLabel>;
19
20// DropdownMenuEntry labels and values for the first dropdown menu.
21enum ColorLabel {
22 blue('Blue', Colors.blue),
23 pink('Pink', Colors.pink),
24 green('Green', Colors.green),
25 yellow('Orange', Colors.orange),
26 grey('Grey', Colors.grey);
27
28 const ColorLabel(this.label, this.color);
29 final String label;
30 final Color color;
31
32 static final List<ColorEntry> entries = UnmodifiableListView<ColorEntry>(
33 values.map<ColorEntry>(
34 (ColorLabel color) => ColorEntry(
35 value: color,
36 label: color.label,
37 enabled: color.label != 'Grey',
38 style: MenuItemButton.styleFrom(foregroundColor: color.color),
39 ),
40 ),
41 );
42}
43
44typedef IconEntry = DropdownMenuEntry<IconLabel>;
45
46// DropdownMenuEntry labels and values for the second dropdown menu.
47enum IconLabel {
48 smile('Smile', Icons.sentiment_satisfied_outlined),
49 cloud('Cloud', Icons.cloud_outlined),
50 brush('Brush', Icons.brush_outlined),
51 heart('Heart', Icons.favorite);
52
53 const IconLabel(this.label, this.icon);
54 final String label;
55 final IconData icon;
56
57 static final List<IconEntry> entries = UnmodifiableListView<IconEntry>(
58 values.map<IconEntry>(
59 (IconLabel icon) => IconEntry(value: icon, label: icon.label, leadingIcon: Icon(icon.icon)),
60 ),
61 );
62}
63
64class DropdownMenuExample extends StatefulWidget {
65 const DropdownMenuExample({super.key});
66
67 @override
68 State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
69}
70
71class _DropdownMenuExampleState extends State<DropdownMenuExample> {
72 final TextEditingController colorController = TextEditingController();
73 final TextEditingController iconController = TextEditingController();
74 ColorLabel? selectedColor;
75 IconLabel? selectedIcon;
76
77 @override
78 Widget build(BuildContext context) {
79 return MaterialApp(
80 theme: ThemeData(colorSchemeSeed: Colors.green),
81 home: Scaffold(
82 body: SafeArea(
83 child: Column(
84 children: <Widget>[
85 Padding(
86 padding: const EdgeInsets.symmetric(vertical: 20),
87 child: SingleChildScrollView(
88 scrollDirection: Axis.horizontal,
89 child: Row(
90 mainAxisSize: MainAxisSize.min,
91 mainAxisAlignment: MainAxisAlignment.center,
92 children: <Widget>[
93 DropdownMenu<ColorLabel>(
94 initialSelection: ColorLabel.green,
95 controller: colorController,
96 // The default requestFocusOnTap value depends on the platform.
97 // On mobile, it defaults to false, and on desktop, it defaults to true.
98 // Setting this to true will trigger a focus request on the text field, and
99 // the virtual keyboard will appear afterward.
100 requestFocusOnTap: true,
101 label: const Text('Color'),
102 onSelected: (ColorLabel? color) {
103 setState(() {
104 selectedColor = color;
105 });
106 },
107 dropdownMenuEntries: ColorLabel.entries,
108 ),
109 const SizedBox(width: 24),
110 DropdownMenu<IconLabel>(
111 controller: iconController,
112 enableFilter: true,
113 requestFocusOnTap: true,
114 leadingIcon: const Icon(Icons.search),
115 label: const Text('Icon'),
116 inputDecorationTheme: const InputDecorationTheme(
117 filled: true,
118 contentPadding: EdgeInsets.symmetric(vertical: 5.0),
119 ),
120 onSelected: (IconLabel? icon) {
121 setState(() {
122 selectedIcon = icon;
123 });
124 },
125 dropdownMenuEntries: IconLabel.entries,
126 ),
127 ],
128 ),
129 ),
130 ),
131 if (selectedColor != null && selectedIcon != null)
132 SingleChildScrollView(
133 scrollDirection: Axis.horizontal,
134 child: Row(
135 mainAxisSize: MainAxisSize.min,
136 mainAxisAlignment: MainAxisAlignment.center,
137 children: <Widget>[
138 Text('You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
139 Padding(
140 padding: const EdgeInsets.symmetric(horizontal: 5),
141 child: Icon(selectedIcon?.icon, color: selectedColor?.color),
142 ),
143 ],
144 ),
145 )
146 else
147 const Text('Please select a color and an icon.'),
148 ],
149 ),
150 ),
151 ),
152 );
153 }
154}
155