To begin with, i have the CustomExpansionPanelList
widget as a parent. Then a list of children of the CustomExpansionPanel
. In the headerBuilder
is the ListTile
, which has text and an icon on trailing.
The problem: the onPressed
event is hard to catch by the CustomExpansionPanel
. A specific tap must be done.
Note: CustomExpansionPanelList
and CustomExpansionPanel
are classes modified by me. Removing the ‘Custom’ you get the classes of the widget itself.
The code:
CustomExpansionPanelList(
elevation: 0,
expandedHeaderPadding: EdgeInsets.zero,
expansionCallback: (i, isOpen) {
///some code
},
children: [
CustomExpansionPanel(
canTapOnHeader: true,
isExpanded: true,
body: const SomeBody(),
headerBuilder: (context, isOpen) {
return ListTile(
iconColor: Colors.white,
contentPadding: const EdgeInsets.symmetric(
horizontal: 20.0),
title: const Text(
'some text',
),
trailing: Transform.translate(
offset: const Offset(30, 0),
child: Container(
margin: EdgeInsets.all(8),
child: IconButton(
icon: Icon(Icons.edit_outlined),
onPressed: () => someAction()
)),
)));
},
),
])
2
Answers
ListTile
providesonTap
method, you can use it.More about
ListTile
You could just set
canTapOnHeader: false
in theCustomExpansionPanel
widget. That way taps on yourIconButton
in the header are registered correctly, and you can expand/collapse the body of theCustomExpansionPanel
by tapping on the little arrow icon to the right of yourIconButton