how to pass a provider variable from one view page to another to change its value

Question

I have a question about a task that I want to do. I have a form which has several steps which are divided into several classes, the variables of the controllers are all housed in a provider in order to centralize all that information when going to validate all that, the doubt that I have is the following. I want to factor my code by creating a class of some CheckboxListTile that I have, I want to create a class of this to generate instances of it, since my idea is to make a group of Checkboxes of the same type, my question is how do I pass a variable from a provider from one class to another class, and in the child class to be able to receive the state of the form provider, the variable, and to be able to modify the value of the variable within the onChanged function of the CheckboxListTile.

my idea is to go from something like this:

Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          border: Border.all(color: Colors.black38)),
      constraints:
          const BoxConstraints(maxWidth: 160, minWidth: 100),
      child: CheckboxListTile(
          value: provider.variable,
          title: const Text('Lunes'),
          onChanged: (value) {
             provider.variable = !provider.variable;
             setState(() {});
          },
       ),
   ),

to something like this:

 CheckboxListTileDays(provider: provider,  variable: variable, text: 'Monday'),
 CheckboxListTileDays(provider: provider,  variable: variable, text: 'Tuesday '),
 CheckboxListTileDays(provider: provider,  variable: variable, text: 'Wednesday '),
 CheckboxListTileDays(provider: provider,  variable: variable, text: 'Thursday '),
 CheckboxListTileDays(provider: provider,  variable: variable, text: 'Friday'),

class CheckboxListTileDaysextends StatefulWidget {
    const CheckboxListTileDays({
         Key? key,
         required this.provider,
         required this.variable,
         required this.text,
     }) : super(key: key);

     final ClassProvider provider;
     final String variable;
     final String text;

     @override
     State<CheckboxListTileDays> createState() => _CheckboxListTileDaysState();
}

class _CheckboxListTileDaysState extends State<CheckboxListTileDays> {
     @override
     Widget build(BuildContext context) {
     return Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),
            border: Border.all(color: Colors.black38)),
        constraints: const BoxConstraints(maxWidth: 160, minWidth: 100),
        child: CheckboxListTile(
            value: widget.provider.variable,
            title: Text(widget.text),
        onChanged: (value) {
            setState(() {});
        },
      ),
    );
  }
}

and clearly I'm not sure if this can be done in reality, maybe it can't be done exactly like that, I would like to know any information on how to do this or something similar with the obligation to use the provider.

Answer 1

There is no reason to pass either provider or value to a child, just read a value eg by using the extension methods.

final String variable = context.read<ClassProvider>().variable;
...
final String variable = context.watch<ClassProvider>().variable;