Flutter Provider - Checkbox not getting checked

Question

Below is my ViewModel class :

class SignInViewModel extends ChangeNotifier {
  var isRememberMeChecked = false;
  final TextEditingController emailC = TextEditingController();
  final TextEditingController passwordC = TextEditingController();

  Future<bool> signIn({
    required String email,
    required String password,
  }) async {
    /// Implement Api Call Here
    return true;
  }
}

You can see the class is extending ChangeNotifier & Please not the variable named isRememberMeChecked which is by default 'false'.

Now, In my Widget class, which is StateFulWidget, I am trying to change the value of CheckBox as below:

child: Checkbox(
          fillColor: theme.checkboxTheme.fillColor,
          value: widget.viewModel.isRememberMeChecked,
          onChanged: (bool? value) {
            widget.viewModel.isRememberMeChecked=value!;
          },
         ), 

You can notice this line:

widget.viewModel.isRememberMeChecked=value!;

EDIT:

I have also tried it with set as below:

widget.viewModel.setRememberMe = value

In ViewModel class :

set setRememberMe(bool value) {
    isRememberMeChecked = value;
    notifyListeners();
  }

But with this also Checkbox UI not getting checked to unchecked. Means the Checkbox UI is not reflecting for true or false values.

What might be the issue?

Answer 1

If you want to refresh your page, you should use the Consumer widget or if you only want to refresh a certain area, you should use the Selector widget.

If you use Consumer, all the active Consumer widgets will listen when any notifyListener in your viewModel is triggered. If you want performance, you can use Selector and listen only the selected variable.

My advice to you is to use a viewModelBuilder structure like stacked.

But if you don't want that, you can do something like this;

  Widget build(BuildContext context) {
    return Consumer<SignInViewModel>(
      builder: (context, viewModel, child) =>
          Scaffold(
            appBar: appBar...,
            body: Checkbox(
              fillColor: theme.checkboxTheme.fillColor,
              value: viewModel.isRememberMeChecked,
              onChanged: (bool? value) => viewModel.setRememberMe(value!),
            ),
          ),
    );
  }

If you only want to renew a certain area;

  Widget build(BuildContext context) {
    var signInViewModel = Provider.of<SignInViewModel>(context, listen: false);
    return Selector<SignInViewModel, bool>(
      selector: (_, listener) => listener.isRememberMeChecked,
      builder: (context, isRememberCheck, child) =>  Checkbox(
        fillColor: theme.checkboxTheme.fillColor,
        value: isRememberCheck,
        onChanged: (bool? value) => signInViewModel.setRememberChecked(value!),
      ),
    );
  }

To access places like initState;

var signInViewModel = Provider.of<SignInViewModel>(context, listen: false);