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

You're close! The error you're getting is because the value of _selectedLocation is not matching any of the values in the items list of the DropdownButton.

To fix the issue, you need to set the value property of the DropdownMenuItem to the corresponding value in _locations. Here's the corrected code:

String _selectedLocation = 'Please choose a location';
List<String> _locations = ['A', 'B', 'C', 'D'];

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

In this code, we set the value property of each DropdownMenuItem to the corresponding location value in _locations. When the user selects an item, the _selectedLocation variable is updated and the widget is rebuilt with the new value.

I hope this helps!

To know more about Flutter, join our Flutter Course today.