DropDownButton selected item isn't changing in UI

Question

The objects I want to add in my DropDownButton:

class Car {
  int id;
  String make;

  Car(this.id, this.make);

  static List<Car> getCars() {
    var cars = new List<Car>();
    cars.add(Car(1, "Ford"));
    cars.add(Car(2, "Toyota"));
    cars.add(Car(3, "BMW"));

    return cars;
  }
}

Constructing the DropDown (StatefulWidget State class):

class _MyHomePageState extends State<MyHomePage> {
  Car _selectedCar;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(child: getDropDown()));
  }

  Widget getDropDown() {
    var cars = Car.getCars();
    this._selectedCar = cars.first; // Default to first value in list.
    var items = cars.map((car) {
      return new DropdownMenuItem<Car>(
        value: car,
        child: new Text(car.make),
      );
    }).toList();

    return DropdownButton<Car>(
        value: this._selectedCar,
        onChanged: (Car car) {
          setState(() {
            this._selectedCar = car;
          });
        },
        items: items);
  }
}

DropDownButton Shows up correctly with first item selected, but when I select another item the UI never updates to show the new item as selected.

knezzz · Accepted Answer · 2019-03-27T12:55:52.437

2

You need to initalize list just once, because there wont be a match for DropDownList value if you init new list on every draw.

Working example found here: Gist

edited Mar 27 '19 at 12:55

answered Mar 27 '19 at 11:47

knezzz

683
5
14

Your answer doesn't work. It crashes with : I/flutter ( 5072): 'package:flutter/src/material/dropdown.dart': Failed assertion: line 560 pos 15: 'items == null || I/flutter ( 5072): items.isEmpty || value == null || items.where((DropdownMenuItem item) => item.value == I/flutter ( 5072): value).length == 1': is not true. – lahsrah Mar 27 '19 at 11:49
If you want to try running, full gist of the code here: https://gist.github.com/lahsrah/0267bd0e0f6797203e4d4a7a4946219d – lahsrah Mar 27 '19 at 11:50
Oh yeah okay, You were getting new list each time so none of the objects matched. Here is working version: https://gist.github.com/knezzz/7cc3bb75992413cb43f1d2a3328b7295 – knezzz Mar 27 '19 at 12:03
if you want please edit your answer and I will mark it as the answer to give you credit. – lahsrah Mar 27 '19 at 12:29

score 0 · Answer 2 · answered Mar 27 '19 at 12:25

Try initializing the _selectedCar variable in your initState() method instead of the getDropdown() method.

According to the code you posted, the _selectedCar variable gets reinitialized every time you call setState() since build() method is called.

Also you mentioned you are getting the below error when trying the solution in the first answer:

I/flutter ( 5072): 'package:flutter/src/material/dropdown.dart': Failed assertion: line 560 pos 15: 'items == null || I/flutter ( 5072): items.isEmpty || value == null || items.where((DropdownMenuItem item) => item.value == I/flutter ( 5072): value).length == 1': is not true.

This is most likely because more than one items in your dropdown is getting the same value.

A possible fix can be using the id parameter of the Car object as the dropdown value instead of the entire object, since the id will be unique for each object. More detail about this error can be found here.

DropDownButton selected item isn't changing in UI

2 Answers2