flutter riverpod question: watch a provider from another provider and trigger action on the first provider

user_10657404 0
Viewed 1020

I am trying to figure out how can i watch a StateNotifierProvider and trigger some methods (defined in the class subclassing StateNotifier) on this provider after having done some async computations in another Provider watching the StateNotifierProvider.

Loking at the example below

i need to perform a reset from the RandomAdderNotifierobject provided by the randomAdderProvider if the doneProvider return true.

I try to reset from the doReset Provider. However the provider has nothing to provide.

The point is that both the doneProvider and the doreset provider are not rebuild on state changes of AdderProvider.

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:equatable/equatable.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

final randomProvider = Provider<Random>((ref) {
  return Random(1234);
});

//immutable state
class RandomAdder extends Equatable {
  final int sum;
  const RandomAdder(this.sum);
  @override
  List<Object> get props => [sum];
}

//State notifier extension
class RandomAdderNotifier extends StateNotifier<RandomAdder> {
  RandomAdderNotifier(this.ref) : super(const RandomAdder(0));
  final Ref ref;

  void randomIncrement() {
    state = RandomAdder(state.sum + ref.read(randomProvider).nextInt(5));
  }

  void reset() {
    state = RandomAdder(0);
  }
}

/// Providers are declared globally and specify how to create a state
final randomAdderProvider =
    StateNotifierProvider<RandomAdderNotifier, RandomAdder>(
  (ref) {
    return RandomAdderNotifier(ref);
  },
);

Future<bool> delayedRandomDecision(ref) async {
  int delay = ref.read(randomProvider).nextInt(5);
  await Future.delayed(Duration(seconds: delay));
  print("You waited $delay seconds for a decision.");
  return delay > 4;
}

final doneProvider = FutureProvider<bool>(
  (ref) async {
    ref.watch(randomAdderProvider);
    bool decision = await delayedRandomDecision(ref);
    print("the decision is $decision");
    return decision;
  },
);

final doreset = Provider((ref) {
  if (ref.watch(doneProvider).value!) {
    ref.read(randomAdderProvider.notifier).reset();
  }
});

class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter example')),
      body: Center(
        // Consumer is a widget that allows you reading providers.
        child: Consumer(builder: (context, ref, _) {
          final count = ref.watch(randomAdderProvider);
          return Text('$count');
        }),
      ),
      floatingActionButton: FloatingActionButton(
        // The read method is a utility to read a provider without listening to it
        onPressed: () =>
            ref.read(randomAdderProvider.notifier).randomIncrement(),
        child: const Icon(Icons.add),
      ),
    );
  }
}
riverpod
1 Answers

I think ref.listen is more appropriate for usage within the doreset function than ref.watch.

Similarly to ref.watch, it is possible to use ref.listen to observe a provider.

The main difference between them is that, rather than rebuilding the widget/provider if the listened to provider changes, using ref.listen will instead call a custom function.

As per the Riverpod documentation

  • For ref.listen we need an additional argument - the callback function that we wish to execute on state changes - Source

The ref.listen method needs 2 positional arguments, the first one is the Provider and the second one is the callback function that we want to execute when the state changes.

The callback function when called will be passed 2 values, the value of the previous State and the value of the new State.

&

  • We will need to handle an AsyncValue - Source

As you can see, listening to a FutureProvider inside a widget returns an AsyncValue – which allows handling the error/loading states.

In Practice

  1. doreset function

    I chose to handle the AsyncValue by only handling the data case with state.whenData()

final doReset = Provider<void>(
  (ref) {
    final done = ref.listen<AsyncValue<bool>>(doneProvider, (previousState, state) {
      state.whenData((value) {
        if (value) {ref.read(randomAdderProvider.notifier).reset();}
      });
    });
  },
);
  1. Don't forget to watch either doReset/doneProvider in your Home Widget's build method. Without that neither will kick off (Don't have an explanation for this behaviour)
class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ref.watch(doReset);
    ...

  1. Lastly, your random function will never meet the condition for true that you have setup as delay>4, as the max possible delay is 4. Try instead using delay>3 or delay=4.

    Also perhaps disable the button to prevent clicks while awaiting updates

user_61226730
Related