Flutter-自定义图标

news2025/7/19 7:59:52

虽然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

在这里插入图片描述