AppBar widget in Flutter comes with a background color option which takes a solid color as its value. By default we cannot add gradient color to AppBar using the available background color option.
One way to add gradient color to the AppBar is by using its flexibleSpace property. The flexibleSpace property of the AppBar accepts a widget as its value, so we can assign a container to it which itself implements a gradient background color.
example:
...
appBar: AppBar(
title: Text('How to Flutter'),
centerTitle: true,
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: <Color>[Colors.purple, Colors.blue])),
)),
...The output for the above code
Another way to implement the gradient background color for the AppBar is to mock it with other widgets. That is, we can remove the appBar option from the Scaffold widget and have to design other widgets which then looks and functions like AppBar.