Flutter中如何让Scaffold的body从AppBar顶部延伸至屏幕底部？

我设置了透明的AppBar，希望Scaffold的body从AppBar顶部开始，一直延伸到屏幕底部。

初始代码 #

Scaffold(
  appBar: AppBar(
    foregroundColor: Colors.black,
    backgroundColor: Colors.transparent,
    elevation: 0,
    title: const Text('Test Page'),
  ),
  body: Container(color: Colors.teal),
)

运行效果：body从AppBar下方开始布局，顶部存在空白区域。

添加extendBodyBehindAppBar: true后的代码 #

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    foregroundColor: Colors.black,
    backgroundColor: Colors.transparent,
    elevation: 0,
    title: const Text('Test Page'),
  ),
  body: Container(color: Colors.teal),
)

运行效果：body延伸至状态栏下方，但未完全覆盖屏幕顶部区域。

解决方案 #

要实现body从屏幕最顶部（AppBar顶部位置）延伸至底部的效果，只需在现有代码基础上调整配置，让body完全覆盖顶部区域。如果需要body内容不被AppBar遮挡，可添加顶部内边距；若仅需背景颜色覆盖，直接使用如下代码即可：

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  const TestPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        foregroundColor: Colors.black,
        backgroundColor: Colors.transparent,
        elevation: 0,
        // 适配状态栏文字颜色，根据body背景色调整
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarIconBrightness: Brightness.dark,
        ),
        title: const Text('Test Page'),
      ),
      body: Container(
        color: Colors.teal,
        // 若需要内部内容避开AppBar和状态栏，取消下面注释
        // padding: EdgeInsets.only(
        //   top: kToolbarHeight + MediaQuery.of(context).padding.top,
        // ),
        // child: 你的内容组件,
      ),
    );
  }
}

关键配置说明：

• extendBodyBehindAppBar: true：让body延伸到AppBar的后方，实现背景全覆盖
• systemOverlayStyle：设置状态栏为透明，同时调整状态栏图标颜色，避免和body背景色冲突
• 可选内边距：如果需要body内部的交互内容不被AppBar遮挡，添加对应内边距即可

内容的提问来源于stack exchange，提问作者sm-sayedi