如何在Flutter中更改应用栏背景颜色

Question

我试图为应用程序设置一个公共主题，所以我需要更改appbar的颜色为代表十六进制代码#0f0a1a的颜色。

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

我尝试使用这段代码来创建自定义颜色，但失败了。如何从themeData中实现呢？

- Vineeth Mohan

---

它是如何失败的？有任何错误吗？ - Raouf Rahiche

模拟器中显示 NoSuchMethodException。primarycolor 需要 materialColor 吗？ - Vineeth Mohan

Answer 1

声明你的颜色：

const primaryColor = Color(0xFF151026);

在MaterialApp级别（会更改整个应用程序的AppBar颜色），更改primaryColor

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

如果您想在小部件级别上进行更改，则修改 backgroundColor

  appBar: AppBar(
    backgroundColor: primaryColor,
  ),

- Raouf Rahiche

---

我们如何定义整个应用程序中所有应用栏的文本颜色，以便为所有应用栏定义它？ - Kamlesh

你好。这在Flutter 2.8中不起作用。有人可以确认一下吗？ - Divyam Dhadwal

是的，在Flutter 2.5+中它不再起作用了。 - kimoduor

这个 Github 问题揭示了为什么这不再起作用。建议的解决方法是使用 colorScheme（即 theme: ThemeData(colorScheme: ColorScheme(..))）。但下面 HugoH 的答案也可以起作用。 - Tim Denison

Answer 2

如果您不想更改整个PrimaryColor，您也可以在ThemeData中定义AppBarTheme：

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

- Hugo H

---

谢谢，这个回答应该被接受，因为通过这种方法我们可以保留PrimaryColor的原始设置，同时为AppBar指定颜色，即使在我们的代码中没有直接创建AppBar（例如showLicensePage）。 - apc

这是最好的方法，因为它直接针对AppBar... textTheme属性应该用于样式化标题... 谢谢！ - serg

Answer 3

在当前版本的Flutter中，为了遵循新的"Material You"设计，我们应尽可能使用ColorScheme。应用栏颜色受以下控制：

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

- WSBT

---

如何更改FloatingActionButton的颜色？ - st3ffb3

似乎对于暗色主题，现在使用的是inversePrimary颜色而不是surface。 - Matt

Answer 4

将背景颜色包含进应用栏

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

- ALEXANDER LOZANO

---

这是2021年的解决方案。 - mercury

Answer 5

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

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

- Viacheslav Tolstopiatenko

Answer 6

在新的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),
  ),
),

- Dhruvam Sharma

Answer 7

根据Flutter 2.5中的AppBar说明，它默认使用ColorScheme.primary。如果整体主题的亮度为，则默认应用栏[backgroundColor]为整体主题的[ColorScheme.primary]。不幸的是，这与浅色主题下的默认[ButtonStyle.foregroundColor]相同。在这种情况下，更好的文本按钮前景色是[ColorScheme.onPrimary]，这种颜色与[ColorScheme.primary]形成良好对比。为了解决这个问题，请覆盖[TextButton.style]，尝试使用colorScheme。

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

并在其他地方使用

 Theme.of(context).colorScheme.primary,

或者你可以直接在 Appbar 上调用 backgroundColor。

更多信息请访问ThemeData-class

- Yeasin Sheikh

Answer 8

1. 如果您没有非常特殊的情况，请不要每个屏幕更改应用栏，而是在整个应用程序中更改它（适用于所有屏幕）。

2. 仅使用ColorScheme中指定的颜色：背景或表面：

    themeData = themeData.copyWith(
          appBarTheme: AppBarTheme(
        //  color: themeData.primaryColor,
        backgroundColor: themeData.colorScheme.background, //或surface
        foregroundColor: themeData.colorScheme.primary,
        elevation: 0,
      ));
   

- yurin

Answer 9

如果您正在使用Material 3，您还需要注意色调和前景颜色。

Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.white //your color,
      surfaceTintColor: Colors.white // for material 3 you have to make it transparent,
 )

- sourav pandit

Answer 10

自Flutter 2.5+起，工作解决方案将简单地在ThemeData中使用ColorScheme：

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'),
      ),
    );
  }
}

- mondayrris