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?

Answer 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.

Answer 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

Answer 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.

Answer 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/