Flutter AlertDialog如何替换纯色背景为自定义背景图适配设计需求

前置准备 #

• 将你要使用的背景图片放到项目的assets目录下，示例存储路径为assets/images/dialog_bg.png
• 打开项目根目录的pubspec.yaml文件，添加资源配置：

flutter:
  # 已有配置保留，新增下面的assets配置
  assets:
    - assets/images/dialog_bg.png

配置完成后执行flutter pub get生效。

代码修改说明 #

核心只需要改2处即可：

1. 把AlertDialog的backgroundColor设置为透明，避免弹窗默认的背景色挡住自定义图片
2. 替换原有Container的BoxDecoration配置，新增图片背景属性，删除原有纯色配置

修改后的完整代码如下：

AlertDialog(
  // 改动点1：设置背景完全透明，避免遮挡自定义背景
  backgroundColor: Colors.transparent,
  // 可选：去掉默认阴影和浮层色，避免影响自定义背景效果
  shadowColor: Colors.transparent,
  surfaceTintColor: Colors.transparent,
  elevation: 0,
  titlePadding: EdgeInsets.all(0),
  contentPadding: EdgeInsets.all(0),
  title: Container(
    decoration: BoxDecoration(
      // 改动点2：删除原有color配置，新增图片背景
      image: DecorationImage(
        image: AssetImage("assets/images/dialog_bg.png"),
        // 适配方式可根据需求调整：BoxFit.fill/BoxFit.contain/BoxFit.cover均可
        fit: BoxFit.cover,
        // 可选：调整背景图片透明度
        // opacity: 0.8
      ),
      borderRadius: BorderRadius.all(Radius.circular(8))),
    width: MediaQuery.of(context).size.width * 0.7,
    height: MediaQuery.of(context).size.height * 0.5,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.all(18),
              child: Text(
                'Select countries to show',
                style: TextStyle(
                    color: Colors.yellow[300],
                    fontSize: 20,
                    fontFamily: fontFamily_3),
                // style: CustomStyle.balooCustom(20, Colors.white)
              ),
            ),
            IconButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                icon: Icon(
                  Icons.close,
                  size: 25,
                  color: Colors.white,
                )),
          ],
        ),
        Row(
          children: [
            Expanded(
                child: Container(
              height: 120,
              child: DisplayCountriesForm(
                countriesList: eventResponse.countriesList,
                num: 0,
                displayCountries: displayCountries,
                onValueChanged: (updatedList) {
                },
              ),
            )),
            Expanded(
                child: Container(
              height: 120,
              child: DisplayCountriesForm(
                countriesList: eventResponse.countriesList,
                num: 1,
                displayCountries: displayCountries,
                onValueChanged: (updatedList) {
                },
              ),
            )),
            Expanded(
                child: Container(
              height: 120,
              child: DisplayCountriesForm(
                countriesList: eventResponse.countriesList,
                num: 2,
                displayCountries: displayCountries,
                onValueChanged: (updatedList) {
                },
              ),
            )),
          ],
        ),
      ],
    ),
  ),
);

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