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