Flutter自定义AlertDialog失效问题排查及修复求助

问题点分析 #

• Navigator上下文错误：关闭按钮使用外部context而非Dialog内部的上下文，导致无法正确执行弹窗关闭操作。
• 未使用的必填参数：方法定义了required String title但未在AlertDialog中使用，可能引发调用逻辑混乱。
• 布局约束冲突：Row组件内添加SizedBox(height: 60)，违背Row水平布局的约束规则，导致Dialog渲染异常。
• 函数类型不明确：使用泛型Function作为按钮回调类型，存在类型不匹配风险。
• 第三方依赖潜在问题：依赖hexcolor包可能因版本或导入问题导致颜色解析失败。

修复后的代码 #

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

class DialogUtils {
  static DialogUtils _instance = DialogUtils.internal();

  DialogUtils.internal();

  factory DialogUtils() => _instance;

  static void showCustomDialog(BuildContext context,
      {String? title, // 改为可选参数，若不需要可直接删除
        String okBtnText = "Ok",
        required String message,
        required String cancelBtnText,
        required VoidCallback okBtnFunction,
        required VoidCallback cancelBtnFunction,
      }) {

    showDialog(
      barrierColor: Colors.white.withOpacity(0.9),
      context: context,
      builder: (dialogContext) { // 重命名参数为dialogContext，明确是Dialog内部上下文
        return Theme(
          data: ThemeData(dialogBackgroundColor: Colors.white ),
          child: AlertDialog(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(18.0))),
            contentPadding: EdgeInsets.all(10),
            // 若需要显示title，取消以下注释
            // title: title != null ? Text(title, textAlign: TextAlign.center) : null,
            title:  Stack(
              children: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Center(
                      child: Padding(
                        padding: const EdgeInsets.only(top:10.0),
                        child: Image.asset("assets/images/mojarto_logo.png",
                          scale: 12,
                        ),
                      ),
                    ),
                  ],
                ),
                Positioned(
                  right: 0.0,
                  bottom: 2.8,
                  child: IconButton(
                    onPressed: () {
                      Navigator.of(dialogContext).pop(true); // 使用Dialog内部上下文
                    },
                    icon: Icon(Icons.close),
                  ),
                ),
              ],
            ),
            content: Text(message,
              textAlign: TextAlign.center,
            ),
            actions: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 20, right: 20, bottom: 10), // 添加bottom padding替代无效的SizedBox
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: InkWell(
                        onTap: okBtnFunction,
                        child: Container(
                          height: 40,
                          decoration: BoxDecoration(
                            color: Color(0xFFEC1C24), // 使用内置Color替代HexColor
                            border: Border.all(
                              color: Color(0xFFEC1C24)
                            ),
                            borderRadius: BorderRadius.circular(3),
                          ),
                          child: Center(
                            child: Text(okBtnText,
                              style: TextStyle(
                                color: Colors.white
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(width: 10),
                    Expanded(
                      child: InkWell(
                        onTap: cancelBtnFunction,
                        child: Container(
                          height: 40,
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Color(0xFFEC1C24)
                            ),
                            borderRadius: BorderRadius.circular(3),
                          ),
                          child: Center(
                            child: Text(cancelBtnText,
                              style: TextStyle(
                                color: Color(0xFFEC1C24)
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      });
  }
}

问题原因说明 #

1. 上下文错误：Dialog是独立的路由组件，必须使用其内部的BuildContext执行导航操作，外部上下文不属于该路由栈，调用pop会失效，导致Dialog无法正常关闭或弹出。
2. 未使用参数：必填参数title未被使用，不仅造成代码冗余，还可能让调用者误解参数用途，引发不必要的传参错误。
3. 布局冲突：Row是水平布局组件，主轴为水平方向，内部添加垂直方向的SizedBox(height:60)会破坏布局约束，导致Dialog渲染异常，甚至无法正常显示。
4. 函数类型模糊：泛型Function无法约束回调函数的参数和返回值，使用VoidCallback明确指定无参无返回的函数类型，能避免类型不匹配导致的运行时错误。
5. 依赖风险：第三方hexcolor包可能存在版本兼容问题，使用Flutter内置的Color(0xFFxxxxxx)格式更稳定，无需额外依赖。

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