flutterdartgesturedetector

Card Color Not Working Using Gesture Detector Flutter


I am tired of something. I am following a course and I am trying to build a BMI calculator application but the color of the Male-female card does not update when I press it.

I have also used print('Male is selected') and it is showing me in the console that Gender.male or Gender.female is selected but the color is not changing. What am I doing wrong? I am new to flutter. Thanks.

Here is the code

reusable_card.dart

import 'package:flutter/material.dart';

class ReusableCard extends StatelessWidget {
  ReusableCard({@required this.colour, this.cardChild, this.onPress});

  final Color colour;
  final Widget cardChild;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        child: cardChild,
        margin: EdgeInsets.all(15.0),
        decoration: BoxDecoration(
          color: Color(0xFF1D1E33),
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

input_page.dart

Gender selectedGender;
enum Gender {
male,
female,
}

Expanded(
child: ReusableCard(
onPress: () {
setState(() {
selectedGender = Gender.female;
});
},
colour: selectedGender == Gender.female
? kActiveCardColour
: kInactiveCardColour,
cardChild: IconContent(
icon: FontAwesomeIcons.venus,
label: 'FEMALE',
),
),
),

constants.dart

const kActiveCardColour = Color(0xFF1D1E33);
const kInactiveCardColour = Color(0xFF111328);

Solution

  • You have not used the color you are passing :

    class ReusableCard extends StatelessWidget {
      ReusableCard({@required this.colour, this.cardChild, this.onPress});
    
      final Color colour;
      final Widget cardChild;
      final Function onPress;
    
      @override
      Widget build(BuildContext context) {
        return GestureDetector(
          onTap: onPress,
          child: Container(
            child: cardChild,
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
               //pass the colour here
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        );
      }
    }
    

    Your final widget should be like this :

    class ReusableCard extends StatelessWidget {
      ReusableCard({@required this.colour, this.cardChild, this.onPress});
    
      final Color colour;
      final Widget cardChild;
      final Function onPress;
    
      @override
      Widget build(BuildContext context) {
        return GestureDetector(
          onTap: onPress,
          child: Container(
            child: cardChild,
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: colour,
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        );
      }
    }