flutterdartflutter-layoutmarginexpandablelistview

Is there a way to get rid of the spacing between expansion panels when expanded in an expansion panel list in Flutter?

I am running into a problem where I am wanting to remove the space between expansion panels of an expansion panel list when the panels are expanded.

Images of unwanted behavior, these images are taken from flutter documentation:

List when not expanded, which is fine:

enter image description here

List when expanded: - You can see the gap between the sections. This is what I do not want for my app.

enter image description here

Any tips are appreciated.

Solution

  • Instead of changing the source code, you're better off making a copy of the expansion_panel.dart and using this. For the space between the items to disappear, you must comment out on lines 486 and 487.

    if (_isChildExpanded(index) && index != 0 && !_isChildExpanded(index - 1))
items.add(MaterialGap(key: _SaltedKey<BuildContext, int>(context, index * 2 - 1)));

    And on lines 558 and 559.

    if (_isChildExpanded(index) && index != widget.children.length - 1)
items.add(MaterialGap(key: _SaltedKey<BuildContext, int>(context, index * 2 + 1)));

    Another issue with this component which you might want to fix, is with the canTapOnHeader property. Setting it to true allows you to tap the card and expand, but you're stuck with a bunch of dead space on the right side of your card. To fix this, add a check to only show expandIconContainer (line 526) as follows:

    if (!child.canTapOnHeader) expandIconContainer,