CODEWITHSUNDEEP
flutterflutter-layout
Jay Tillu
Jay Tillu

Reputation: 1558

How to add custom ripple effect color to ListTile in flutter

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.

Upvotes: 3

Views: 3112

Answers (2)

David Lawson
David Lawson

Reputation: 7922

This should do the trick:

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

Upvotes: 4

Jay Tillu
Jay Tillu

Reputation: 1558

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

Upvotes: 3

Related Questions