Flutter登录页点击登录按钮AlertDialog不弹出如何修复

问题原因 #

你遇到的弹窗无法弹出+报错的核心原因是以下两种场景之一：

• 场景1：你的根组件没有用MaterialApp包裹，导致传入showDialog的上下文不存在Navigator实例，弹窗依赖Navigator进行路由管理，缺失就会触发报错
• 场景2：调用弹窗时当前页面State已经被销毁，上下文失效

修复步骤 #

步骤1：修正根组件结构 #

确保你的main.dart中根组件为MaterialApp，登录页作为MaterialApp的home参数传入，示例代码如下：

import 'package:flutter/material.dart';
import 'screen_login.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '登录示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ScreenLogin(),
    );
  }
}

步骤2：增加弹窗调用前的挂载校验 #

修改你登录页中checkLogin方法里的弹窗代码，调用前先判断当前State是否处于挂载状态，避免上下文失效问题：

//Alert Dialog
if (mounted) {
  showDialog(
    context: ctx,
    builder: (ctx1) {
      return AlertDialog(
        title: const Text('Error'),
        content: Text(_errorMessage),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(ctx1).pop();
            },
            child: const Text('Close'),
          )
        ],
      );
    }
  );
}

其他说明 #

你原有的AlertDialog逻辑本身没有问题，修改后即可在用户名密码不匹配时同时弹出错误提示文本、Snackbar和AlertDialog。

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