skip to Main Content

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

enter image description here

Widget:

ExpansionTile(
 //..
)

2

Answers


  1. 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: [
        .............
      ],
    ),
    
    Login or Signup to reply.
  2. 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")],
          ),
        );
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search