我们如何在 flutter 中更改应用栏背景颜色

Question

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

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

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

Answer 1

声明你的颜色：

const primaryColor = Color(0xFF151026);

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

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

如果您想在小部件级别更改它，请修改 backgroundColor

  appBar: AppBar(
    backgroundColor: primaryColor,
  ),

Answer 2

如果你不想改变整个 PrimaryColor 你也可以在你的 ThemeData:

中定义 AppBarTheme

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

Answer 3

将 backgroundColor: 添加到应用栏

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

Answer 4

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

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]:

尝试使用 colorScheme

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

并在其他地方使用

 Theme.of(context).colorScheme.primary,

或者您可以在 Appbar 上致电 backgroundColor。

更多信息，请访问ThemeData-class

Answer 5

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

如果主题 brightness 是 light，请使用 primary 颜色。
如果主题 brightness 是 dark，请使用 surface 颜色。

例如：

灯光模式

将brightness设置为light，然后将primary和onPrimary设置为黄色和黑色，并将所有其他颜色设置为灰色以表明它们不相关应用栏：

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

Answer 7

要更改整个应用程序中的 Appbar backgroundColor：

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

Answer 8

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

Answer 9

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

在AppBar里面像这样：

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

或者在 ThemeData 中 class 像这样：

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

我们如何在 flutter 中更改应用栏背景颜色

How can we change appbar background color in flutter

dart

flutter

flutter-layout