Implementing pull-to-refresh in Flutter with Riverpod

Question

I am new to Riverpod and trying to implement pull to refresh with Riverpod in my Flutter app and can't seem to find any good tutorial online. Has anyone implemented pull-to-refresh in their Flutter app while using Riverpod. I have looked for tutorials everywhere, but most I found was simple network request on app load. Thanks in advance!

using these dependencies for riverpod and network requests. flutter_riverpod: ^0.12.1 dio: ^3.0.10

score 15 · Accepted Answer · edited Aug 03 '21 at 20:34

15

You can use context.refresh(yourProvider) in your refresh action. Works great.

In Riverpod 1.0.0 and above, you can use ref.refresh(yourProvider)

edited Aug 03 '21 at 20:34

Kamal Aboul-Hosn

15,111
1
34
46

answered Dec 06 '20 at 12:11

Randal Schwartz

39,428
4
43
70

Just to clarify a little bit: In riverpod 1.0.0 you should use `ref.refresh(yourFutureProvider.future)` because `.refresh()` is expecting `ProviderBase>` argument type. – IVL Nov 16 '21 at 14:44
1

Actually not: if you `ref.refresh(yourFutureProvider.future)` because you specified `` in `final yourFutureProvider = FutureProvider(....)` it don't recall the future at least you use a state notifier i guess. Instead if you define the provider without specifying ``, you can call refresh using `ref.refresh(yourFutureProvider)` – selan Dec 14 '21 at 09:23
Here one example with a most recent release of Riverpod ```ref .refresh(upComingMoviesStateNotifierProvider.notifier) .getNextUpcomingMoviesPage()``` – Boris Kamtou Jun 01 '23 at 14:43
And in Riverpod 2, ref.invalidate is preferred, as they will not "stack up" during the calculate phase... just one rebuild will be triggered if anyone is watching, and none otherwise. – Randal Schwartz Jun 01 '23 at 17:43

IVL · Answer 2 · 2021-12-15T21:03:15.190

4

Turned out the working way of pull-to-refresh the UI using Riverpod (^1.0.0) is this:

Provider:

final yourFutureProvider = FutureProvider<T>(....);

Inside the Build method:

                  return RefreshIndicator(
                    onRefresh: () async {
                      return await ref.refresh(yourFutureProvider);
                    },

edited Dec 15 '21 at 21:03

answered Dec 15 '21 at 20:57

IVL

93
7

score 1 · Answer 3 · answered May 27 '22 at 00:53

THIS WORKED FOR ME

Declare the provider

final sessionsProvider = FutureProvider<List<Session>>((ref) async {
  final sessionServices = ref.read(sessionsServiesProvider);
  return await sessionServices.getSessions();
});

add refresh indicator

RefreshIndicator(
        onRefresh: () async => ref.refresh(sessionsProvider),
        child: ...)

Implementing pull-to-refresh in Flutter with Riverpod

3 Answers3