Home > Software design >  how to create dual checkbox in flutter
how to create dual checkbox in flutter

Time:10-13

I want to create two checkbox next to each other and when one of them is checked, the other one be unchecked but I don`t know how to do that in flutter, so I'll be wonderful if someone could help me. here is my codes:

  bool isMan = false;
  bool isWoman = false;

  Padding(
                    padding: EdgeInsets.only(right: 10),
                    child: Text(
                      "Man:",
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ),
                  Theme(
                    data: ThemeData(unselectedWidgetColor: Colors.white),
                    child: Checkbox(
                      value: isMan,
                      checkColor: Color(0xfff44336),
                      activeColor: Colors.white,
                      onChanged: (value) {
                        setState(
                          () {
                            isMan = value!;
                          },
                        );
                      },
                    ),
                  ),
                  Text(
                    "Woman:",
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                  Theme(
                    data: ThemeData(unselectedWidgetColor: Colors.white),
                    child: Checkbox(
                      value: isWoman,
                      checkColor: Color(0xfff44336),
                      activeColor: Colors.white,
                      onChanged: (value) {
                        setState(
                          () {
                            isWoman = value!;
                          },
                        );
                      },
                    ),
                  ),

CodePudding user response:

When checkbox is un/checked - change other checkbox value

  bool isMan = false;
  bool isWoman = false;

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      Text("Man:"),
      Checkbox(
          value: isMan,
          onChanged: (value) {
            setState(() {
              isMan = value!;
              isWoman = !value; # or set it to false
            });
          }),
      Text("Woman:"),
      Checkbox(
          value: isWoman,
          onChanged: (value) {
            setState(() {
              isWoman = value!;
              isMan = !value;  # or set it to false
            });
          })
    ]);
  }

CodePudding user response:

Here is the solution.

bool isMan = false; 
bool isWoman = false; 

Center(
      child: Row(
        children: [
          Padding(
            padding: EdgeInsets.only(right: 10),
            child: Text(
              "Man:",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
          Theme(
            data: ThemeData(unselectedWidgetColor: Colors.white),
            child: Checkbox(
              value: isMan,
              checkColor: Color(0xfff44336),
              activeColor: Colors.white,
              onChanged: (value) {
                setState(
                  () {
                    isMan = value!;
                    isWoman = false;
                  },
                );
              },
            ),
          ),
          Text(
            "Woman:",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          Theme(
            data: ThemeData(unselectedWidgetColor: Colors.white),
            child: Checkbox(
              value: isWoman,
              checkColor: Color(0xfff44336),
              activeColor: Colors.white,
              onChanged: (value) {
                setState(
                  () {
                    isWoman = value!;
                    isMan = false;
                  },
                );
              },
            ),
          ),
        ],
      ),
    )
  • Related