Workaround to "cannot use "ref" after the widget was disposed"

[Maldus512]

Hello everyone,
Today I broke the application I was working on while doing some refactoring. I changed a function that returned a Widget into a ConsumerWidget and was met with the following error:

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Bad state: Cannot use "ref" after the widget was disposed.
#0      ConsumerStatefulElement._assertNotDisposed (package:flutter_riverpod/src/consumer.dart:553:7)
#1      ConsumerStatefulElement.read (package:flutter_riverpod/src/consumer.dart:622:5)
// ... App specific trace

This is a minimal example displaying the issue:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

enum LoginState {
  loggedOut,
  loggingIn,
  loggedIn,
}

class LoginStateNotifier extends StateNotifier<LoginState> {
  LoginStateNotifier(LoginState loginState) : super(loginState);

  void loggingIn() => state = LoginState.loggingIn;
  void loggedIn() => state = LoginState.loggedIn;
}

final loginStateProvider =
    StateNotifierProvider<LoginStateNotifier, LoginState>((ref) {
  return LoginStateNotifier(LoginState.loggedOut);
});

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Lost ref"),
      ),
      body: Center(
          child: switch (ref.watch(loginStateProvider)) {
        // LoginState.loggedOut => myLoginForm(context, ref), // This works
        LoginState.loggedOut => const MyLoginForm(), // This doesn't
        LoginState.loggingIn => const Text("Logging in..."),
        LoginState.loggedIn => const Text("Success!"),
      }),
    );
  }
}

class MyLoginForm extends ConsumerWidget {
  const MyLoginForm({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) => ElevatedButton(
      onPressed: () async {
        ref.read(loginStateProvider.notifier).loggingIn();
        await Future.delayed(const Duration(seconds: 1)); // Loggin in
        ref.read(loginStateProvider.notifier).loggedIn();
      },
      child: const Text("Login"));
}

Widget myLoginForm(BuildContext context, WidgetRef ref) => ElevatedButton(
    onPressed: () async {
      ref.read(loginStateProvider.notifier).loggingIn();
      await Future.delayed(const Duration(seconds: 1)); // Loggin in
      ref.read(loginStateProvider.notifier).loggedIn();
    },
    child: const Text("Login"));

If I understand the problem correctly the ConsumerWidget whose WidgetRef I'm using is destroyed at the beginning of the async function that handles the login, so when I try to use the reference again an exception is thrown.

The solution I've found is to either turn MyLoginForm into a function and pass a WidgetRef that stays alive (which I believe is frowned upon) or to move the switch between login states down to make sure that MyLoginForm stays alive while it changes.

What I'm asking is what is the best practice in cases like this.

[AhmedLSayed9]

You can just update your onPressed to:

    onPressed: () async {
      ref.read(loginStateProvider.notifier).loggingIn();
      await Future.delayed(const Duration(seconds: 1)); // Loggin in
      if (!context.mounted) return; //Return if widget is disposed.
      ref.read(loginStateProvider.notifier).loggedIn();
    },

[Maldus512]

Well, that would spare me from the exception, but the loggedIn invocation is a required step. It would still be an error to skip it.

[nicklbaert]

@Maldus512 You can just do:

    onPressed: () async {
      final loginNotifier = ref.read(loginStateProvider.notifier);
      loginNotifier.loggingIn();
      await Future.delayed(const Duration(seconds: 1)); // Loggin in
      loginNotifier.loggedIn();
    },

[bhfish2020]

I second the timer, but sometimes it can be solved by enclosing it in a if(mounted) or (if in a ConsumerStatefulWidget) if(context.mounted)

[rohinton-collins]

If anyone hits this page on a search of the above error, I think that this is a general answer for when the scope of a ref is coming to an end. For example if you click on a button on a context menu or some other menu. When you close the menu then the ref may go out of scope and you cannot use it after this time. But you may be making async calls which take time. So follow this logic:

1. Use the ref for any synchronous calls which you can make which finish quickly
2. Get a reference to any notifier you want to use for async functions
3. (Dismiss the menu) or the ref otherwise goes out of scope due to the destruction of its parent object
4. Now you can use the notifiers, potentially without even calling await, even if the functions are asynchronous (fire and forget).
5. Don't use the ref directly after step 3!

[rohinton-collins]

I found a related issue with using MenuItemButton. If you create a ConsumerWidget and return a MenuItemButton from the build() function, then because MenuButtonItems auto-dismiss themselves when clicked, then the ref will have been disposed before the MenuItemButton.onPressed() handler is called, so if you attempt to use the ref within this handler it will fail! There are a few options here and I have used both:

1. Pass in the menuController to the ConsumerWidget, and apply the above algorithm for using the ref - acquire any notifiers you need, dismiss the menu using menuController.close(), and then you can use the notifiers.
2. Don't use a ConsumerWidget for this button, just use a StatelessWidget and pass in the ref from the parent widget which declares the MenuAnchor. The StatelessWidget can then return a MenuItemButton in its build() function. It can freely use the (passed in) ref in the onPressed() method as it will not be disposed(), and it can leave the menu to be auto-dismissed by virtue of using a MenuItemButton.
3. Don't create a separate Widget class for your menu button, just create the MenuItemButton directly in the ConsumerWidget which creates the MenuAnchor, or put it into a separate member function. The ref of this class which contains the MenuAnchor will not be prematurely disposed().