Flutter使用自定义图标

游泳帽
1,645 阅读2分钟

前言

Flutter本身是自带Material图标的，但是，我们想要的远不止于此，所以，我们需要引入自定义的图标库。Iconfont是个不错的选择。

选择图标

登录到https://www.iconfont.cn，搜索自己需要的图标加入购物车，然后添加到项目中，也可以新建一个项目。按照项目来管理自己的图标有利于日后图标的维护。

添加图标库到项目

下载图标库到本地，在解压缩后的文件中找到文件格式为ttf的文件，最好是重命名一下这个文件，当然也可以不重命名，这个根据自己的实际情况来定。

将ttf文件添加到项目中的assets/fonts文件夹中，并且在pubspec.yaml文件中配置好。

以上工作都完成后，我们需要添加一个dart文件

import 'package:flutter/widgets.dart';

class KrzIcons{
  KrzIcons._();
  
  static const _kFontFam = 'KrzIcons';
  static const _kFontPkg = null;

  static const IconData delete = IconData(0xe61e, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData building = IconData(0xe6c0, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData project_rect = IconData(0xe64a, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData edit = IconData(0xe60c, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData map = IconData(0xe6f4, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData zhengshu = IconData(0xe639, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData foot = IconData(0xe88e, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData project = IconData(0xe60a, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}

这里需要注意的是

  • _kFontFam 要和上面截图里pubspec.yaml中的family名称一致。
  • IconData第一个参数是图标在字体内的Unicode码，这个在web端以及下载的文件中都可以找到，一定不能写错。

使用自定义图标

接下来我们就可以使用这个自定义的图标库了。

 BottomNavigationBarItem(
    title: Text('首页'),
    icon: Icon(
      KrzIcons.home,
      size: 19,
    ),
)

这里也有两点需要注意

  • 如果图标显示乱码，这时候不要慌，重新运行一下就可以，因为有可能ttf文件还没加载到app中。
  • 选择图标的时候最好是选择大小差不多的，因为如果一开始两个图标的大小相差很大的话，即使后来icon的sizes设置成一样，也还是得不到大小一样的图标。

后续

fluttericon.com 这个网站的功能跟iconfont差不多，只不过是专门针对flutter而设计的，这点从网站的名字上就能看出来。图标的大小以及风格也比较统一，可以自动生成ttf文件以及dart文件，不需要你挨个去复制粘贴unicode码。据说这个网站还可以部署到本地，摆脱网速的束缚以及被墙的风险。只不过我个人感觉资源还是太少，而且搜索的时候不能搜中文。iconfont麻烦就麻烦点吧，好在只麻烦一次就可以了。你们觉得呢。。。。。。

感谢大家

1.如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

2.关注公众号「码农码未来」让我们一起进步，码出自己绚丽多彩的未来。

image

avatar
文章
阅读
粉丝