Dynamically Change data in a dropdown menu - FLUTTER - flutter

Question

I have a horizontal list of Categories; e.g. CARS and below it there is a dropdown menu fetch list of models per every CAR selected in the list. So my issue is after i select eg Toyota and the dropdown menu is filled with models eg - Camry, Vits, Caldina, Hilux, That is fine... but is i select one eg Camry and in the list of CARS i select another CAR eg HONDA.. the UI breaks.. can anyone tell me how i can efficiently reuse the same dropdown and just be changing the arraylist it fetchs from even when one item was selectd

Answer 1

I did something similar like this:
For car brand:
int selectedBrandItem;
int selectedModelItem;
int selectedByYearItem;
var listTemp;
Container(
width: _size.width,
height: _size.height* 0.08,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
border: Border.all(
color: Theme.greyColor[600]
),
),
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal:10.0),
child: DropdownButton(
hint: Text(allTranslations.text('brand')),
value: selectedBrandItem,
onChanged: (value){
setState(() {
selectedBrandItem = value;
selectedModelItem = null;
selectedByYearItem = null;
});
},
items: (state.response.brandList == null || state.response.brandList == [])?listTemp:state.response.brandList.map((e) =>
DropdownMenuItem(
value: e.id,
child: Text(
e.brandName,
style: TextStyle(
color: Theme.GreyColor,
fontWeight: FontWeight.w400,
fontSize: 16.0
),
)
)
).toList()??[],
isExpanded: true,
icon: Icon(Icons.keyboard_arrow_down, color: Theme.greyColor[500],),
underline: Container(color: Colors.transparent,),
),
),
);
For car model:
Container(
width: _size.width,
height: _size.height* 0.08,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
border: Border.all(
color: Theme.greyColor[600]
),
),
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal:10.0),
child: DropdownButton(
hint: Text(allTranslations.text('model')),
value: selectedModelItem,
onChanged: (value){
setState(() {
selectedModelItem = value;
selectedByYearItem = null;
});
},
items: state.response.modelList.map((e) =>
DropdownMenuItem(
value: e.id,
child: Text(
e.modelName,
style: TextStyle(
color: Theme.GreyColor,
fontWeight: FontWeight.w400,
fontSize: 16.0
),
)
)
).toList()??[],
isExpanded: true,
icon: Icon(Icons.keyboard_arrow_down, color: Theme.greyColor[500],),
underline: Container(color: Colors.transparent,),
),
),
);
For car year:
Container(
width: _size.width,
height: _size.height* 0.08,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
border: Border.all(
color: Theme.greyColor[600]
),
),
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal:10.0),
child: DropdownButton(
hint: Text(allTranslations.text('year')),
value: selectedByYearItem,
onChanged: (value){
setState(() {
selectedByYearItem = value;
});
},
items: (state.response.yearList == null || state.response.yearList == [] )?listTemp:state.response.yearList .map((e) =>
DropdownMenuItem(
value: e.id,
child: Text(
e.year,
style: TextStyle(
color: Theme.GreyColor,
fontWeight: FontWeight.w400,
fontSize: 16.0
),
)
)
).toList()??[],
isExpanded: true,
icon: Icon(Icons.keyboard_arrow_down, color: Theme.greyColor[500],),
underline: Container(color: Colors.transparent,),
),
),
);