Flutter启用Material3后控件及文本过度放大问题咨询

问题描述 #

启用useMaterial3: true后，按钮、文本等组件尺寸远大于正常显示，界面占用空间大幅增加；关闭Material3则显示正常，而官方Material3示例无此问题。当前主题配置已简化为：

ThemeData(
  visualDensity: VisualDensity.compact,
  useMaterial3: true,
  colorScheme: darkColorScheme,
)

关闭Material3的显示效果：

启用Material3主题时的显示效果：

原因分析 #

Material3的设计规范与Material2存在差异，默认组件内边距、排版基线、形状参数都有调整。你的简化配置仅设置了配色方案和启用标识，缺失了Material3默认的排版系统、组件样式等关键配置，导致组件未按规范适配尺寸，出现过度放大。

解决方案 #

1. 使用ThemeData.from构造完整Material3主题 #

ThemeData.from会自动继承Material3的默认排版、组件样式等配置，避免手动构造时的参数缺失：

ThemeData.from(
  colorScheme: darkColorScheme,
  useMaterial3: true,
  visualDensity: VisualDensity.compact,
)

2. 手动指定Material3排版系统 #

如果需要自定义部分参数，可手动配置Material3专属的排版，确保文本、组件尺寸符合规范：

ThemeData(
  useMaterial3: true,
  colorScheme: darkColorScheme,
  visualDensity: VisualDensity.compact,
  typography: Typography.material2021(), // 启用Material3排版标准
)

3. 升级Flutter到稳定版 #

早期Flutter版本对Material3的实现可能存在尺寸适配bug，建议升级到3.10及以上的稳定版本，修复已知的组件尺寸异常问题。

补充说明 #

官方Material3示例使用了完整的主题配置，包含默认的排版、组件形状、间距等参数，因此显示正常。你的简化配置仅覆盖了配色，未继承Material3的核心样式规则，才会出现视觉差异。

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