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

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!

you want to hide date & time as well as upper layer of the screen? — Ravindra S. Patil, Jan 04 '23 at 11:56
This link could help you https://stackoverflow.com/questions/43877288/how-to-hide-android-statusbar-in-flutter — Ante Bule, Jan 04 '23 at 12:40
You can use this . Just remove the appbar .Scaffold( body: Container(color: Colors.teal), ) — Rahul Kushwaha, Jan 04 '23 at 13:56

score 4 · Answer 1 · answered Jan 04 '23 at 12:56

4

Try to wrap Scaffold inside SafeArea

Code Structure

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

answered Jan 04 '23 at 12:56

krishnaacharyaa

14,953
4
49
88

score 2 · Accepted Answer · answered Jan 04 '23 at 11:59

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

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

2 Answers2