虽然Flutter有许多内置的icon图标,但是有些特殊功能的话,需要自定义图标或者需要在iconfont 阿里巴巴的图标库里找对应合适的图标。
第一步:在iconfont 阿里巴巴里搜索想要的图标并加入到购物车,点击下载代码
后,会生成一些不同格式的字体文件,在Flutter中,我们使用ttf格式
即可。
第二步:下载下来解压后的文件,在项目的根目录下新建一个fonts
文件夹,把解压文件里的.json
和.ttf
文件copy到新建的fonts
文件夹中。其中.json
文件其实是用不到的,只是为了能更便捷的看到每个字体对应的unicode
,后面配置步骤会用到
第三步:在项目的pubspec.yaml
文件中找到fonts
配置,引入自定义文件,这里首个fonts注意一个空格对齐
,也可配置多个字体,替换不同.ttf
文件即可
fonts:
- family: Schyler #指定一个字体名 根据自己的需求定义
fonts:
- asset: fonts/iconfont.ttf
第四步:在lib
目录下新建一个自定义字体文件,我这里的命名是fonts
import 'package:flutter/material.dart';
///自定义一个类 Font
class Font {
static const IconData gouwuche = IconData(
0x3475,/// 0x+unicode 0x表示是十六进制
fontFamily: "Schyler",/// Schyler 就是在`pubspec.yaml`文件里配置自定义的字体名
matchTextDirection: true
);
static const IconData weixin = IconData(
0xe856,
fontFamily: "Schyler",
matchTextDirection: true
);
}
第五步
:在页面文件中使用
引入字体文件:
import './fonts.dart';
使用:
Icon(Font.gouwuche)
定义多个字体文件,步骤都是一样的,只不过是把解压文件里的.json
和.ttf
文件,与已引入的字体文件名做区分,在fonts
文件里,重复第四步步骤进行每个icon名字配置。pubspec.yaml
文件里的配置如下:
fonts:
- family: Schyler #指定一个字体名 根据自己的需求定义
fonts:
- asset: fonts/iconfont.ttf
- family: Trajan Pro #第二个自定义字体名
fonts:
- asset: fonts/TrajanPro.ttf