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