Provider Widget 的放置位置——Flutter Provider Package答案

【问题标题】：Where to place a Provider Widget -- Flutter Provider PackageProvider Widget 的放置位置——Flutter Provider Package
【发布时间】：2020-09-18 13:08:42
【问题描述】：

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

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

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

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

【问题讨论】：

MaterialApp 小部件是您移动 Provider 的正确位置。由于它将是应用树的根，因此树中的任何节点都可以轻松访问状态。

标签： flutter dart flutter-provider state-management inherited-widget

【解决方案1】：

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

【讨论】：

问题是当你有一堆提供者时，它们都存在于内存中并且永远不会被销毁。如果您的应用只有一部分需要提供程序，则无需将整个应用包装到其中。

【解决方案2】：

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

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

【讨论】：

你可以为第一段添加一个例子吗？

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用provider的最佳实践：

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

【讨论】：