如何改变AppBar的文字颜色,FAB的图标颜色普遍使用主题？

Question

我能够设置背景色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,
        ),
  ),

Answer 1

到目前为止，我测试的解决方案是在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
          )
     )
)

Answer 2

我认为最简单的方法是调整您正在使用的主题的标题颜色:

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

Answer 3

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

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

Answer 4

以下是设置AppBar Title颜色的方法.

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

Answer 5

我将写出情感属性的变化ThemeData。

此处编写的内容是尽可能不影响其他小部件的一种方式。

如果您想更改应用栏标题的颜色，

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

如果您想更改应用栏的图标颜色，

  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,

Answer 6

更新到 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);

希望有帮助。