Added controller and onSelected properties to DropdownMenu (#116259)

mauricioluz · Dec 1, 2022 · 6bb412e · 6bb412e
1 parent e5e21c9
commit 6bb412e
Show file tree

Hide file tree

Showing 4 changed files with 381 additions and 137 deletions.
diff --git a/examples/api/lib/material/dropdown_menu/dropdown_menu.0.dart b/examples/api/lib/material/dropdown_menu/dropdown_menu.0.dart
@@ -9,23 +9,31 @@ import 'package:flutter/material.dart';
 
 void main() => runApp(const DropdownMenuExample());
 
-class DropdownMenuExample extends StatelessWidget {
+class DropdownMenuExample extends StatefulWidget {
   const DropdownMenuExample({super.key});
 
-  List<DropdownMenuEntry> getEntryList() {
-    final List<DropdownMenuEntry> entries = <DropdownMenuEntry>[];
+  @override
+  State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
+}
 
-    for (int index = 0; index < EntryLabel.values.length; index++) {
-      // Disabled item 1, 2 and 6.
-      final bool enabled = index != 1 && index != 2 && index != 6;
-      entries.add(DropdownMenuEntry(label: EntryLabel.values[index].label, enabled: enabled));
-    }
-    return entries;
-  }
+class _DropdownMenuExampleState extends State<DropdownMenuExample> {
+  final TextEditingController colorController = TextEditingController();
+  final TextEditingController iconController = TextEditingController();
+  ColorLabel? selectedColor;
+  IconLabel? selectedIcon;
 
   @override
   Widget build(BuildContext context) {
-    final List<DropdownMenuEntry> dropdownMenuEntries = getEntryList();
+    final List<DropdownMenuEntry<ColorLabel>> colorEntries = <DropdownMenuEntry<ColorLabel>>[];
+    for (final ColorLabel color in ColorLabel.values) {
+      colorEntries.add(
+        DropdownMenuEntry<ColorLabel>(value: color, label: color.label, enabled: color.label != 'Grey'));
+    }
+
+    final List<DropdownMenuEntry<IconLabel>> iconEntries = <DropdownMenuEntry<IconLabel>>[];
+    for (final IconLabel icon in IconLabel.values) {
+      iconEntries.add(DropdownMenuEntry<IconLabel>(value: icon, label: icon.label));
+    }
 
     return MaterialApp(
       theme: ThemeData(
@@ -34,41 +42,79 @@ class DropdownMenuExample extends StatelessWidget {
       ),
       home: Scaffold(
         body: SafeArea(
-          child: Padding(
-            padding: const EdgeInsets.only(top: 20),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                DropdownMenu(
-                  label: const Text('Label'),
-                  dropdownMenuEntries: dropdownMenuEntries,
+          child: Column(
+            children: <Widget>[
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 20),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: <Widget>[
+                    DropdownMenu<ColorLabel>(
+                      initialSelection: ColorLabel.green,
+                      controller: colorController,
+                      label: const Text('Color'),
+                      dropdownMenuEntries: colorEntries,
+                      onSelected: (ColorLabel? color) {
+                        setState(() {
+                          selectedColor = color;
+                        });
+                      },
+                    ),
+                    const SizedBox(width: 20),
+                    DropdownMenu<IconLabel>(
+                      controller: iconController,
+                      enableFilter: true,
+                      leadingIcon: const Icon(Icons.search),
+                      label: const Text('Icon'),
+                      dropdownMenuEntries: iconEntries,
+                      inputDecorationTheme: const InputDecorationTheme(filled: true),
+                      onSelected: (IconLabel? icon) {
+                        setState(() {
+                          selectedIcon = icon;
+                        });
+                      },
+                    )
+                  ],
                 ),
-                const SizedBox(width: 20),
-                DropdownMenu(
-                  enableFilter: true,
-                  leadingIcon: const Icon(Icons.search),
-                  label: const Text('Label'),
-                  dropdownMenuEntries: dropdownMenuEntries,
-                  inputDecorationTheme: const InputDecorationTheme(filled: true),
+              ),
+              if (selectedColor != null && selectedIcon != null)
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: <Widget>[
+                    Text('You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 5),
+                      child: Icon(selectedIcon?.icon, color: selectedColor?.color,))
+                  ],
                 )
-              ],
-            ),
+              else const Text('Please select a color and an icon.')
+            ],
           )
         ),
       ),
     );
   }
 }
 
-enum EntryLabel {
-  item0('Item 0'),
-  item1('Item 1'),
-  item2('Item 2'),
-  item3('Item 3'),
-  item4('Item 4'),
-  item5('Item 5'),
-  item6('Item 6');
+enum ColorLabel {
+  blue('Blue', Colors.blue),
+  pink('Pink', Colors.pink),
+  green('Green', Colors.green),
+  yellow('Yellow', Colors.yellow),
+  grey('Grey', Colors.grey);
+
+  const ColorLabel(this.label, this.color);
+  final String label;
+  final Color color;
+}
+
+enum IconLabel {
+  smile('Smile', Icons.sentiment_satisfied_outlined),
+  cloud('Cloud', Icons.cloud_outlined,),
+  brush('Brush', Icons.brush_outlined),
+  heart('Heart', Icons.favorite);
 
-  const EntryLabel(this.label);
+  const IconLabel(this.label, this.icon);
   final String label;
+  final IconData icon;
 }