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),
    );
  }).toList(),
  onChanged: (_) {},
)

Use StatefulWidget and setState to update dropdown.

String _dropDownValue;

@override
Widget build(BuildContext context) {
  return DropdownButton(
    hint: _dropDownValue == null
        ? Text('Dropdown')
        : Text(
            _dropDownValue,
            style: TextStyle(color: Colors.blue),
          ),
    isExpanded: true,
    iconSize: 30.0,
    style: TextStyle(color: Colors.blue),
    items: ['One', 'Two', 'Three'].map(
      (val) {
        return DropdownMenuItem<String>(
          value: val,
          child: Text(val),
        );
      },
    ).toList(),
    onChanged: (val) {
      setState(
        () {
          _dropDownValue = val;
        },
      );
    },
  );
}

When we tap on it it will look like below:

Reflect selected value to 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) {
    items.add(
      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,
  )
])

Conclusion:

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.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com 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.