How to make Dependent DropdownButtonFormField in showDialog in flutter? - flutter

Question

I make the Dependent DropdownButtonFormField in showDialog.
when i select the item of first dropdown the values not showing in second dropdown which is dependent on first dropdown.
But when i close the Dialog and reopen the dialog the values showing in second dropdown.
So here my Question is how to refresh second dropdown when first dropdown value is changed?
Future<bool> showDropDownDialog(title) async {
List<DropdownMenuItem<AllocationType>> items = [];
dropDownAllocationTypeModels.forEach((element) {
items.add(DropdownMenuItem(
child: Text(
element.allocationTypeName!,
style: Themes.getTextStyle(context),
),
value: element,
));
});
List<DropdownMenuItem<ServiceArea>> serviceAreaitems = [];
dropDownServiceAreaModels.forEach((element) {
serviceAreaitems.add(DropdownMenuItem(
child: Text(
element.serviceAreaName ?? "1",
style: Themes.getTextStyle(context),
),
value: element,
));
});
void onTeamChange(area) {
setState(() {
dropdownValueTeamType = null;
dropdownValueServiceArea = area;
dropDownTeamTypeModels = [];
});
ApiHelper()
.getTeamsByServiceArea(dropdownValueServiceArea!.id!)
.then((value) => {
setState(() {
dropDownTeamTypeModels = value;
})
});
}
return await showDialog(
context: context,
builder: (context) => Center(
child: Form(
key: _formKey,
child: Container(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Card(
color: Colors.blueGrey[100],
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15),
),
child: Container(
padding: EdgeInsets.all(10),
alignment: Alignment.center,
width: 300,
color:
Themes.getPrimaryDarkBackgroundColor(
context),
child: Text(
title,
style: Themes.getTitleTextStyleWhite(
context),
),
),
),
],
),
Padding(
padding: EdgeInsets.only(
left: Constants.APP_PADDING,
right: Constants.APP_PADDING,
top: Constants.APP_PADDING),
child: DropdownButtonFormField<ServiceArea>(
style: Themes.getTextFieldTextStyle(context),
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: AppLocalizations.of(context)
.hintSelectServiceArea,
),
value: dropdownValueServiceArea,
isExpanded: true,
items: serviceAreaitems,
onChanged: (value) {
setState(() {
dropdownValueServiceArea = value;
onTeamChange(value);
});
},
),
),
Padding(
padding: EdgeInsets.only(
left: Constants.APP_PADDING,
right: Constants.APP_PADDING,
top: Constants.APP_PADDING),
child: DropdownButtonFormField<dynamic>(
style: Themes.getTextFieldTextStyle(context),
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: AppLocalizations.of(context)
.hintSelectTeamType,
),
value: dropdownValueTeamType,
isExpanded: true,
items: dropDownTeamTypeModels.map((team) {
return DropdownMenuItem<dynamic>(
value: team,
child: Text(team),
);
}).toList(),
onChanged: (value) {
setState(() {
dropdownValueTeamType = value;
});
},
),
),
],
)),
elevation: 8,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
],
),
),
),
),
) ??
false; //if showDialouge had returned null, then return false
}

Answer 1

As I see you use statefull widget approach.
So I believe you have to wrap parent dialog widget to statefull, declare variables (as dropdownValueServiceArea) in it, and change them inside dropdown callbacks with
setState(()=> dropdownValueServiceArea = newValue);