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

Question

I have a transparent AppBar and I want the body of the Scaffold to start from the top of the AppBar and end at the bottom. My code is as follows:

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

The result is:

And after adding extendBodyBehindAppBar: true as in the following code:

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

The result is:

But I want it to start from the top of the AppBar as:

How can this be achieved?! Thanks in advance!

Answer 1

Try to wrap Scaffold inside SafeArea

Code Structure

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

Answer 2

Wrap the Scaffold in a SafeArea widget:

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),
        ),
      )

The SafeArea is "a widget that insets its child by sufficient padding to avoid intrusions by the operating system."

More information in: https://api.flutter.dev/flutter/widgets/SafeArea-class.html