How to Implement DropDown List In Flutter ?

· 3 min read
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;
        },
      );
    },
  );
}
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) {
    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 GuideFlutter ProjectsCode 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.

Leave a Reply