【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...

相关推荐
c***V3232 小时前
Vue优化
前端·javascript·vue.js
李@十一₂⁰4 小时前
HTML 特殊字体符号
前端·html
小奶包他干奶奶6 小时前
Webpack学习——Loader(文件转换器)
前端·学习·webpack
zy happy7 小时前
若依 vue3 报错:找不到模块“@/api/xxxx/xxxxx”或其相应的类型声明。。Vue 3 can not find mod
前端·javascript·vue.js
潘小安7 小时前
Git Worktree + Claude Code:让你的开发效率翻倍的秘密武器
前端
meichaoWen7 小时前
【Vue3】vue3的全面学习(一)
前端·javascript·学习
小猪努力学前端8 小时前
在 React + React Router v7 SSR 项目里做多端适配,我踩的两个坑
前端·react.js
q***d1738 小时前
React桌面应用开发
前端·react.js·前端框架
8***29318 小时前
解决 Tomcat 跨域问题 - Tomcat 配置静态文件和 Java Web 服务(Spring MVC Springboot)同时允许跨域
java·前端·spring
0***148 小时前
React计算机视觉应用
前端·react.js·计算机视觉