我们如何在Flutter中更改Appbar背景颜色

Question

我正在尝试为应用设置通用主题，因此我需要将appbar颜色更改为表示十六进制代码＃0f0a1a的颜色

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

我尝试使用这段代码来制作自定义颜色，但失败了。我该如何从themeData做到这一点？

Answer 1

如果你不想改变整体，PrimaryColor你也可以AppBarTheme在你的ThemeData：

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

Answer 2

在当前版本的 Flutter 中ColorScheme，为了顺应新的“Material You”设计，我们应该尽可能地使用。应用栏颜色由以下各项控制：

1. 如果主题brightness是light，则使用primary颜色。

2. 如果主题brightness是dark，则使用surface颜色。

举些例子：

灯光模式

设置brightness为light，然后将primary和设置onPrimary为黄色和黑色，并将所有其他颜色设置为灰色以表明它们与 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")),
  ),
)

深色模式

设置brightness为dark，然后surface将 和设置onSurface为黄色和黑色，所有其他设置为灰色以表明它们与 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 3

像这样声明你的颜色

const PrimaryColor = const Color(0xFF151026);

然后在MaterialApp关卡中（将更改整个应用中的AppBar颜色），PrimaryColor

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

如果您想在Widget级进行更改，只需更改 backgroundColor

  appBar: AppBar(
    backgroundColor: PrimaryColor,
  ),

Answer 4

包括 backgroundColor: 到应用栏

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

Answer 5

随着新的 Material 3 和 Flutter 3 更新，可以使用 surfaceTintColor 更改 AppBar 的背景颜色。

在 AppBar 内，如下所示：

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

或者在 ThemeData 类中像这样：

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