Question 79530 in Flutter Question posted in
The official Flutter documentation can be found here.

Change checkbox state when clicking on another widget – Flutter

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

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

    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; 
               });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search