It is possible to remove most color effects from the expansion tile. However, this is not achievable from the parameters available in the constructor. Wrapping the ExpansionTile in a Theme is required.
The code below removes the splash, hovering, highlighting and divider colors from the ExpansionTile.
class CustomExpansionTile extends StatelessWidget {
const CustomExpansionTile({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData(
/// Prevents to splash effect when clicking.
splashColor: Colors.transparent,
/// Prevents the mouse cursor to highlight the tile when hovering on web.
hoverColor: Colors.transparent,
/// Hides the highlight color when the tile is pressed.
highlightColor: Colors.transparent,
/// Makes the top and bottom dividers invisible when expanded.
dividerColor: Colors.transparent,
/// Make background transparent.
expansionTileTheme: const ExpansionTileThemeData(
backgroundColor: Colors.transparent,
collapsedBackgroundColor: Colors.transparent,
),
),
child: const ExpansionTile(
title: Text("Title"),
children: [Text("Expanded")],
),
);
}
}
2
Answers
To remove the color on an
ExpansionTile
when it’s pressed, you can set thebackgroundColor
property of theExpansionTile
toColors.transparent
.It is possible to remove most color effects from the expansion tile. However, this is not achievable from the parameters available in the constructor. Wrapping the ExpansionTile in a Theme is required.
The code below removes the splash, hovering, highlighting and divider colors from the ExpansionTile.