Flutter：提供程序未更新 UI答案

【问题标题】：Flutter: Provider not updating UIFlutter：提供程序未更新 UI
【发布时间】：2022-01-14 17:59:02
【问题描述】：

我正在使用 Flutters provider 库，但我无法让它更新 UI。我正在执行一个简单的HTTP POST 并希望在发生错误时更新我的 UI。

这是我的provider中的逻辑：

class DeviceProvider extends ChangeNotifier {
  // Enum with possible states: Initial, Loading, Error & Success
  APIState state = APIState.Initial;

  ...

  void sendConfig() async {
      try {
        http.Response postResponse = await http.post(...);

        if (postResponse.ok) {
          state = APIState.Success;
        } else {
          state = APIState.Error;
      }

      } on SocketException catch (e) {
        state = APIState.Error;
      }

      notifyListeners();
  }
}

这是我的用户界面：

return ChangeNotifierProvider<DeviceProvider>(
      create: (_) => DeviceProvider(),
      child: Consumer<DeviceProvider>(
        builder: (_, model, __) {
          switch (model.state) {
            // Display error
            case  APIState.Error:
              return  Text('Error');
            // Ignore all other states
            case APIState.Loading:
            case APIState.Initial:
            case  APIState.Success:
              return const Visibility(
                child: Text("Gone"),
                visible: false,
              );
          }
        },
      ),
    );

我的 main.dart 看起来像这样：

void main() => runApp(
      MultiProvider(
        providers: [
          ...
          ChangeNotifierProvider<DeviceProvider>(create: (_) => DeviceProvider()),
        ],
        child: const MyApp(),
      ),
    );

现在，我知道代码已执行并且状态确实是Error。

但是，即使我调用 notifyListeners，我的错误小部件似乎也根本没有收到通知。

我错过了什么？

【问题讨论】：

这两个ChangeNotifierProvider是怎么回事？
尝试在您的提供程序的每次状态更改后添加notifyListeners()。

标签： flutter dart mobile flutter-provider

【解决方案1】：

我认为当您在 ui 中使用其他更改通知提供程序时会出现问题。当您触发发送配置功能时，您将使用您在 main.dart 中提供的更改通知提供程序触发它，这没关系。但是在您的用户界面中，您将消费者附加到另一个您尚未触发发送配置的提供者。

修复：不要返回 ChangeNotifierProvider 而只是返回一个消费者

【讨论】：