How to allow user to Tap header to open on ExpansionPanel - flutter

Question

I have built a help / FAQ screen within my flutter app. Using expansion tile I have created the UI but I am having issues with tapping the header.
I'm wanting to allow the user to tap the header to open that tile. Currently, the user has to tap the arrow to open.
I have added "canTapOnHeader: true," but that does not seem to work. I've searched Stackoverflow but still had no luck
Any help would be great!
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
itemData[index].headerItem,
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 17,
),
),
),
),
],
);
},
body: Container(
padding: EdgeInsets.only(left: 10, right: 10, bottom: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.asset(
itemData[index].img,
fit: BoxFit.cover,
),
SizedBox(height: 10),
Divider(
thickness: 3.0,
height: 3.0,
color: Theme.of(context).accentColor,
indent: 10,
endIndent: 300),
Padding(
padding: const EdgeInsets.only(left: 8.0, top: 10),
child: Text(
itemData[index].description,
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 15,
height: 1.3,
),
),
),
],
),
),
canTapOnHeader: true,
isExpanded: itemData[index].expanded,
)
],
expansionCallback: (int item, bool status) {
setState(() {
itemData[index].expanded = !itemData[index].expanded;
});
},
),
);
},
),
),
);}
List<ItemModel> itemData = <ItemModel>[
ItemModel(
headerItem: 'This is a header question?',
description:
"This is the description for the question.",
img: 'assets/images/typingtextgiphy.gif',
),
];
}
class ItemModel {
bool expanded;
String headerItem;
String description;
String img;
ItemModel({
this.expanded: false,
this.headerItem,
this.description,
this.img,
});
}

Answer 1

Managed to find the solution for this. Here's the code, can copy and paste
class _HelpPanelState extends State<HelpPanel> {
#override
Widget build(BuildContext context) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
child: Scaffold(
appBar: AppBar(
centerTitle: true,
leading: BackButton(
color: Theme.of(context).accentColor,
),
title: Text(AppLocalizations.of(context)!.tutorial,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20.0,
color: Theme.of(context).colorScheme.primary)),
elevation: 0.0,
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Card(
elevation: 3,
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(color: Colors.white)),
child: Padding(
padding: EdgeInsets.only(
top: 0.0, left: 15.0, right: 15.0, bottom: 0.0),
child: ExpansionTile(
title: Text(
"QUESTION",
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 20,
color: Theme.of(context).accentColor,
letterSpacing: 0.4,
),
),
textAlign: TextAlign.left,
),
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image(
image: AssetImage(
'assets/images/typingautoverse.gif',
),
),
),
),
SizedBox(height: 5),
Padding(
padding:
const EdgeInsets.only(left: 15.0, bottom: 10),
child: Text(
"ANSWER",
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 20,
color: Theme.of(context).accentColor,
letterSpacing: 0.4,
height: 1.3,
),
),
),
),
],
),
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Card(
elevation: 3,
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(color: Colors.white)),
child: Padding(
padding: EdgeInsets.only(
top: 0.0, left: 15.0, right: 15.0, bottom: 0.0),
child: ExpansionTile(
title: Text(
"QUESTION",
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 20,
color: Theme.of(context).accentColor,
letterSpacing: 0.4,
),
),
textAlign: TextAlign.left,
),
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(left: 15.0, bottom: 10),
child: Text(
"ANSWER"
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 20,
color: Theme.of(context).accentColor,
letterSpacing: 0.4,
height: 1.3,
),
),
),
),
],
),
),
),
),
],
),
),
),
),
);
}
}