in flutter expansion panel, there is a icon on it by default
i want to remove the icon from expansion panel
how i'm gonna do this? here is my code
ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {},
children: [
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return Stack(children: [
ListTile(//and the rest of code...
the only way to do it is by editing the ExpansionPanel source code. I added a new property called hasIcon and set it by default to true (to make sure it will not break the code).
To show such a list flutter gives a widget called ExapansionPanelList. In this list, every child is an ExpansionPanel widget. We can’t utilize different widgets as children for this list. We can deal with the adjustment of state ( Expansion or collapse ) of a thing with the assistance of ExpansionCallback property.
It is a material widget in flutter which is like listView. It can just have Expansion panels as children. In certain cases, we may need to show a list where the children can expand/collapse to show/hide some detailed data. To show such a list flutter gives a widget called ExapansionPanelList. In this list, every child is an ExpansionPanel widget.
To utilize ExpansionPanelList, you need to call the constructor underneath: > children: This property is used by the children of the expansion panel List. They are laid out similarly to [ListBody]. > expansionCallback: This property is used to the callback that gets called whenever one of the expand/collapse buttons is pressed.
The extension panel list shows your children by clicking on the item and animating the extension. In simple words, it means to show the header details of the expansion panel. HeaderBuilder: The header builder property is used to design the visible portion of the title of the list.
the only way to do it is by editing the ExpansionPanel source code.
I added a new property called hasIcon and set it by default to true (to make sure it will not break the code).
ExpansionPanel(
hasIcon: false, // <------
canTapOnHeader: true,
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(
'Title',
),
);
},
body: Container(), // <------
isExpanded: false, // <------
),
and here is how you edit the source code:
Press CTRL + click on ExpansionPanel widget, then search for
this.isExpanded = false,
and add below it
this.isExpanded = false,
this.hasIcon = true,
then search for
final bool isExpanded;
and add below it
final bool isExpanded;
final bool hasIcon;
finally, search for
Widget header = Row(
children: <Widget>[
Expanded(
child: AnimatedContainer(
duration: widget.animationDuration,
curve: Curves.fastOutSlowIn,
margin: _isChildExpanded(index) ? widget.expandedHeaderPadding : EdgeInsets.zero,
child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: _kPanelHeaderCollapsedHeight),
child: headerWidget,
),
),
),
expandIconContainer,
],
);
and replace it
Widget header = Row(
children: <Widget>[
Expanded(
child: AnimatedContainer(
duration: widget.animationDuration,
curve: Curves.fastOutSlowIn,
margin: _isChildExpanded(index) ? widget.expandedHeaderPadding : EdgeInsets.zero,
child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: _kPanelHeaderCollapsedHeight),
child: headerWidget,
),
),
),
Container(
child: child.hasIcon? expandIconContainer:null,
),
],
);
This works,
Just add SizedBox.shrink() to the trailing properties of ExpansionTile
ExpansionTile(
trailing: SizedBox.shrink(),
title: Text(
"Title",
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold
),
),
children: <Widget>[
ExpansionTile(
title: Text(
'Sub title',
),
children: <Widget>[
ListTile(
title: Text('data'),
)
],
),
ListTile(
title: Text(
'data'
),
)
],
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With