如何在Provider模式下随Model更新调用showDialog方法？

下面提供几种实用的实现方式，避免在build阶段直接调用showDialog的错误：

方案1：使用WidgetsBinding.instance.addPostFrameCallback #

通过该回调将弹窗调用推迟到Widget构建完成后执行，同时在Model中设置状态标记控制弹窗触发逻辑：

class MyModel extends ChangeNotifier {
  bool _shouldShowDialog = false;
  bool get shouldShowDialog => _shouldShowDialog;

  // 网络事件触发时设置弹窗标记
  void triggerDialog() {
    _shouldShowDialog = true;
    notifyListeners();
  }

  // 弹窗关闭后重置标记，避免重复触发
  void resetDialogFlag() {
    _shouldShowDialog = false;
    notifyListeners();
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<MyModel>(
      builder: (context, model, _) {
        if (model.shouldShowDialog) {
          WidgetsBinding.instance.addPostFrameCallback((_) {
            showDialog(
              context: context,
              builder: (ctx) => AlertDialog(
                title: const Text("提示"),
                content: const Text("特定网络事件触发"),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.of(ctx).pop();
                      model.resetDialogFlag();
                    },
                    child: const Text("确定"),
                  ),
                ],
              ),
            );
          });
        }
        return // 替换为你的业务Widget
            const SizedBox();
      },
    );
  }
}

方案2：在Model中定义回调函数 #

让Model持有回调逻辑，Widget初始化时注册回调，Model触发特定事件时直接调用回调显示弹窗，这种方式让Model不依赖BuildContext，更符合单一职责：

class MyModel extends ChangeNotifier {
  VoidCallback? onDialogTrigger;

  // 处理网络事件的方法
  void handleNetworkEvent() {
    // 执行网络相关逻辑
    onDialogTrigger?.call();
    notifyListeners();
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late MyModel _myModel;

  @override
  void initState() {
    super.initState();
    _myModel = Provider.of<MyModel>(context, listen: false);
    // 注册回调
    _myModel.onDialogTrigger = () {
      showDialog(
        context: context,
        builder: (ctx) => AlertDialog(
          title: const Text("提示"),
          content: const Text("特定网络事件触发"),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(ctx).pop(),
              child: const Text("确定"),
            ),
          ],
        ),
      );
    };
  }

  @override
  void dispose() {
    // 取消回调，避免内存泄漏
    _myModel.onDialogTrigger = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<MyModel>(
      builder: (context, model, _) {
        return // 替换为你的业务Widget
            const SizedBox();
      },
    );
  }
}

方案3：使用ChangeNotifierListener #

Provider包提供的ChangeNotifierListener组件，专门用于监听ChangeNotifier的变化，不会像Consumer那样重建子树，适合仅执行弹窗这类副作用的场景：

class MyModel extends ChangeNotifier {
  bool _triggerDialog = false;
  bool get triggerDialog => _triggerDialog;

  void handleNetworkEvent() {
    _triggerDialog = true;
    notifyListeners();
    // 立即重置标记，防止重复触发
    _triggerDialog = false;
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierListener<MyModel>(
      listener: (context, model) {
        if (model.triggerDialog) {
          showDialog(
            context: context,
            builder: (ctx) => AlertDialog(
              title: const Text("提示"),
              content: const Text("特定网络事件触发"),
              actions: [
                TextButton(
                  onPressed: () => Navigator.of(ctx).pop(),
                  child: const Text("确定"),
                ),
              ],
            ),
          );
        }
      },
      child: // 替换为你的业务Widget
          const SizedBox(),
    );
  }
}

内容的提问来源于stack exchange，提问作者ale64bit