Where to place a Provider Widget -- Flutter Provider Package

Question

I am currently learning app development with Flutter and have started learning about the Provider package. I was having some difficulty and was getting the error:

"Could not find the correct Provider above this ... Widget"

I ended up moving the Provider widget to wrap around my MaterialApp widget instead of my Scaffold Widget, and that seemed to fix things.

That being said, I'm not sure why this fixed things. Are we supposed to put our Provider widget around our MaterialApp? If so, can someone please explain why this is needed? If not, can someone explain how to determine where to place the Provider widget in our tree?

Solution 1

Usually, the best place is where you moved it, in the MaterialApp. This is because since that is where the app starts, the node tree will have access to the provider everywhere.

Solution 2

If your page is a Stateful widget - inside Widget wrap State with Provider, so you can use it inside of State. This is a much cleaner solution because you won't have to wrap your entire application.

If you need the functionality of Provider everywhere in the app - yes, wrapping the entire app is completely fine, though I'll prefer to use some kind of service for this

Solution 3

You could add it to any route and pass it to the route you need to use or you can add it to MaterialApp so you can use it anywhere.

Solution 4

The best practice of using provider:

Place the Provider widget at the top of the widget tree. Bellow I put a template code that can be used for one more providers at the same place, by using MultiProvider widget under Provider package.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ProviderName<ModelName>(create: (_) => ModelName()),
        AnotherProviderName<AnotherModelName>(create: (_) => AnotherModelName()),
      ],
      child: MaterialApp(
        title: 'App title',
        theme: ThemeData(
              primarySwatch: Colors.blue,
              primaryColor: const Color(0xFF2196f3),
              accentColor: const Color(0xFF2196f3),
              canvasColor: const Color(0xFFfafafa),
        ),
        home: MyHomePage(), // Your widget starting
      ),
    );
  }
}

For more informatin: https://pub.dev/documentation/provider/latest/

View more solutions

Comments

[Ashok Kumar]

MaterialApp widget is the right place where you have moved the Provider. Since it will be the root of app tree ,any node in tree can have access to the state easily.

[Sergey Molchanovsky]

The problem is when you have a bunch of providers, they all persist in memory and will never be destroyed. If only a part of your app needs a provider, you don't need to wrap a whole app into it.

[rupinderjeet]

Can you add an example for first paragraph?