How to Change ListTile Background Color On Selection ?

How to Change ListTile Background Color On Selection ?

Firstly, you need to check some widgets, as some (such as RaisedButton and IconButton) that already have splashColor and highlightColor properties you can set without having to modify or add a Theme…Here, In this article, we will learn How to Change ListTile Background Color On Selection

How to Change ListTile Background Color On Selection?

ListTile that has the style property. But ListTileTheme. ListTileTheme is an inheritedWidget. And like others, it’s used to pass down data (such as theme here).

To use it, you have to wrap any widget above your ListTile with a ListTileTheme containing the desired values.

ListTile will then theme itself depending on the closest ListTileTheme instance.

Try below ways

ListView (
    children: <Widget>[
        new Container (
            decoration: new BoxDecoration (
                color: Colors.red
            ),
            child: new ListTile (
                leading: const Icon(Icons.euro_symbol),
                title: Text('250,00')
            )
        )
    ]
)

If you also need an onTap listener with a ripple effect, you can use Ink:

ListView(
  children: [
    Ink(
      color: Colors.lightGreen,
      child: ListTile(
        title: Text('With lightGreen background'),
        onTap() { },
      ),
    ),
  ],
);

We will get output like below:

Wrap ListTile in an Ink.

Ink(
  color: isSelected ? Colors.blue : Colors.transparent,
  child: ListTile(title: Text('hello')),
)

Card(
  color: Colors.white,
  shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.zero,
  ),
  borderOnForeground: true,
  elevation: 0,
  margin: EdgeInsets.fromLTRB(0,0,0,0),
  child: ListTile(
    // ...
  ),
)

Conclusion:

So in this article, We have been through How to Change ListTile Background Color On Selection

Keep Learning !!! Keep Fluttering !!!

Still, need Support for Flutter Development? Do let us know, we’d love to assist 🙂

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.