我们如何在 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

关卡（会改变整个app的AppBar Color）改变

primaryColor

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

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

backgroundColor

  appBar: AppBar(
    backgroundColor: primaryColor,
  ),

Answer 2

如果你不想改变整个

PrimaryColor

你也可以在你的

AppBarTheme

中定义

ThemeData

：

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

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

Answer 4

包括背景颜色：应用栏

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

Answer 6

根据

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,

或者您可以在

backgroundColor

上致电

Appbar

。

有关更多信息，请访问ThemeData-class

Answer 7

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

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

Answer 8

如果您使用的是材料 3。您还必须注意色调和前景颜色。

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

Answer 9

你可以使用 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 来实现。

在这里了解更多

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

Answer 11

对于背景颜色，您可以使用 backgroundColor 属性，对于文本颜色，您可以应用样式。

例子：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Jorgesys', style: TextStyle(color: Colors.cyanAccent),),
        backgroundColor: Colors.green, //App Bar background color.            
      ),
      body: Column(
      ...
      ...

Answer 12

为了在 flutter 中改变

Background color

的

appbar

：

return Scaffold(
      appBar: AppBar(
        backgroundColor:Colors.black,
      ),
),