Flutter: How to set value of second dropdown button (multilevel dependent buttons) on the basis of first dropdown button value selected?

Issue

I'm trying to implement the multilevel dependent dropdown buttons in flutter app and the values of button are fetching from database. While selecting the second dropdown button value I'm getting the error.

`DistrictData _selectedDistrictValue;
BlockData _selectedBlockValue;
@override
void initState() {
// TODO: implement initState
_districtValues = databaseObject.getDistrictList();  //able to get 
values from database
super.initState(); 
}
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Search'),
  ),
  body: Container(
    padding: const EdgeInsets.symmetric(vertical: 20.0),
    child: Builder(
      builder: (context) => Form(
        key: _formKey,
        autovalidate: true,
        child: ListView(
          // crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            SizedBox(height: 10.0),             
            Container(
              padding: EdgeInsets.all(10.0),
              child: getDistrictDropdown(),
            ),
        Container(
              padding: EdgeInsets.all(10.0),
              child: getBlockDropdown(),
            ),
            RaisedButton(
              child: Text("Search"),
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (BuildContext context) => 
              SearchResults()));
              },
            ),
          ],
        ),
      ),
    ),
  ),
);
}
Widget getDistrictDropdown() {
return Center(
  child: FutureBuilder(
    future: _districtValues,
    builder:
        (BuildContext context, AsyncSnapshot<List<DistrictData>> snapshot) {
      if (!snapshot.hasData) return CircularProgressIndicator();
      return DropdownButton<DistrictData>(
        isExpanded: true,
        hint: Text("District"),
        items: snapshot.data
            .map((value) => DropdownMenuItem<DistrictData>(
                  child: Text(value.districtName),
                  value: value,
                ))
            .toList(),              
        onChanged: (selectedValue) {
          setState(() {
            _selectedDistrictValue = selectedValue;
          });
        },
        value: _selectedDistrictValue,
      );
    },
  ),
);
}
Widget getBlockDropdown() {
if (_selectedDistrictValue != null) {
  return FutureBuilder(
      future: databaseObject.getBlockList(_selectedDistrictValue.districtCode), //able to get blocks from database
      builder:
          (BuildContext context, AsyncSnapshot<List<BlockData>> snapshot) {
        if (!snapshot.hasData){return Container(
    child: Text("Please Select District first"),
  );} 
        else{
          return DropdownButton<BlockData>(
            isExpanded: true,
            hint: Text("Block"),
            items: snapshot.data
                .map((value) => DropdownMenuItem<BlockData>(
                      child: Text(value.blockName),
                      value: value,
                    ))
                .toList(),
            onChanged: (selectedValue) {
              setState(() {
                _selectedBlockValue = selectedValue;
              });  
            },
            value: _selectedBlockValue,  //getting error while setting value here. If i commented this it works fine but then i not able to show selected value on dropdown
          );
       }
      },
    );
  }`

Error I am getting while selecting second dropdown value:

The following assertion was thrown building FutureBuilder>(dirty, state: I/flutter (26965): _FutureBuilderState>#7dd80): I/flutter (26965): 'package:flutter/src/material/dropdown.dart': Failed assertion: line 608 pos 15: 'items == null || I/flutter (26965): items.isEmpty || value == null || items.where((DropdownMenuItem item) => item.value == I/flutter (26965): value).length == 1': is not true.

Solution

Is this it?

if (_selectedDistrictValue != null) should be if (_selectedDistrictValue == null)

Since _selectedDistrictValue is from your first dropdown getDistrictDropdown, and you don't get its value until selection (onChanged), then it will be null at start.

But your second dropdown getBlockDropdown has conditioned child: Text("Please Select District first") for != null, so that means for == null, it is already trying to do items: snapshot.data.map((value) => before you have even selected your first dropdown.

Answered By - TWL