Flutter打开Dialog时如何修改surfaceTintColor并设置透明浅蓝背景

你设置的surfaceTintColor并非用来修改Dialog背景色的属性，它仅在Material 3组件存在elevation时，给默认surface背景添加一层色彩叠加以模拟光影效果，单独设置无法替换Dialog的默认背景。

要实现带透明度的浅蓝色Dialog背景，需要调整以下两点：

• 使用backgroundColor直接设置Dialog背景色
• 若不需要默认阴影，将elevation设为0

修改后的代码如下：

class PickImageDialog extends StatelessWidget {
  const PickImageDialog({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dialog(
      // 设置带透明度的背景色，可根据需求调整opacity值
      backgroundColor: Theme.of(context).colorScheme.surfaceTint.withOpacity(0.9),
      elevation: 0, // 移除默认阴影效果
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 16, 10, 22),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                IconButton(
                  onPressed: () {
                    context.router.pop();
                  },
                  icon: const Icon(Icons.clear),
                ),
                Expanded(
                  child: Text(
                    AppStrings.pickImage,
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 26),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  height: 60,
                  width: 60,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      border: Border.all(
                          width: 2, color: Theme.of(context).primaryColor),
                      color: Theme.of(context).colorScheme.surfaceTint),
                  child: SvgPicture.asset(
                    AppVectors.camera,
                    color: Theme.of(context).primaryColor,
                    height: 28,
                  ),
                ),
                Container(
                  height: 60,
                  width: 60,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      border: Border.all(
                          width: 2, color: Theme.of(context).primaryColor),
                      color: Theme.of(context).colorScheme.surfaceTint),
                  child: SvgPicture.asset(
                    AppVectors.gallery,
                    color: Theme.of(context).primaryColor,
                    height: 28,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

补充说明 #

• 若想保留阴影效果并自定义颜色，可保留elevation，同时设置shadowColor属性调整阴影颜色
• surfaceTintColor需配合elevation使用，仅能给背景添加一层色彩叠加，无法替换背景色本身

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