How to change the color of the cardview on button click in flutter?

Question

I have a few buttons and I need to set the colour of the card view as per the button click. Basically, I'm adding a theme to my post, so on the preview page, I need to allow the user to select the colour of their choice by clicking the button.

Screenshot: CardView Page with Buttons

Button Code:

 Padding( padding: const EdgeInsets.only(top: 10), child: Row( children: [ Expanded( child: MaterialButton( onPressed: () {}, color: Colors.yellow, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.orange, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.brown, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.blue, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.green, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.black, shape: CircleBorder(), ), ), ], ), ),

Cardview Code:

 Card( child: Container( decoration: BoxDecoration( color: Colors.blue, border: Border.all( color: MyColors.black, width: 1.5), borderRadius: BorderRadius.circular(10)), child: Column( children: [ Row( children: [ Padding( padding: const EdgeInsets.all(8.0), child: CircleAvatar( backgroundImage: CachedNetworkImageProvider( _profileurl), ), ), Text(_username), ], ), Padding( padding: const EdgeInsets.all(8.0), child: Obx( () => Text( pollDataController1.question.value, style: TextType.boldHeading, ), ), ), Obx( () => ClipRRect( borderRadius: BorderRadius.circular(10), child: Image.asset( (pollImageController.imageDisplay.value), width: 320, height: 170, fit: BoxFit.cover, ), ), ), Padding( padding: const EdgeInsets.symmetric( vertical: 10.0), child: Column( children: [ Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx( () => Text( pollDataController1.op1.value + " ", style: TextStyle( color: MyColors.offBlack, fontSize: 16.0, ), ), ), Obx( () => Text(pollDataController1.op1Emoji.value), ), SizedBox( width: 25.0, ), Obx( () => Text( pollDataController1.op2.value + " ", style: TextStyle( color: MyColors.offBlack, fontSize: 16.0, ), ), ), Obx( () => Text(pollDataController1.op2Emoji.value), ), ], ), ], ), SizedBox(height: 13.0), Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx( () => Text( pollDataController1.op3.value + " ", style: TextStyle( color: MyColors.offBlack, fontSize: 16.0, ), ), ), Obx( () => Text(pollDataController1.op3Emoji.value), ), SizedBox( width: 25.0, ), Obx( () => Text( pollDataController1.op4.value + " ", style: TextStyle( color: MyColors.offBlack, fontSize: 16.0, ), ), ), Obx( () => Text(pollDataController1.op4Emoji.value), ), ], ), ], ), ], ), ), ], ), ), ),

Answer 1

You can use a global variable for color and a function to change the color on tapping each circle button.

So an example would be:

Color cardBackgroundColor = Colors.white;
  
void changeColor(Color changeToColor) {
        setState(() {
            cardBackgroundColor = changeToColor;
         });
  }

then in your button code use it like this:

Expanded(
         child: MaterialButton(
         onPressed: changeColor(Colors.yellow),
         color: Colors.yellow,
         shape: CircleBorder(),
         ),
      ),

and in the Cardview Code change it to:

Card(child: Container(
                 decoration: BoxDecoration(
                 color: cardBackgroundColor,
                 border: Border.all(
                 color: MyColors.black, width: 1.5),
                 borderRadius: BorderRadius.circular(10)),

This would be the quickest way to do it, although it might not be the cleanest.