Flutter尝鲜1——3步骤使用自定义Icon

官方Icon

Flutter本身自带了MaterialDesign的图标集，在pubspec.yaml中有如下配置

...
flutter:
  users-material-design: true
...

通过以上配置，就可以在代码中引用任何MD的官方图标(需翻墙)。这些图片都定义在了IconDatas中。

Icon(Icons.favorite)

第三方Icon

第三方图标库和MD的图片库在使用上没有区别，但需要手动引入和配置路径。为了方便复用，我们可以把图标制作为一个第三方库来调用。例如：

...
import 'package:my_icon/my_icon.dart';

...
Icon icon = Icon(MyIcon.zhihu);   # 知乎LOGO

制作Icon库

1.制作ttf文件

一般我们会在iconfont.cn上去寻找合适的图标集或自行绘制，完成后打包下载，压缩包里有制作好的ttf文件。

2.编写配置文件

作为示例，在/lib目录下创建一个名为my_font的文件夹，文件夹中的pubspec.yaml内容如下：

name: my_font
description: The font for my application
author: Lynx <[e-mail]>
homepage: http://www.a-lightyear.com/
version: 1.0.0

environment:
  sdk: ">=2.0.0-dev.28.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  recase: "^2.0.0+1"

flutter:
  fonts:
    - family: MyIcon
      fonts:
        - asset: lib/fonts/iconfont.ttf
          weight: 400

从配置文件看出，iconfont下载的ttf文件放在/lib/my_font/lib/fonts/下面，该路径可以自行设置。

3.编写库文件

library font_social_flutter;
    
import 'package:flutter/widgets.dart';

class MyIcon {
  static const IconData zhihu = const _MyIconData(0xe6a2);
  static const IconData wechat = const _MyIconData(0xe697);
  static const IconData alipay = const _MyIconData(0xe698);
  static const IconData weibo = const _MyIconData(0xe6ab);
  static const IconData wechat_friends = const _MyIconData(0xe6ae);
  static const IconData qq = const _MyIconData(0xe6ac);
}

class _MyIconData extends IconData {
  const _MyIconData(int codePoint)
      : super(
    codePoint,
    fontFamily: 'MyIcon',
    fontPackage: 'my_icon',
  );
}

这里的0xe6a2即为每个Icon的unicode字符。在iconfont下载包里有一个html文件，打开后可以看到每个图片的unicode值。

使用Icon

引入Icon库

在使用之前，需要把该库引入到当前flutter工程中。编辑flutter项目的pubspec.yaml，添加如下内容：

...
dependencies:
  flutter:
    sdk: flutter
  ...
  my_icon:
      path: lib/my_icon/   # 在这里引入第三方icon库
  ...
...

使用Icon

如开篇所述，在做好以上准备工作后，即可以如MD图标一般方便的引入自制的图标集。

...
import 'package:my_icon/my_icon.dart';

...
Icon icon = Icon(MyIcon.zhihu);   # 知乎LOGO