Expansion tile widget color on tap

Question

When pressed on an ExpansionTile, I want to remove the color of the a press.

Widget:

ExpansionTile(
 //..
)

Answer 1

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")],
      ),
    );
  }
}