Flutter自定义iconfont字体图标

在实际开发过程中Flutter框架自带的Material图标并不能满足我们项目的实际需求，因此一般情况下我们需要在项目中添加我们自己的字体图标（iconfont），在国内我们一般使用iconfont-阿里巴巴矢量图标库管理我们的字体图标，所以本文示例也是以此为例去给大家讲一下如果在Flutter项目中添加自定义字体图标。

添加自定义字体图标其实并不是很复杂，希望我这篇文章可以帮助到大家。

一、获取自定义图标

第一步、我们需要注册一个阿里巴巴矢量图标库网站账号，登录账号之后，在项目管理——我的项目中新建项目。

第二步、上传自己的图标至项目中，或者将别人公开的图标添加至自己的项目当中。

第三步、将图标下载至本地，将解压出的iconfont.ttf 文件添加至我们的flutter项目中。

二、将图标集成在Flutter项目中

第一步、在flutter项目根目录下新建assets文件夹，存放我们的字体图标及图片等静态文件。

第五步、在根目录的pubspec.yaml配置文件中添加我们的字体图标文件。

flutter:
  uses-material-design: true
  assets:
    #   - images/a_dot_burr.jpeg
    #   - images/a_dot_ham.jpeg
    - assets/images/home_logo.png
  # list giving the asset and other descriptors for the font. For
  # example:
  fonts:
    - family: iconfont
      fonts:
        - asset: assets/fonts/iconfont.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

至此，我们已经成功的将我们自己的图标字体文件集成在了我们的Flutter项目中。

我们可以使用如下代码在项目中展示我们的自己的图标。

const Icon(
  IconData(
    0xe794, // 字体图标对应的16进制数字
    fontFamily: 'iconfont', // 字体名称
  ),
  size: 26, // 指定字体图标的大小
  color: Color.fromRGBO(255, 146, 1, 1), // 指定字体图标的颜色
  )
)

如何获取字体图标对应的16进制的数据呢？

下载下来的字体图标解压之后有一个iconfont.json文件，打开文件每一个图标都对应一个unicode编码，我们拿到对应的unicode在前面加上0x即可获得我们所需图标对应的16进制的数据。

三、封装管理自定义图标

大家可以看到每次查看这个unicode码是比较麻烦的，所以我们可以进一步封装，将所有图标封装成一个类，在这个类里面存放我们所有的图标，然后提供一个获取图标的工具函数，实现入下。

// 提供所有图标的类
import 'package:flutter/material.dart';
class IconFonts {
  static const IconData messageLine = IconData(
    0xe6fe,
    fontFamily: 'iconfont',
  );
  static const IconData messageFill = IconData(
    0xe6fc,
    fontFamily: 'iconfont',
  );
  static const IconData driveLine = IconData(
    0xe7ce,
    fontFamily: 'iconfont',
  );
 // 其他所有图标都尾货在这里……
}

// 获取图标的工具函数
Icon getIcons(IconData icon, {double size = 20, Color color = Colors.black}) {
  return Icon(
    icon,
    size: size,
    color: color,
  );
}

至此，我们实现了对于自定义图标的简单封装，接下来我们看看如何去使用。

// 通过入下这行代码，我们获取了我们自定义的分享的图标，同时我们也修改了默认设置的颜色和图标大小
getIcons(IconFonts.shareFill,size: 26.0, color: Colors.white),

其实，在这里这篇文章已经可以说是完结了，但是下面我抛出的问题也希望大家可以自己思考并实现一下。

四、新的封装思路供大家探讨

但是我感觉去手动维护存放我们所有图标的那个类，比较玛麻烦，目前我的想法是通过加载之前我们提到的iconfont.json这个文件里面的数据去自动生成这么一个类。

关于具体的实现，且见下回分享。还请大家来个一键三连（关注、点赞、收藏）和评论。

往期内容：

一、【Flutter开发环境搭建】Java SDK安装

二、【Flutter开发环境搭建】Android SDK、Dart SDK及Flutter SDK安装_

三、Flutter路由传参

四、flutter全局状态管理Provider

五、半天时间掌握Dart开发语言-基础学习

六、半天时间掌握Dart开发语言-类的学习