US Office

1176 Shadeville Rd, Crawfordville Florida 32327, USA

 +1 (850) 780-1313

India Office

Office No 405, Kabir Shilp, Opp. Kansar Hotel, Opp. Landmark, Kudasan, Gandhinagar, Gujarat 382421

[email protected]

How to Implement DropDown List In Flutter ?

How to Implement DropDown List In Flutter

How to Implement DropDown List In Flutter ?

When users have to select a  single item from a list of available items at that time DropDown List is used. In this article, we will walk through  How to Implement DropDown List In Flutter?

How to Implement DropDown List In Flutter?

Suppose the user has a list of items like below:

List<String> _locations = ['A', 'B', 'C', 'D'];

and Implement DropDown like a below:

new DropdownButton<String>(
  items: <String>['A', 'B', 'C', 'D'].map((String value) {
    return new DropdownMenuItem<String>(
      value: value,
      child: new Text(value),
  onChanged: (_) {},

Use StatefulWidget and setState to update dropdown.

String _dropDownValue;

Widget build(BuildContext context) {
  return DropdownButton(
    hint: _dropDownValue == null
        ? Text('Dropdown')
        : Text(
            style: TextStyle(color:,
    isExpanded: true,
    iconSize: 30.0,
    style: TextStyle(color:,
    items: ['One', 'Two', 'Three'].map(
      (val) {
        return DropdownMenuItem<String>(
          value: val,
          child: Text(val),
    onChanged: (val) {
        () {
          _dropDownValue = val;
DropDown List In Flutter

DropDown List In Flutter

When we tap on it it will look like below:

Open Drop Down List

Open Drop Down List

Reflect selected value to dropdown:

Selected Value DropDown

Selected Value DropDown

Let say we are creating a drop down list of currency:

List _currency = ["INR", "USD", "SGD", "EUR", "PND"];
List<DropdownMenuItem<String>> _dropDownMenuCurrencyItems;
String _currentCurrency;

List<DropdownMenuItem<String>> getDropDownMenuCurrencyItems() {
  List<DropdownMenuItem<String>> items = new List();
  for (String currency in _currency) {
      new DropdownMenuItem(value: currency, child: new Text(currency)));
  return items;

void changedDropDownItem(String selectedCurrency) {
  setState(() {
    _currentCurrency = selectedCurrency;

Add below code in a body part:

new Row(children: <Widget>[
  new Text("Currency: "),
  new Container(
    padding: new EdgeInsets.all(16.0),
  new DropdownButton(
    value: _currentCurrency,
    items: _dropDownMenuCurrencyItems,
    onChanged: changedDropDownItem,


In this article, We have learned about  How to Implement DropDown List In Flutter?

Keep Learning !!! Keep Fluttering.

Do let us know your valuable suggestion to serve you better. is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc. is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Post a Comment