Flutter approves builders to alternate the history color of an app bar without difficulty by using offering the backgroundColor option. Instead of a history color, we may also desire to add historical photographs to the app bar.
To add the history photo to the AppBar widget, we can use the flexible space choice of the widget. The flexible space property of AppBar accepts a widget as its value, so we can skip a Container widget as its fee and set a photograph heritage 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 heritage picture to an AppBar in Flutter.
How to Make Body Background Image apply to AppBar also?
Another requirement comparable to this can be like, that you prefer to make your body’s historical past photograph extends to AppBar also. We can acquire that by means of making the historical past shade of AppBar obvious and the use of the extendBodyBehindAppBar choice of the Scaffold widget and setting its price to true.
Also make positive that you have set the cost of elevation to zero in AppBar, due to the fact it's default fee is now not zero and you may additionally discover a small shadow between the Body and AppBar if its price is no longer zero. If you choose a separation between the app bar and the body, then you can play with this elevation property and set its fee 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
)
),
),
)
