Change checkbox state when clicking on another widget-CodePudding

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!;
           });
         },
       ),
     );
   }
}

CodePudding user response：

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; 
               });

CodePudding user response：

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.