Change checkbox state when clicking on another widget

Question

I have a goal to change the state of the checkbox when clicking on the adjacent widget. I tried to create a stateful function but unfortunately my code doesn't work.

Here is the function -

void _changeFlagCheckBox(bool? value){
     setState(() {
       MyCheckBoxCountry.isChecked = value!;
     });
   }

Inkwell - when you click on it, it should change the state of myCheckBoxCountry.

child: ListView.builder(
                     itemCount: city.length,
                     shrinkWrap: true
                     itemBuilder: (BuildContext context, int index) {
                       return InkWell(
                         onTap: () {
                           print(city[index]);
                           _changeFlagCheckBox;
                         },
                         child: Container(
                             margin: const EdgeInsets.only(top: 15),
                             child:Row(
                               mainAxisAlignment: MainAxisAlignment.spaceBetween,
                               children:[
                                 Row(
                                   children:[
                                     SizeBox(width: 10,),
                                     Text(city[index], style: TextStyle(color: ConfigColor.white, fontWeight: FontWeight.w500, fontSize: 15),)
                                   ],
                                 ),
                                 MyCheckBoxCountry()
                               ],
                             )
                         ),
                       );

                     },
                   ),

myCheckBoxCountry -

class MyCheckBoxCountry extends StatefulWidget {
   static bool isChecked = false;

   @override
   _MyCheckBoxState createState() => _MyCheckBoxState();
}

class _MyCheckBoxState extends State<MyCheckBoxCountry> {
   @override
   Widget build(BuildContext context) {
     return Theme(
       data: Theme.of(context).copyWith(
         unselectedWidgetColor: ConfigColor.grey,
       ),
       child: Checkbox(
         activeColor: ConfigColor.green,
         checkColor: ConfigColor.background,
         value: MyCheckBoxCountry.isChecked,
         shape: CircleBorder(),
         onChanged: (bool? value) {
           setState(() {
             MyCheckBoxCountry.isChecked = value!;
           });
         },
       ),
     );
   }
}

Risheek Mittal · Accepted Answer · 2022-12-06T05:41:17.773

First of all you're not sending any value in your _changeFlagCheckBox function in your Inkwell so how is it supposed to change :

              InkWell(
                     onTap: () {
                       print(city[index]);
                       _changeFlagCheckBox; //should be _changeFlagCheckBox(!MyCheckBoxCountry.isChecked)
                     },

but to understand why didn't you get an error like that, well that's because you made the bool value nullable in your _changeFlagCheckBox function:

void _changeFlagCheckBox(bool? value){ //should be (bool value)
     setState(() {
       MyCheckBoxCountry.isChecked = value!;
     });
   }

Though even then you are not using your isChecked value in your MyCheckBoxCountry class anywhere :

Checkbox(
         activeColor: ConfigColor.green,
         checkColor: ConfigColor.background,
         value: MyCheckBoxCountry.isChecked,
         shape: CircleBorder(),
         onChanged: (bool? value) {
           setState(() {
             MyCheckBoxCountry.isChecked = value!; //should be the other way around
           });
         },
       ),

Should have been :

 setState(() {
                  value = MyCheckBoxCountry.isChecked; 
               });

Yes, it worked! Thanks a lot! But there was a problem that when you click again - the checkbox does not go away — Daniil, Dec 06 '22 at 05:38
yeah cause you need to check the value of `isChecked` and pass `!isChecked` in its place — Risheek Mittal, Dec 06 '22 at 05:40

score 0 · Answer 2 · answered Dec 06 '22 at 05:26

0

I guess since it is an another stateful widget class, It does not recognize the setState. Calling child widget from parent widget would solve the problem.

answered Dec 06 '22 at 05:26

Emre Faruk KOLAÇ

514
4
13

I didn't quite understand you – Daniil Dec 06 '22 at 05:26
1

https://stackoverflow.com/questions/51029655/call-method-in-one-stateful-widget-from-another-stateful-widget-flutter Since they have their own state, calling setState on parent widget will not effect the child one. You need to use callback mechanic. I didn't want to write it because it was explained pretty good here – Emre Faruk KOLAÇ Dec 06 '22 at 05:28

Change checkbox state when clicking on another widget

2 Answers2