I have a screen like this:

There is a checkBox right above the button. When I click on the checkBox, it is ticked; If it's already ticked, I want it unticked. I wrote the following code for this:

Checkbox(
  checkColor: Colors.white,
  value: isChecked,
  onChanged: (bool value) {
    setState(() {
      isChecked = value;
    });
  },
),

I put the checkBox here inside the showModalBottomSheet.

When I click the checkBox, it ticks but does not appear. I tried to close and open the showModalBottomSheet if it is ticked. I clicked it while showModalBottomSheet was open, then I closed and reopened showModalBottomSheet and saw that it was ticked.

I saw that when showModalBottomSheet is open, it does not click, I need to close it.

showModalBottomSheet codes:

FlatButton(
            child: Text("Hesap Oluştur", style: TextStyle(color: Colors.blue[400], fontSize: 18, fontFamily: "Roboto-Thin"),),
            onPressed: () async {
              await showModalBottomSheet(
                isScrollControlled: true,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
                  
                ),
                context: context,
                builder: (context) {
                return FractionallySizedBox(
                  heightFactor: 0.75,
                    child: Column(
                        children: [
                          Padding(
                            padding: EdgeInsets.all(15),
                            child: Column(
                              children: [
                                Text("Hesap Oluştur", style: TextStyle(fontSize: 25, fontFamily: "Roboto-Bold"),),
                                SizedBox(height: 8),
                                Text("Hesap oluşturmak oldukça basittir. Bilgilerini gir, hesabını oluştur.",style: TextStyle(fontSize: 18, fontFamily: "Roboto-Thin"), textAlign: TextAlign.center,),
                                SizedBox(height: 10),
                                Divider(thickness: 1,),
                                SizedBox(height: 10),
                                TextFormField(
                                  decoration: InputDecoration(
                                    hintText: "E-posta",
                                    prefixIcon: Icon(Icons.mail)
                                  ),
                                  style: TextStyle(fontSize: 18),
                                ),
                                SizedBox(height: 15),
                                TextFormField(
                                  decoration: InputDecoration(
                                    hintText: "Ad-soyad",
                                    prefixIcon: Icon(Icons.person)
                                  ),
                                  style: TextStyle(fontSize: 18),
                                ),
                                SizedBox(height: 15),
                                TextFormField(
                                  obscureText: true,
                                  decoration: InputDecoration(
                                    hintText: "Şifre",
                                    prefixIcon: Icon(Icons.lock)
                                  ),
                                  style: TextStyle(fontSize: 18),
                                ),
                                SizedBox(height: 15),
                                TextFormField(
                                  obscureText: true,
                                  decoration: InputDecoration(
                                    hintText: "Şifreyi doğrula",
                                    prefixIcon: Icon(Icons.lock)
                                  ),
                                  style: TextStyle(fontSize: 18),
                                ),
                                Checkbox(
                                  checkColor: Colors.white,
                                  value: isChecked,
                                  onChanged: (bool value) {
                                    setState(() {
                                      isChecked = value;
                                    });
                                  },
                                ),
                                RaisedButton(
                                  child: Padding(
                                    padding: const EdgeInsets.only(right: 85, left: 85, top: 12, bottom: 12),
                                      child: Text("Create account", style: TextStyle(color: Colors.white, fontSize: 20, fontFamily: "Roboto-Thin"),),
                                  ),
                                  color: Colors.blue[400],
                                  textColor: Colors.white,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(30.0),
                                  ),
                                  onPressed: () {
                                    //Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage()));
                                  },
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    );
                }
              );
            },
          ),

How can I solve this problem? I appreciate the help in advance.

CodePudding user response：

Hi Emir Bolat you need to wrap your "FractionallySizedBox" with "statefulBuilder" and that's it. Thanks

CodePudding user response：

I was doing something similiar, in the return for the modal I created a seperate stateful widget ie

showModalBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
                    return ListView.builder(
                      itemCount: 3,
                      itemBuilder: (context, index) {
                        return RadioListBuilder();
                      },
                    );
                  });

and then a seperate stateful class

class RadioListBuilderState extends State<RadioListBuilder> {
  var isChecked = false;

  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      value: Provider.of<ListValueNotifier>(context).isChecked,
      onChanged: (bool) =>
          Provider.of<ListValueNotifier>(context, listen: false).setValue(),
      //     (newValue) {
      //   setState(() {
      //     isChecked = newValue!;
      //     if (isChecked == true && value <= 2) {
      //       value  ;
      //     } else {
      //       value--;
      //     }
      //     print(value);
      //   });
      // },
      controlAffinity: ListTileControlAffinity.leading,
    );
  }
}

and that solved the issue for me of not being able to check it