pxcook可通过内置flutter导出、pxcode插件、json中间格式及人工调整四步实现设计稿转widget代码：启用插件→配置参数→导出.dart文件→增强结构识别→生成json→脚本解析→适配主题与响应式。
如果您在使用PxCook设计稿工具时，希望将视觉设计直接转换为Flutter可使用的Widget样式代码，则需要借助PxCook内置的代码导出能力或第三方插件支持。以下是实现该目标的具体操作路径：
一、启用PxCook内置Flutter代码导出功能
PxCook 4.x及以上版本原生支持Flutter代码生成，需确保已开启对应插件模块并配置正确的目标平台参数。该功能基于图层结构与样式属性映射，自动生成包含Container、Text、Column等基础Widget的Dart代码片段。
1、打开PxCook软件，导入Sketch或PSD格式的设计稿文件。
2、点击顶部菜单栏【插件】→【代码导出】→【Flutter】选项。
3、在弹出面板中勾选【生成Widget类】与【保留图层命名】两项。
4、设置单位换算比例，默认为1px = 1.0逻辑像素，如需适配多密度屏幕，修改为1px = 0.5或1px = 1.5。
5、点击【导出】按钮，选择保存路径，生成以.dart为后缀的代码文件。
二、使用PxCode插件增强Flutter代码生成能力
PxCode是PxCook官方推荐的扩展插件，支持更精细的Widget结构识别，例如自动识别圆角矩形为RoundedRectangleBorder、文字行高映射为TextStyle.height等。该插件弥补了基础导出中对复杂嵌套和状态样式支持不足的问题。
1、访问PxCode官网下载最新版插件安装包（.pxplugin格式）。
2、在PxCook中进入【设置】→【插件管理】→【手动安装】，选择下载的文件完成加载。
3、重启PxCook后，在图层面板右键任意图层，出现【复制为Flutter Widget】快捷项。
4、选中多个图层后执行该命令，插件将按层级顺序生成嵌套的Column、Row或Stack结构代码。
5、粘贴至VS Code或Android Studio中，注意检查颜色值是否已自动转为Color.fromRGBO格式。
三、通过JSON中间格式手动转换为Flutter代码
当设计稿含大量自定义阴影、渐变或SVG图标时，直接导出可能丢失部分样式信息。此时可先导出为标准JSON描述文件，再利用本地脚本解析生成强类型Dart代码，提升可控性与可维护性。
1、在PxCook中选中目标画板，点击【文件】→【导出为JSON】→【完整样式数据】。
2、保存生成的pxcook_export.json文件至本地项目assets目录下。
3、运行Python脚本parse_flutter.py，传入JSON路径及目标Dart类名参数。
4、脚本将输出包含const构造器、build方法及样式的完整StatelessWidget类文件。
5、生成代码中所有尺寸单位均为逻辑像素，无需额外除以devicePixelRatio。
四、调整导出代码以匹配Flutter项目规范
PxCook导出的代码默认以独立Widget形式存在，未考虑主题继承、响应式断点或国际化适配。需人工介入修正命名冲突、注入Theme.of(context)调用，并替换硬编码字符串为AppLocalizations引用。
1、将导出文件中的class名称由AutoGenWidget改为符合项目命名规范的名称，如HomePageHeader。
2、查找所有Color.fromRGBO(…)调用，将其替换为Theme.of(context).colorScheme.primary等语义化引用。
3、将固定宽度高度数值（如width: 375.0）改为MediaQuery.of(context).size.width * 0.9形式。
4、删除代码顶部自动生成的import 'package:flutter/material.dart';重复引用行。
5、务必验证Text组件的fontSize是否已按设计稿字号×0.85缩放，避免iOS平台显示过大。
