Flutter allows developers to change the background color of an app bar easily by providing backgroundColor option. Instead of background color, we may want to add a background image to the app bar.
To add the background image to AppBar widget, we can use the flexibleSpace option of the widget. The flexibleSpace property of AppBar accepts a widget as its value, so we can pass a Container widget as its value and set an image background to the Container.
example:
appBar: AppBar(
title: Text('How to Flutter', style: TextStyle(
color: Colors.white,
fontSize: 28
),) ,
centerTitle: true,
flexibleSpace: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/sample.png'),
fit: BoxFit.fill
)
),
),
),
In this way we can add a background image to an AppBar in Flutter.
How to Make Body Background Image apply to AppBar also ?
Other requirement similar to this can be like, you want to make your body’s background image extends to AppBar also. We can achieve that by making the background color of AppBar transparent and using the extendBodyBehindAppBar option of the Scaffold widget and set its value to true.
Also make sure that you have set the value of elevation to 0 in AppBar, since its default value is not zero and you may find a small shadow between the Body and AppBar if its value is not zero. If you want a separation between the app bar and the body, then you can play with this elevation property and set its value accordingly.
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/bgimg.jpg'),
fit: BoxFit.fill
)
),
),
)