'Flutter: How to set value of second dropdown button (multilevel dependent buttons) on the basis of first dropdown button value selected?
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 1:[1]
you shoud deleted _selectedBlockValue after change _selectedDistrictValue because this value not in another list
in onChnage for the first dropdown
onChanged: (selectedValue) {
setState(() {
_selectedDistrictValue = selectedValue;
_selectedBlokValue != null ? _selectedBlokValue = null : null;
});
},
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |
