How to make Dropdown Form Field in Flutter
A drop down menu is a menu that offers a list of options (Large List of Choices) from which we have to select only one option. Title of the menu is displayed in it if not any option is selected. If we select an option from the list then that option will be display in it rather than the title. In this article we will discuss the dropdown form field in flutter. Flutter provides easy implementation of Dropdown Button. We will use stateful widget for drop down button because dropdown button will change its state on user selection.
class FirstScreen extends StatefulWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
int _value = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: DropdownButton(
value: _value,
items: const [
DropdownMenuItem(
child: Text('First Item'),
value: 1,
),
DropdownMenuItem(
child: Text('Second Item'),
value: 2,
),
DropdownMenuItem(
child: Text('Third Item'),
value: 3,
),
],
onChanged: (newValue) {
setState(() {
_value = newValue as int;
});
},
)),
);
}
}This is the basic code of Dropdown Button. In this basic example we have used two properties and one method. The two properties that we have used are value and items.
Value in Dropdown Form Field in Flutter
We used the value property to store the current state of widget and for this we used the _value variable. In _value variable we stored the current state. When user change the value of dropdown its current state value changed. When use changed the option the onChanged function is triggered that changed state of _value.
Items in Dropdown Form Field in Flutter
Items are the options from which user has to select only one option. These options will display in dropdown menu and user will select one. Items property is basically a list of DropDownMenuItem. We have added three DropDownMenuItems. It means it will show three options, First Item, Second Item and Third Item. In DropDownMenuItem there are two properties. 1 is child and second is value. Child property is used to show the option in Text widget. And value property is used to give a unique value to each option. On the base of this value we can identify that what option is selected by user.
The onChanged function is called when user selects an option from menu. Here we can do our work that we want to be done on select an option by user.
Dropdown Options from List
In many cases we have to show a list of values in dropdown menu instead of creating constant Dropdownmenuitems. This list may be a collection of strings or other class objects. Let’s see how this can be implemented.
First of all create a list of options.
List<String> options = ['First Item', 'Second Item', 'Third Item'];These are our options that will be show in dropdown list. We have create a list of string of these options. Now let’s see how to display these options in dropdown. For this we will use the items property of dropdown button .
items: options.map((e) =>
DropdownMenuItem(
child: Text(e.toString()), value: e.toString(),)).toList(),Here we map the list to dropdown menu item. This will create the dropdown menu item for each object of list. For example if there are 3 string values in list, it will show the three dropdown menu items in dropdown button.
Here is the complete code of dropdown elements form list.
class FirstScreen extends StatefulWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
List<String> options = ['First Item', 'Second Item', 'Third Item'];
String _value='First Item';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: DropdownButton(
value: _value,
items: options.map((e) =>
DropdownMenuItem(
child: Text(e.toString()), value: e.toString(),)).toList(),
onChanged: (newValue) {
setState(() {
_value = newValue.toString() ;
});
},
)),
);
}
}
