Flutter中showAboutDialog样式问题：版本不可见、许可证页AppBar消失

问题分析 #

你的showAboutDialog出现版本信息几乎不可见、许可证页面AppBar完全消失的问题，核心原因是全局主题中白色文字（#ffffff）与组件默认背景色对比度不足，加上Material3的样式继承逻辑放大了冲突。

解决方案 #

方案1：单独给AboutDialog设置主题 #

调用showAboutDialog时，通过theme参数覆盖冲突样式，确保文字和背景有足够对比度：

showAboutDialog(
  context: context,
  applicationName: translate('title'),
  applicationVersion: packageInfo.version,
  children: [
    const Image(
      image: AssetImage('assets/images/icon_number.png'),
      height: 150,
    ),
  ],
  theme: Theme.of(context).copyWith(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Helpers().colors['buttonBg'],
      brightness: Brightness.light,
    ),
    textTheme: Theme.of(context).textTheme.copyWith(
      bodyMedium: TextStyle(color: Helpers().colors['background']),
    ),
  ),
);

方案2：修复全局主题配置 #

调整全局ThemeData的关键参数，从根源解决组件样式冲突：

theme: ThemeData(
  appBarTheme: AppBarTheme(
    systemOverlayStyle: SystemUiOverlayStyle.dark,
    foregroundColor: Helpers().colors['text'],
    backgroundColor: Helpers().colors['background'], // 给AppBar添加深色背景，解决许可证页面AppBar不可见
  ),
  textTheme: TextTheme(
    bodyLarge: TextStyle(color: Helpers().colors['text']),
    bodyMedium: TextStyle(color: Helpers().colors['text']),
    bodySmall: TextStyle(color: Helpers().colors['text']),
  ),
  primaryColor: Helpers().colors['buttonBg'], // 替换白色primaryColor为深色按钮背景
  colorScheme: ColorScheme.fromSeed(
    seedColor: Helpers().colors['buttonBg'],
    brightness: Brightness.light,
  ),
  scaffoldBackgroundColor: const Color(0xFFEFEFEF),
  useMaterial3: true,
  fontFamily: 'GochiHand-Regular',
),

关键说明 #

• 许可证页面的AppBar继承全局AppBarTheme，添加backgroundColor后，白色文字会显示在深色背景上，解决消失问题。
• 避免用白色作为primaryColor，Material3中primaryColor影响大量组件的默认样式，白色会导致文字与浅背景冲突。

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