flutter项目中使用阿里图标库自定义图标步骤，5分钟搞定

news2024/11/28 12:47:23

因为flutter自带的图标可能并不能满足业务需求，所以需要加入图标非常丰富的阿里图标库的支持，阿里图标库的地址：iconfont-阿里巴巴矢量图标库，先看一下使用阿里图标库后的效果图：网页端和手机端都是可以正常运行的，而且效果很不错

所以就开始今天的使用教程吧。阿里图标库需要登录才可以使用，所以记得登录

搜索需要的图标

在阿里图标库中搜索需要的图标，然后看到想要的图标后，加入到自己的购物车中：

等选择够自己想要的图标后，就可以将选择后的图标下载下来：下载代码

然后解压下载后的文件，将iconfont.json和iconfont.ttf文件导入到flutter中：

将图标导入项目

在flutter项目根目录创建一个fonts文件夹，然后将字体文件导入，并且需要在pubspec.yaml中将字体文件引入：family可以随便写，fonts下面写文件路径

  fonts:
    - family: Alias
      fonts:
        - asset: fonts/iconfont.ttf

创建自定义图标类

然后在components中创建自己的自定义图标类：

创建的时候，IconData中的第一个参数是对应图标在字体文件中的数字，打开iconfont.json这个文件，里面的unicode_decimal对应的数字就是了，第二个参数是你在pubspec.yaml中写的family名字

自定义图标类代码：

import 'package:flutter/material.dart';

class IconFont {
  static const IconData shengban =
      IconData(58906, fontFamily: "Alias", matchTextDirection: true);
  static const IconData folder =
      IconData(58932, fontFamily: "Alias", matchTextDirection: true);
  static const IconData home =
      IconData(58934, fontFamily: "Alias", matchTextDirection: true);
  static const IconData cancel =
      IconData(58931, fontFamily: "Alias", matchTextDirection: true);
  static const IconData weixin =
      IconData(983302, fontFamily: "Alias", matchTextDirection: true);
  static const IconData zhifb =
      IconData(58964, fontFamily: "Alias", matchTextDirection: true);
}

在lib>components中创建：