How to display body under the AppBar of scaffold widget and not below?

Question

I\'m using a transparent AppBar and I would like to display body behind the transparent AppBar and not bellow. How to do that ?

Answer 1

You can do this using this code

return new Scaffold(
  body: new Stack(
    children: <Widget>[
      new Container(
        color: Colors.blue.shade200,
      ),
      new AppBar(
        title: new Text("App bar"),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      new Positioned(
        top: 80.0,
        left: 0.0,
        bottom: 0.0,
        right: 0.0,
        //here the body
        child: new Column(
          children: <Widget>[
            new Expanded(
              child: Container(
                color: Colors.grey,
              ),
            )
          ],
        ),
      ),
    ],
  ),
);

Answer 2

To place the body under the AppBar and make the AppBar transparent requires a Stack as the body. The Stack must contain the AppBar not the scaffold.

body: Stack(
        children: <Widget>[...]
),

The first item in the stack is at the bottom and subsequent items are above it. If the AppBar is transparent it will appear to be working, but it is not. Making the AppBar green will show you why.

return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
          ),
          AppBar(title: Text('Hello world'),
            backgroundColor: Colors.green,
          )
        ],);

As you can see the AppBar takes up the entire screen and will consume any touch events.

To fix this use a Position Widget,

body: Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
          ),
          new Positioned(
          top: 0.0,
          left: 0.0,
          right: 0.0,
          child: AppBar(title: Text('Hello world'),
            backgroundColor: Colors.green,
          ),),
        ], )

And you will get this:

Ok now make the AppBar transparent and remove the shadow:

body: Stack(
        children: <Widget>[
          Container( //My container or any other widget
            color: Colors.blue,
          ),
          new Positioned( //Place it at the top, and not use the entire screen
          top: 0.0,
          left: 0.0,
          right: 0.0,
          child: AppBar(title: Text('Hello world'),
            backgroundColor: Colors.transparent, //No more green
            elevation: 0.0, //Shadow gone
          ),),
        ], )

Hope this helps...

Answer 3

After some time I do not know if this will help anyone but...there it goes..

Problem: I wanted to have gradient background on the body of my Scaffold, and in Android the AppBar was messing things up.

My solution:

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title:  Text("AppBar text"),
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                HexColor.hexToColor("D76984"),
                HexColor.hexToColor("2369C0")
              ]),
        ),
      )
    );

Other solutions using Stack also might work but then the entire design of this screen is forced to use Stack which for me is less responsive than using other widgets...but that is just me.

Answer 4

A new option extendBodyBehindAppBar is now available on the Scaffold. See the PR here.

If it's still an unrecognized parameter, make sure you switch to the dev channel and flutter upgrade.

Edit: It's now on stable channel

Answer 5

Remove appBar from Scaffold and just set Stack Widget in body and then wrap AppBar as last widget in Positioned widget.

Note : Other answers are correct. But this posted because if anyone want gradient AppBar background and floating Card above it. :)

 @override
 Widget build(BuildContext context) {
    return Scaffold(
   body: setUserForm()
    );
  }

  Widget setUserForm() {
    return Stack(children: <Widget>[
    // Background with gradient
      Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.bottomCenter,
                  colors: [Colors.red[900], Colors.blue[700]])),
          height: MediaQuery.of(context).size.height * 0.3
        ),
    //Above card
      Card(
          elevation: 20.0,
          margin: EdgeInsets.only(left: 15.0, right: 15.0, top: 100.0),
          child: ListView(
              padding:
              EdgeInsets.only(top: 20.0, left: 20.0, right: 18.0, bottom: 5.0),
              children: <Widget>[
                TextField(),
                TextField()
              ]

        )),
      // Positioned to take only AppBar size 
      Positioned( 
        top: 0.0,
        left: 0.0,
        right: 0.0,
        child: AppBar(        // Add AppBar here only
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          title: Text("Doctor Form"),
        ),
      ),

    ]);
  }

Answer 6

You could use

Scafold(
extendBodyBehindAppBar: true,
)

Available in Flutter stable 1.12+