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?

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. — Ashok Kumar, May 31 '20 at 05:29

score 4 · Answer 1 · answered May 31 '20 at 05:46

4

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.

answered May 31 '20 at 05:46

Oziel Guerra

106
3

2

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. – Sergey Molchanovsky Nov 14 '21 at 07:52

score 2 · Answer 2 · answered May 31 '20 at 15:30

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

answered May 31 '20 at 15:30

Alexey Kunakov

86
2

3

Can you add an example for first paragraph? – rupinderjeet Dec 14 '21 at 07:55

score 1 · Answer 3 · answered Mar 28 '21 at 10:56

1

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.

answered Mar 28 '21 at 10:56

Khaled Mahmoud

285
2
7

score 1 · Answer 4 · answered Apr 09 '21 at 14:00

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/

Where to place a Provider Widget -- Flutter Provider Package

4 Answers4

The best practice of using provider: