How to display body under the AppBar of scaffold widget and not below?
FlutterFlutter Problem Overview
I'm using a transparent AppBar and I would like to display body behind the transparent AppBar and not bellow. How to do that ?
Flutter Solutions
Solution 1 - Flutter
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+
Solution 2 - Flutter
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...
Solution 3 - Flutter
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"),
),
),
]);
}
Solution 4 - Flutter
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,
),
)
],
),
),
],
),
);
Solution 5 - Flutter
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
Solution 6 - Flutter
Screenshot:
Code:
If you want to take up entire space by making your AppBar transparent, you should also set shadowColor to a transparent color.
Scaffold(
extendBodyBehindAppBar: true, // <-- Set this
appBar: AppBar(
backgroundColor: Colors.transparent, // <-- this
shadowColor: Colors.transparent, // <-- and this
),
body: Placeholder(color: Colors.red),
)
Solution 7 - Flutter
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.
Solution 8 - Flutter
To extend the scaffold body behind the top AppBar, add this to your scaffold:
extendBodyBehindAppBar: true,
To extend the scaffold body behind the BottomNavigationBar or BottomAppBar (which would improve the UI's appearance when you have a docked FloatingActionButton), add this to your scaffold:
extendBody: true,
As you can see in my example, this causes the body to extend to the very bottom of the screen so you'll need to make sure you add spacing so the BottomAppBar doesn't hide UI features.