Flutter中如何让Scaffold body从AppBar顶部到屏幕底部填满屏幕

Question

我有一个透明的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),
    )

结果是：

在添加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),
    )

结果是：

但我希望它从AppBar的顶部开始，如下所示：

这怎么可能实现？！ 提前致谢！

Answer 1

尝试将Scaffold包裹在SafeArea

代码结构

SafeArea                     👈 Add Parent SafeArea widget
|_ Scaffold
  |_ extendBodyBehindAppBar : true
  |_ appBar

Answer 2

将Scaffold包装在SafeArea小部件中：

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

SafeArea是“一个小部件，它通过足够的填充来插入其子项以避免操作系统的入侵。”

更多信息见： https://api.flutter.dev/flutter/widgets/SafeArea-class.html