Avoid Updating Parent Variable when Updating Child

Issue

I have problem with updating variable since it also affect its parent. I am trying to remove List item from child but it also removing the parent data.

Here is my code

Future<void> ChangeSubCategory({required String value}) async {
    if (this.mounted) {
      setState(() {
        if (!_subCategory.contains(value)) {
          if (value == 'all') {
            _subCategory = _categoryOutput[_category]; => set _subCategory from parent List
          } else {
            _subCategory.add(value);
          }
        } else if (_subCategory.contains(value)) {
          _subCategory.remove(value); => When doing this one, the parent _categoryOutput also affected
        }
        UpdateFilter();
      });
    }
  }

What is the safest way if we want to replicate variable from parent? since in flutter it also update the parent when we update child variable. Thank you.

Solution

Your problem is updating the whole state of parent which updates all the sub children widgets, to avoid that, you can use StatefulBuilder to only update the child you want!

As the below example, even all the three Checkboxes change the variable isChecked, but only the first Checkbox can refreshes the whole state which refreshes all the three Checkboxes childs, but the the second and the third Checkboxes can only refresh its state as they are using StatefulBuilder:

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChecked = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Example'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Refresh all the checkboxes'),
                Checkbox(
                  value: isChecked,
                  onChanged: (value) {
                    setState(() {
                      isChecked = !isChecked;
                    });
                  },
                ),
                Divider(),
                Text('Refresh only this checkbox'),
                StatefulBuilder(
                  builder: (context, setState) => Checkbox(
                    value: isChecked,
                    onChanged: (value) {
                      setState(() {
                        isChecked = !isChecked;
                      });
                    },
                  ),
                ),
                Divider(),
                Text('Refresh only this checkbox'),
                StatefulBuilder(
                  builder: (context, setState) => Checkbox(
                    value: isChecked,
                    onChanged: (value) {
                      setState(() {
                        isChecked = !isChecked;
                      });
                    },
                  ),
                ),
              ],
            ),
          )),
    );
  }
}

Answered By - KreatorDev