Why Riverpod provider goes into the loading state when there's already value?

Question

Minimum reproducible code:

class FooPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final asyncValue = ref.watch(provider1);
    print('loading: ${asyncValue.isLoading}, value: ${asyncValue.valueOrNull}');
    return Container();
  }
}

final provider1 = StreamProvider<int>((ref) {
  final stream = ref.watch(provider2);
  return stream.maybeWhen(
    orElse: () => Stream.value(0),
    data: (x) {
      print('data = $x');
      return Stream.value(x);
    },
  );
});

final provider2 = StreamProvider<int>((ref) async* {
  await Future.delayed(Duration(seconds: 3));
  yield 1;
});

Output:

flutter: loading: true, value: null // Why value != 0
flutter: loading: false, value: 0
// After 3 seconds...
flutter: data = 1
flutter: loading: true, value: 0 // Why value != 1 
flutter: loading: false, value: 1

There are two questions.

When I have already provided a default value in orElse callback, then why the first line doesn't print that value instead of going in the loading state and printing null.
Once I get the data after 3s, why does the provider print loading: true, value: 0?

score 1 · Answer 1 · edited Dec 04 '22 at 21:16

When a StreamProvider is first created, it will not have received any data from the stream yet, so its isLoading property will be true and its valueOrNull property will be null. This is why the first line of the output prints loading: loading: true, value: null.

Once the stream emits data, the StreamProvider will update its valueOrNull property with the latest value from the stream. However, it is possible that the ConsumerWidget has not yet rebuilt to reflect this change. When the ConsumerWidget rebuilds, it will receive the latest value from the stream and print it. This is why the fourth line of the output prints loading: false, value: 1.

The orElse callback is used to provide a default value for the StreamProvider when the stream has not emitted any data yet. It does not affect the StreamProvider after it has received data from the stream. This is why the second and fifth lines of the output print loading: false, value: 0.

In summary, the StreamProvider will initially be in the loading state and have a null value until it receives data from the stream. Once it has received data, it will update its value to reflect the latest value from the stream, but this update may not be reflected in the ConsumerWidget until it rebuilds. The orElse callback only provides a default value for the StreamProvider when the stream has not emitted any data.

Thanks but there's still one contraction in your answer. Your first paragraph says the value will be `null` until the stream has emitted any data but third paragraph says `orElse` value will be used until the stream has emitted any data. So, should it return `null` or the value passed in `orElse` if the stream hasn't emitted any data? — iDecode, Dec 04 '22 at 21:14
Also, in your last paragraph, you say that the `StreamProvider` value will be `null` initially, then what was the point of having `orElse`? — iDecode, Dec 05 '22 at 07:54

score 1 · Answer 2 · answered Dec 04 '22 at 23:02

1

provider2 changed (it went from loading to having data). And since provider1 depends on it, provider1 got recomputed.

This ends up creating a new stream. The provider then listens to the new stream. Listening to a stream is an async operation, therefore for one frame provider1 does not have access to the new value exposed by the stream. Hence, you got a loading state.

This shouldn't be a problem though

answered Dec 04 '22 at 23:02

Rémi Rousselet

256,336
79
519
432

This is definitely not a problem in a real world app, but I was trying to understand how things work behind the scenes. I still didn't quite get it that once I provided an initial value (in `orElse` callback), then why I don't get that value in the very first frame. Is this not similar to `StreamBuilder.initialData`? – iDecode Dec 05 '22 at 07:52
@iDecode No. The problem is that your function isn't immediately executed. The thing with `async*` is that this delays the function execution by one frame. Async* functions always start asynchronously. That's where the delay comes from – Rémi Rousselet Dec 05 '22 at 09:19

Why Riverpod provider goes into the loading state when there's already value?

2 Answers2