企业官网建设流程全解析

Material 2 还是 Material 3？parabeac_core 设计系统迁移实战指南

【免费下载链接】parabeac_coreContinuous Design / Continuous Integration for Figma to Flutter项目地址: https://gitcode.com/gh_mirrors/pa/parabeac_core

parabeac_core是一款将Figma 设计稿直接转换为 Flutter 代码的开源工具，支持"持续设计 / 持续集成"的工作流。它内置了Material 2 与 Material 3 两套设计系统导出模式：只需一行配置，就能决定生成代码中的TextTheme使用哪一代 Material 命名规范。本文将从零基础讲起，帮你快速完成设计系统选择与迁移。

为什么 Material 2 与 Material 3 的选择如此重要

很多 Flutter 新手遇到过这样的困惑：TextTheme里既有headline1、bodyText1，又有headlineLarge、bodyLarge，到底该用哪套？

这是 Google Material Design 升级留下的"遗产"：

• Material 2使用headline1~6、bodyText1/2、caption、button等字段，目前已全部标记为废弃（deprecated）
• Material 3重新命名为语义化字段：headlineLarge/Medium/Small、titleLarge/Medium/Small、bodyLarge/Medium/Small、labelLarge/Medium/Small

官方 README 也明确提示：Material 2 最终会被移除。如果你的生成代码基于 Material 2 字段，未来升级 Flutter 时会出现大量编译告警甚至报错。

parabeac_core：Figma 转 Flutter 的自动化桥梁

parabeac_core 会解析 Figma 文件中的屏幕、组件与全局样式，自动输出结构清晰的 Flutter 工程：

比如这样一个 Figma 屏幕，会被直接转换为一屏可运行的 Flutter 页面：

而 Figma 中的组件，会被转换为可复用的独立 Widget：

快速上手：三种方式指定设计系统

方式一：修改配置文件（推荐） 📄

打开项目内的 lib/configurations/configurations.json，将designSystem字段改为你需要的值：

{ "designSystem": "material3" }

该配置由 pb_configuration.dart 读取，默认值就是material3（见文件第 56 行的defaultValue: 'material3'），所以什么都不改也会走 Material 3。

方式二：命令行参数

运行时通过-d/--design-system参数覆盖配置文件：

dart parabeac.dart -f <Figma文件ID> -k <Figma密钥> -o <输出路径> -d material3

方式三：保持默认

新建项目什么都不做即可——项目已将 Material 3 作为默认设计系统，配置会随 PBDL 中间格式一路传递（见 figma_to_pbdl_service.dart 中的designSystemType字段），最终决定生成代码的样式命名。

两种模式生成的主题代码有什么区别？

选中设计系统后，全局样式聚合器 global_styling_aggregator.dart 会拆解出三个后处理任务，分别由独立文件负责生成：

• 🎨 颜色常量 → colors_post_gen_task.dart
• ✏️ 文字样式常量 → text_styles_post_gen_task.dart
• 🧩 主题组装（TextTheme / ColorScheme / ThemeData）→ theming_post_gen_task.dart

最终产出的主题文件示意（Material 3 模式）：

final textTheme = TextTheme( bodyLarge: FooTextStyles.bodyLarge, headlineMedium: FooTextStyles.headlineMedium, // ... 全部为非废弃的 M3 字段 );

字段命名对照表，帮你一眼看懂两代差异：

值得一提的是，聚合器内部维护了一份新旧命名双兼容的样式清单（_textStyleList同时包含bodyText1与bodyLarge等），因此无论你的 Figma 设计稿按哪套命名书写全局样式，都能被正确识别并归一导出。相关行为可由黄金测试 global_styling_test.dart 验证。

迁移实战：新手怎么选、怎么迁？

新项目：直接用 Material 3 ✅

保持默认配置即可，无需任何额外操作。生成代码零废弃告警，天然面向未来。

老项目从 Material 2 迁移到 Material 3 🔄

1. 将configurations.json中designSystem改为"material3"（或删除该字段使用默认值）
2. 重新运行生成，替换旧的lib/theme目录下的*_theme、*_text_styles.g.dart、*_colors.g.dart
3. 全局搜索旧字段名（headline1、bodyText1、caption等），按上方对照表替换为新命名
4. 运行flutter analyze确认无废弃告警

💡 小建议：由于 parabeac_core 的核心价值是"设计稿改一次，代码自动重生成"，迁移最佳时机是趁手边正好要重新生成一版代码时顺手完成，改动成本几乎为零。

常见问题 FAQ

Q：Material 2 模式还会支持多久？A：官方文档已明确 Material 2 属于过渡选项，最终会被废弃移除，建议不要在新项目中使用。

Q：不指定 designSystem 会怎样？A：自动使用material3，这是 pb_configuration.dart 中写死的默认值。

Q：设计系统会影响颜色吗？A：不影响。颜色常量文件两种模式下完全一致，差异只在TextTheme的字段命名上。

写在最后

一句话总结：新项目无脑 Material 3，老项目借下一次生成完成平滑迁移。parabeac_core 把设计系统选择收敛成一行配置，让你可以把精力留在设计稿本身，而不是命名规范的迁移细节上。

【免费下载链接】parabeac_coreContinuous Design / Continuous Integration for Figma to Flutter项目地址: https://gitcode.com/gh_mirrors/pa/parabeac_core