Dart - Flutter : setState() functionality error

Question

in this code i try to make toggle effect, so when user click the "Male" button its color will be green and other's is grey, and unlike the other. code make the icon & text color green, but do not toggle.

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';


class GenderBox extends StatefulWidget {
  final String gender;

  const GenderBox({super.key, required this.gender});

  @override
  State<GenderBox> createState() => _GenderBoxState();
}

class _GenderBoxState extends State<GenderBox> {
  String selected = '';
  Color maleColor = Colors.black54;
  Color femaleColor = Colors.black54;

  void selectGender(gender) {
    setState(() {
      if (gender == 'male') {
        femaleColor = Colors.black45;
        maleColor = Colors.green;
      } else {
        femaleColor = Colors.green;
        maleColor = Colors.black45;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        selectGender(widget.gender);
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          widget.gender == 'female'
              ? FaIcon(
                  FontAwesomeIcons.venus,
                  size: 40,
                  color: femaleColor,
                )
              : FaIcon(
                  FontAwesomeIcons.mars,
                  size: 40,
                  color: maleColor,
                ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              widget.gender == "female" ? 'Female' : 'Male',
              style: TextStyle(
                  fontSize: 25,
                  color: widget.gender == "female" ? femaleColor : maleColor),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

Try to refactor your selectGender function.. set the setState inside the If statement and not the if inside the setState.

void selectGender(gender) {
   if (gender == 'male') {
      setState(() {
       femaleColor = Colors.black45;
         maleColor = Colors.green;
      })
   } else {
      setState(() {
            femaleColor = Colors.green;
            maleColor = Colors.black45;
         )}
      }
}

Answer 2

You have multiple issue.

Updated code:

class GenderBox extends StatefulWidget {
  final String gender;

  const GenderBox({super.key, required this.gender});

  @override
  State<GenderBox> createState() => _GenderBoxState();
}

class _GenderBoxState extends State<GenderBox> {
  String selected = '';
  Color maleColor = Colors.black54;
  Color femaleColor = Colors.black54;

  @override
  void initState() {
    super.initState();
    selected = widget.gender;
    selectGender(widget.gender);
  }

  void selectGender(gender) {
    setState(() {
      selected = gender;

      if (gender == 'male') {
        femaleColor = Colors.black45;
        maleColor = Colors.green;
      } else {
        femaleColor = Colors.green;
        maleColor = Colors.black45;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        selectGender(selected == 'female' ? 'male' : 'female');
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          selected == 'female'
              ? FaIcon(
                  FontAwesomeIcons.venus,
                  size: 40,
                  color: femaleColor,
                )
              : FaIcon(
                  FontAwesomeIcons.mars,
                  size: 40,
                  color: maleColor,
                ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              selected == "female" ? 'Female' : 'Male',
              style: TextStyle(
                fontSize: 25,
                color: selected == "female" ? femaleColor : maleColor,
              ),
            ),
          )
        ],
      ),
    );
  }
}