Unverified Commit 6bb412e3 authored by Qun Cheng's avatar Qun Cheng Committed by GitHub

Added `controller` and `onSelected` properties to DropdownMenu (#116259)

parent e5e21c98
...@@ -9,23 +9,31 @@ import 'package:flutter/material.dart'; ...@@ -9,23 +9,31 @@ import 'package:flutter/material.dart';
void main() => runApp(const DropdownMenuExample()); void main() => runApp(const DropdownMenuExample());
class DropdownMenuExample extends StatelessWidget { class DropdownMenuExample extends StatefulWidget {
const DropdownMenuExample({super.key}); const DropdownMenuExample({super.key});
List<DropdownMenuEntry> getEntryList() { @override
final List<DropdownMenuEntry> entries = <DropdownMenuEntry>[]; State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}
for (int index = 0; index < EntryLabel.values.length; index++) { class _DropdownMenuExampleState extends State<DropdownMenuExample> {
// Disabled item 1, 2 and 6. final TextEditingController colorController = TextEditingController();
final bool enabled = index != 1 && index != 2 && index != 6; final TextEditingController iconController = TextEditingController();
entries.add(DropdownMenuEntry(label: EntryLabel.values[index].label, enabled: enabled)); ColorLabel? selectedColor;
} IconLabel? selectedIcon;
return entries;
}
@override @override
Widget build(BuildContext context) { 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( return MaterialApp(
theme: ThemeData( theme: ThemeData(
...@@ -34,25 +42,53 @@ class DropdownMenuExample extends StatelessWidget { ...@@ -34,25 +42,53 @@ class DropdownMenuExample extends StatelessWidget {
), ),
home: Scaffold( home: Scaffold(
body: SafeArea( body: SafeArea(
child: Padding( child: Column(
padding: const EdgeInsets.only(top: 20), children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[ children: <Widget>[
DropdownMenu( DropdownMenu<ColorLabel>(
label: const Text('Label'), initialSelection: ColorLabel.green,
dropdownMenuEntries: dropdownMenuEntries, controller: colorController,
label: const Text('Color'),
dropdownMenuEntries: colorEntries,
onSelected: (ColorLabel? color) {
setState(() {
selectedColor = color;
});
},
), ),
const SizedBox(width: 20), const SizedBox(width: 20),
DropdownMenu( DropdownMenu<IconLabel>(
controller: iconController,
enableFilter: true, enableFilter: true,
leadingIcon: const Icon(Icons.search), leadingIcon: const Icon(Icons.search),
label: const Text('Label'), label: const Text('Icon'),
dropdownMenuEntries: dropdownMenuEntries, dropdownMenuEntries: iconEntries,
inputDecorationTheme: const InputDecorationTheme(filled: true), inputDecorationTheme: const InputDecorationTheme(filled: true),
onSelected: (IconLabel? icon) {
setState(() {
selectedIcon = icon;
});
},
) )
], ],
), ),
),
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.')
],
) )
), ),
), ),
...@@ -60,15 +96,25 @@ class DropdownMenuExample extends StatelessWidget { ...@@ -60,15 +96,25 @@ class DropdownMenuExample extends StatelessWidget {
} }
} }
enum EntryLabel { enum ColorLabel {
item0('Item 0'), blue('Blue', Colors.blue),
item1('Item 1'), pink('Pink', Colors.pink),
item2('Item 2'), green('Green', Colors.green),
item3('Item 3'), yellow('Yellow', Colors.yellow),
item4('Item 4'), grey('Grey', Colors.grey);
item5('Item 5'),
item6('Item 6'); 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 String label;
final IconData icon;
} }
...@@ -43,11 +43,11 @@ void main() { ...@@ -43,11 +43,11 @@ void main() {
theme: themeData, theme: themeData,
home: const Scaffold( home: const Scaffold(
body: Center( body: Center(
child: DropdownMenu( child: DropdownMenu<int>(
dropdownMenuEntries: <DropdownMenuEntry>[ dropdownMenuEntries: <DropdownMenuEntry<int>>[
DropdownMenuEntry(label: 'Item 0'), DropdownMenuEntry<int>(value: 0, label: 'Item 0'),
DropdownMenuEntry(label: 'Item 1'), DropdownMenuEntry<int>(value: 1, label: 'Item 1'),
DropdownMenuEntry(label: 'Item 2'), DropdownMenuEntry<int>(value: 2, label: 'Item 2'),
], ],
), ),
), ),
...@@ -122,11 +122,11 @@ void main() { ...@@ -122,11 +122,11 @@ void main() {
theme: theme, theme: theme,
home: const Scaffold( home: const Scaffold(
body: Center( body: Center(
child: DropdownMenu( child: DropdownMenu<int>(
dropdownMenuEntries: <DropdownMenuEntry>[ dropdownMenuEntries: <DropdownMenuEntry<int>>[
DropdownMenuEntry(label: 'Item 0'), DropdownMenuEntry<int>(value: 0, label: 'Item 0'),
DropdownMenuEntry(label: 'Item 1'), DropdownMenuEntry<int>(value: 1, label: 'Item 1'),
DropdownMenuEntry(label: 'Item 2'), DropdownMenuEntry<int>(value: 2, label: 'Item 2'),
], ],
), ),
), ),
...@@ -223,11 +223,11 @@ void main() { ...@@ -223,11 +223,11 @@ void main() {
data: dropdownMenuTheme, data: dropdownMenuTheme,
child: const Scaffold( child: const Scaffold(
body: Center( body: Center(
child: DropdownMenu( child: DropdownMenu<int>(
dropdownMenuEntries: <DropdownMenuEntry>[ dropdownMenuEntries: <DropdownMenuEntry<int>>[
DropdownMenuEntry(label: 'Item 0'), DropdownMenuEntry<int>(value: 0, label: 'Item 0'),
DropdownMenuEntry(label: 'Item 1'), DropdownMenuEntry<int>(value: 1, label: 'Item 1'),
DropdownMenuEntry(label: 'Item 2'), DropdownMenuEntry<int>(value: 2, label: 'Item 2'),
], ],
), ),
), ),
...@@ -326,7 +326,7 @@ void main() { ...@@ -326,7 +326,7 @@ void main() {
data: dropdownMenuTheme, data: dropdownMenuTheme,
child: Scaffold( child: Scaffold(
body: Center( body: Center(
child: DropdownMenu( child: DropdownMenu<int>(
textStyle: TextStyle( textStyle: TextStyle(
color: Colors.pink, color: Colors.pink,
backgroundColor: Colors.cyan, backgroundColor: Colors.cyan,
...@@ -345,10 +345,10 @@ void main() { ...@@ -345,10 +345,10 @@ void main() {
), ),
), ),
inputDecorationTheme: const InputDecorationTheme(filled: true, fillColor: Colors.deepPurple), inputDecorationTheme: const InputDecorationTheme(filled: true, fillColor: Colors.deepPurple),
dropdownMenuEntries: const <DropdownMenuEntry>[ dropdownMenuEntries: const <DropdownMenuEntry<int>>[
DropdownMenuEntry(label: 'Item 0'), DropdownMenuEntry<int>(value: 0, label: 'Item 0'),
DropdownMenuEntry(label: 'Item 1'), DropdownMenuEntry<int>(value: 1, label: 'Item 1'),
DropdownMenuEntry(label: 'Item 2'), DropdownMenuEntry<int>(value: 2, label: 'Item 2'),
], ],
), ),
), ),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment