Flutter中Scaffold背景色未全局变白仅AppBar变色求助

你代码里多处设置了背景色为Color(0xFFE1EAF0)，这就是整个界面无法变为白色的核心原因，按以下步骤修改即可解决：

1. 统一设置Scaffold基础背景色
   将Scaffold的backgroundColor直接改为Colors.white，这是页面最底层的背景色设置。

2. 移除body中所有深色背景设置

   • 删除SingleChildScrollView外层Container的color: Color(0xFFE1EAF0)，或者直接改为Colors.white
   • 将包含"Upcoming"文本的Container的color: Color(0xFFE1EAF0)替换为Colors.white

3. 简化AppBar的背景设置（可选优化）
   目前AppBar的backgroundColor是浅蓝灰色，只有内部flexibleSpace设为白色，可直接将AppBar的backgroundColor改为Colors.white，同时去掉flexibleSpace里的color属性，让布局更简洁。

修改后的核心代码示例：

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white, // 改为白色
    appBar: AppBar(
      centerTitle: false,
      automaticallyImplyLeading: false,
      backgroundColor: Colors.white, // 改为白色
      elevation: 0.0,
      flexibleSpace: Container(
        // 移除color: Colors.white
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 10),
              child: Row(
                children: [
                  IconButton(
                    icon: const Icon(
                      Icons.arrow_back_ios,
                      color: Color(0xFF021522),
                      size: 18,
                    ),
                  ),
                  const Text(
                    "Appointments",
                    style:
                        TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
    body: SingleChildScrollView(
      child: Container(
        // 移除color: Color(0xFFE1EAF0) 或改为Colors.white
        child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Stack(
                children: [
                  Container(
                    padding:
                        const EdgeInsets.only(right: 20, left: 20, top: 20),
                    width: double.infinity,
                    decoration: const BoxDecoration(boxShadow: <BoxShadow>[
                      BoxShadow(
                          color: Color(0xFFE1EAF0),
                          blurRadius: 10.0,
                          offset: Offset(0.0, 1.0))
                    ], color: Colors.white),
                    child: _sortingHeader(),
                  ),
                ],
              ),
              Container(
                color: Colors.white, // 改为白色
                padding: const EdgeInsets.all(20),
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        "Upcoming",
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w600),
                      ),
                      const SizedBox(height: 20),
                      _upcomingAppointmentList.length > 0
                          ? Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                            )
                          : Text(_listLoadingInfo)
                    ],
                  ),
                ),
              ),
            ]),
      ),
    ),
  );
}

原因说明：Flutter布局是层级覆盖关系，你之前在Scaffold、body的多个容器层级都设置了浅蓝灰色，这些层级会覆盖底层的背景色，只有AppBar内部的flexibleSpace单独设置了白色，所以仅该区域显示白色。将所有层级的背景色统一改为白色后，整个界面就会呈现白色效果。

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