Flutter自定义背景实现咨询：如何制作目标渐变背景？

针对你提到的渐变不平滑、Shader过暗问题，结合目标效果，推荐以下几种Widget实现方式：

1. 用Container + RadialGradient（最贴合目标效果） #

目标背景是中心亮、向外柔和扩散的渐变，径向渐变比线性渐变更适配，且通过调整色值和过渡节点能实现平滑效果：

Container(
  decoration: BoxDecoration(
    gradient: RadialGradient(
      center: Alignment.center,
      radius: 1.5, // 调整半径控制渐变范围
      colors: [
        Color(0xFFF8FAFF), // 中心高亮色
        Color(0xFFE5EDFF),
        Color(0xFFCCD8FF),
      ],
      stops: [0.0, 0.6, 1.0], // 色值过渡节点，让渐变更平缓
      tileMode: TileMode.clamp, // 避免渐变重复边缘突兀
    ),
  ),
  // 嵌套你的业务Widget
)

2. Stack叠加多层渐变（增强柔和感） #

如果单一渐变不够自然，可以叠加半透明渐变层，模拟柔光效果：

Stack(
  children: [
    // 基础底色层
    Container(color: Color(0xFFE5EDFF)),
    // 顶部中心柔光渐变
    Container(
      decoration: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment.topCenter,
          radius: 1.2,
          colors: [Colors.white.withOpacity(0.8), Colors.transparent],
          stops: [0.0, 0.75],
        ),
      ),
    ),
    // 底部暗调渐变
    Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
          colors: [Color(0xFFCCD8FF).withOpacity(0.4), Colors.transparent],
          stops: [0.0, 0.6],
        ),
      ),
    ),
  ],
)

3. 修复Shader过暗问题 #

如果坚持用Shader，问题大概率出在颜色混合模式或色值计算上，调整混合模式并优化色值：

ShaderMask(
  shaderCallback: (bounds) => RadialGradient(
    center: Alignment.center,
    radius: 1.5,
    colors: [
      Color(0xFFF8FAFF),
      Color(0xFFCCD8FF),
    ],
  ).createShader(bounds),
  blendMode: BlendMode.softLight, // 替换默认的srcOver，避免过暗
  child: Container(color: Color(0xFFE5EDFF)), // 基底色不要选过暗的
)

补充说明 #

• 之前linearGradient效果差是因为方向单一，无法模拟中心扩散的柔光感；
• Shader过暗通常是混合模式不对，或基底色与渐变色叠加后对比度太高，调整blendMode和色值透明度即可解决。

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