Flutter 中使用svg资源

svg作为一种矢量图,在屏幕适配方面具有很大优势,且不需放多套资源,能在一定程度减小包的体积大小。但是想在Flutter中直接使用svg资源,却并不是非常方便,这里介绍一种简洁的方式来使用svg矢量图,前提是需要转换,转换并不保证完全等同原图,请自行验证。

在线转换

首先准备好几张svg资源
在这里插入图片描述
将资源拖拽上传到 http://fluttericon.com/网站
在这里插入图片描述
上传完成后,点击【DOWNLOAD】下载

导入并配置

将下载的压缩包解压,获得fonts文件夹和一个dart文件,其中两个默认文件为MyFlutterApp.ttfmy_flutter_app_icons.dart

  1. fonts文件夹复制到工程根目录下,注意,与lib文件夹在同一级
  2. my_flutter_app_icons.dart文件复制到lib文件夹下,或者是lib下的其他目录,依据自己的代码目录结构来
  3. 查看my_flutter_app_icons.dart文件,依据其中的注释说明,配置工程的pubspec.yaml文件
    flutter:
      fonts:
      - family:  MyIcons
        fonts:
          - asset: fonts/MyFlutterApp.ttf
    
  4. 修改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);
    }
    
  5. 依据自身习惯,可将my_flutter_app_icons.dart文件重命名为my_icons.dart,这样导包语句可以变短

代码中使用

使用方式同Icons中的常量,首先导入my_icons.dart

Container(child: Center(child: Icon(MyIcons.smile)));

在这里插入图片描述

欢迎关注我的公众号:编程之路从0到1

在这里插入图片描述

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值