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

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: [
    // 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: [
                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"),
        ),
      ),

    ]);
  }