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 <[email protected]>
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

图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章