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

Posted 2023-02-23

【中文标题】我们如何在flutter中更改appbar背景颜色

【英文标题】：How can we change appbar background color in flutter

【发布时间】：2019-01-15 08:15:37

【问题描述】：

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

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

我尝试使用这段代码制作自定义颜色，但失败了。 我如何从themeData 执行此操作？

【问题讨论】：

如何失败？有什么错误吗？

NoSuchMethodException 显示在模拟器中。原色需要materialColor吗？

【参考方案1】：

声明你的颜色：

const primaryColor = Color(0xFF151026);

在MaterialApp级别（会改变整个应用的AppBar Color）更改primaryColor

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

如果您想在 Widget 级别更改它，请修改 backgroundColor

  appBar: AppBar(
    backgroundColor: primaryColor,
  ),

【讨论】：

我们如何通过定义appbar文本的textcolor来为整个应用程序中的所有appbars定义它？

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

【参考方案2】：

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

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

【讨论】：

谢谢，这应该被接受，因为通过这种方法，我们可以保持 PrimaryColor 不变，但同时为 AppBar 指定颜色，甚至没有直接在我们的代码中创建（例如，showLicensePage）

这是最好的方法，因为它直接以 AppBar 为目标...应该解决 textTheme 属性以设置标题样式...谢谢！

【参考方案3】：

包括 backgroundColor: 到应用栏

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

【讨论】：

这是2021年的解决方案

【参考方案4】：

根据AppBar的描述在Flutter 2.5上，默认使用ColorScheme.primary。

默认的应用栏 [backgroundColor] 是整体主题的 [ColorScheme.primary] 如果整体主题的亮度是 [Brightness.light]。不幸的是，这与默认值相同 [ButtonStyle.foregroundColor] for [TextButton] 用于浅色主题。 在这种情况下，优选的文本按钮前景色是 [ColorScheme.onPrimary]，一种与 [ColorScheme.primary]。为了解决问题，覆盖 [TextButton.style]：

尝试使用colorScheme

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

并在其他地方使用

 Theme.of(context).colorScheme.primary,

或者你也可以直接拨打backgroundColorAppbar。

欲了解更多信息，请访问ThemeData-class

【参考方案5】：

从 Flutter 2.5.0 开始，为了符合“Material You”，我们应该尽可能使用ColorScheme。应用栏颜色受以下因素控制：

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

如果主题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")),
  ),
)

【讨论】：

如何更改 floatingActionButton 的颜色？

【参考方案6】：

如果你想为整个应用设置一个主题，你可以使用 Flutter ThemeData：

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

如果你想改变你的原色和副色的某些元素，你可以使用 Swatch 的 colorScheme 来实现。

Learn More Here

这是一个使用 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',),
        );

【参考方案7】：

除了改变AppBar的背景色，需要将shadowColor设置为透明或者将elevation改为0：

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