How to display body under the AppBar of scaffold widget and not below?
I'm using a transparent AppBar and I would like to display body behind the transparent AppBar and not bellow. How to do that ?
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+
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...
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"),
),
),
]);
}
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,
),
)
],
),
),
],
),
);