Flutter: AppBar background image

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