flutter - Provider Widget 的放置位置——Flutter Provider Package

Question

我目前正在学习使用 Flutter 进行应用程序开发，并且已经开始学习 Provider 包。我遇到了一些困难并且收到了错误：

“在此...小部件上方找不到正确的提供程序”

我最终将 Provider 小部件移动到环绕我的 MaterialApp 小部件而不是我的 Scaffold 小部件，这似乎解决了问题。

话虽如此，我不确定为什么这会解决问题。我们是否应该将我们的 Provider 小部件放在 MaterialApp 周围？如果是这样，有人可以解释为什么需要这样做吗？如果没有，有人可以解释如何确定将 Provider 小部件放置在我们的树中的位置吗？

Answer 1

通常，最好的位置是您在 MaterialApp 中移动它的位置。这是因为因为这是应用程序开始的地方，所以节点树将可以访问任何地方的提供者。

Answer 2

如果您的页面是一个有状态的小部件 - 在 Widget 内部使用 Provider 包装 State，因此您可以在 State 内部使用它。这是一个更简洁的解决方案，因为您不必包装整个应用程序。

如果您在应用程序的任何地方都需要 Provider 的功能 - 是的，包装整个应用程序是完全可以的，尽管我更愿意为此使用某种服务

Answer 3

您可以将其添加到任何路线并将其传递给您需要使用的路线，或者您可以将其添加到 MaterialApp 以便您可以在任何地方使用它。

Answer 4

使用提供者的最佳实践：

将 Provider 小部件放在小部件树的顶部。下面我通过使用 Provider 包下的 MultiProvider 小部件放置了一个模板代码，该模板代码可用于同一位置的多个提供程序。

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
      ),
    );
  }
}

更多信息：https ://pub.dev/documentation/provider/latest/