https://www.iconfont.cn/ 为我们提供了海量的矢量图标资源,在Flutter中使用这些资源也还方便,但是在下载大量资源后,仍然需要手动做一些事情,这不符合程序员能偷懒就偷懒的精神,所以我做了这个简单工具,希望对大家有所帮助。
flutter_iconfont 传送门
使用说明
使用git clone 或者直接download zip文件到本地
进入iconfont网站,选取想要的icon到购物车,最后【下载代码】
将下载的压缩包解压到任意目录,或者解压到flutter_iconfont工程的tool目录下,如下图所示。注意,如解压到其他任意目录下,在第4步运行生成工具时,需要传入解压路径
进入tool目录,执行python generate.py,生成dart文件。注意,如解压到其他目录,执行时需带上解压的目录 python generate.py "dir path"。 关于Python环境的问题,generate.py同时兼容py2和py3,通常Mac os都自带有Python环境,但可能未安装BeautifulSoup库,在运行脚本前,可以通过以下命令安装python -m pip install beautifulsoup4; Windows用户如从未安装过Python环境,建议直接使用我编译好的exe程序,下载解压后将generate.exe拷贝至tool目录下点击即可执行。如需要指定资源目录,在tool目录下打开cmd命令行,执行generate "dir path"指定下载的icon资源目录
进入lib目录下查看flutter_iconfont.dart文件,如下例子所示,将变量修改为适当的名字,这一步很重要,如果在iconfont中搜索的icon资源都是中文名,则生成的变量也是中文名,应修改为英文字母,还应当检查是否存在变量同名情况,确认IconFonts类无误即可。建议打开解压资源包中的html文件,对照图标进行变量命名
class IconFonts{ IconFonts._(); static const IconData arrow_down = const IconDataEx(0xe623); static const IconData arrow_down = const IconDataEx(0xe61a); static const IconData arrow_down = const IconDataEx(0xe776); static const IconData Arrow_down = const IconDataEx(0xe62e); static const IconData Arrow_down_1 = const IconDataEx(0xe6bd); static const IconData Arrow_down_4 = const IconDataEx(0xe6be); static const IconData Arrow_down_3 = const IconDataEx(0xe6bf); static const IconData Arrow_down_2 = const IconDataEx(0xe6c1); } 本地离线库已准备妥当,在项目工程的pubspec.yaml中添加本地库即可使用。将 path 指向你下载的flutter_iconfont库的实际路径,更新一下yaml配置文件 dependencies: flutter_iconfont: path: F:\git_code\flutter_iconfont 代码使用 import 'package:flutter_iconfont/flutter_iconfont.dart'; return Center(child:Icon(IconFonts.Arrow_down))欢迎关注我的公众号:编程之路从0到1
血色v残阳 认证博客专家 编程达人 Flutter 课程讲师 掌握C、Java、Python、Go、Dart语言等多种编程语言,擅长GUI开发,曾从事Android原生开发,Flutter跨平台开发等等工作微信公众号:“编程之路从0到1”