如何创建带渐变效果的Flutter Container？布局实现求助

你当前的问题在于用ShaderMask给子组件着色，但实际需要的是Container自身的渐变背景，直接在BoxDecoration中添加gradient属性就能实现预期效果，无需嵌套ShaderMask。

修正后的代码 #

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(25.r),
    // 直接在这里添加渐变配置
    gradient: LinearGradient(
      colors: [kDarkDesertSand.withOpacity(0.2), kDarkDesertSand],
      begin: Alignment.topLeft,
      end: Alignment.bottomCenter,
      stops: const [0.0, 1.0],
    ),
  ),
  child: ... // 你的子组件内容
),

关键说明 #

• 直接将LinearGradient赋值给BoxDecoration的gradient字段，就能让Container的背景呈现渐变效果，同时保留圆角。
• 若你确实需要用ShaderMask给子组件添加渐变着色（而非容器背景），则需要给ShaderMask添加blendMode属性（比如BlendMode.srcIn），并确保子组件是有颜色的（比如一个填充的Container），否则渐变效果无法正确显示。

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