Flutter自定义Icon的简易使用(两种)

方式一:利用第三方库(建议)

1、在阿里图标库(iconfont-阿里巴巴矢量图标库)上,加载购物车后,点击“下载素材”svg。

2、把下载的图片放入asstes目录下。​​​​​​​

3、修改yaml配置文件,设置Icon图标所在路径,导入插件,并Pub一下。

flutter:
  uses-material-design: true
  assets:
     - assets/icons/        //设置图标目录路径
dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_svg: ^2.0.10+1    //导入插件

4、在任意地方使用自定义类

方式二:纯手动集成使用(有概率显示"?X")

1、 在阿里图标库(iconfont-阿里巴巴矢量图标库)上,加载购物车后,点击“下载代码”。

2、把下载好的文件字体放入asstes目录下,并查看“iconfont.json”对应的图标unicode码。

3、修改yaml配置文件,给字体命名,设置Icon图标所在路径,并Pub一下。​​​​​​​

fonts:
     - family: HeiseIcon  # 自定义的字体家族名字
       fonts:
         - asset: assets/fonts/iconfont.ttf   # 字体文件路径

4、在任意地方使用自定义类

//一:用IconData生成Icon
Icon(IconData(0xf00a1, fontFamily: "MyIcon", matchTextDirection: true))

注释:0xf00a1  0x表示的是十六进制的前缀编码    f00a1表示的是unicode编码

//二:或者用Text生成Icon
Text(
    String.fromCharCode(0xf00a1),
    style: TextStyle(
    fontSize: 30,
    fontFamily: "MyIcon"
)

注意: 显示出现 "X  ?" 等情况,情况有多种:

        一:是配置文件yaml里引用地址、文件名没有一一对应。

        二:是修改配置文件后忘记pub。

        三:没有清除缓存,在项目中执行"flutter clean"。

        四:机器识别不了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值