Flutter 3.16.0升级后AlertDialog backgroundColor属性失效求助

Flutter 3.16.0开始默认启用Material3设计规范，AlertDialog新增了surfaceTintColor属性，默认会叠加一层tint效果，导致你设置的backgroundColor被遮挡，无法正常显示。

解决方法 #

方法1：直接修改AlertDialog属性 #

在AlertDialog中添加surfaceTintColor: Colors.transparent，让背景色完全显示：

void _showDialog() {
    BuildContext? dialogContext;
    // 设置按钮
    Widget cancelButton = TextButton(
      child: const Text("Cancel"),
      onPressed: () {
        if (dialogContext != null) {
          Navigator.of(dialogContext!).pop();
        }
      },
    );
    Widget emailButton = TextButton(
      child: const Text("Email us"),
      onPressed: () {},
    );

    // 配置AlertDialog
    AlertDialog alert = AlertDialog(
      backgroundColor: Colors.white,
      surfaceTintColor: Colors.transparent, // 新增此行解决问题
      title: const Text("Title"),
      content: Container(
        color: Colors.white,
        child: const Text('Content'),
      ),
      actions: [
        cancelButton,
        emailButton,
      ],
    );

    // 显示弹窗
    showDialog(
      context: context,
      builder: (context) {
        dialogContext = context;
        return alert;
      },
    );
  }

方法2：全局配置主题 #

如果希望所有AlertDialog都统一使用该样式，可以在全局ThemeData中配置DialogTheme：

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    dialogTheme: const DialogTheme(
      backgroundColor: Colors.white,
      surfaceTintColor: Colors.transparent,
    ),
  ),
  home: const YourHomePage(),
);

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