如何使用主题通用更改AppBar的文本颜色，FAB的图标颜色？

Posted 2023-02-23

【中文标题】如何使用主题通用更改AppBar的文本颜色，FAB的图标颜色？

【英文标题】：How to change text color of AppBar, icon color of FAB universally using theme?

【发布时间】：2018-11-10 04:53:53

【问题描述】：

我可以将AppBar 的背景颜色设置为Colors.amber。这会自动将文本颜色设置为黑色。我知道可能出现的可访问性问题，但无论如何我希望文本颜色为白色。

我仍然可以从 AppBar 设置文本颜色，但我想通用设置它。

这是我为我的应用使用的主题。

title: 'Flutter Demo',
theme: new ThemeData(
  primarySwatch: Colors.amber,
  textTheme: Theme.of(context).textTheme.apply(
    bodyColor: Colors.white,
    displayColor: Colors.white,
  ),
),

【问题讨论】：

您可以通过扩展 AppBar 类创建自己的自定义 appBar，然后在任何地方使用它

【参考方案1】：

这是设置 AppBar 标题颜色的方法。

return new MaterialApp(
  theme: Theme.of(context).copyWith(
      accentIconTheme: Theme.of(context).accentIconTheme.copyWith(
        color: Colors.white
      ),
      accentColor: Colors.amber,
      primaryColor: Colors.amber,
      primaryIconTheme: Theme.of(context).primaryIconTheme.copyWith(
        color: Colors.white
      ),
      primaryTextTheme: Theme
          .of(context)
          .primaryTextTheme
          .apply(bodyColor: Colors.white)),
  home: Scaffold(
    appBar: AppBar(
      title: Text("Theme Demo"),
      leading: IconButton(
        onPressed: (),
        icon: Icon(Icons.menu),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.add),
    ),
  ),
);

【参考方案2】：

我认为最直接的方法是调整您正在使用的主题的标题颜色：

theme: new ThemeData(
  primarySwatch: Colors.grey,
  primaryTextTheme: TextTheme(
    headline6: TextStyle(
      color: Colors.white
    )
  )
)

【讨论】：

此解决方案不再有效，因为触发的错误如下：'title' 已弃用，不应使用。这是 2014 版材料设计中使用的术语。现代术语是标题6。此功能在 v1.13.8 之后已弃用。尝试将已弃用成员的使用替换为替换。

你怎么知道AppBar使用headline6？有文档吗..？有的话可以指点一下吗？？

@Ramesh-X 文档标题6“用于应用栏和对话框中的主要文本（例如，AppBar.title 和 AlertDialog.title）”来源：api.flutter.dev/flutter/material/TextTheme/headline6.html

也许由于是一个旧答案，这不是当今最好的解决方案。主题上有一个单独的 appBarTheme 属性，它只允许自定义 AppBars 而不是各处的整个 header6 属性。

【参考方案3】：

我使用了一种稍微不同的技术，我没有使用主题，我只是自定义了它的外观，所以当我创建它时看起来像这样：

appBar: new AppBar(
  iconTheme: IconThemeData(
    color: Colors.white
  ),
  title: const Text('Saved Suggestions', style: TextStyle(
    color: Colors.white
  )),
  backgroundColor: Colors.pink,
),

【讨论】：

这适用于一次性，但 OP 特别询问如何使用主题普遍做到这一点。

【参考方案4】：

我会写出ThemeData 的属性变化有什么影响。

这里写的内容是尽量不影响其他widget的方式。

如果你想改变appbar标题的颜色，

  primaryTextTheme: TextTheme(
    title: TextStyle(
      color: Colors.white
    )
  ),

如果你想改变appbar的图标颜色，

  primaryIconTheme: const IconThemeData.fallback().copyWith(
    color: Colors.white,
  ),

如果你想改变FAB的图标颜色。

  accentIconTheme: const IconThemeData.fallback().copyWith(
    color: Colors.white,
  ),

另外，当你想改变FAB的颜色时。 仅靠 ThemeData 的属性是不可能的。 所以你需要直接指定它。但是，最好使用Theme.of(context)。

  floatingActionButton: FloatingActionButton(
    backgroundColor: Theme.of(context).primaryColor,

【讨论】：

TextTheme.title 现在被称为TextTheme.headline6

TextTheme.headline6 将 appbar 的默认字体大小更改为较小的

【参考方案5】：

在您第一次调用 main.dart 文件时运行的小部件中，您可以添加一个命名参数主题，以便您添加全局样式

在widget的build方法中，

Widget build(BuildContext context) 

return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: _buildLightTheme(),
    title: 'title of app',
    home: LoginPage(app: app),
    initialRoute: '/login',
    routes: <String, WidgetBuilder>
      "/login": (BuildContext context) => LoginPage(app: app,)
    );
 

