Collection of ExpansionTile Customization

Compiled some of the common customization on ExpansionTile so that we've one place to refer to, and don’t need to search for them each time.

Whenever I use ExpansionTile, I tend to customize some parts of it. However, every time I do, I forget the specifics and end up Googling it again.

In this post, I've compiled some of the common customizations I make on ExpansionTile so that I have one place to refer to, and I won’t need to search for them each time.

Remove Divider Line

There is no parameter in ExpansionTile to remove the divider. ExpansionTile internally creates a divider and uses the divider color from the Theme. Therefore, instead of removing the divider, we can change the color of the divider to Color.transparent by overriding the dividerColor in Theme.

Caution ⚠️ : The Theme widget overrides the color of all descendant widgets under ExpansionTile. Therefore, if you have any children under ExpansionTile that use the actual material theme dividerColor, you need to wrap another Theme widget on top of that children widget to use that color.

For more, check out the Stackoverflow answer.

Remove Trailing Expandable Icon

This icon is usually shown at the end of the Expansion title. We don't have a boolean parameter to show or hide it. However, since ExpansionTile is similar to ListTile, we have a trailing widget property. Therefore, we can replace that icon in trailing with any empty widget, such as SizedBox.

For more, check out the Stackoverflow answer.

Expandable Icon in Left

By default, the expand icon shows at the end. However, if we want to move it before the title (i.e., in the leading position), we need to change the controlAffinity property to ListTileControlAffinity.leading.

Disable the Expansion of ExpansionTile

Tile Expansion happens when we click on it. In some conditions, we want to avoid the expansion. There is no enable/disable parameter here, but we can achieve that by wrapping ExpansionTilearound IgnorePointers, which disables gesture detection.

Caution ⚠️ : IgnorePointer will disable gestures for all the descendant widgets inside ExpansionTile, so if you have a clickable event attached to the title widget of the ExpansionTile, then it won't work.

For more, check out the Stackoverflow answer.

Collapsing ExpansionTile After Choosing an Item

When I was looking for this answer in 2018, I thought it would be as simple as changing a parameter or a theme hack. But it turned out to be more complicated than that. Simon copied and slightly modified the version of the ExpansionTile by adding expand, collapse, and toggle functionality.

Since it's a lot of code, it's better to copy it from the source. I always wondered why this was not part of the inbuilt widget itself.

Change Expansion Text Color

When expanding the tile, the color of the text title changes to the accentColor, which is handled internally by ExpansionTile using the Theme. In this case, we don't need to override the Theme; we just need to change the textColor.

ExpandableTile provides multiple properties to adjust colors, such as backgroundColor, collapsedBackgroundColor, textColor, collapsedTextColor, iconColor, and collapsedIconColor. You can experiment to see what works best for you.

Packages for Advance Stuff

1. The advance_expansion_tile package provides all the customization we discussed above in a nice API in the a pub package.

2. The expansion_tile_widget is an edited version of ExpansionTile that allows you to customize the header tile and expanded list.

3. The expandable_sliver_list is a Flutter widget that creates a Sliver List that you can then either expand or collapse, in order to show or hide the contents of the list.

That’s it for now.

You can check the example on DartPad.

https://dartpad.dev/ecda974fec5b9532c5a9eeff81f61f03

And if you have any additional suggestions, feel free to comment. If it's useful, I will add it to the gist.

If you found this post helpful or informative, would you consider sharing it with your friends and colleagues? It would mean a lot to me, and I believe it could be valuable to them as well.

Thanks for reading!