I have created gender widget for selecting gender male in BMI app learning, female... here I want to show selected gender with some colour difference...on tap

I don't know what I am missing to complete it...there should be a bool variable but hw to let it know what gender is clicked...

here is my coding..

Row(
                children: [
                  Expanded(
                      child: MyContainer(
                    child: GenderWidget(onclick:(){
                        maleselected=true;
                        femaleselected=false;
                        setState(() {
                        });
                      },title: 'Male',
                      icon: Icons.male,
                    )
                  )),
                  Expanded(
                      child: MyContainer(
                    child: GenderWidget(
                      onclick: (){
                        maleselected=false;
                        femaleselected=true;
                      },
                      title: 'Female',
                      icon: Icons.female,
                    )
                  )),
                ],
              ),

and here is my custom widget

class GenderWidget extends StatelessWidget {
  final VoidCallback onclick;
  final String title;
  final IconData icon;

  GenderWidget({
    required this.onclick,
    required this.title,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onclick,
      child: Container(
        child: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text(
              title,
              style: mytextgender,
            ),
            Icon(
              icon,
              ////??? What variable should i use to finish
              // color: isselected==true?Colors.red:Colors.black,
              size: 80,
            ),
            SizedBox(
              height: 20,
              //??? What variable should i use to finish
              //child: isselected==true?Text('Selected'):null,
            )
          ],
        )),
      ),
    );
  }

CodePudding user response：

You can use another variable to GenderWidget for selected,

class GenderWidget extends StatelessWidget {
  final VoidCallback onclick;
  final String title;
  final IconData icon;

  final bool isSelected;

  GenderWidget({
    required this.isSelected,
    required this.onclick,
    required this.title,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onclick,
      child: Container(
        color:
            isSelected ? Colors.purple : null, //change color based on your need
        child: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text(
              title,
            ),
            Icon(
              icon,
              ////??? What variable should i use to finish
              color: isSelected == true ? Colors.red : Colors.black,
              size: 80,
            ),
            SizedBox(
              height: 20,
              //??? What variable should i use to finish
              child: isSelected == true ? Text('Selected') : null,
            )
          ],
        )),
      ),
    );
  }
}

Using enum will be handy

enum Gender {
  male,
  female,
  //....
}

Use like

Row(
  children: [
    Expanded(
        child: GenderWidget(
      onclick: () {
        selected = Gender.male;
        setState(() {});
      },
      isSelected: Gender.male == selected,
      title: 'Male',
      icon: Icons.male,
    )),
    Expanded(
        child: GenderWidget(
      isSelected: Gender.female == selected,
      onclick: () {
        selected = Gender.female;
        setState(() {});
      },
      title: 'Female',
      icon: Icons.female,
    )),
  ],
),