i am trying to toggle the each list in the expanded panel list by tapping on each header on this list.
bellow is my code, and i don’t know if its possible to achieve that by adding ontap or onpressed function. thank you.
Expanded(
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(left: w * 0.05, right: w * 0.05),
child: Column(
children: [
ExpansionPanelList(
children: [
ExpansionPanel(
isExpanded: _isOpen[0],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10),
Container(
padding:
EdgeInsets.only(top: 10, bottom: 10),
child: Center(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Ball Games ⚽ 🏀",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Color(0xff262626)),
),
SizedBox(height: 5),
Text(
"Select Sport from the ball games\nsection",
style: TextStyle(
fontSize: 14,
color: Color(0xff696F79)),
),
],
),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_ballGames(),
// _ballGames(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[1],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10),
Container(
padding:
EdgeInsets.only(top: 10, bottom: 10),
child: Center(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Racket & Bat 🥍",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Color(0xff262626)),
),
SizedBox(height: 5),
Text(
"Select sport from the racket & bat\nsection",
style: TextStyle(
fontSize: 14,
color: Color(0xff696F79)),
),
],
),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_racketAndBat(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[2],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10),
Container(
padding:
EdgeInsets.only(top: 10, bottom: 10),
child: Center(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Winter 🏂',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Color(0xff262626)),
),
SizedBox(height: 5),
Text(
"Select sport from the winter\nsection",
style: TextStyle(
fontSize: 14,
color: Color(0xff696F79)),
),
],
),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_winter(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[3],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10),
Container(
padding:
EdgeInsets.only(top: 10, bottom: 10),
child: Center(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Water 🏊‍♀️ ',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Color(0xff262626)),
),
SizedBox(height: 5),
Text(
"Select sport from the water\nsection",
style: TextStyle(
fontSize: 14,
color: Color(0xff696F79)),
),
],
),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_water(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[4],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10),
Container(
padding:
EdgeInsets.only(top: 10, bottom: 10),
child: Center(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Others 🚲🔫',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Color(0xff262626)),
),
SizedBox(height: 5),
Text(
"Select sports from the others\nsection",
style: TextStyle(
fontSize: 14,
color: Color(0xff696F79)),
),
],
),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_others(),
// _myListView(),
],
),
),
),
],
expansionCallback: (i, isOpen) {
setState(() {
_isOpen[i] = !isOpen;
});
},
),
],
),
),
),
),
i can easily toggle the list by tapping on the right arrow at the right but i want to use the whole header of each instaed.
>Solution :
To achieve your desired result you have a property in ExpansionPanel named canTapOnHeader. You just have to set it true that’s it.
canTapOnHeader : true,