如何改变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

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

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

Answer 2

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

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

Answer 3

以下是设置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 4

我会写一下ThemeData属性的变化会影响什么。

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

如果要更改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,

Answer 5

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

在小部件的构建方法中，

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