How to implement drop down list in flutter?

Question

I have a list of locations that i want to implement as a dropdown list in Flutter. Im pretty new to the language. Here's what i have done.

new DropdownButton(
  value: _selectedLocation,
  onChanged: (String newValue) {
    setState(() {
      _selectedLocation = newValue;
     });
},
items: _locations.map((String location) {
  return new DropdownMenuItem<String>(
     child: new Text(location),
  );
}).toList(),

This is my list of items:

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

And I am getting the following error.

Another exception was thrown: 'package:flutter/src/material/dropdown.dart': Failed assertion: line 468 pos 15: 'value == null || items.where((DropdownMenuItem<T> item) => item.value == value).length == 1': is not true.

I assume the value of _selectedLocation is getting null. But i am initialising it like so.

String _selectedLocation = 'Please choose a location';

Answer 1

For anyone interested to implement a DropDownButton with a custom class you can follow the bellow steps.

1. Suppose you have a class called Language with the following code and a static method which returns a List<Language>

   class Language {
     final int id;
     final String name;
     final String languageCode;
   
     Language(this.id, this.name, this.languageCode);
   
    static List<Language> getLanguages() {
        return <Language>[
           Language(1, 'English', 'en'),
           Language(2, 'فارسی', 'fa'),
           Language(3, 'پشتو', 'ps'),
        ];
      }
   }
   

2. Anywhere you want to implement a DropDownButton you can import the Language class first use it as follow,

      Language _selectedLanguage; // <- define a local property
   
      DropdownButton(
           underline: SizedBox(),
            decoration: InputDecoration(
               contentPadding:  EdgeInsets.symmetric(horizontal: 5),
               border: OutlineInputBorder(),
               hintText: 'Select Languge',
            ),
   
           items: Language.getLanguages().map((Language lang) {
           return DropdownMenuItem<Language>(
                           value: lang,
                           child: Text(lang.name),
                         );
                       }).toList(),
   
           onChanged: (Language val) {
                         _selectedLanguage = val;
                      },
         )
   

Answer 2

You can use DropDownButton class in order to create drop down list :

...
...
String dropdownValue = 'One';
...
...
Widget build(BuildContext context) {
return Scaffold(
  body: Center(
    child: DropdownButton<String>(
      value: dropdownValue,
      onChanged: (String newValue) {
        setState(() {
          dropdownValue = newValue;
        });
      },
      items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    ),
  ),
);
...
...

please refer to this flutter web page