How to change the AppBar background colour in Flutter

What is an appbar in Flutter?

In Flutter, the AppBar is a widget that is typically displayed at the top of an app. It is used to display important information such as the app title, as well as various actions that the user can take. The AppBar can also include other widgets, such as a TabBar or a FlexibleSpaceBar and more.

Here is an example of how to use an AppBar in a Flutter app:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutterassets.com'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                // Perform some action
              },
            ),
            IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: () {
                // Perform some action
              },
            ),
          ],
        ),
      ),
    );
  }

In this example, the AppBar displays the title “flutterassets.com” and has two action icons: a search icon and a more icon. When the user taps on one of these icons, the corresponding onPressed callback is executed.

How to change the AppBar background colour in Flutter

You can read more about AppBar in this post: Flutter Basics – How to Customize AppBar in Flutter

To change the background colour of an AppBar in Flutter, you can use the backgroundColor property of the AppBar widget. Here is an example of how to do this:

appBar: AppBar(
        title: const Text('Example'),
        backgroundColor: Colors.green,
      ),

In this example, the AppBar background colour is set to green. You can use any colour that you want by specifying a colour value or using one of the predefined colours in the Colors class.

Flutter AppBar gradient background colour

To set a gradient background colour for the AppBar in Flutter, you can use the BoxDecoration class with a LinearGradient as its background colour.

Here’s an example of how you can do this:

AppBar(
  backgroundColor: Colors.transparent, // set the background color to transparent
  elevation: 0, // remove the shadow
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
  // Set the AppBar to have a gradient background
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Colors.red, Colors.orange, Colors.yellow],
      ),
    ),
  ),
)

In this example, we set the background colour of the AppBar to transparent and then set the flexibleSpace property to a Container with a BoxDecoration that has a LinearGradient as its background colour.

You can adjust the start and end points of the gradient by setting the begin and end properties of the LinearGradient, and you can customize the colours of the gradient by passing a list of colours to the colors property.

Here is another simple example.

appBar: AppBar(
        centerTitle: true,
        title: Text("Title"),
        flexibleSpace: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: <Color>[
                    Colors.red,
                    Colors.blue
                  ])
          ),
        ),
      ),