Ref.watch in Consumer does not trigger the creation of a new instance of provider

[abdullahrs]

Hi everybody,

I have a structure where every page has a provider (view model). I define provider with autoDispose on less used screens so that it does not take up active space in memory and state refreshes every create thats also plus for me.

Definition of my provider like below

final postDetailControllerProvider =
    ChangeNotifierProvider.autoDispose<PostDetailController>((ref) {
  return PostDetailController(ref: ref);
});

class PostDetailController extends BaseController {
  PostDetailController({required super.ref});
  ....
  }

The related UI part:

@override
Widget build(BuildContext context) {
  final favorite = ref.watch(widget.controller  // 'Watch-1'
              .select((pdc) => pdc.postIsLiked));
  return Scaffold(
      body: SingleChildScrollView(
          child: Column(children: [
    Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Consumer(
        builder: (context, ref, child) {
          final favorite = ref.watch(widget.controller // 'Watch-2'
              .select((pdc) => pdc.postIsLiked));
          return SocialCounts( 
            likes: data.numberOfLikes,
            comments: data.numberOfComments,
            onTapSend: controller.authenticatedUser
                ? controller.onTapSend
                : showAlertDialog,
            onTapLike: controller.authenticatedUser
                ? controller.onTapLike
                : (_) => showAlertDialog(),
            onTapComment: controller.authenticatedUser
                ? controller.onTapComment
                : showAlertDialog,
            userFavorite: favorite ?? data.userFavorite,
          );
        },
      )
    ])
  ])));
}

If I simply want to rebuild the relevant part when changes occur, I can remove the top-level watch from the build method ('Watch-1') and add a Consumer to the code, watching the value within it ('Watch-2'). However, I encounter the error 'Provider was used after being disposed' when I navigate to the screen. This error persists even when I attempt to access the Provider in initState (after a delay to ensure the context is mounted) or within any notifyListeners method. It basically not creates the provider if the watch inside the consumer.

You can say you could simply use a top-level watch at the beginning of the build method, but I'm curious if there's a more efficient or correct approach or simply am i using watch wrong ?

[rrousselGit]

My guess is that your SocialCounts widget was unmounted while methods like onTapSend were still performing asynchronous work.

[abdullahrs]

How could the SocialCounts widget become unmounted while the methods (like onTapSend) are still working? Is that even possible? The issue occurs after the build method is called and I'm pressing the buttons.
I even wrapped the notifyListeners() call with WidgetsBinding.instance.addPostFrameCallback, but I’m still getting the error. Additionally, I checked within the SocialCounts widget using context.mounted, and it returns true, so the widget is definitely still mounted.
The problem seems to be that the provider instance is never created when 'Watch-2' is used. This is evident because when I simply call it at the top of the build method ('Watch-1'), it works perfectly. Just relocating the select or watch allows me to access the provider without getting error.

[abdullahrs]

• The method does not have any asynchronous work yet because I haven't connected it to the backend. Here's the current implementation:

Future<void> onTapLike(bool likeStatus) async {
  // TODO: Connect to service
  postIsLiked = likeStatus;
  notifyListeners();
}