Is it possible to add a background image to the Scaffold's AppBar? I know about sliver but when you scrolldown the image gets hidden and the AppBar changes color right? So I want to know if this is possible and if not, are there any existing workarounds? Thanks!
Add a comment
|
8 Answers
Rather than using a Stack widget like Zulfiqar did, pass your background image in the flexibleSpace argument of the AppBar widget instead:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('App Bar!'),
flexibleSpace: Image(
image: AssetImage('assets/image.png'),
fit: BoxFit.cover,
),
backgroundColor: Colors.transparent,
),
body: Container(),
);
}
4 Comments
Michel Feinstein
This won't make the
AppBar as big as your image, it will clip the image.
Aditya Mittal
If you want to resize the AppBar for a bigger image or something you can set the height yourself AppBar( toolbarHeight: 100, // default is 56 toolbarOpacity: 0.5, ),
Henrique Guimarães
I also have the clipping problem as @MichelFeinstein had. Is there a solution for this?
Henrique Guimarães
I solved the clipping by wrapping the Container with Transform.translate and setting an offset of (-20, 0).
I've had some problems using iOS with Hafiz Nordin's answer. At iOS the image doesn't cover the complete appbar leaving a small transparent space left.
The solution for me was to use an container with a DecorationImage instead.
AppBar(
flexibleSpace: Container(
decoration:
BoxDecoration(
image: DecorationImage(
image: AssetImage(),
fit: BoxFit.cover,
),
),
),
backgroundColor: Colors.transparent,
title: Text("App Bar"),
);
Comments
full example
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Text('How to Flutter', style: TextStyle(
color: Colors.white,
fontSize: 28
),) ,
elevation: 0,
backgroundColor: Colors.transparent,
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/bg.jpg'),
fit: BoxFit.fill
)
),
),
)
Comments
Widget build(BuildContext context) {
return new Container(
child: new Stack(children: <Widget>[
new Container(
child: new Image.asset('assets/appimage.jpg'),
color: Colors.lightGreen,
),
new Scaffold(
appBar: new AppBar(title: new Text('Hello'),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
backgroundColor: Colors.transparent,
body: new Container(
color: Colors.white,
child: new Center(
child: new Text('Hello how are you?'),),)
)
],),
);
}
2 Comments
Ny Regency
Hi Zulfiqar. Is there a solution wherein it's more like in a theme? I want to change all the appBar's background image. Since I have a lot of screens, I don't want to apply changes to all screens. Thank you!
Ciprian
Can't you just create one container widget and use it in all your screens?
It can be done one of the two ways:
Background image just for Scaffold's appBar
appBar: AppBar(
title: const Text(
"Home Page",
style: TextStyle(color: Colors.white),
),
flexibleSpace: const Image(
image: NetworkImage(
'https://th.bing.com/th/id/OIP.AjOYK61Fo6R4XdkOHnh_UQHaBr?pid=ImgDet&rs=1'),
fit: BoxFit.fill,
),
),
Background image spanning accross body of Scaffold
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
title: const Text(
"Home Page",
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.transparent,
),
body: Container(
height: 200,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://th.bing.com/th/id/OIP.AjOYK61Fo6R4XdkOHnh_UQHaBr?pid=ImgDet&rs=1'))),
));
Comments
appBar: AppBar(
title: Text('Current deals'),
flexibleSpace: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/nav-header.png'),
fit: BoxFit.cover,
),
),
),
),
Comments
You can use the "extendBodyBehindAppBar: true," property of scaffold to do all the stuff.
Here is an example:
Scaffold(
extendBodyBehindAppBar: true, // <-- Here set is true
appBar: AppBar(
title: Text(
'How to show background Image in appbar',
style: TextStyle(color: Colors.white, fontSize: 28),
),
elevation: 0,
backgroundColor: Colors.transparent,
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.png'), fit: BoxFit.fill)),
),
);
Comments
Removing the SafeArea Worked for me.
Add add this Inside of Scaffold:
extendBodyBehindAppBar: true,
extendBody: true,
appBar: widget.isEditing ? AppBar(
backgroundColor: Colors.transparent,
) : null,
