This Flutter tutorial shows you how to create DropdownButton in Flutter including how to updaate value and how to customize it.
If you have and input field and you want the users to select only from certain values, one of the most common input types is dropdown. In Fluter, it can be done easily using DropdownButton
widget.
To use the widget, there are two required properties: items
and onChanged
. items
is of type List<DropdownMenuItem<T>>
, where T
is the value type. It can be a number, a String or any other type. For each DropdownMenuItem
, you need to define value
and child
. The value
must be of type T
which means it must be the same across all options. For example, if you construct with DropdownButton<String>, the value of all options must be String. child
is the widget that will be rendered for that option item. onChanged
is a function with one parameter.
Every time the value changes, it will be called with the new value as the argument. Inside onChanged
, usually we update the state that stores the dropdown value.
There are two non-required options that you'll most likely use. First is value
, which stores the current value. If the value matches a DropdownMenuItem's value, the option item will be displayed as selected item. It can be used to set initial value as well. The other option is hint
, which is a widget that will be shown if no value selected.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter DropdownButton Tutorial',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter DropdownButton Tutorial by Woolha.com'),
),
body: Center(
child: DropdownExample(),
),
),
);
}
}
class DropdownExample extends StatefulWidget {
@override
_DropdownExampleState createState() {
return _DropdownExampleState();
}
}
class _DropdownExampleState extends State<DropdownExample> {
String? _value;
@override
Widget build(BuildContext context) {
return Center(
child: DropdownButton<String>(
items: [
DropdownMenuItem<String>(
child: Text('Item 1'),
value: 'one',
),
DropdownMenuItem<String>(
child: Text('Item 2'),
value: 'two',
),
DropdownMenuItem<String>(
child: Text('Item 3'),
value: 'three',
),
],
onChanged: (String? value) {
setState(() {
_value = value;
});
},
hint: Text('Select Item'),
value: _value,
),
);
}
}
For list of available options, see the table below.
Option | Description |
---|---|
Key key |
The widget's key |
List<DropdownMenuItem<T>> |
The options. |
T value |
The current value. |
Widget hint |
Widget that will be displayed if value is null. |
Widget disableHint |
Widget that will be displayed if the dropdown is disabled. |
(T) -> void onChanged |
Function that will be exeucted every time the value changes. |
int elevation |
Z-coordinate of the options. |
TextStyle style |
Text style inside the dropdown. |
Widget underline |
Widget that will be used for drawing the drop-down button's underline. Default is 0.0 width bottom border with color 0xFFBDBDBD. |
Widget icon |
The dropdown's icon. Default is Icons.arrow_drop_down |
Widget iconDisabledColor |
Icon color when it's disabled. If the thems' ThemeData.brightness is Brightness.light , default is Colors.grey.shade700. . If it's Brightness.dark , default is Colors.white70 . |
Widget iconEnabledColor |
Icon color when it's enabled. If the thems' ThemeData.brightness is Brightness.light , default is Colors.grey.shade700. . If it's Brightness.dark , default is Colors.white70 . |
double iconSize |
The icon size. Default is 24.0 . |
bool isDense |
Whether to reduce the button's height. Default is false . |
bool isExpanded |
Whether to set the dropdown's inner contents to horizontally fill its parent. Default is false . |
Below is a custom DropdownButton
example that uses custom TextStyle
, underline
as well as icon color and size. In addition, instead of using standard Text
widget as DropdownMenuItem
's child, it uses a Row
that also contains an Icon
.
class _DropdownExampleState extends State<DropdownExample> {
String? _value;
@override
Widget build(BuildContext context) {
return Center(
child: DropdownButton<String>(
items: [
DropdownMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.filter_1),
Text('Item 1'),
],
),
value: 'one',
),
DropdownMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.filter_2),
Text('Item 2'),
],
),
value: 'two',
),
DropdownMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.filter_3),
Text('Item 3'),
],
),
value: 'three',
),
],
isExpanded: false,
onChanged: (String? value) {
setState(() {
_value = value;
});
},
hint: Text('Select Item'),
value: _value,
underline: Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey))
),
),
style: TextStyle(
fontSize: 30,
color: Colors.black,
),
iconEnabledColor: Colors.pink,
// iconDisabledColor: Colors.grey,
iconSize: 40,
),
);
}
}