Reset value on dropdown (Flutter)

Question

I have two dropdown which is states and cities, basically when user choose a state, it will automatically set the value of cities for the states. When i choose the state, the dropdown for cities appear, and after i choose the cities, if i want to change the state back, it will give error

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

List state = [
"Kuala Lumpur",
"Selangor",
"Johor",
"Kedah",
"Kelantan",
"Melaka",
"Negeri Sembilan",
"Pahang",
"Penang",
"Perak",
"Perlis",
"Sabah",
"Sarawak",
"Terengganu"

 ];

List kl = [
"Ampang Hilir",
"Bandar Damai Perdana",
"Bandar Menjalara",
"Bandar Tasik Selatan",
"Bangsar",
"Bangsar South",];

List sel = [
"Ampang",
"Ara Damansara",
"Balakong",
"Bandar Bukit Raja",
"Bandar Kinrara",
"Bandar Puteri Puchong",
"Bandar Sunway",
"Bandar Utama",];

@override


void initState() {
    super.initState();

_dropDownMenuStates = getDropDownMenuState();

}

List<DropdownMenuItem<String>> getDropDownMenuState() {
List<DropdownMenuItem<String>> state1 = new List();
for (String statelist in state) {
  state1.add(
      new DropdownMenuItem(value: statelist, child: new Text(statelist)));
}
return state1;


}

List<DropdownMenuItem<String>> getDropDownMenuKL() {
List<DropdownMenuItem<String>> kl1 = new List();
for (String kllist in kl) {
  kl1.add(new DropdownMenuItem(value: kllist, child: new Text(kllist)));
}
return kl1;


 }

  List<DropdownMenuItem<String>> getDropDownMenuSEL() {
    List<DropdownMenuItem<String>> sel1 = new List();
    for (String sellist in sel) {
      sel1.add(new DropdownMenuItem(value: sellist, child: new Text(sellist)));
    }
    return sel1;
  }

    Expanded(
  child: PhysicalModel(
      borderRadius:
          new BorderRadius.circular(50.0),
      color: Colors.white,
      child: new Container(
          padding: EdgeInsets.only(
              left: 10.0, right: 10.0),
          height: 40.0,
          decoration: new BoxDecoration(
              borderRadius:
                  new BorderRadius
                      .circular(50.0),
              border: new Border.all(
                width: 3.0,
                color: Colors.grey[300],
              )),
          child: new FittedBox(
            fit: BoxFit.contain,
            child: DropdownButton(
              hint: new Text(
                  allTranslations
                      .text('city')),
              value: _currentCity,
              items: _dropDownMenuCity,
              onChanged:
                  changedDropDownCity,
            ),
          ))),
),

SizedBox(
  width: 10.0,
),
Expanded(
  child: PhysicalModel(
      borderRadius:
          new BorderRadius.circular(50.0),
      color: Colors.white,
      child: new Container(
          padding: EdgeInsets.only(
              left: 10.0, right: 10.0),
          height: 40.0,
          decoration: new BoxDecoration(
              borderRadius:
                  new BorderRadius
                      .circular(50.0),
              border: new Border.all(
                width: 3.0,
                color: Colors.grey[300],
              )),
          child: new FittedBox(
            fit: BoxFit.contain,
            child: DropdownButton(
              hint: new Text(
                  allTranslations
                      .text('state')),
              value: _currentState,
              items: _dropDownMenuStates,
              onChanged:
                  changedDropDownState,
            ),
          ))),
),

void changedDropDownState(String selectedState) {
setState(() {
  _currentState = selectedState;
  if (selectedState.toString() == "Kuala Lumpur") {
    _dropDownMenuCity = getDropDownMenuKL();
  } else if (selectedState.toString() == "Selangor") {
    _dropDownMenuCity = getDropDownMenuSEL();}


});


}

  void changedDropDownCity(String selectedCity) {
    setState(() {
      _currentCity = selectedCity;
    });
  }

Answer 1

You need clear _currentCity before set a new list of Cities. Because the DropdownButton wait a valid value (_currentCity) in items (_dropDownMenuCity).

void changedDropDownState(String selectedState) {
setState(() {
  // <<<
  _dropDownMenuCity = null;
  _currentCity = null;
  // <<<

  _currentState = selectedState;

  if (selectedState.toString() == "Kuala Lumpur") {
    _dropDownMenuCity = getDropDownMenuKL();
  } else if (selectedState.toString() == "Selangor") {
    _dropDownMenuCity = getDropDownMenuSEL();
  }
});

}

https://gist.github.com/dyegovieira/a2f78d241090a77939100e380987b8a1

Answer 2

I had the same issue, so here's the solution I was able to find. I use the flutter_form_builder library and here is my approach to solving it:

   List<String> _items = [];
   GlobalKey<FormBuilderState> _fbKey;


   FormBuilder(
                key: _fbKey,
                child: Column(
                  children: <Widget>[
                    FormBuilderDropdown(
                        attribute: "type",                            
                        onChanged: (val) {
                          setState(() {
                            /// Ici nous récuperons ledit DropDown afin de le
                            /// reset sinon l'erreur de same value va être lancé
                            final length =
                                _fbKey.currentState.fields.values.length;
                            _fbKey.currentState.fields.values
                                .elementAt(length - 1) /// Widget position
                                .currentState
                                .reset();
                            
                            if (val == "x") {
                              _items = ["1", "2"];
                            } else {
                              _items = ["10", "11"];
                            }
                          });
                        },
                        
                        items: ["x","y"].map((cpt) {
                          return DropdownMenuItem(
                              value: cpt, 
                              child: Text("$cpt"));
                        }).toList()),
                    SizedBox(height: 20),
                    FormBuilderDropdown(
                        attribute: "number",                                                                                                                                           
                        items: _items.map((cpt) {
                          return DropdownMenuItem(
                              value: cpt, child: Text("$cpt"));
                        }).toList())]))