How to change multiple listtile color on click on toggle button in flutter

November 4, 2021

I want to change the color of ListTile when toggle button is on, this is happening, but I can’t do this for multiple ListTiles wherease i can on the toggle button for multiple listTile.

Here is my code

late int tappedIndex;

@override
  void initState() {
    super.initState();
    tappedIndex = 0;
  }


 Expanded(
            child: ListView.builder(
              itemCount: books.length,
              itemBuilder: (context, index) {
                final book = books[index];
                return Column(
                  children: [
                    Container(
                         decoration: BoxDecoration(
                       color: tappedIndex == index ? Colors.grey[200] : Colors.white,
                       
                      ),
                        child: ListTile(
                          dense: true,
                          trailing: Switch(
                            value: _selectedProducts.contains(book.id),
                            onChanged: (bool? selected) {
                              if (selected != null) {
                                setState(() {
                                  tappedIndex = index
                                  _onProductSelected(selected, book.id,tappedIndex);
                                });
                              }
                            },
                            activeTrackColor: HexColor("#b8c2cc"),
                            activeColor: HexColor("#7367f0"),
                          ),
                          title: Text(
                            book.title,)
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                );



void _onProductSelected(bool selected, productId,tappedindex) {
    if (selected == true) {
      setState(() {
        _selectedProducts.add(productId);
      });
    } else {
      setState(() {
        _selectedProducts.remove(productId);
      });
    }
  }

i’m trying to do something on tappedIndex on _onProductSelected, please help how to do this.

>Solution :

You have already list of toggle button is on in ‘_selectedProducts’ variable.

So you just change a little code.

tappedIndex == index ? Colors.grey[200] : Colors.white

-> 

_selectedProducts.contains(book.id) ? Colors.grey[200] : Colors.white

late int tappedIndex;

@override
  void initState() {
    super.initState();
    tappedIndex = 0;
  }


 Expanded(
            child: ListView.builder(
              itemCount: books.length,
              itemBuilder: (context, index) {
                final book = books[index];
                return Column(
                  children: [
                    Container(
                         decoration: BoxDecoration(
                       color: _selectedProducts.contains(book.id) ? Colors.grey[200] : Colors.white,
                       
                      ),
                        child: ListTile(
                          dense: true,
                          trailing: Switch(
                            value: _selectedProducts.contains(book.id),
                            onChanged: (bool? selected) {
                              if (selected != null) {
                                setState(() {
                                  tappedIndex = index
                                  _onProductSelected(selected, book.id,tappedIndex);
                                });
                              }
                            },
                            activeTrackColor: HexColor("#b8c2cc"),
                            activeColor: HexColor("#7367f0"),
                          ),
                          title: Text(
                            book.title,)
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                );



void _onProductSelected(bool selected, productId,tappedindex) {
    if (selected == true) {
      setState(() {
        _selectedProducts.add(productId);
      });
    } else {
      setState(() {
        _selectedProducts.remove(productId);
      });
    }
  }