我们如何在flutter中更改appbar背景颜色

Question

I am trying to set a common theme for app so I need to change appbar color as a color that indicates hex code #0f0a1a

const MaterialColor toolbarColor = const MaterialColor(
    0xFF151026, const <int, Color>{0: const Color(0xFF151026)});

I try this piece of code to make a custom color but fails. How can I do this from themeData ?

Answer 1

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,
  ),

Answer 2

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(),
)

Answer 3

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:

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.

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")),
  ),
)

Answer 4

include backgroundColor: to appbar

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

Answer 5

According to AppBar description On Flutter 2.5 , it uses ColorScheme.primary by default.

The default app bar [backgroundColor] is the overall theme's [ColorScheme.primary] if the overall theme's brightness is [Brightness.light]. Unfortunately this is the same as the default [ButtonStyle.foregroundColor] for [TextButton] for light themes. In this case a preferable text button foreground color is [ColorScheme.onPrimary], a color that contrasts nicely with [ColorScheme.primary]. to remedy the problem, override [TextButton.style]:

try using colorScheme

 MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: const Color(0xFF151026),
        ),
      ),
      home: MyApp(),
    ),

And to use somewhere else

 Theme.of(context).colorScheme.primary,

Or you can just call backgroundColor on Appbar .

For more, visit ThemeData-class

Answer 6

With the new Material 3 and Flutter 3 updates, background color for AppBar can be changed using surfaceTintColor.

Either inside the AppBar like this:

return AppBar(
  ...
  surfaceTintColor: backgroundColor ?? CommonColors.lightColor,
 );

Or inside the ThemeData class like this:

ThemeData.light().copyWith(
  ...
  appBarTheme: AppBarTheme(
    backgroundColor: CommonColors.lightColor,
    surfaceTintColor: CommonColors.lightColor,
    actionsIconTheme: const IconThemeData(color: Colors.white),
  ),
),

Answer 7

You can use Flutter ThemeData,if you want to set a theme for your entire application:

class HomePage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'MyApp',),
    );
  }
}....

Then if you want to change certain elements of your primary and secondary colors,you can achieve this using the colorScheme from Swatch.

Learn More Here

Here is an example using colorScheme :

    class HomePage extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'MyApp',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSwatch(
              primarySwatch: Colors.blue,//the color of your Appbar will be blue
            ).copyWith(
              secondary: Colors.green,
//your accent color-floating action will appear green
            ),
          ),
          home: MyHomePage(title: 'MyApp',),
        );

Answer 8

要在整个应用程序中更改 Appbar 背景颜色：

MaterialApp(theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.blueGrey),),);

Answer 9

Since flutter 2.5+, the working solution will be simply use ColorScheme in ThemeData:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: const AppBarWidget(),
      theme: ThemeData.light().copyWith(
        colorScheme: ColorScheme.fromSwatch().copyWith(
          // change the appbar color
          primary: Colors.green[800],
        ),
      ),
    );
  }
}

class AppBarWidget extends StatelessWidget {
  const AppBarWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar'),
      ),
    );
  }
}

Answer 10

Except change AppBar's background color, you need to set shadowColor to transparent or change elevation to 0:

appBar: AppBar(
  backgroundColor: Colors.red,
  shadowColor: Colors.transparent,
  //elevation: 0,
),