Changing Card colors and text onTap with InkWell

Question

So, I have been creating a home automation app, I was using a custom button for these, but came across it wasn't the best way, so I made a Card. This card is Inside a container that is inside a InkWell, the container is just so I can determine the width and height of the card. This card has its initial colors as background grey and text and icons as white, but when I tap it I would want it to be background white and text and icons black. Future on I will work with MQTT so I need the onTap to be functional

When I was working with buttons this worked well:

style: TextStyle(color: btn ? Colors.white : Colors.grey[800]),

But now with the Card it doesn't seem to work, I will have a bunch of cards later I will try to add them in a function, because I will only need to change the text and icons for future cads.
This is the code for the InkWell card that I tried:

InkWell(
                        onTap: (){
                        },
                          child: Container(
                          height: 90,
                          width: 90,
                          child: Card(
                            color: btn ? Colors.white : Colors.grey[800],
                            semanticContainer: true,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10),
                            ),
                            margin: new EdgeInsets.all(0),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                Row(
                                  children: <Widget>[
                                    Padding(
                                      padding: EdgeInsets.only(top: 5, right: 25, bottom: 10),
                                      child: Icon(
                                        Icons.lightbulb_outline,
                                        color: Colors.white,
                                        size: 35,
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
                                      child: new Text(
                                        "On",
                                        //style: TextStyle(color: btn ? Colors.white : Colors.grey[800]),
                                        style: TextStyle(color: Colors.white),
                                      ),
                                    ),
                                  ],
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 8, left: 5),
                                  child: Text(
                                    'Lâmpada 1 Schuma',
                                    style: TextStyle(color: Colors.white, fontSize: 13),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

Custom Button: CustomCard( iconData: Icons.lightbulb_outline, text: 'Lâmpada 0 Schuma', isActive: cardsValue[0], onTap: () { setState(() { cardsValue[0] = !cardsValue[0]; }); }, ),

Answer 1

Try to use setState to update the state of the bool variable(i changed the name btn to isActive):

The Class of the Card:

class CustomCard extends StatelessWidget {
  final bool isActive;
  final String text;
  final IconData iconData;
  final VoidCallback onTap;

  const CustomCard({
    this.isActive,
    this.text,
    this.iconData,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 90,
        width: 90,
        child: Card(
          color: isActive ? Colors.white : Colors.grey[800],
          semanticContainer: true,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          margin: new EdgeInsets.all(0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(top: 5, right: 25, bottom: 10),
                    child: Icon(
                      Icons.lightbulb_outline,
                      color: isActive ? Colors.grey : Colors.white,
                      size: 35,
                    ),
                  ),
                  Padding(
                    padding:
                        EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
                    child: new Text(
                      isActive ? 'On' : 'Off',
                      style: TextStyle(
                          color: isActive ? Colors.grey[800] : Colors.white),
                    ),
                  ),
                ],
              ),
              Padding(
                padding: EdgeInsets.only(top: 8, left: 5),
                child: Text(
                  text,
                  style: TextStyle(
                      color: isActive ? Colors.grey[800] : Colors.white,
                      fontSize: 13),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Calling on another screen:

List<bool> cardsValue = [false, false];

@override
Widget build(BuildContext context) {
  return Scaffold(
    floatingActionButton: Center(
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: cardsValue.length,
        itemBuilder: (_, index) {
          return Align(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: CustomCard(
                iconData: Icons.lightbulb_outline,
                text: 'Lâmpada 1 Schuma',
                isActive: cardsValue[index],
                onTap: () {
                  setState(() {
                    cardsValue[index] = !cardsValue[index];
                  });
                },
              ),
            ),
          );
        },
      ),
    ),
  );
}