What's the best way to call an autodispose provider in a function?

[NickBalnaves]

For this example:

void main() {
  runApp(
    MaterialApp(
      home: ProviderScope(
        child: Scaffold(
          body: Center(
            child: _SomeWidget(),
          ),
        ),
      ),
    ),
  );
}

final _someProvider = FutureProvider.autoDispose<void>(
  (final ref) async {
    await Future<void>.delayed(const Duration(seconds: 1));
  },
);

class _SomeWidget extends HookConsumerWidget {
  @override
  Widget build(final BuildContext context, final WidgetRef ref) {
    final loading = useState(false);

    return TextButton(
      onPressed: () async {
        loading.value = true;
        await ref.watch(_someProvider.future);
        loading.value = false;
      },
      child: loading.value
          ? const CircularProgressIndicator()
          : const Text('Continue'),
    );
  }
}

I get the following error:
Unhandled Exception: Bad state: The provider AutoDisposeFutureProvider<void>#b5add was disposed before a value was emitted
This error doesn't happen if I remove loading.value = true; which i'm guessing is because this line causes a rebuild which triggers the provider to dispose before it attempts to run the rest of the function.

If I move all the onPressed logic to a state notifer then I'm not able to use a ref.watch if I pass in ref. If I move the logic to a Provider or change the ref.watch to ref.read then I get the same error above.

Is there a good pattern to follow to get around this while keeping the provider set to autodispose? A working solution I've found involves using a StateProvider or StateNotifierProvider instead of the useState hook to set the loading value but this means multiple providers are being called in the onPressed method which ideally I'd like just one function call per onPressed function call to avoid too much logic in the widget such as onPressed: () async => ref.read(_someProvider).save() and then loading.value becomes ref.watch(_someProvider).isLoading

[iamarnas]

I'm not a Hook fan but without Hook it should look like that.

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        home: Scaffold(
          body: Center(
            child: _SomeWidget(),
          ),
        ),
      ),
    ),
  );
}

class _SomeWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final provider = ref.watch(_someProvider);

    return TextButton(
      onPressed: () {
        ref.refresh(_someProvider);
      },
      child: provider.maybeWhen(
        loading: () => const CircularProgressIndicator(),
        error: (err, _) => const Text('Error on load!'),
        orElse: () => const Text('Continue'),
      ),
    );
  }
}

final _someProvider = FutureProvider.autoDispose<void>(
  (ref) async {
    await Future<void>.delayed(const Duration(seconds: 1));
  },
);

@NickBalnaves

[NickBalnaves]

@iamarnas I'd like the network request to stay in an autodispose provider so that it can:

• watch the state of another autodispose provider, e.g. an authorization token provider sent in the API request
• cancel API requests, e.g. https://riverpod.dev/docs/concepts/modifiers/auto_dispose#example-canceling-http-requests-when-no-longer-used
• determine whether the provider is in a loading state without having to set a loading variable
• maintain state
• determine error states from the provider without having to wrap the call in a try catch and use error variables

[iamarnas]

@NickBalnaves FutureProvider is equal to StateNotifier with AsyncValue both StateNotifier and ChangeNotifier have dispose methods where you can cancel token. By creating your own state your have more control and flexibility.

[NickBalnaves]

@iamarnas Could you elaborate? I don't think they are equal for the points I mentioned above, particularly since it's not possible to watch a provider in a StateNotifier.

[iamarnas]

@NickBalnaves Of course you can watch providers in the StateNotifier by passing ref over constructor. And state will be updated on changes state of the Provider. You can do fun stuffs with it.

[NickBalnaves]

@iamarnas Sure it changes the state but what I'm trying to achieve is for the change in the provider state to trigger another provider to rebuild as I've mentioned in the points above

[NickBalnaves]

@rrousselGit Do you have any ideas? tl;dr this example https://riverpod.dev/docs/concepts/modifiers/auto_dispose#example-canceling-http-requests-when-no-longer-used goes through the case when you want to start a HTTP request when the user enters a screen, but what if you only want it to start the request when the user has pressed a button? I think this is a valid case if you have a long running HTTP request, maybe uploading a big profile image, and want that request to be cancelled when leaving the screen