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

官方IconFlutter本身自带了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_fontdescription: The font for my applicationauthor: Lynx <lynx86@126.com>homepage: http://www.a-lightyear.com/version: 1.0.0environment: sdk: “>=2.0.0-dev.28.0 <3.0.0"dependencies: flutter: sdk: flutterdev_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