如何在Flutter中为Scaffold设置线性渐变背景色

Scaffold的backgroundColor属性只支持单一Color值，没法直接设置渐变效果，不过我们可以通过给body套一个带渐变装饰的Container来轻松实现需求——刚好你的AppBar已经设置了透明背景，不会遮挡渐变，完美适配这个方案。

具体修改步骤非常简单：

1. 把原来Scaffold的body内容全部包裹在一个Container组件内
2. 给这个Container添加BoxDecoration，并设置LinearGradient作为渐变背景

修改后的完整代码片段如下：

import 'dart:ui';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        leading: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(13.0),
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  spreadRadius: 0.5,
                  blurRadius: 1.0)
              ]),
            child: Center(
              child: Image.asset(
                "assets/menu.png",
                height: 25.0,
                width: 25.0,
              ),
            ),
          ),
        ),
      ),
      // 核心修改部分
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            // 渐变方向：从顶部中心过渡到底部中心，可按需调整
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xffF6FECE),
              Color(0xffB6C0C8),
            ],
          ),
        ),
        // 把你原来的body内容放在这里，比如Column、ListView等组件
        child: // 原有页面内容（即你代码里的...etc部分）
      ),
    );
  }
}

额外小提示 #

• 如果你想要其他渐变方向，比如从左上到右下，只需把begin改为Alignment.topLeft、end改为Alignment.bottomRight即可
• 如果需要更精细的渐变控制，可以给LinearGradient添加stops参数，比如stops: [0.3, 0.8]，用来指定颜色过渡的位置
• 因为你的AppBar是透明且无阴影的，渐变会自然覆盖整个屏幕区域，视觉上完全是你想要的全屏渐变效果

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