How to Change the Background Color of AppBar widget in Flutter

In most of the Flutter applications we may not want to use the default colors and want to use app/ theme specific colors. AppBar is one of the widget which gets a good amount of attention and changing its background color can have a good impact on user experience.

The background color of AppBar widget can be changed in a couple of ways in Flutter.

1. By modifying global theme
2. Providing a backgroundColor option at widget level

Modifying Global Theme

We can modify the global theme of a Flutter application inside main.dart file in MaterialApp widget. We can give provide a different color to the primarySwatch option than the default color which is blue.

example:

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.pink ,
      ),
      home: AppBarHowTo() ,
    );
  }

At AppBar Widget level

The global colors can be modified at a widget level. Though the way of modifying global colors is different from widget to widget, it is a straight forward process for AppBar background color. The AppBar accepts a backgroundColor option whose value needs to be a Color.

example:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('How to Flutter') ,
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
    ) ;
  }

Read more about AppBar here: AppBar – A Deep Dive