【Cursor初体验】AI开发 Flutter 应用:一款快速预览SVGA的桌面小工具

缘由

平时想预览SVGA动画,首先得打开预览网页,再把文件丢进去才能看到。

这样实在太麻烦了😫,所以一直以来都想开发一款可以快速SVGA动画的桌面应用,可以直接双击文件就能打开应用进行预览,并带上动画信息。

但是从没开发过桌面应用,对于我这种移动端开发,最好的选择是用Flutter去开发,跨平台 而且有SVGA组件库。不过由于太久没写Flutter,生疏了,临时上手有点费神🤯。

所幸听闻 Cursor 很火热,AI编程耶,正好来一次初体验。

启动

其实开发过程没什么好说的,首先创建好Flutter工程,然后用Cursor打开,在COMPOSER中给出自己的需求:

markdown 复制代码
帮我开发一个可以预览SVGA动画的MacOS应用,以下是应用的需求说明: 

1. 主要功能  
    - 可以预览SVGA动画
    - 解析SVGA文件中的所有图片,组成列表预览,可以切换选择其中一张进行展示
    - 需要展示SVGA的帧率、时间、内存占用等信息 
    - 能够双击打开、拖拽放入、Finder选择SVGA文件
        
2. UI需求 
    - 左侧为图片列表,可以点击选择其中一张在右侧下半区进行展示
    - 右侧上半为动画预览区,并带有动画信息(帧率、时间、内存占用)
    - 右侧下半为图片列表中的单张图片展示区及其尺寸大小

接下来就等Cursor去编辑代码了,当然AI现在还不是万能的,不可能一步到位,还是需要咱们去检查验收。期间会有很多的小问题,发现后叫Cursor去解决,再发现再解决,如此循环👀。

但是在这个过程中,基本没写过一句代码,全程都是口语化交流,有种当老板在指导员工干活的感觉😏。

在我和小伙伴的反复调教下,仅仅一个下午的时间,Cursor就完成了我的基本需求,不得不感叹现在AI的强大🙇‍♂️。

最后就简单介绍一下该应用吧~

成果

svga_previewer,一款快速预览SVGA的桌面小工具。

  • 支持双击、拖拽、选择的方式以打开SVGA文件直接预览。
  • 使用Flutter+Cursor开发,主要支持MacOS平台(代码质量有待优化,毕竟用的AI快速开发🤖)。

Github地址:github.com/Rogue24/JPS...

相关推荐
Apifox1 分钟前
如何让 Apifox 发布的在线文档具备更好的调试体验?
前端·后端·测试
2501_916013742 分钟前
App 上架全流程指南,iOS App 上架步骤、App Store 应用发布流程、uni-app 打包上传与审核要点详解
android·ios·小程序·https·uni-app·iphone·webview
咔咔一顿操作5 分钟前
【CSS 3D 交互】打造沉浸式 3D 照片墙:结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
0x0007 分钟前
Uniapp - 自定义 Tabbar 实现
前端·uni-app
用户458203153179 分钟前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
牛蛙点点申请出战10 分钟前
仿微信语音 WaveView 实现
android·前端·ios
yiyesushu11 分钟前
react + next.js + ethers v6 项目实例
前端
明远湖之鱼13 分钟前
巧用 Puppeteer + Cheerio:批量生成高质量 Emoji 图片
前端·爬虫·node.js
落笔忆梦14 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
艾小码15 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js