改组件太绕?这款Skill单独预览

为Flutter组件添加交互式预览和测试环境。

flutter-add-widget-preview 是帮助开发者为 Flutter 组件添加独立交互预览的 Skill。你提供要检查的组件、样例数据和主题要求,AI 会准备预览入口,让它脱离完整应用流程单独呈现。

例如调整一张卡片的间距和深浅色表现,不必每次从登录页一路点到目标页面。文档支持给同一个目标配置多个预览,也可以复用主题和尺寸设置,便于一起观察不同状态。

预览入口需要符合工具要求。组件有必填参数时,可以通过提供样例值的函数包装;缺少边界约束时,则应明确预览尺寸,否则看到的布局未必是实际需要的样子。

它运行在网页环境,原生插件以及依赖 dart:io、dart:ffi 的部分可能无法直接使用,需要为预览处理这些依赖。预览正常也不代表真机的平台能力已经验证。

适合反复调整组件外观和局部交互的开发工作。使用前应核对 Flutter 与 IDE 的支持版本,再运行预览、观察更新和错误。复杂全局状态变化还可能需要重新启动预览,而不是只等一次局部刷新。

分类:编程开发

来源仓库:flutter/agent-plugins

适合用来做什么

  • 向项目添加一个新的交互式小部件预览。
  • 使用previews.dart系统更新现有屏幕的预览。

安装 flutter-add-widget-preview

npx skills add https://www.iskills.cc/skills/flutter/agent-plugins/flutter-add-widget-preview/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 flutter-add-widget-preview 的用途与原始说明

浏览全部 Skill 指南