svg作为一种矢量图,在屏幕适配方面具有很大优势,且不需放多套资源,能在一定程度减小包的体积大小。但是想在Flutter中直接使用svg资源,却并不是非常方便,这里介绍一种简洁的方式来使用svg矢量图,前提是需要转换,转换并不保证完全等同原图,请自行验证。
在线转换
首先准备好几张svg资源
将资源拖拽上传到 http://fluttericon.com/网站
上传完成后,点击【DOWNLOAD】下载
导入并配置
将下载的压缩包解压,获得fonts
文件夹和一个dart
文件,其中两个默认文件为MyFlutterApp.ttf
和my_flutter_app_icons.dart
- 将
fonts
文件夹复制到工程根目录下,注意,与lib
文件夹在同一级 - 将
my_flutter_app_icons.dart
文件复制到lib
文件夹下,或者是lib
下的其他目录,依据自己的代码目录结构来 - 查看
my_flutter_app_icons.dart
文件,依据其中的注释说明,配置工程的pubspec.yaml
文件flutter: fonts: - family: MyIcons fonts: - asset: fonts/MyFlutterApp.ttf
- 修改
my_flutter_app_icons.dart
文件中的类名,可根据自己的习惯修改,我这里将MyFlutterApp
修改为MyIcons
,注意将构造方法等等统一重命名为MyIcons
class MyIcons { MyIcons._(); static const _kFontFam = 'MyIcons'; static const IconData smile = const IconData(0xe801, fontFamily: _kFontFam); static const IconData meh = const IconData(0xe802, fontFamily: _kFontFam); static const IconData frown = const IconData(0xe803, fontFamily: _kFontFam); }
- 依据自身习惯,可将
my_flutter_app_icons.dart
文件重命名为my_icons.dart
,这样导包语句可以变短
代码中使用
使用方式同Icons
中的常量,首先导入my_icons.dart
Container(child: Center(child: Icon(MyIcons.smile)));