在这里，我为我的主题创建了一个单独的方法，称为 _buildLightTheme

ThemeData _buildLightTheme() 
   final ThemeData base = ThemeData.light();
    return base.copyWith(
     accentColor: kUndaGreen,
     scaffoldBackgroundColor: kUndaWhite,
     cardColor: Colors.white,
     textSelectionColor: Colors.amberAccent,
     errorColor: Colors.green,
     textSelectionHandleColor: Colors.black,
    appBarTheme:_appBarTheme()
   );

对于 appBarTheme，我有一个单独的方法 _appBarTheme

AppBarTheme _appBarTheme()
  return AppBarTheme( 
     elevation: 0.0,
     color: kUndaGreen,
     iconTheme: IconThemeData(
       color: Colors.white,
     ),);
 

【讨论】：

我不知道AppBarTheme 是一个东西，这非常有帮助。非常感谢！

【参考方案6】：

简单高效，代码少的方法。使用具有所需颜色的浅色主题。

theme: ThemeData.light().copyWith(
    accentColor: Colors.amber,
    primaryColor: Colors.amber,
),

【参考方案7】：

首先我想让你知道有 3 种方法可以在颤动中设置颜色。

所以你问你想在应用栏中设置颜色或文本。因此，如果您在 Text 方法的样式属性中设置颜色，它就可以工作。让我告诉你它是如何工作的。我还将向您展示 3 种设置颜色的方法。你是否使用主题属性并不重要，因为设置文本的颜色是不同的。这样我就没有在示例中使用 Theme 属性。

第 1 次：

Scaffold(
  appBar: AppBar(
    title: Text("App Name",
    style: TextStyle(color: Colors.colorname),);

第二个：

Scaffold(
  appBar: AppBar(
    title: Text("App Name",
    style: TextStyle(color: Color(0xffffff),));

第三：

Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.white,
    title: Text("App Name",
    style: TextStyle(color: Color.fromRGBO(0, 0, 0, 0, 0),));

【讨论】：

问题是关于如何普遍设置颜色。这不是解决方案

【参考方案8】：

您可以使用 AppBarTheme 进行设置

theme: new ThemeData(
  textTheme: Theme.of(context).textTheme.apply(
    appBarTheme: AppBarTheme(
      textTheme: TextTheme(
        // center text style
        headline6: TextStyle(
          color: Colors.black
        ),
        // Side text style
        bodyText2: TextStyle(color: Colors.black)
      )
    )
  ),
),

【参考方案9】：

AppBar 的title 使用headline6 和floatingActionBar 使用来自primarySwatch 的颜色。虽然TextTheme 中没有记录，但我对其进行了测试。例如：要在AppBar 中有红色的FloatingActionButton 和蓝色的标题文本，你的theme 里面的MaterialApp 应该如下所示：

  MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.red,
      appBarTheme: AppBarTheme(            
        textTheme: TextTheme(
          headline6: TextStyle(
            color: Colors.blue,
            fontWeight: FontWeight.bold,
            fontSize: 28.0,
          ),
        ),
      ),
    ),
  )

【参考方案10】：

这就是我的答案：

  theme: ThemeData(
  primaryTextTheme: TextTheme(
    headline6: TextStyle(
      color: Colors.blue,
    )
  )
)

【参考方案11】：

到目前为止，我测试的解决方案是在 appBarTheme

中使用

foregroundColor

这对我来说很普遍

MaterialApp(
     theme: ThemeData(
          appBarTheme: AppBarTheme(
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white //here you can give the text color
          )
     )
)

MaterialApp(
     theme: ThemeData(
          appBarTheme: AppBarTheme(
          backgroundColor: Colors.white,
          foregroundColor: Colors.black//here you can give the text color
          )
     )
)

【讨论】：

终于帮到了我。

这对我有用，谢谢

太棒了！正是需要的。

【参考方案12】：

更新到 Flutter 2.5.1 稳定频道后

他们为主题添加了很多更新。此外，您几乎可以为所有内容设置主题 对于浮动操作按钮和应用栏，请使用以下属性..

ThemeData(
        floatingActionButtonTheme: FloatingActionButtonThemeData(
            foregroundColor: Coolor.FLOAT_ACTION_BTN_ICON,
            backgroundColor: Coolor.FLOAT_ACTION_BTN_BACKGROUND),
        appBarTheme: AppBarTheme(
            titleTextStyle: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
                color: Coolor.APP_BLUE),
            backgroundColor: Coolor.WHITE,
            foregroundColor: Coolor.APP_BLUE));
  

并且在您的材料应用小部件中，您可以传递我们刚刚实现的主题。

MaterialApp(
        title: 'FMS',
        theme: your_theme);

希望能有所帮助。