Flutter - Riverpod. Save response from http in a provider

Question

I new to Riverpod, and I have a basic question.

On the start up of my app, I make an http to load a preload. This returns a Json response, with basic stings and lists of string, data that is used around the app.

I make the request like this:

class PreLoadApi {

  getPreloadList() {

http.get(url,
        headers:  {HttpHeaders.contentTypeHeader: "application/json", HttpHeaders.authorizationHeader: "Bearer $token"}
    ).then((http.Response response) {
      int statusCode = response.statusCode;

      print(statusCode);

      log("2124: PreLoad. response.body:${response.body}");

      var data = json.decode(response.body);

      String name = data['name']

      *** Here I want to save the string "name" to a provider. ***

}

Now I want to save this String name in a provider. I would like to make a provider like this:

final nameProvider = StateProvider((ref)=> name);

I want this, so that this string will be available all over the app.

However, providers have to been defined top level, so I'm not sure how to get the data there?

Meaning, in the above http request I make, in the .then function which is called on the result of the request, I want to store there the value into a provider. How to I create a provider there? Since the provider is global, I don't know how to save the result data String into the provider

I hope the question is clear, and thanks for the help!

Can you include your created stateProvider? – Md. Yeasin Sheikh Jul 12 '22 at 14:48 — Md. Yeasin Sheikh, Jul 12 '22 at 14:48
I added some more code and explanation. Thanks – RJB Jul 12 '22 at 16:18 — RJB, Jul 12 '22 at 16:18

score 1 · Accepted Answer · answered Jul 13 '22 at 08:45

To read a provider, you need a WidgetRef. You can pass it on getPreloadList . In this case it will be

final nameProvider = StateProvider.autoDispose((ref) => "");

class PreLoadApi {
  getPreloadList(WidgetRef ref) {
    //Future.delayed will be your http.get
    Future.delayed(Duration(seconds: 3)).then((value) {
      ref.read(nameProvider.notifier).state = "new Value";
    });
  }
}

To have a widgetRef you can wrap the widget with Consumer

 return Consumer(
      builder: (context, ref, child) => Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            PreLoadApi api = PreLoadApi();
            api.getPreloadList(ref);
          },
        ),
     body: Text(ref.watch(nameProvider)),

There are others way handling this like getting text from future instead of passing WidgetRef. Also check StateNotifierProvider, ChangeNotifierProvider.

You can start from riverpod.dev

Great, this is exactly what I needed. So is it ok practice to pass the ref field (WidgetRef), as a parameter into another class? — RJB, Jul 13 '22 at 12:12
Cases like this, I use `FutureProvider` or `ChangedNotifierProvider` on extended level instead of passing `WidgetRef`, I think it is ok to pass bt I would prefer getting name from stateNotifierProvider, Also You can use `FutureProvider` while this is contains http.get. It totally depends on your coding style. You can check official or on yt video like [reso-coder](https://youtu.be/3OdciTLjSNA) and decide what suit for you best — Md. Yeasin Sheikh, Jul 13 '22 at 13:41

score 0 · Answer 2 · answered Jul 13 '22 at 02:09

0

Because your "name" is valid only after a Future completes, the most likely holder for the value is a FutureProvider. Nicely, this will cache the value, as long as you don't make the provider autoDispose.

answered Jul 13 '22 at 02:09

Randal Schwartz

39,428
4
43
70

Flutter - Riverpod. Save response from http in a provider

2 Answers2