用Flutter开发一个图片压缩工具（Windows）

没有你的陪伴我好孤单

介绍

不知不觉Flutter已经更新了3.0版本了，已经支持打包桌面应用了，这次来体验一下使用Flutter开发一个桌面版的图片压缩工具，打个Windows包。
Flutter项目搭建

根据官方文档下载SDK并配置，还是比较顺利的。我这里使用VsCode开发，在菜单栏中选择View > Command Palette，点击 Flutter: New Project，创建Flutter初始项目。


实现功能点

• 整体UI搭建
  
• 图片压缩实现（引入并调用jpeg-recompress和pngquant）
  
• 文件/文件夹拖入检测
  
• 压缩状态、进度、结果展示
  

UI搭建

Flutter提供了很多Widget，有很多前端开发非常熟悉的字段，比如flex、border、background等等都能在Flutter组件中找到，还是很亲切的。使用Container、Column、Row能像前端一样快速的进行flex布局，非常方便。UI更新使用setstate方法，用过react的同学应该也会很熟。



部分UI代码



UI展示

UI调试

VsCode的Flutter插件可以方便查看UI，有查看元素、布局、属性的功能，和Chrome的F12比较类似，这样查找UI问题就很快啦。


图片压缩实现

这里调研了一下图片压缩的手段，使用两个已有的图片压缩库来压缩PNG和JPG：jpeg-recompress和pngquant。下载它们已经打包好的exe文件到项目中，在dart代码中使用Process开启新的进程去跑这两个可执行文件进行压缩图片。



调用部分关键代码

文件/文件夹拖入检测

这里使用Flutter三方库desktop_drop，用起来就比较简单了，大家可以看它的文档。



desktop_drop使用

这样就获得了文件或者文件夹下所用文件的路径，把它们都处理成一个list，依次调用exe去压缩就可以了。
压缩状态、进度、结果展示

这里涉及到UI的更新，UI列表使用ListView去搭建。



ListView相关代码

对于每一个UI项，我们设计这样一个数据结构FileDataItem，里面包含了文件路径、文件初始大小、文件压缩后的大小、当前文件的状态（初始/压缩成功/压缩失败）。


通过setState方法去更新列表的UI


压缩过程中UI展示


打包和结构

打包windows的命令如下，--dart-define可以自定义一些环境变量
flutter build windows --dart-define=RunEnv=dist打包出来的文件结构是这样的，包含一个可执行文件exe，总大小22.1MB，还是挺小的


总结

使用Flutter开发桌面应用体验还是挺不错的，环境搭建简单，打包包体小，开发效率熟悉之后还是挺高，UI和三方库也比较健全，学习成本也相对较低，是现在开发桌面应用非常不错的选择。
最后放上github地址，大家可以自己去看源码，喜欢的可以给个star哦，在releases里有已经打好的包，大家可以自己下载。