Flutter 3.16 升级后 UI 变化的恢复方法

问题现象

升级到 Flutter 3.16 后，用户界面通常会出现以下显著变化：

1. 应用栏阴影消失 - 滚动时应用栏呈现半透明底色且无阴影效果
2. 背景颜色改变 - 原白色背景变为带有主题色的浅色背景
3. 控件尺寸变大 - 按钮及间距等元素尺寸明显增大
4. 组件样式更新 - 对话框、时间选择器等组件显示为浅紫色（或当前主题色）

问题原因

这些变化源于 Flutter 3.16 默认启用了 Material 3 设计规范。这是 Flutter 框架的重大更新，包含在官方的破坏性变更列表中。

关键改变包括：

• 新的色彩系统和组件样式
• 更新的间距和尺寸规范
• 默认启用透明效果与阴影移除

解决方案

方案一：全局恢复 Material 2 样式

在主应用的 ThemeData 中禁用 Material 3：

MaterialApp(
  theme: ThemeData(
    useMaterial3: false, // 关键设置
    // 其他主题配置...
  ),
);

重要说明

此方案提供临时兼容方案，但未来 Material 3 将成为唯一支持的设计规范。官方建议逐步完成Material 3 迁移。

方案二：组件级样式修复

如只需调整特定组件，可针对性设置样式：

// 恢复应用栏白色背景
AppBar(
  surfaceTintColor: Colors.white, // 移除主题色透明层
  // ...
);

// 强制保持透明效果
AppBar(
  forceMaterialTransparency: true,
  // ...
);

完整主题配置示例

如需深度自定义，可扩展主题配置：

ThemeData customTheme = ThemeData(
  useMaterial3: false,
  appBarTheme: AppBarTheme(
    backgroundColor: Colors.white,
    surfaceTintColor: Colors.white, // 关键设置
  ),
  scaffoldBackgroundColor: Colors.white,
  dialogTheme: DialogTheme(
    backgroundColor: Colors.white,
  ),
  // 其他组件样式配置...
);

MaterialApp(
  theme: customTheme,
  // ...
);

迁移建议

何时应保留 Material 3？

• 全新项目建议直接采用 Material 3
• 现有项目如需保持现代设计风格，建议迁移

迁移步骤

1. 参考官方Material 3 迁移指南
2. 使用交互式 Material 2/Material 3 对比工具预览差异
3. 分阶段替换组件样式：

   ThemeData(
     useMaterial3: true, // 启用 M3
     extensions: [CustomThemeExtension()], // 渐进式自定义旧组件
   )

注意事项

1. 临时方案时效性：useMaterial3: false 是过渡方案，未来版本可能移除
2. 样式覆盖优先级：组件级样式设置优先于全局主题
3. 设计一致性：混合使用 Material 2/3 组件可能导致界面风格不统一

可视化对比参考：
Material 2 vs Material 3 实时对比
Flutter 3.16 完整更新日志