"Flutter：如何根据选择的第一个下拉按钮值设置第二个下拉按钮（多级相关按钮）的值？"

Question

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.

Answer 1

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.

Answer 2

you shoud deleted _selectedBlockValue<\/code> after change _selectedDistrictValue<\/code> because this value not in another list

onChanged: (selectedValue) {
      setState(() {
        _selectedDistrictValue = selectedValue;
        _selectedBlokValue != null ? null : null;
      });
    },