Flutter: AppBar background image Flutter: AppBar background image dart dart

Flutter: AppBar background image


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


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


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