Why am i having problem with my toggle button

Issue

Hello guys I am total new to flutter so I was trying to build a BMI calculator , so i was trying to create a toggle switch between "MALE" and "FEMALE", so that when one card is clicked the other becomes inactive and i was trying to use a ternary code to achieve that

but the problem is if i run the app on my emulator and if i click on the "MALE" part it doesn’t get selected but if i click on the "FEMALE" part the "MALE" card get selected and the "FEMALE card remain inactive and the "MALE" card still remains active unless i reload the app but it doesnt solve the problem.

so please if someone can show me on how to fix that error. i will be happy for that

 enum Gender {
  male,
  female,
  empty,
}
class ReuseableCard extends StatelessWidget {
  ReuseableCard({required this.colour, this.cardChild, this.onPress});
  final Color colour;
  final Widget? cardChild;
  final VoidCallback? onPress;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
          child: cardChild,
          margin: EdgeInsets.all(15),
          decoration: BoxDecoration(
              color: colour, borderRadius: BorderRadius.circular(15))),
    );
  }
}

class _InputPageState extends State<InputPage> {
  Gender selectedGender = Gender.empty;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text('BMI CALCULATOR')),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
              child: Row(
            children: [
              Expanded(
                child: ReuseableCard(
                  cardChild: cardTitle(
                    fontIcon: FontAwesomeIcons.mars,
                    cardText: 'MALE',
                  ),
               //I DONT KNOW IF I AM WRONG HERE
                  colour: selectedGender == Gender.male
                      ? activeCardColor
                      : inactiveCardColor,
                ),
              ),
              Expanded(
                child: ReuseableCard(
                  onPress: () {
                    setState(() {
                      selectedGender = Gender.male;
                    });
                  },
                  cardChild: cardTitle(
                    fontIcon: FontAwesomeIcons.venus,
                    cardText: 'FEMALE',
                  ),
                  //I DONT KNOW IF I AM WRONG HERE
                  colour: selectedGender == Gender.female
                      ? activeCardColor
                      : inactiveCardColor,
                ),
              )
            ],
          )),
          Expanded(
            child: ReuseableCard(
              onPress: () {
                selectedGender = Gender.female;
              },
              colour: activeCardColor,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'HEIGHT',
                    style: labelTextStyle,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: [
                      Text(
                        height.toString(),
                        style: numberStyle,
                      ),
                      Text('cm'),
                    ],
                  ),
                  SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                        inactiveTrackColor: Color(0xFF8D8E98),
                        thumbColor: Color(0xFFEB1555),
                        overlayColor: Color(0x29EB1555),
                        activeTrackColor: Colors.white,
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 20.0),
                        overlayShape:
                            RoundSliderOverlayShape(overlayRadius: 30.0)),
                    child: Slider(
                      value: height.toDouble(),
                      min: 120.0,
                      max: 220.0,
                      onChanged: (double newValue) {
                        setState(() {
                          height = newValue.round();
                        });
                      },
                    ),
                  ),
            ],

Solution

I can see that your male box does not have method onPress so it will not do anything and your female box onPress set the value to male so that clicking female box will make male active and does nothing to female box and for some reason your height box sets value to female.

you need to move the onPress methods one level up ⬆️

the one on female box move it to -> male box

the one on height box move it to -> female box

and this should fix the issue.

Answered By – To Be

Answer Checked By – Robin (FlutterFixes Admin)