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