3

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 enter image description here

 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();
                        });
                      },
                    ),
                  ),
            ],

enter image description here

3 Answers3

1

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.

Mahmoud Mabrouk
  • 703
  • 2
  • 13
  • 31
  • can you take a look at the second screenshot i uploaded @to-be it still doesn't change simultaneously – Olamilekan Adeyemi Dec 19 '21 at 01:38
  • 1
    Why are setting value of `selectedGender` to female on clicking male box and the same for the other one? – Mahmoud Mabrouk Dec 19 '21 at 01:41
  • Can you take a look at the code again on female on press the value is now set to `selectedGender=Gender.male` while on male box `SelectedGender=Gender.male` isnt? in the on press function but it still doesnt change simultaneously? where did i go wrong please? i have reuploaded the image again – Olamilekan Adeyemi Dec 19 '21 at 01:50
  • 1
    The male card should set `selectedGender` to `Gender.male` and the female card should set `selectedGender` to `Gender.female`. Be sure to set the value inside of `setState(() {...})`. – mmcdon20 Dec 19 '21 at 02:21
0

Yemi from the screenshot you posted make the following changes to the female card...

// from this
onPress: (){
selectedGender = Gender.male;
}

// to this
onPress: (){
setState((){
selectedGender = Gender.female;
});
}

And I would suggest that you take your time and rewatch the module from the tutorial you are watching - I assume you are following Angela yu's course. Plus if you feel stressed out just take a break and come back to it later

davidn
  • 378
  • 4
  • 12
  • i noticed something about this after i changed the code as you suggested, after i hot restart the app, if i click on the "MALE" box it get selected. but if i click on the "FEMALE" box it doesn't get selected instantly unless i adjust slider is it normal? – Olamilekan Adeyemi Dec 19 '21 at 03:24
0

add this line inside male onPress

setState((){
    selectedGender = Gender.male;
})

and add this line inside famele onPress

setState((){
   selectedGender = Gender.female;
})

It will be resolve your issue.

Sharath B Naik
  • 1,016
  • 7
  • 14