如何在Flutter的应用栏中更改文本和图标的颜色

Question

我在Flutter中更改应用栏中文本和图标小部件的颜色时遇到了问题。

我尝试在Material App内使用主题，但它不起作用。

这里可以工作：title: Text('Profile', style: TextStyle(color: Colors.black)), 但我想将其应用于所有应用栏。那么我应该在Material主题中进行哪些更改？

MaterialApp(
          title: "My App",
          theme: ThemeData(
            appBarTheme: AppBarTheme(
              backgroundColor: Color(0xffFCD581),
              brightness: Brightness.dark,
            ),

如何全局改变文本: profile和图标的颜色。

将headline6的颜色设置为Colors.black是有效的，但这也会使标题文本变小。 我可以在headline6中设置字体大小，并普遍反映出来。 但我认为我们通过appbar获得的默认标题大小已经足够合适了。 所以有没有仅更改appbar文本、标题的颜色而不影响字体大小的解决方案。

- Dhananjay Gavali

---

这个回答解决了你的问题吗？如何使用主题来全局更改AppBar的文本颜色和FAB的图标颜色？ - Riwen

不，现在它不起作用了。有些解决方案可以像设置headline6: Colors.black的颜色一样工作，但它也会将字体大小改为更小的。虽然我们可以在整个应用程序中通用地设置appbar的字体大小，但我希望字体大小保持默认值。 - Dhananjay Gavali

Answer 1

使用IconButton作为后退按钮，并指定颜色，对于标题，使用TextStyle并指定颜色。

1. 使用AppBar:

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.red),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: Text("Sample", style: TextStyle(color: Colors.red),),
        centerTitle: true,
      ),

2. 使用 ThemeData：

theme: ThemeData(
    primaryTextTheme: TextTheme(
      headline6: TextStyle(color: Colors.red),
    ),
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(color: Colors.red),
    ),
  ),

输出：

- Jitesh Mohite

---

我知道这个。但是我需要为每个应用栏都做这个。我该如何全局地应用到所有应用栏呢？我以前做过，但现在不知道为什么这一次不起作用了。 - Dhananjay Gavali

对于 headline6，它是有效的。但问题在于现在我们需要提供 fontsize，如果我们不给出 fontsize，那么默认值太小了。但是应用栏标题的默认大小是完美的，现在被覆盖了。 - Dhananjay Gavali

添加了primaryTextTheme，这对你有用。 - Jitesh Mohite

Answer 2

以下是如何更改文本和图标颜色的方法：

   return Scaffold(
      appBar: AppBar(
        leading: null,
        automaticallyImplyLeading: true,
        centerTitle: true,
        iconTheme: IconThemeData(color: myCustomIconColor), //ICONS
        titleTextStyle: GoogleFonts.lato(
           textStyle: TextStyle(
           fontSize: 23,
           fontWeight: FontWeight.w700,
           color: myCustomTextColor,    //TEXT
         ),
        ),
        title: Text('Settings'),
      ),

或者您可以直接为Text小部件设置样式并在那里更改颜色

- GraSim

Answer 3

在你的MaterialApp小部件中使用AppBarTheme的iconTheme和titleTextStyle属性。

 theme: ThemeData(
                iconTheme: IconThemeData(color: Colors.green),
                appBarTheme: AppBarTheme(color: Colors.green),
),

- Andrej

---

iconTheme 属性适用于图标，但是 titleTextStyle 属性不起作用。而且我没有在我的应用栏中重写这些属性。在我的 AppBar 中，我只给了 title 和 Icon。 - Dhananjay Gavali