最近我（网友）成功开发了一款能快速预览SVGA动画的桌面小工具，整个过程没用自己写多少代码，靠的是AI编程工具Cursor和Flutter框架，今天就来和大家详细唠唠。这篇文章会从开发缘由、工具使用、开发过程到最终成果展示，一步步带大家了解，就算是技术小白也能看明白。

为啥要开发这个小工具？

平常我想看看SVGA动画啥样，操作特别繁琐。得先打开专门的预览网页，再把动画文件上传上去，才能看到效果。这一套流程下来太浪费时间了，对工作效率影响很大。我就琢磨着，要是能有个桌面应用，直接双击动画文件就能预览，还能显示动画的各种信息，那该多方便。

我本身是做移动端开发的，考虑到跨平台开发的需求，Flutter就成了最佳选择。它能让我一次编写，多平台使用，而且还有SVGA组件库，开发起来会更方便。但我已经有段时间没碰Flutter了，好多知识都生疏了，自己重新上手开发，估计得费不少功夫。

也是巧了，那段时间Cursor特别火，它是AI编程工具，能帮写代码。我就想着，要不就用它试试，顺便体验一把AI编程是啥感觉。

开发过程是怎样的？

开发的时候，我先创建了Flutter工程，这就相当于搭好了一个房子的框架。然后用Cursor打开这个工程，接下来就是和Cursor“对话”啦。在Cursor的COMPOSER里，我把需求用大白话写了出来：

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

写完需求，就等着Cursor干活了。虽然AI很厉害，但目前还做不到一步到位。代码生成后，我得仔细检查，看有没有问题。果然，发现了不少小毛病。我就像和同事沟通工作一样，把问题告诉Cursor，让它修改。就这样，发现问题、解决问题，反复循环。

神奇的是，在这个过程中，我几乎没写一行代码，全程就是用日常说话的方式和Cursor交流，真有一种当老板指挥员工干活的感觉。我和小伙伴一起，花了一下午时间，不断“调教”Cursor，它还真就把我想要的功能都实现了。不得不说，现在的AI技术是真强大。

下面来看看关键代码部分：

// main.dart文件中的代码，程序入口 void main(List<String> args) async { // 确保Flutter绑定初始化，为后续功能提供基础支持 WidgetsFlutterBinding.ensureInitialized(); // 检查是否已有实例在运行 var carRun = await SingleInstance.check(); if (carRun) { // 如果已有实例运行，则退出程序，避免重复运行 exit(0); } // 初始化窗口管理器，管理应用程序窗口相关事宜 await WindowManager.ensureInitialized(); // 设置窗口属性 WindowOptions windowOptions = const WindowOptions( size: Size(700, 600), center: true, backgroundColor: Colors.transparent, skipTaskbar: false, titleBarStyle: TitleBarStyle.normal, title: "SVGA预览器", ); // 配置窗口，等待窗口准备好显示，然后显示窗口并聚焦 await WindowManager.waitUntilReadyToShow(windowOptions, () async { await WindowManager.show(); await WindowManager.focus(); }); // 管理视图模型 final viewModel = SVGAViewModel(); // 设置方法通道处理文件打开，用于接收和处理用户打开的SVGA文件 }

这段代码主要是应用启动时的一些初始化操作，包括Flutter绑定、窗口管理和视图模型管理等。

最终成果咋样？

经过一下午的努力，这个SVGA动画预览小工具就诞生啦，它叫svga_previewer。

这个小工具使用起来非常方便，支持双击、拖拽，还能通过Finder选择SVGA文件，选好文件就能直接预览动画。在界面上，左侧是图片列表，里面的图片都是从SVGA文件里解析出来的。点击列表里的图片，右侧下半区就会展示这张图片，同时还会显示图片尺寸大小。右侧上半区是动画预览区，这里不仅能看到动画效果，还会展示动画的帧率、时长、内存占用等信息。

目前这个工具主要支持MacOS平台，毕竟是用AI快速开发的，代码质量还有很大的优化空间。我把代码放到了Github上，感兴趣的朋友可以去看看，地址是：点击直达。要是你在使用过程中有啥想法，或者发现了问题，欢迎一起交流。希望这篇文章能让大家对用AI开发应用有新的认识，要是能给你们带来启发，那就再好不过啦！