Move from ProviderListener to ref.listen

[julienlebren]

👋

I was using the following code to listen a provider with ProviderListener and display an error alert or move forward to the next step of the form:

class SettingsPhonePage extends ConsumerWidget {
  const SettingsPhonePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ProviderListener<SettingsPhoneState>(
      provider: settingsPhoneControllerProvider,
      onChange: (context, state) async {
        if (state.errorText != null) {
          showFirestoreErrorDialog(context, ref);
        } else if (state.verificationId != null) {
          Navigator.of(context).pushNamed(SettingsRoutes.verificationPage);
        }
      },
      child: const _PageContents(),
    );
  }
}

I did not find any examples of the new ref.listen, could you tell me if this rewrite is the good practice?

class SettingsPhonePage extends ConsumerWidget {
  const SettingsPhonePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ref.listen<SettingsPhoneState>(settingsPhoneControllerProvider, (state) {
      if (state.errorText != null) {
        showFirestoreErrorDialog(context, ref);
      } else if (state.verificationId != null) {
        Navigator.of(context).pushNamed(SettingsRoutes.verificationPage);
      }
    });

    return const _PageContents();
  }
}

[julienlebren]

@rrousselGit can I get your confirmation to rewrite all my ProviderListener? 🙏🏻

[julienlebren]

I never doubt about your talent so I was pretty sure that it was properly cleaned.
However it may not be obvious to users so think to underline the fact that this way to do things is clean, when you will write the documentation of .listen 😉

[julienlebren]

One more question: no problem if I had a ref.watch additionally to the ref.listen?
Like this:

class SettingsPhonePage extends ConsumerWidget {
  const SettingsPhonePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ref.listen<SettingsPhoneState>(settingsPhoneControllerProvider, (state) {
      if (state.errorText != null) {
        showFirestoreErrorDialog(context, ref);
      } else if (state.verificationId != null) {
        Navigator.of(context).pushNamed(SettingsRoutes.verificationPage);
      }
    });
    final someVariable = ref.watch(someProvider);
    return _PageContents(someVariable);
  }
}

And just out of curiosity for my personal culture, if someVariable is updated so the widget rebuilds, is ref.listen cleared and built again? If so, isn't that a curious behavior?

[rrousselGit]

no problem if I had a ref.watch additionally to the ref.listen?

No problem

if someVariable is updated so the widget rebuilds, is ref.listen cleared and built again?

Yes but honestly it hardly matters.

[julienlebren]

Even if it hardly matters, maybe a workaround to avoid this would be:

class SettingsPhonePage extends ConsumerWidget {
  const SettingsPhonePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ref.listen<SettingsPhoneState>(settingsPhoneControllerProvider, (state) {
      if (state.errorText != null) {
        showFirestoreErrorDialog(context, ref);
      } else if (state.verificationId != null) {
        Navigator.of(context).pushNamed(SettingsRoutes.verificationPage);
      }
    });
    return Consumer(builder: (_, ref, __) {
      final someVariable = ref.watch(someProvider);
      return _PageContents(someVariable);
    }
  }
}

What do you think about this? Overthinking? Useless workaround? 😅

[rrousselGit]

You're over thinking. It really doesn't matter