Support custom ExpansionPanel icon

[masus04]

Use case

ExpansionPanel should allow the user to customize or even remove the trailing expansion icon/button. This is even more needed as the canTapOnHeader key allows expanding elements by clicking on the header instead of the icon.

ExpansionPanelList in combination with ExpansionPanels are currently the only canonical option to build a list of expandable tiles. Out of the two, only ExpansionPanel can be expanded and collapsed programmatically, and therefore only ExpansionPanel is able to enforce that only one element is expanded at any given time, collapsing any other element when a new one is expanded. However, while ExpansionTile does not force the expansion icon, ExpansionPanel does.

It seems like quite a common use case to want a List of expandable elements but not show a fixed style expand button, either because the button should be customizable or be replaced with a clickable heading.

Proposal

Add the following keys to ExpansionPanel:

enum ExpandIconPosition {left, right};
enum CollapseIconPosition {left, right};

ExpansionPanel({
  Icon? expandIcon = DefaultExpandIcon(),
  Icon? collapseIcon = DefaultCollapseIcon(),
  ExpandIconPosition expandIconPosition = ExpandIconPosition.right,
  CollapseIconPosition collapseIconPosition = CollapseIconPosition.right,
...
})

The expand/collapse icons should replace the currently hardcoded arrow icons or in case they are null, not display any expand/collapse buttons.

The ExpandIconPosition and CollapseIconPosition should control where the expand/collapse button is located.

[oravecz]

If this is worked on, I would like to also be able to adjust the positioning of the icon in the Row. Currently, it is centered in the row, and I would like an option to adjust that alignment to the start (e.g. top). My header, when expanded has several lines of descriptive text in the header, and if the icon is centered vertically, I think it looks awkward. Ideally, allowing for a leading/trailing widget to be passed in, and this widget expands to the height of the header should give us complete control over the icons and their alignment.

[ramirezsebas]

Hey @masus04 , I might try to add this feature, I think separating the collapsed icon and expanded icon is not necesary, it uses an icon and rotates the icon with a Tween.
What do you think about just passing an icon and the degree of the rotation?

[saurabhkumar8112]

Giving support to change the icon tile height is also fairly important. Right now it's too rigid

[iska9der]

Please, give us ability to remove that icon.
For example, this is how it look in my app:

What if i want to make this icon with the same background as in my header?
I can add my own icon to the header, but its required to remove icon from ExpansionPanelList.
Boolean hasIcon argument may be helpful for achieve this

[iska9der]

For now, you can check this answer on stackoverflow for a temporary solution

[Macacoazul01]

@danagbemava-nc there is this closed PR that tried to implement the function years ago:
#62383

Any chances of this being merged?

[Macacoazul01]

this issue is also a duplicate of #32802

[Macacoazul01]

There is also another PR that tried to create this: #35416

[stuartmorgan]

@danagbemava-nc there is this closed PR that tried to implement the function years ago: #62383

Any chances of this being merged?

It was closed because it wasn't completed, as it says in the comments there; there is no chance of a PR that's neither complete nor reviewed being merged. Anyone interested in making a new, complete PR is certainly welcome to do so.

[Macacoazul01]

found this one #121957

[Macacoazul01]

@stuartmorgan any chances of helping me with the failing tests on this one?
The error logs are very unclear
#130462

[ronytesler]

also control the width of the content part vs the part where the icon is.

[flutter-triage-bot]

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.

[HansMuller]

This issue is being addressed by #130462