如何通过Theme自定义Flutter自定义AppBar，提升图标色彩辨识度？

问题场景 #

自定义MyAppBar集成TabBar，深色主题模式下TabBar图标显示暗绿色，与背景融合导致辨识度低。尝试配置全局iconTheme和primaryIconTheme未生效，需要通过Theme调整让图标颜色更突出。

相关代码 #

页面代码

@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 4,
    child: Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      appBar: MyAppbar(
        tabController: tabController,
      ),
      body: ...

MyAppBar代码

@override
Widget build(BuildContext context) {
  const double tabHeight = 60.0;
  return SizedBox(
    height: widget.preferredSize.height,
    child: Column(
      children: <Widget>[
        TabBar(
          controller: widget.tabController,
          tabs: const [
            SizedBox(
              height: tabHeight,
              child: Tab(
                icon: Icon(
                  Icons.credit_card,
                  size: Styles.tabIconSize,
                ),
              ),
            ),
            SizedBox(...

深色主题代码

final darkTheme = ThemeData.dark().copyWith(
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color.fromARGB(255, 120, 214, 192),
  ),
  primaryColor: const Color.fromARGB(255, 120, 214, 192),
  iconTheme: const IconThemeData(color: Colors.red), // 未生效
  primaryIconTheme: const IconThemeData(color: Colors.red), // 未生效
  ...

解决方法 #

1. 全局Theme中配置TabBarTheme #

TabBar的图标样式不受全局iconTheme控制，需要专门配置tabBarTheme来指定选中/未选中图标的颜色：

final darkTheme = ThemeData.dark().copyWith(
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color.fromARGB(255, 120, 214, 192),
  ),
  primaryColor: const Color.fromARGB(255, 120, 214, 192),
  // 添加TabBar主题配置
  tabBarTheme: const TabBarTheme(
    // 未选中图标颜色，选与背景对比明显的浅色调
    unselectedIconColor: Colors.white70,
    // 选中图标颜色，使用更亮的绿色提升辨识度
    iconColor: Color.fromARGB(255, 80, 240, 200),
  ),
);

2. 直接在TabBar组件中设置颜色 #

如果不需要全局生效，也可以在MyAppBar的TabBar组件内直接指定颜色：

TabBar(
  controller: widget.tabController,
  unselectedIconColor: Colors.white70,
  iconColor: const Color.fromARGB(255, 80, 240, 200),
  tabs: const [
    // 你的Tab项
  ],
)

3. 为什么全局iconTheme不生效？ #

TabBar内部的图标样式优先级高于全局iconTheme，它默认优先使用TabBarTheme中的配置，其次是ColorScheme的对应色值，所以直接修改全局iconTheme不会影响TabBar里的图标。

内容的提问来源于stack exchange，提问作者rozerro