Flutter使用自定义icon

前言

在flutter中，为我们提供了大量的icon字体图标，当这些图标满足不了我们时，我们就需要使用自定义的icon图标。作为演示，本文章的字体图标文件是在阿里巴巴图标库，下载的。

一、下载自定义的icon文件

在阿里巴巴图标库中，找到自己需要的图标添加至项目中，进行下载
下载后是一个压缩包，解压后我们在这里只需要这两个文件
我们把后缀名为：.ttf 的文件放到flutter文件的assets/fonts/下面，这个文件需要我们自己创建，在开发文件的根目录创建即可
创建完后我们用编辑器打开flutter文件，进行配置（本文这里用的是vscode，其他编辑器可根据具体情况配置）

二、配置文件

在pubspec.yaml文件中配置以下内容,其中family属性是自己定的不做标准规范

  fonts:
    - family: myIcons
      fonts:
       - asset: assets/fonts/iconfont.ttf

三、定义自定义图标的名称

我们定义一个MyIcons类，给我们添加的图标定义名称.
这里面有三个值，第一个是我们图标的codePoint值，第二个是我们在配置文件时，写的family值，第三个代表是否跟随文字的方向，一般为true。

import 'package:flutter/material.dart';
// 下面代码中的 blog home book 是自己定义的图标名称，
//不做规范适情况而改。
class MyIcons{
  static const IconData blog= const IconData(
    0xe722,
    fontFamily: "myIcons",
    matchTextDirection: true
  );
    static const IconData home= const IconData(
    0xe619,
    fontFamily: "myIcons",
    matchTextDirection: true
  );
    static const IconData book= const IconData(
    0xe623,
    fontFamily: "myIcons",
    matchTextDirection: true
  );
    static const IconData video= const IconData(
    0xe614,
    fontFamily: "myIcons",
    matchTextDirection: true
  );
    static const IconData mine= const IconData(
    0xe600,
    fontFamily: "myIcons",
    matchTextDirection: true
  );
}

四、填写对应的codePoint值

这个codePoint值，是必选参数，在我们之前提到的demo_index.html文件中可以查看，首先我们打开我们的demo_index.html文件
这个就是我们的codePoint值，把&#改成0就好了，比如&#xe722 写到代码里就是0xe722，在写完我们的codePoint值后，我们就可以使用我们的图标啦。

五、使用自定义图标

本文是以底部导航栏的格式，给大家演示，大家只要记住使用方法就可以了，首先需要引入我们刚刚自定义的MyIcons类，然后使用的时候MyIcons.name即可。

          BottomNavigationBarItem(
            icon: Icon(MyIcons.home),
            title: Text("首页"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MyIcons.book),
            title: Text("手册"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MyIcons.video),
            title: Text("视频"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MyIcons.blog),
            title: Text("博客"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MyIcons.mine),
            title: Text("我的"),
          ),

写完这些，执行一个flutter packages get 命令，重新编译代码(部分项目不需要重新编译，当初本人写的时候图标不识别，迟迟没有找到原因就是因为没有执行这个命令)，再启动项目就完成了，给大家看一下效果