求助：如何用Flutter实现Figma设计的同款Widget

附设计稿UI：一张任务类卡片布局，包含文字信息、操作按钮等核心元素

• 先拆设计结构：把Figma里的UI拆解成独立模块，比如顶部信息栏、任务内容块、底部操作区，逐个实现后再组合，避免混乱
• 提取设计参数：从Figma导出颜色值、字体大小/样式、圆角、间距、阴影参数，定义成全局常量，比如 const Color taskCardBg = Color(0xFFF5F5F5)，确保样式完全匹配
• 基础组件选型：
  • 卡片容器用Container搭配BoxDecoration，自定义圆角、阴影、背景色，比Card更灵活
  • 文字用Text组件，通过style属性设置字体大小、颜色、字重，完全对齐Figma规范
  • 图标用系统Icon组件或本地资源Image.asset，按设计稿尺寸调整大小
• 布局组合：用Column、Row实现线性排列，Padding、SizedBox控制元素间距，复杂层叠效果用Stack处理
• 细节打磨：调整按钮点击态、文字行高、元素对齐方式，对比Figma逐像素微调，比如设计稿中文字左对齐就不要设为居中
• 测试验证：运行项目后，用Flutter DevTools的布局检查工具核对间距、尺寸，确保和设计稿完全一致

如果能补充设计稿的具体元素细节（比如是否包含头像、进度条、标签等），可以提供针对性的代码片段。

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