Flutter : DropDown Button Widget

Richa Sharma
Globant
Published in
1 min readJan 31, 2020
  • Dropdown Buttoon is a material design button for selecting from a list of items.
  • The button shows the currently selected item as well as an arrow that opens a menu for selecting another item.
  • It makes easy way for user to select items.A dropdown button lets the user select from a number of items.
  • The type T is the type of the value that each dropdown item represents.
  • Each DropDownMenuItem in items must be specialized with that same type argument.
  • Example for DropDownButton :-
class _DropDownList extends State<DropDownList> {
String dropdownValue = 'One';

@override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_drop_down_circle),
iconSize: 30,
elevation: 16,
style: TextStyle(color: Colors.teal),
underline: Container(
height: 2,
color: Colors.black,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
}
}
  • In DropDownButton there is onChanged callback it updates the state that defines the dropdown’s value.
  • Note : If the onChanged callback is null or the list of items is null then the dropdown button will be disabled, i.e. its arrow will be displayed in grey and it will not respond to input.

Happy Reading :)

--

--