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

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

一、获取自定义图标

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

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

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

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

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

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

flutter:uses-material-design: trueassets:#   - 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: iconfontfonts:- 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开发语言-类的学习

Flutter自定义iconfont字体图标相关推荐

自定义字体与iconfont字体图标
1.自定义字体 <!DOCTYPE html><html lang="en"><head><meta charset="UTF- ...
微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份进行了网站维护,维护之后,不能"生成在 ...
iconfont 字体图标错乱
iconfont 字体图标错乱问题描述排查过程定位问题误区规避方案问题描述在做项目的时候遇到一个很奇怪的问题,引入的图标和示例图标的引入方式一样,类名一样,审查元素发现连content也 ...
Android神技之使用SVG以及自定义IconFont字体库
Android神技之使用SVG以及自定义IconFont字体库简介 Google在Android 5.X中增加了对SVG矢量图形的支持. SVG是什么 SVG 指可伸缩矢量图形 (Scalable ...
【Vue-Element】矢量字体库iconfont字体图标库使用
矢量字体库iconfont字体图标库使用 1.注册并登录 2.图标管理 >> 我的项目 >> 新建项目 3.新建完成后,搜索我们想要的图标,然后添加到购物车 4.添加完成后,购 ...
uniapp使用iconfont字体图标
本文介绍两种方案:一.使用iconfont字体图标二.使用icon图片情景1:使用灰色的字体图标方案一:使用iconfont字体图标步骤1:下载iconfont 步骤2:解压后只需要将ifon ...
iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法一.打开阿里巴巴矢量图官网阿里巴巴矢量图官网界面如下: 二.选择登录:可以使用GitHub账号登录,用其他账号也可以这里我选择用GitHub账号登录 ...
iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标 ...
使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
阿里巴巴iconfont字体图标使用方法
iconfont字体图标的使用方法--超简单! 这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; ...

Flutter自定义iconfont字体图标