Question 78236 in Flutter Question posted in
The official Flutter documentation can be found here.

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!

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Try to wrap Scaffold inside SafeArea

    Code Structure

    SafeArea                     👈 Add Parent SafeArea widget
|_ Scaffold
  |_ extendBodyBehindAppBar : true
  |_ appBar
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search