Dropdown in Flutter Example

This article explains you how to customize dropdown widget in flutter applications to display options. In this flutter example, we are using different properties of flutter dropdown widget.

We are using dropdown button widget to display dropdown list in flutter applications. Dropdown widget displays only selected option by default. When we click on this widget, all options are displayed in list. There are multiple properties in this widget to customize it.

Basic Flutter Dropdown

Most important property in dropdown widget is items. We must pass array of options to this attribute. value property is used to set selected item in dropdown widget when user select it. We need to give unique value to each item under DropdownMenuItem widget. So we can get selected item value from onChanged() callback when user selects option from list.

int selectedValue = 1;

DropdownButton(
value: selectedValue,
items: [
DropdownMenuItem(
child: Text(“Cristiano Ronaldo”),
value: 1,
),
DropdownMenuItem(
child: Text(“Lionel Messi”),
value: 2,
),
DropdownMenuItem(
child: Text(“Neymar Jr.”),
value: 3,
)
],

onChanged: (int value) {
setState(() {
selectedValue = value;
});
},
),

Customize Dropdown in Flutter

We can customize view of dropdown widget using style property like other widgets. We can also change color of dropdown widget using dropdownColor property. We can also elevate dropdown button using elevation property. This value is from 1 to 9.

We can also set custom icon in dropdown button instead of default icon using icon property. We can also change size of dropdown icon using iconSize property. iconDisabledColor property is used to set color of icon when dropdown button is disabled. If we want to set different color for enabled dropdown button then we can use isonEnabledColor.

Dropdown button widget display empty value by default. To avoid this we can set custom text in this widget using hint property. If we do not set hint value and dropdown widget has options then first item is selected.

We can also set hint value when dropdown button widget is disabled. We can achieve this using disabledHint Property. Dropdown widget is disabled if we do not pass any option to items property.

selectedItemBuilder is used to display different custom text for each option in dropdown button when user selects it. For this we need to pass array to selectedItemBuilder property. We must keep order of custom text same as options text.

DropdownButtonHideUnderline widget is used to remove underline of dropdown button. For this we need to wrap DropdownButton widget inside this widget. Expanded property is used to expand dropdown button to full width.

Final Code

class MyDropDownScreen extends StatefulWidget {
@override
_MyDropDownScreenState createState() => _MyDropDownScreenState();
}

class _MyDropDownScreenState extends State<MyDropDownScreen> {

int selectedValue = 1;
List<Widget> listNickNames = [Text(‘CR7’), Text(‘Leo’), Text(‘Jola’)];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Dropdown Example’)),
body: Center(
child: Container(
child: DropdownButton(
elevation: 10,
dropdownColor: Colors.orangeAccent,
style: TextStyle(color: Colors.black, fontSize: 18),
hint: Text(‘Select Your Favourite Football Player’),
icon: Icon(Icons.arrow_drop_down_circle),
iconDisabledColor: Colors.grey,
iconEnabledColor: Colors.black,
value: selectedValue,
selectedItemBuilder: (BuildContext context)
{
return listNickNames;
},
items: [
DropdownMenuItem(
child: Text(“Cristiano Ronaldo”),
value: 1,
),
DropdownMenuItem(
child: Text(“Lionel Messi”),
value: 2,
),
DropdownMenuItem(
child: Text(“Neymar Jr.”),
value: 3,
)
],