Flutter设置useMaterial3:true时文字图标变白显示异常问题

当得知Google为Flutter应用推出Material 3支持时我十分期待，这意味着我们可以基于Material 3设计规范开发Flutter应用，但在编写测试Material 3效果的UI时，发现应用内所有文字、图标颜色与背景色一致，全部显示为白色，异常运行效果截图如下：

我的预期效果如下（示例中手动为文字和图标添加了颜色）：

请问是否有其他开发者遇到过这个问题？

相关代码片段 #

MaterialApp 配置（main.dart） #

MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    useMaterial3: true,
  ),
  routes: AppRoute.routes,
  initialRoute: AppRoute.mainPageRoute,
),

TabBar 组件代码 #

TabBar(
  tabs: const [
    Tab(
      icon: Icon(Icons.chrome_reader_mode),
      text: "List Hadits",
    ),
    Tab(
      icon: Icon(Icons.search),
      text: "Search Books",
    ),
  ],
  controller: _controller,
),

补充：自定义配色配置 #

后续使用Material Theme Builder定义了应用的配色方案，相关配置代码如下：

// 浅色主题
ThemeData(
  useMaterial3: true,
  colorScheme: lightColorScheme,
),
// 深色主题
darkTheme: ThemeData(
  useMaterial3: true,
  colorScheme: darkColorScheme,
),

问题原因&解决方法 #

这是Flutter Material 3适配的高频问题，核心原因是主题配置不完整时，M3组件默认读取的前景色和背景色取了相同色值，分场景修复即可：

• 仅开启useMaterial3: true、未自定义配色的场景
  不传完整配色方案时，Flutter会加载一套无分层的占位M3主题，直接使用就会出现前景背景同色。只需要给主题传入一个主色作为种子，让框架自动生成完整的分层M3配色即可：

  theme: ThemeData(
    useMaterial3: true,
    colorSchemeSeed: Colors.blue, // 替换为你项目需要的主色
  ),
  

• 已使用Material Theme Builder生成自定义配色的场景
  从你贴的代码片段看，大概率是自定义配色的赋值位置错误、或者变量导入异常，导致主题实际没有读取到生成的lightColorScheme/darkColorScheme，回退到了默认的占位同色主题。请对照下面的完整结构修正MaterialApp的主题配置：

  MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      useMaterial3: true,
      colorScheme: lightColorScheme,
    ),
    darkTheme: ThemeData(
      useMaterial3: true,
      colorScheme: darkColorScheme,
    ),
    themeMode: ThemeMode.system, // 可选，配置为跟随系统切换明暗主题
    routes: AppRoute.routes,
    initialRoute: AppRoute.mainPageRoute,
  )
  

如果修正主题配置后TabBar组件仍然有同色问题，可以显式给TabBar指定文字、图标颜色，直接读取当前上下文的主题色即可，不会和Material 3设计规范冲突：

TabBar(
  controller: _controller,
  labelColor: Theme.of(context).colorScheme.primary,
  unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
  tabs: const [
    Tab(
      icon: Icon(Icons.chrome_reader_mode),
      text: "List Hadits",
    ),
    Tab(
      icon: Icon(Icons.search),
      text: "Search Books",
    ),
  ],
)

注意：修改主题配置后热重载可能不会生效，完全停止应用后重新启动就能看到正常的配色效果。 #

内容的提问来源于stack exchange，提问作者Raka M.A