Expansion tile widget color on tap-CodePudding

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

Widget:

ExpansionTile(
 //..
)

CodePudding user response：

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

CodePudding user response：

To remove the color on an ExpansionTile when it's pressed, you can set the backgroundColor property of the ExpansionTile to Colors.transparent.

ExpansionTile(
  backgroundColor: Colors.transparent,
  title: Text('Expansion Tile'),
  children: [
    .............
  ],
),