前言
在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就好了,比如 写到代码里就是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 命令,重新编译代码(部分项目不需要重新编译,当初本人写的时候图标不识别,迟迟没有找到原因就是因为没有执行这个命令),再启动项目就完成了,给大家看一下效果