flutter: how to remove icon from expansion panel

Viewed 10582

in flutter expansion panel, there is a icon on it by default
i want to remove the icon from expansion panel
flu

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...
5 Answers

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 are using ExpantionTile inside the panel, you can provide trailing widget to it which will replace the arrow.

There is an ongoing effort in adding this feature to ExpansionPanel, but that is moment, it is not supported. You can extend this and customize or other libraries which provide this feature. (The one mentioned by @bensal)

I had a similar issue with ExpandablePanel, I created an ExpandableThemeData and set the hasIcon property to false.

var themeData = ExpandableThemeData(hasIcon: false);
ExpandablePanel(
    theme: themeDate,
    ... rest of the code...
      )

You can add this file to your code and use it in place of ExpansionPanelList. Or You could edit the source code of ExpansionPanelList directly on your version of flutter (not recommended)

Related