如何在颤动中打开切换按钮时更改卡片颜色

Question

I want to change the container color when i turn on the toggle button. I'm using ListTile, here is my code

Container(
      color:Colors.red,  //want to change this color
child:ListTile(
      dense:true,
          
          trailing:Switch(
            value: _selectedProducts.contains(book.id),
            onChanged:(bool? selected) {
              if (selected != null) {
                setState(() {
                  _onProductSelected(
                      selected, book.id);
                      print(selected);
                      print(book.id);
                });
              }},
            activeTrackColor: HexColor("#b8c2cc"),
            activeColor: HexColor("#7367f0"),
          ),
          title: Text(book.title,style:  ),
          
          subtitle: Text("Rs/- 40",),
              
        
          
        ),
  );

_onProductSelected in method i'm handling to on the toggle button on specific one.

update:

i'm calling this widget buildBook in Widget build(BuildContext context)

 Expanded(
              child: ListView.builder(
                itemCount: books.length,
                itemBuilder: (context, index) {
                  final book = books[index];

                  return Column(
                    children: [
                      buildBook(book,index),
                      Divider()
                    ],
                  );
                },
              ),
            ),
 Widget buildBook(Book book) => InkWell(
    onTap:(){Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => ProductProfile(),
        ));},
    child: Container(
      color:isChangeColor?Colors.red:Colors.green,
      child: ListTile(
        dense:true,
            leading: SizedBox(
              width: 50,
              height: 90,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child: Image.network(
                  book.urlImage,
                 fit: BoxFit.cover,
                
                ),
              ),
            ),
            trailing:Switch(
              value: _selectedProducts.contains(book.id),
              onChanged:(bool? selected) {
                if (selected != null) {
            //       setState(() {
            // if(selected){
            // cardColor = Colors.blue;
            // }else{
            // cardColor = Colors.pink;
            // }});
                  setState(() {
                    isChangeColor = selected;
                    // isChangeColor=true;
                    _onProductSelected(
                        selected, book.id);
                        print(selected);
                        print(book.id);
                  });
                }},
              activeTrackColor: HexColor("#b8c2cc"),
              activeColor: HexColor("#7367f0"),
            ),
            title: Text(book.title,style:  GoogleFonts.montserrat(color:Colors.black,fontWeight:FontWeight.w500,fontSize: 15),),
            // isThreeLine: true,
            subtitle: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(book.author,style: GoogleFonts.montserrat()),
                // SizedBox10(),
                Text("Rs/- 40",style: GoogleFonts.montserrat(fontSize: 15,color: Colors.black,fontWeight: FontWeight.w400),),
                
          
              ],
            ),
          ),
    ),
  );
}

please help how to do this.

Answer 1

update

You can define a variable for card color and change value of that on _onProductSelected method.

var cardColor = Colors.pink;

Container(
      color: Colors.white,
      height: MediaQuery.of(context).size.height*0.12,
      child: Card(
        margin: EdgeInsets.all(10),
  color: cardColor,
  child: SwitchListTile(
      title: Text(book.title,style: TextStyle(
          color: Colors.white,
      ),
      ),
     
      value: _selectedProducts.contains(book.id),
      activeColor: Colors.blue,
      inactiveTrackColor: Colors.grey,
      onChanged: (bool? selected) {
                if (selected != null) {
                  setState(() {
                    _onProductSelected(selected, book.id);
                       
                  });
                }},
  ),
),
    ));

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

Also for container you can use below code :

var containerColor= Colors.pink;

Container(
      color:containerColor,  //want to change this color
child:ListTile(
      dense:true,
          
          trailing:Switch(
            value: _selectedProducts.contains(book.id),
            onChanged:(bool? selected) {
              if (selected != null) {
                setState(() {
            if(selected){
            containerColor = Colors.blue;
            }else{
            containerColor = Colors.pink;
            }
                  _onProductSelected(
                      selected, book.id);
                      print(selected);
                      print(book.id);
                });
              }},
            activeTrackColor: HexColor("#b8c2cc"),
            activeColor: HexColor("#7367f0"),
          ),
          title: Text(book.title,style:  ),
          
          subtitle: Text("Rs/- 40",),
              
        
          
        ),
  );

Answer 2

You can use a bool property. Based on this true-false condition you can change the color of container.

bool isChangeColor;
Container(
      color: isChangeColor?Colors.red:Colors.green,  //here you check
child:ListTile(
      dense:true,
          
          trailing:Switch(
            value: _selectedProducts.contains(book.id),
            onChanged:(bool? selected) {
              if (selected != null) {
        
                setState(() {
                  isChangeColor = selected;
                  _onProductSelected(
                      selected, book.id);
                      print(selected);
                      print(book.id);
                });
              }},
            activeTrackColor: HexColor("#b8c2cc"),
            activeColor: HexColor("#7367f0"),
          ),
          title: Text(book.title,style:  ),
          
          subtitle: Text("Rs/- 40",),
              
        
          
        ),
  );

Complete source code

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool isChangeColor = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Container(
          color: isChangeColor ? Colors.red : Colors.green, //here you check
          child: ListTile(
            dense: true,
            trailing: Switch(
              value: isChangeColor,
              onChanged: (bool selected) {
                if (selected != null) {
                  setState(() {
                    isChangeColor = selected;
                  });
                }
              },
            ),
            title: Text("book.titl"),
            subtitle: Text(
              "Rs/- 40",
            ),
          ),
        ));
  }
}

output:

Answer 3

You can use bool variable like isSelected to check ListTile is selected or not.

Example :

bool isSelected = true;
Container(
    color: isSelected ? Colors.red : Colors.green,
    ...
)