androidiosflutterdartscaffold

How to make Scaffold body fill the screen from the top of the AppBar to the bottom of the screen in Flutter

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:

enter image description here

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:

enter image description here

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

enter image description here

How can this be achieved?! Thanks in advance!

Solution

  • 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