Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Change checkbox state when clicking on another widget

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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; 
               });
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading