Flutter如何为Toast通知类Container的单侧边缘添加填充装饰？

你之前嵌套子Container无法适配父级圆角的核心原因是父Container默认不会裁剪超出边界的内容，可通过以下两种方案实现需求：

方案1：修复原有嵌套实现 #

给父级Container添加clipBehavior属性开启裁剪，即可让子元素自动适配父级圆角：

Container(
  width: 300,
  height: 150,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: const [
      BoxShadow(color: Colors.black12, blurRadius: 4, offset: Offset(0, 2))
    ]
  ),
  // 关键配置：开启边界裁剪
  clipBehavior: Clip.antiAlias,
  child: Align(
    alignment: Alignment.topLeft,
    child: Container(
      width: 60,
      height: 60,
      color: Colors.green,
      // 若需要斜角效果，可添加下方圆角配置
      // decoration: BoxDecoration(
      //   borderRadius: BorderRadius.only(bottomRight: Radius.circular(12))
      // )
    ),
  ),
)

方案2：无嵌套性能最优实现 #

直接通过父Container的BoxDecoration渐变属性实现，无需嵌套子组件：

Container(
  width: 300,
  height: 150,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: const [
      BoxShadow(color: Colors.black12, blurRadius: 4, offset: Offset(0, 2))
    ],
    // 渐变实现左上角填充
    gradient: const LinearGradient(
      colors: [Colors.green, Colors.green, Colors.white, Colors.white],
      stops: [0, 0.2, 0.2, 1],
      begin: Alignment.topLeft,
      end: Alignment(0.3, 0.3) // 调整该值可控制绿色块的大小
    )
  ),
)

效果参考 #

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