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

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.

Full Screen App Bar

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:

App Bar fixed

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

Transparent App Bar with full screen container below

Hope this helps...


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. :)

enter image description here

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

    ]);
  }


The parameter extendBodyBehindAppBar extend the body to include the height of the AppBar, if specified. Scaffold from Flutter.

Scaffold(
    extendBodyBehindAppBar: true,
)

Available in Flutter stable 1.12+


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

Exemplo

Tags:

Flutter