How to manage selected variables for listtiles inside of a listview.builder

Question

I have a ListView.builder which returns a ListTile . The itemCount is set to min(_selectedEvents.length, 3) . So a maximum of 3 ListTile s is being returned with a backgroundColor of Colors.grey[200] .

I want to set the color to Colors.red for a single ListTile when it is pressed. I set selected: _selectedListtileController (a var that I created) and with onTap this is being set to true, which changes the color to red.

But the problem is that the red color is set for all the ListTile s and not for a single one. Also creating 3 separate controllers is not an option because I return them in a ListTile and I can only pass 1 controller.

How do I set the color of a separate ListTile whenever the ListTile is pressed?

Thanks in advance!

Answer 1

If you'd like more than one ListTile to be selectable, we could define a List<int> where to save the indexes of selected ListTile s:

// StatefulWidget is required
List<int> _selectedTiles = [];

And use the following functions to toggle the selected state of a specific ListTile :

void toggleSelectedListTile(int index) {
    if (_selectedTiles.contains(index))
       setState(() => _selectedTiles.remove(index));
    else
       setState(() => _selectedTiles.add(index));
}

A ListTile Widget has the selected property, which we can take advantage of:

ListTile(
 selected: _selectedTiles.contains(index),
 selectedTileColor: Colors.red,
 title: Text('List tile $index'),
 onTap() { toggleSelectedListTile(index); },
)

Therefore, a full example snippet of this solution would be:

class HomeWidget extends StatefulWidget {
  HomeWidget({ Key key }) : super(key: key);

  @override
  _HomeWidgetState createState() => _StatefulWidgetExampleState();
}


class _HomeWidgetState extends State<StatefulWidgetExample> {

   List<int> _selectedTiles = [];

   void toggleSelectedListTile(int index) {
       if (_selectedTiles.contains(index))
          setState(() => _selectedTiles.remove(index));
       else
          setState(() => _selectedTiles.add(index));
   }

   Widget _buildListTile(int index) {
      return ListTile(
       selected: _selectedTiles.contains(index),
       selectedTileColor: Colors.red,
       title: Text('List tile $index'),
       onTap() { toggleSelectedListTile(index); },
      );
   }

   @override
   Widget build(BuildContext context)
      return Scaffold(
         body: new ListView.builder
            (
              itemCount: 3, 
              itemBuilder: (BuildContext ctxt, int index) => _buildListTile(index),
            ),
      );
}

Answer 2

Create an empty map at the top of the class

  final _isSelected = Map();

  @override
  Widget build(BuildContext context) {

on your ListView.builder

ListView.builder(
        itemCount: _selectedEvents.length,
        itemBuilder: (context, index) {

          //add this line to initiate             
          if (!_isSelected.containsKey(index)) // important
              _isSelected[index] = false;

          return ListTile(
            ...
            ...
            
            // and this line to check listTile is selected or not
            selected: _isSelected[index],
            tileColor: Colors.grey[200],
            selectedTileColor: Colors.red,
            onTap: () {
              setState(() => _isSelected[index] = !_isSelected[index] );
            },
          );
        },
      ),

or you can create your selected logic at initState()