为Flutter的Scaffold组件添加三色渐变背景遇问题求助

我尝试给Flutter的Scaffold组件添加三色线性渐变背景，但当前实现效果与预期效果不符，不知道如何修复。已做操作：

• 将Scaffold的backgroundColor设为透明
• 使用Container组件并添加LinearGradient

当前代码：

Scaffold(
    backgroundColor: Colors.transparent,
    body: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color.fromRGBO(31, 16, 80, 1),
            Color.fromRGBO(13, 4, 42, 1),
            Color.fromRGBO(42, 28, 81, 1),
          ],
          stops: [
            0.1,
            0.4,
            0.9,
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: SingleChildScrollView(
        child: Column(
          children: [
            // 内容组件
          ],
        ),
      ),
    ),
  );

修复方案 #

问题出在渐变的stops参数设置，当前配置让中间深色区域占比过小，导致渐变效果和预期不符；同时手动指定Container宽高可能引发安全区域适配问题，建议调整如下：

1. 调整渐变stops参数：根据预期效果放大中间深色区域的占比。比如将stops改为[0.2, 0.5, 0.8]，让顶部浅紫色从0到20%过渡到深色，深色在20%-80%区间保持主导，再从80%到底部过渡到底部浅紫色，更贴近预期视觉效果。
2. 移除手动设置的宽高：Container作为Scaffold的body，默认会自动填充可用空间，无需手动指定MediaQuery的宽高，避免安全区域适配问题。

修改后的代码：

Scaffold(
  backgroundColor: Colors.transparent,
  body: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [
          Color.fromRGBO(31, 16, 80, 1),
          Color.fromRGBO(13, 4, 42, 1),
          Color.fromRGBO(42, 28, 81, 1),
        ],
        stops: [0.2, 0.5, 0.8], // 调整后的stops
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ),
    ),
    child: SingleChildScrollView(
      child: Column(
        children: [
          // 内容组件
        ],
      ),
    ),
  ),
);

如果希望中间深色区域更宽，可进一步微调stops参数，比如改为stops: [0.1, 0.6, 0.9]，根据实际视觉效果调整即可。

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