如何为Flutter Dialog添加侧边颜色？附实现代码

方案一：通过Container装饰实现侧边色 #

直接在Dialog的child外层嵌套Container，利用BoxDecoration实现左侧彩色边框或色块：

方式1：左侧彩色边框 #

修改你的代码如下：

Future<T?> showCustomDialog<T>(BuildContext context) {
  return showDialog<T>(
    context: context,
    builder: (context) => Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          border: const Border(
            left: BorderSide(
              color: Colors.blue, // 设置侧边颜色
              width: 8, // 设置侧边宽度
            ),
          ),
        ),
        child: this,
      ),
    ),
  );
}

方式2：左侧完整色块 #

如果需要侧边是独立的彩色块而非边框，可通过Row拆分布局：

Future<T?> showCustomDialog<T>(BuildContext context) {
  return showDialog<T>(
    context: context,
    builder: (context) => Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          color: Colors.white, // Dialog主体背景色
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 左侧彩色侧边
            Container(
              width: 8,
              decoration: const BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(16),
                  bottomLeft: Radius.circular(16),
                ),
              ),
            ),
            // 原有的子组件
            Expanded(child: this),
          ],
        ),
      ),
    ),
  );
}

方案二：自定义Dialog背景容器 #

若需更灵活的样式，可通过ClipRRect配合自定义容器实现：

Future<T?> showCustomDialog<T>(BuildContext context) {
  return showDialog<T>(
    context: context,
    builder: (context) => ClipRRect(
      borderRadius: BorderRadius.circular(16),
      child: Container(
        width: MediaQuery.of(context).size.width * 0.85,
        child: Row(
          children: [
            Container(
              width: 8,
              color: Colors.red,
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(16),
                  bottomLeft: Radius.circular(16),
                ),
              ),
            ),
            Expanded(
              child: Dialog(
                backgroundColor: Colors.transparent,
                elevation: 0,
                child: this,
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

注意事项 #

• 确保侧边圆角与Dialog整体圆角一致，避免边角错位
• 若子组件自带背景色，需调整层级避免覆盖侧边颜色
• 可根据需求自由调整侧边的宽度、颜色，适配不同主题风格

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