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 | |
5 | import 'package:collection/collection.dart' ; |
6 | import '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 [InputDecorationTheme] parameter. |
13 | |
14 | void main() { |
15 | runApp(const DropdownMenuExample()); |
16 | } |
17 | |
18 | typedef ColorEntry = DropdownMenuEntry<ColorLabel>; |
19 | |
20 | // DropdownMenuEntry labels and values for the first dropdown menu. |
21 | enum 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 | |
44 | typedef IconEntry = DropdownMenuEntry<IconLabel>; |
45 | |
46 | // DropdownMenuEntry labels and values for the second dropdown menu. |
47 | enum 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 | |
64 | class DropdownMenuExample extends StatefulWidget { |
65 | const DropdownMenuExample({super.key}); |
66 | |
67 | @override |
68 | State<DropdownMenuExample> createState() => _DropdownMenuExampleState(); |
69 | } |
70 | |
71 | class _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 | |