Flutter中怎么让CircleAvatar无渐变精确对半分设双色背景

原代码无法达预期的核心原因：默认LinearGradient的色彩过渡是连续平滑的，两个相邻色值会生成自然的渐变过渡带，既不能形成无渐变的硬分割边界，也无法保证分割线刚好落在圆的中线位置，最终呈现的是从上到下从深蓝平滑过渡到浅蓝的全圆渐变效果，和需求的对半硬切不符。

最小改动方案（完全适配现有代码） #

只需要在原有LinearGradient的配置里补充stops参数，精准锚定两个颜色的分界点，就能实现无渐变的硬切效果。

• 需求为上下对半平分时，两个颜色各占圆垂直高度的50%，将stops设置为[0.5, 0.5]即可：深蓝色从圆顶（渐变进度0位置）一直延伸到垂直中线（渐变进度0.5位置），浅蓝色从垂直中线位置直接开始覆盖剩下的下半圆，两个色值在中线位置直接跳变，没有任何过渡带。

修改后的完整可运行代码：

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      stops: const [0.5, 0.5], // 核心配置：硬切边界精准落在垂直中线
      colors: const [
        Color(0xFF040663), // 上半部分深蓝色
        Color(0xFF434599), // 下半部分浅蓝色
      ],
    ),
  ),
  child: CircleAvatar(
    backgroundColor: Colors.transparent,
    radius: MediaQuery.of(context).size.height*0.045,
    child: Icon(
      icon,
      size: size,
      color: Colors.white,
    ),
  ),
)

灵活调整说明 #

这套方案不需要额外更换组件，只要调整begin和end的对齐值，配合相同的stops参数，就能实现不同方向的对半硬切效果：

• 若需左右对半分割，把begin改为Alignment.centerLeft、end改为Alignment.centerRight，stops保持[0.5, 0.5]，即可生成沿垂直中线硬切的左右两个纯色半圆。
• 由于外层Container已经通过shape: BoxShape.circle实现了圆形裁切，内部透明背景的CircleAvatar只会承载图标内容，不会对半圆纯色的展示效果造成干扰，无需额外调整裁切逻辑。

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