How to add custom ripple effect color to ListTile in flutter

user_8509590 0
Viewed 1624

In flutter by default, ListTile has the grey ripple effect color. But there are situations when we need to change the default ripple effect color. There is no property in ListTile that can help you in that.

Here is the sample of the default ripple effect color.

enter image description here

So how can anyone change the default ripple effect color in ListTile.

flutter-layout flutter
2 Answers

As there is no property in the ListTile that can help you in getting the custom ripple effect color. So to get the custom ripple effect color you have to wrap your ListTile with the InkWell widget.

In InkWell widget there are many properties like splashColor, hoverColor, highlightColor or focusColor, that can help you in getting the custom ripple color of your choice.

NOTE: When you wrap your ListTile with the InkWell widget, you have to specify the onTap property of the InkWell. Otherwise without onTap property your InkWell widget won't be able to apply custom ripple effect color.

Here is a code sample to show the example:

Card(
  child: InkWell(
    splashColor: Colors.blue,
    onTap: (){},
    child: ListTile(
      title: Text('Your Title Text Goes Here'),
      trailing: Icon(Icons.ac_unit),
      ),
     ),
   ),

Here is an output of the sample code:

Test Sample

user_85095900

This should do the trick:

Theme(
  data: ThemeData(splashColor: Colors.red),
  child: ListTile(
    title: Text('Hello World'),
    onTap: () {},
  ),
)
user_3353170
Related