Skip to main content

avoid-ref-watch-outside-build

added in: 1.17.0
warning
🛠
Pro+

Warns when ref.watch is used outside of the build method.

ref.watch is designed to subscribe to changes which is not needed when the value is red outside of the build method.

Example​

❌ Bad:

class HomeConsumerWidget extends ConsumerWidget {
  const HomeConsumerWidget();

  void callback(WidgetRef ref) {
    // LINT: Avoid using 'ref.watch' outside of the 'build' method. Try rewriting the code to use 'ref.read' instead.
    final value = ref.watch(counterProvider);
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    return Text('$counter');
  }
}

✅ Good:

class HomeConsumerWidget extends ConsumerWidget {
  const HomeConsumerWidget();

  void callback(WidgetRef ref) {
    final value = ref.read(counterProvider);
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    return Text('$counter');
  }
}