Flutter: AppBar background image - dart

Question

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!

Answer 1

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(),
);
}

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

appBar: AppBar(
title: Text('Current deals'),
flexibleSpace: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/nav-header.png'),
fit: BoxFit.cover,
),
),
),
),

Answer 6

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