How can we change appbar background color in flutter

If you don't want to change the whole PrimaryColor you can also define AppBarTheme in your ThemeData:

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
       appBarTheme: AppBarTheme(
     color: const Color(0xFF151026),
  )),
  home: myApp(),
)

Declare your Color:

const primaryColor = Color(0xFF151026);

In the MaterialApp level (will change the AppBar Color in the whole app ) change primaryColor

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
   primaryColor: primaryColor,
   ),
  home: MyApp(),
);

and if you want to change it on the Widget level modify the backgroundColor

  appBar: AppBar(
    backgroundColor: primaryColor,
  ),

As of Flutter 2.5.0, to comply with "Material You", we should try to use ColorScheme whenever possible. The app bar color is controlled by:

  1. If theme brightness is light, use primary color.

  2. If theme brightness is dark, use surface color.

For examples:

Light Mode

Set brightness to light, then set primary and onPrimary to yellow and black, and set all other colors to grey to showcase that they are not relevant to AppBar:

light mode demo

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme(
      brightness: Brightness.light,
      primary: Colors.yellow,
      onPrimary: Colors.black,
      // Colors that are not relevant to AppBar in LIGHT mode:
      primaryVariant: Colors.grey,
      secondary: Colors.grey,
      secondaryVariant: Colors.grey,
      onSecondary: Colors.grey,
      background: Colors.grey,
      onBackground: Colors.grey,
      surface: Colors.grey,
      onSurface: Colors.grey,
      error: Colors.grey,
      onError: Colors.grey,
    ),
  ),
  home: Scaffold(
    appBar: AppBar(title: Text("Light Mode Demo")),
  ),
)

Dark Mode

Set brightness to dark, then set surface and onSurface to yellow and black, all others to grey to showcase that they are not relevant to AppBar.

enter image description here

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme(
      brightness: Brightness.dark,
      surface: Colors.yellow,
      onSurface: Colors.black,
      // Colors that are not relevant to AppBar in DARK mode:
      primary: Colors.grey,
      onPrimary: Colors.grey,
      primaryVariant: Colors.grey,
      secondary: Colors.grey,
      secondaryVariant: Colors.grey,
      onSecondary: Colors.grey,
      background: Colors.grey,
      onBackground: Colors.grey,
      error: Colors.grey,
      onError: Colors.grey,
    ),
  ),
  home: Scaffold(
    appBar: AppBar(title: Text("Dark Mode Demo")),
  ),
)