Change background color of ListTile upon selection in Flutter Change background color of ListTile upon selection in Flutter dart dart

Change background color of ListTile upon selection in Flutter


I was able to change the background color of the ListTile using a BoxDecoration inside Container:

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

Ripple Effect


Screenshot:

enter image description here


Short answer:

ListTile(  tileColor: isSelected ? Colors.blue : null, )

Full Code:

// You can also use `Map` but for the sake of simplicity I'm using two separate `List`.final List<int> _list = List.generate(20, (i) => i);final List<bool> _selected = List.generate(20, (i) => false); // Fill it with false initially  Widget build(BuildContext context) {  return Scaffold(    body: ListView.builder(      itemBuilder: (_, i) {        return ListTile(          tileColor: _selected[i] ? Colors.blue : null, // If current item is selected show blue color          title: Text('Item ${_list[i]}'),          onTap: () => setState(() => _selected[i] = !_selected[i]), // Reverse bool value        );      },    ),  );}