Change background color of ListTile upon selection in Flutter
I've made a ListView
in Flutter, but now I have some ListTiles
in this ListView
that can be selected. Upon selection, I want the background color to change to a color of my choice. I don't know how to do that.
In the docs they mention that a ListTile
has a property style
. However, when I try to add that (as in third last line in the code below), this style
property gets a squiggly red line underneath and the compiler tells me that The named parameter 'style' isn't defined
.
Widget _buildRow(String string){
return new ListTile(
title: new Text(string),
onTap: () => setState(() => toggleSelection(string)),
selected: selectedFriends.contains(string),
style: new ListTileTheme(selectedColor: Colors.white,),
);
}
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')
)
)
]
)
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
);
},
),
);
}
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() { },
),
),
],
);
It's not 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.
Wrap ListTile
in an Ink
.
Ink(
color: isSelected ? Colors.blue : Colors.transparent,
child: ListTile(title: Text('hello')),
)