Flutter multiple ExpansionTile's collapses simultaneously - flutter

Question

I have a custom Card widget with ExpansionTile as a child which displays multiple Dropdownbuttons according to data fetched from an API.
But when I use ListView.builder to build N amount of said custom widgets they all behave simultaneously, for example when I collapse the ExpansionTile all open ExpansionTiles collapse simultaneously and reset the data inside Dropdownbuttons (resetting the data expected outcome when ExpansionTile collapsed but only the collapsed ExpansionTile should reset its children Dropdownbuttons, not all open ExpansionTiles children).
Here is my builder.
var items = ["Apartment 1", "Apartment 2", "Apartment 3", "Apartment 4"];
class MapPage extends StatelessWidget {
const MapPage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
key: ValueKey(items),
scrollDirection: Axis.vertical,
itemCount: items.length,
padding: const EdgeInsets.only(top: 8),
itemBuilder: (context, index) {
return MapCard(
building: items[index],
floor: 4,
key: Key(items[index].toString()),
);
}),
);
}
}
and my CustomCard
class MapCard extends StatefulWidget {
final String building;
final int floor;
const MapCard({super.key, required this.building, required this.floor});
#override
State<MapCard> createState() => _MapCardState();
}
class _MapCardState extends State<MapCard> {
#override
Widget build(BuildContext context) {
PageStorageKey key = PageStorageKey('${widget.key}');
return Center(
child: Consumer<MapCardViewModel>(
builder: (context, mapCardViewModel, child) => Card(
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.9,
child: Padding(
padding: const EdgeInsets.only(bottom: 12),
child: ExpansionTile(
key: key,
onExpansionChanged: (changed) {
if (!changed) {
mapCardViewModel.setAreaVisibility(false);
mapCardViewModel.setButtonVisibility(false);
mapCardViewModel.setIsFloorChosen(false);
mapCardViewModel.setAreaVisibility(false);
mapCardViewModel.area = mapCardViewModel.areas[0];
mapCardViewModel.floorNumber = mapCardViewModel.floors[0];
}
},
title: Row(
children: [
Container(
padding:
const EdgeInsets.only(top: 8, bottom: 8, right: 8),
child: Image.asset(
"assets/images/example.png",
height: 80,
width: 80,
)),
Flexible(
child: Container(
padding: const EdgeInsets.fromLTRB(0, 8, 8, 8),
child: Column(
children: [
Text("${widget.building} Apartment \n"
"Floor Count ${widget.floor} ")
],
),
),
)
],
),
children: [
const Text("Choose Floor"),
Padding(
padding: const EdgeInsets.only(right: 24, left: 24),
child: DropdownButton(
isExpanded: true,
value: mapCardViewModel.isFloorChosen == false
? mapCardViewModel.floors[0]
: mapCardViewModel.floorNumber,
items: mapCardViewModel.floors
.map<DropdownMenuItem<int>>((int i) {
return DropdownMenuItem<int>(
value: i,
child: Text(i.toString()),
);
}).toList(),
onChanged: (int? value) {
mapCardViewModel.setFloorNumber(value!);
mapCardViewModel.setIsFloorChosen(true);
mapCardViewModel.setAreaVisibility(true);
}),
),
Visibility(
visible: mapCardViewModel.isAreaVisible,
child: Column(
children: [
const Text("Choose an Area to map"),
Padding(
padding: const EdgeInsets.only(right: 24, left: 24),
child: DropdownButton(
isExpanded: true,
value: mapCardViewModel.isAreaChosen == false
? mapCardViewModel.areas[0]
: mapCardViewModel.area,
items: mapCardViewModel.areas
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String? value) {
mapCardViewModel.setArea(value!);
mapCardViewModel.setIsAreaChosen(true);
mapCardViewModel.setButtonVisibility(true);
}),
),
],
),
),
Visibility(
visible: mapCardViewModel.isButtonsVisible,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return CustomDialog(
title: "Mapping Status",
content:
"This area hasn't been mapped yet",
page: Container(),
buttonColor: MainColors().mainBlue);
});
},
child: const Text("Show Area Map")),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const MappedPage(),
),
);
},
style: ElevatedButton.styleFrom(
backgroundColor: MainColors().mainBlue),
child: const Text(
"Map The Area",
style: TextStyle(color: Colors.white),
))
],
),
)
],
),
)),
),
));
}
}
I tried to assign keys to each ExpansionTile and custom MapCard widgets with StatefulWidget but I couldn't solve my problem.

Answer 1

I remove all 3rd dependency and try to adjust your solution of MapCard widget.
var items = ["Apartment 1", "Apartment 2", "Apartment 3", "Apartment 4"];
final floors = ['Floor 1', 'Floor 2'];
final areas = ['Area 1', 'Area 2'];
class MapCard extends StatefulWidget {
final String building;
final int floor;
const MapCard({Key? key, required this.building, required this.floor}): super(key: key);
#override
State<MapCard> createState() => _MapCardState();
}
class _MapCardState extends State<MapCard> {
#override
Widget build(BuildContext context) {
PageStorageKey key = PageStorageKey('${widget.key}');
return Center(
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.9,
child: Padding(
padding: const EdgeInsets.only(bottom: 12),
child: ExpansionTile(
key: key,
onExpansionChanged: (changed) {
if (!changed) {
print('!changed');
}
},
title: Row(
children: [
Container(
padding:
const EdgeInsets.only(top: 8, bottom: 8, right: 8),
child: Placeholder(
fallbackHeight: 80,
fallbackWidth: 80,
)),
Flexible(
child: Container(
padding: const EdgeInsets.fromLTRB(0, 8, 8, 8),
child: Column(
children: [
Text("${widget.building} Apartment \n"
"Floor Count ${widget.floor} ")
],
),
),
)
],
),
children: [
const Text("Choose Floor"),
Padding(
padding: const EdgeInsets.only(right: 24, left: 24),
child: DropdownButton(
isExpanded: true,
value: floors.first,
items: floors
.map<DropdownMenuItem<String>>((String i) {
return DropdownMenuItem<String>(
value: i,
child: Text(i.toString()),
);
}).toList(),
onChanged: (String? value) {
// code here
}),
),
Visibility(
visible: true,
child: Column(
children: [
const Text("Choose an Area to map"),
Padding(
padding: const EdgeInsets.only(right: 24, left: 24),
child: DropdownButton(
isExpanded: true,
value: areas.first,
items: areas
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String? value) {
// code here
}),
),
],
),
),
Visibility(
visible: true,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(content: Text('Alert dialog'),);
});
},
child: const Text("Show Area Map")),
ElevatedButton(
onPressed: () {
print('navigate');
},
child: const Text(
"Map The Area",
style: TextStyle(color: Colors.white),
))
],
),
)
],
),
)),
),
);
}
}
But I suppose your problem in the line
Consumer<MapCardViewModel>
because every time when you change it this will apply to each created card. So you have to put it above your ListView.builder and pass it as a parameter to your cards