"Future already completed" when using AsyncValue.guard in AsyncNotifier

[hibix43]

"Future already completed" occurs when AsyncValue.guard is used in AsyncNotifier.
Below is a sample and the error that occurred. Is there a solution to this problem?

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

part 'main.g.dart';

void main() async {
  runApp(
    const ProviderScope(
      child: MaterialApp(
        home: App(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            await ref.read(sampleNotifierProvider.notifier).fetch();
          },
          child: const Text('Fetch'),
        ),
      ),
    );
  }
}

class FakeDatabase {
  Future<void> fetch() async =>
      Future.delayed(const Duration(seconds: 1), () {});
}

@riverpod
Future<FakeDatabase> fakeDatabase(FakeDatabaseRef ref) async => FakeDatabase();

@riverpod
class SampleNotifier extends _$SampleNotifier {
  @override
  FutureOr<void> build() {}

  Future<void> fetch() async {
    state = const AsyncValue.loading();
    state = await AsyncValue.guard(() async {
      final database = await ref.read(fakeDatabaseProvider.future);
      await database.fetch();
    });
  }
}

E/flutter (12958): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Bad state: Future already completed
E/flutter (12958): #0      _AsyncCompleter.complete (dart:async/future_impl.dart:35:31)
E/flutter (12958): #1      FutureHandlerProviderElementMixin.onData
base.dart:271
E/flutter (12958): #2      AsyncData.map
common.dart:326
E/flutter (12958): #3      FutureHandlerProviderElementMixin.state=
base.dart:204
E/flutter (12958): #4      AsyncNotifierBase.state=
async_notifier.dart:54
E/flutter (12958): #5      SampleNotifier.fetch
main.dart:50
E/flutter (12958): <asynchronous suspension>
E/flutter (12958): #6      App.build.<anonymous closure>
main.dart:26
E/flutter (12958): <asynchronous suspension>
E/flutter (12958):

[AhmedLSayed9]

You're expected to return Future<FakeDatabase> but you're returning an instance of FakeDatabase class that is not a future, instead do:

@riverpod
FakeDatabase fakeDatabase(FakeDatabaseRef ref) => FakeDatabase();

[hibix43]

@AhmedLSayed9
Thank you for your response.
Sorry, the sample was incorrect.
In the actual code, we need to load the JSON in the assets.
(e.g. await rootBundle.loadString(Assets.jsons.databaseConfigJson);)
This is why I have to use Future. I didn't give you enough information, sorry.

[AhmedLSayed9]

@hibix43 Despite using Future<FakeDatabase> isn't proper but it's not the reason for your issue anyway.

It's happening because you're updating state after the provider is disposed.
Note: The error description has been updated in latest versions.

You can:

1. temporary listen for the provider until the future is complete:

        child: ElevatedButton(
          onPressed: () async {
            final sub =
                ref.listenManual(sampleNotifierProvider.notifier, (_, __) {});
            await sub.read().fetch();
            sub.close();
          },
          child: const Text('Fetch'),
        ),

2. Check if the provider is mounted before setting state after the future call: check here

[hibix43]

Thank you for sharing the cause and workaround. I will use that workaround until the cause is resolved.

[MuKhAlm]

I have used approach 1. But it seems that my [sampleNotifierProvider] is still being disposed before the future is complete...

[erik-wayhaven]

I am running into this as well. This seems like a common usecase. Are there plans to fix it?

I created this extension method for now:

import 'package:flutter_riverpod/flutter_riverpod.dart';

extension SafeWidgetRef on WidgetRef {
  Future<Tr> safeRead<Tn, Tr>(Refreshable<Tn> notifier, Future<Tr> Function(Tn) call) async {
    final sub = listenManual(notifier, (_, __) {});
    final res = await call(sub.read());
    sub.close();
    return res;
  }
}

[nazrinharris]

Unsure if this is related, but I've also ran into the same issue. It happened with this code:

@riverpod
class LocalLoginWithEmailAndPassword extends _$LocalLoginWithEmailAndPassword {
  @override
  FutureOr<Option<PecuniaUser>> build() {
    return const Option.none();
  }

  Future<void> localLoginWithEmailAndPassword({
    required String email,
    required String password,
  }) async {
    state = const AsyncValue.loading();

    final failureOrPecuniaUserAndSession = await ref
        .read(authRepoProvider)
        .localLoginWithEmailAndPassword(
          email: email,
          password: password,
        )
        .run();

    return failureOrPecuniaUserAndSession.fold(
      (failure) => state = AsyncValue.error(failure, failure.stackTrace),
      (r) => state = AsyncValue.data(Option.of(r.user)),
    );
  }
}

Which caused a Bad State: Future already completed error in (r) => state = AsyncValue.data(Option.of(r.user)),. The change that fixes this for me is the build method:

@override
  Future<Option<PecuniaUser>> build() async {
    return const Option.none();
  }

Seems like the async is needed in the build method?

[hibix43]

Thanks. I changed the answer mark.

[AhmedLSayed9]

This was a false negative. Provider should throw when setting state after it's being disposed.
It has been fixed at riverpod 3 "dev" and the solution should no longer works.

[AhmedLSayed9]

You need to either listen to the provider while the method is running "at my answer above", or check if the provider is mounted before setting state after the future call. I've updated my answer to include both solutions.

[agordeev]

@hibix43 please unmark this as accepted answer. This workaround doesn't work anymore.

[hibix43]

I have unmarked. Thank you for letting me know that this workaround no longer works, @agordeev.

[alainjr10]

Well, this is weird, i had this issue too because my provider was being disposed immediately the button was clicked before any async function was called (you can check this by simply logging some results in the onDispose function of the build method).

@override FutureOr<List<Product>> build() async { ref.onDispose(() { log( 'provider disposed'); }); return []; }

I got to understand that, since the providers are autoDispose by default, since you aren't explicitly listening/watching the provider anywhere in your widget, the provider is inactive and becomes disposed immediately the button is clicked. So I fixed this by keeping the provider active by at least watching it's state in the build method like so

final searchedProds = ref.watch(searchProductsNotifierProvider);

you could then use the searchProds AsyncValue to build your widget based on its state... or not

[mokamhawy]

The solution for me was to add async
The bad code

  @override
  FutureOr<void> build() {}

The good code (issue fixed)

  @override
  FutureOr<void> build() async {}

[JakobProssinger]

Same issue here. But I also had to add a "return null" to the build function above.