如何在Flutter中创建带外部圆角边框的Container？

根据你的需求，要实现带外部圆角边框的半透明模糊Container，只需在现有代码的BoxDecoration中添加边框配置，并匹配对应圆角即可。以下是修改后的完整代码：

Align(
  alignment: Alignment.centerRight,
  child: ClipRRect(
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(15),
      bottomLeft: Radius.circular(15),
    ),
    child: BackdropFilter(
      filter: ImageFilter.blur(
        sigmaX: 5.0,
        sigmaY: 5.0,
      ),
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 5),
        // 关键修改：添加边框与对应圆角配置
        decoration: BoxDecoration(
          color: ColorConstants.white.withOpacity(0.2),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(15),
            bottomLeft: Radius.circular(15),
          ),
          border: Border.all(
            color: ColorConstants.white.withOpacity(0.4), // 边框颜色（可按需调整）
            width: 1.5, // 边框宽度
          ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: 30,
              width: 4,
              margin: const EdgeInsets.all(4),
              decoration: BoxDecoration(
                color: ColorConstants.white.withOpacity(0.6),
                borderRadius: BorderRadius.circular(20),
              ),
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                _likeButton(),
                _buttons(AssetsConstants.chat),
                _buttons(AssetsConstants.more),
              ],
            ),
          ],
        ),
      ),
    ),
  ),
)

核心修改说明： #

• 在Container的BoxDecoration中通过Border.all添加边框属性，可自定义颜色透明度和宽度，适配UI风格。
• 给BoxDecoration设置与ClipRRect完全一致的borderRadius，确保边框圆角和模糊层裁剪圆角匹配，避免边框溢出。
• 保留ClipRRect对BackdropFilter的裁剪，保证模糊效果也呈现圆角样式。

如果需要仅给部分边添加边框，可单独配置每条边：

border: const Border(
  left: BorderSide(color: Colors.white, width: 1.5),
  top: BorderSide(color: Colors.white, width: 1.5),
  bottom: BorderSide(color: Colors.white, width: 1.5),
),

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