If you've ever had a form that submits to a database, you'll agree that ensuring that users submit the correct option is important. One way to do so is by using dropdown buttons with selected options. A typical dropdown button in flutter looks like this;
DropdownButton<String>(
items: [
DropdownMenuItem<String>(
value: "January",
child: Text(
"Male",
),
DropdownMenuItem<String>(
value: "February",
child: Text(
"Female",
),
],
onChanged: (value) async {
setState(() {
gender= value;
});
}
value: gender,
elevation: 2,
style: TextStyle(
color: Colors.white, fontSize: 16),
isDense: true,
iconSize: 30.0,
iconEnabledColor: Colors.white,
),
),
This dropdown will work in most cases, however it is quite difficult to validate your dropdown to prevent users from not choosing any option before submitting. Thankfully flutter has an inbuilt widget, that does exactly what we want, the DropdownButtonFormField.
The DropdownButtonFormField works like a dropdown button except it has the validator property with which you can validate for when a user does not choose an option before submitting. Other things you should know about this widget are;
- The widget should be used inside a form field widget
- You can style the widget using the decoration property
- Items parameter must not be null
An example of the DropdownButtonFormField is shown below;
DropdownButtonFormField<String>(
items: [
DropdownMenuItem<String>(
value: "January",
child: Text(
"Male",
),
DropdownMenuItem<String>(
value: "February",
child: Text(
"Female",
),
],
onChanged: (value) async {
setState(() {
gender= value;
});
}
value: gender,
validator: (value) => value == null
? 'Please fill in your gender'
: null,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),),
);
elevation: 2,
style: TextStyle(
color: Colors.white, fontSize: 16),
isDense: true,
iconSize: 30.0,
iconEnabledColor: Colors.white,
),
),
And it's that easy to validate your dropdownbutton in flutter. One more thing you should know is that the DropdownButtonFormField does not support the dropdown color property. You can change the color of your dropdown by wrapping it with your theme widget and changing the canvas color. An example is also shown below
Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.black),
child: DropdownButtonFormField<String>(
items: [
DropdownMenuItem<String>(
value: "January",
child: Text(
"Male",
),
DropdownMenuItem<String>(
value: "February",
child: Text(
"Female",
),
],
onChanged: (value) async {
setState(() {
gender= value;
});
}
value: gender,
validator: (value) => value == null
? 'Please fill in your gender'
: null,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),),
);
elevation: 2,
style: TextStyle(
color: Colors.white, fontSize: 16),
isDense: true,
iconSize: 30.0,
iconEnabledColor: Colors.white,
),
),
),
Many thanks for reading this till the end.