When do we initialise a provider in flutter?

Question

I just arrived on a flutter project for a web app, and all developers have a problem using flutter provider for state management.

What is the problem
When you arrive on a screen, the variables of the corresponding provider are initialised by calling a function of the provider. This function calls an api, and sets the variables in the provider.
Problem : This function is called in the build section of the widget. Each time the window is resized, the widget is rebuilt, and the function is called again.

What we want
We want to call an api when the page is first displayed, set variables with the result, and not call the api again when the widget is rebuilt.

What solution ?

We use a push from the first screen to go to the second one. We can call the function of the provider at this moment, to initialise the provider just before the second screen. → But a refresh on the second page will clear the provider variables, and the function to initialise them will not be called again.
We call the function to initialise the provider in the constructor of the second screen. Is it a good pattern ?

Thank you for your help in my new experience with flutter :)

In solution 1, why would _"a refresh on the second page will clear the provider variables"_? — Jigar Patel, Sep 23 '22 at 13:57
When you refresh the browser in a web flutter application, all the states are lost (Like in [this post](https://stackoverflow.com/questions/61232367/flutter-web-provider-loss-of-state-when-browser-refresh)). Don't you have this behaviour ? — Clément, Sep 23 '22 at 14:11

score 1 · Accepted Answer · answered Sep 23 '22 at 16:47

I think you're mixing a couple different issues here:

How do you correctly initialize a provider
How do you call a method on initialization (only once)

For the first question:

In your main.dart file you want to do something like this:

@override
Widget build(BuildContext context) {
  return MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => SomeProvider()),
      ChangeNotifierProvider(create: (context) => AnotherProvider()),
    ],
    child: YourRootWidget();
  );
}

Then in a widget (that probably represents a "screen" in your app), you need to do something like this to consume state changes from that provider:

@override
Widget build(BuildContext context) {
  return Container(
    child: Consumer<SomeProvider>(
      builder: (context, provider, child) {
        return Text(provider.someState);
      }
    ),
  )
}

And you need to do something like this to get access to the provider to mutate state:

@override
Widget build(BuildContext context) {
  SomeProvider someProvider = Provider.of<SomeProvider>(context, listen: false);
  return Container(
    child: TextButton(
      child: Text('Tap me'),
      onPressed: () async {
        await someProvider.mutateSomeState();
      }
    ),
  )
}

Regarding the second question... You can (I think) just use the initState() method on a widget to make the call only 1 time. So...

@override
void initState() {
  super.initState();
  AnotherProvider anotherProvider = Provider.of<AnotherProvider>(context, listen: false);
  Future.microtask(() {
    anotherProvider.doSomethingElse();
  });
}

If I'm off on any of that, I'm sorry. That mirrors my implementation and works fine/well.

A caveat here is that I think RiverPod is likely the place you really want to go (it's maybe easier to work with and has additional features that are helpful, etc.) but I've not migrated to RiverPod yet and do not have that figured out all the way.

Anyway... Good luck!

That is exactly the response I was looking for ! Thank you ! I wanted to avoid to have a statefull widget just for the initState(), but it probably is the best solution. — Clément, Sep 23 '22 at 17:23
Maybe pass in the provider as a constructor arg to the widget? That way you won't need to `initState()`. — Justin, Sep 23 '22 at 18:33

score 0 · Answer 2 · answered Sep 23 '22 at 14:13

0

As far as I understood, you can wrap your application with MultiProvider and call the API before going to the second screen.

answered Sep 23 '22 at 14:13

Leonardo Rosa

119
3

Yes it is corresponding to my solution 1, but a refresh of the second screen in the browser will clear the states, and we will not be on the first screen to initialise the provider again. – Clément Sep 23 '22 at 14:21

When do we initialise a provider in flutter?

2 Answers2