Flutter/Material 3：AppBar 忽略图标主题答案

【问题标题】：Flutter/Material 3: AppBar ignores icon themesFlutter/Material 3：AppBar 忽略图标主题
【发布时间】：2023-01-08 09:07:58
【问题描述】：

在我的 AppBar 中，标题显示为白色文本，但图标是深灰色或其他颜色。我也想让图标变成白色。

但是图标主题中的颜色没有效果！

不是直接添加到 AppBar 时......

Scaffold(
  appBar: AppBar(automaticallyImplyLeading: false,
      actionsIconTheme: IconThemeData(color: Colors.white),
      iconTheme: IconThemeData(color: Colors.white),

而且也不在主题中...

appBarTheme: AppBarTheme(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    actionsIconTheme: IconThemeData(color: Colors.white),
    iconTheme: IconThemeData(color: Colors.white),

),

我想让主题正常工作！在图标上单独设置颜色不是一种选择。

我究竟做错了什么？ Material 3 真的可以量产了吗？

谢谢！

注意：这是一个 Material 3 问题！在 Material 2 中，一切都按预期工作！

【问题讨论】：

标签： flutter android-appbarlayout flutter-appbar flutter-theme material3

【解决方案1】：

我测试了你的代码，一切似乎都有效，你确定你没有向onPressed提供空值吗？这样它可能是disabled

child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          actionsIconTheme: IconThemeData(color: Colors.white),
          iconTheme: IconThemeData(color: Colors.white),
          title: const Text('Screen A'),
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {},
            ),
            const IconButton(
              icon: Icon(Icons.add),
              onPressed: null,
            )
          ],
        ),

@编辑

在 material3 中也有效 - 你确定你没有覆盖图标的主题吗？

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          actionsIconTheme: IconThemeData(color: Colors.white),
          iconTheme: IconThemeData(color: Colors.white),
          title: const Text('Screen A'),
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {},
            ),
            const IconButton(
              icon: Icon(Icons.add),
              onPressed: null,
            )
          ],
        ),
      ),
    );
  }
}

更新：

你是对的 - 它不能正常工作：

根据documentation，IconButton 的 Material3 正在为 Flutter 开发

【讨论】：

有趣的！不，按钮正在工作。他们只是颜色不对。你确定你用的是Material 3？
好的，我创建了一个新的默认 Flutter 项目并将您的代码复制到其中，但我仍然没有得到带有白色图标的蓝色背景。事实上，背景是白色的，图标是黑色的（第二个 + 是灰色的，因为它被禁用了）。就像您添加的屏幕截图一样。所以你的例子也不起作用！白色图标颜色被忽略。
您能否更改您的示例，使 AppBars 背景为蓝色而文本和图标为白色？
我已经为此报告了一个错误... github.com/flutter/flutter/issues/111339
似乎已为下一次 Flutter 更新修复

【解决方案2】：

使用Theme 小部件包装您的AppBar 小部件，并在ThemeData 对象内将iconTheme 自定义为您的预期设计。

例如：

Theme(
    data: ThemeData(
        appBarTheme: const AppBarTheme(
            iconTheme: IconThemeData(color: ColorsPalette.white),
        ),
    ),
    child: AppBar(
        automaticallyImplyLeading: false,
        ...
    )
)

【讨论】：