flutter显示图标_小技巧：Flutter如何引用自定义图标

Flutter自带了Material的图标&＃xff0c;但是还是不太适合中国的国情&＃xff0c;比如微信、微博、QQ这些国内常用的图标就没有收录&＃xff0c;或者为了让APP更有个性&＃xff0c;我们希望换掉Material的风格&＃xff0c;这个时候&＃xff0c;自定义图标就成了一个不大不小的问题&＃xff0c;Flutter对于引用自定义的解决思路其实不太复杂&＃xff0c;按照以下思路走就可以了&＃xff1a;

把图标打包成ttf文件放在项目路径下并且修改pubspec.yaml文件&＃xff0c;比如&＃xff1a;

fonts:

- family: MyIcons

fonts:

# 字体文件所在的路径&＃43;文件名

- asset: assets/fonts/MyIcons.ttf

然后添加一个.dart文件&＃xff0c;我习惯按font family名字命名为my_icons.dart(注意文件名要符合dart的代码规范)&＃xff0c;代码内容如下&＃xff1a;

import &＃39;package:flutter/widgets.dart&＃39;;

class MyIcons {

CustomIcons._();

static const _kFontFam &＃61; &＃39;MyIcons&＃39;;

static const _kFontPkg &＃61; null;

static const IconData weibo &＃61; IconData(0xf18a, fontFamily: _kFontFam, fontPackage: _kFontPkg);

static const IconData qq &＃61; IconData(0xf1d6, fontFamily: _kFontFam, fontPackage: _kFontPkg);

static const IconData wechat &＃61; IconData(0xf1d7, fontFamily: _kFontFam, fontPackage: _kFontPkg);

}

上述代码有两点需要特别注意&＃xff1a;

_kFontFam这个私有变量要和pubspec.yaml的family的名称一致&＃xff0c;

IconData第一个参数是codePoint&＃xff0c;记得要图标在字体内的Unicode代码一致

设置好了就可以开始使用了&＃xff0c;以下是一个例子&＃xff1a;

import &＃39;./assets/my_icons.dart&＃39;;

void main() &＃61;> runApp(MyApp());

class MyApp extends StatelessWidget {

&＃64;override

Widget build(BuildContext context) {

return MaterialApp(

title: &＃39;Flutter Custom Icon Demo&＃39;,

home: Scaffold(

appBar: AppBar(

title: Text(&＃39;Login with WeChat&＃39;),

),

body: Center(

child: Icon(MyIcons.wechat), //重点在这里

),

),

);

}

}

...其实还有更省力的办法

我说的不是.ttf文件的难题&＃xff0c;但是对于Flutter&＃xff0c;这还远远不够&＃xff0c;我说的是

新建我的图标集&＃xff1a;

打开网站&＃xff0c;在Names中搜索或点击图标进行选择&＃xff0c;目前可以选择的图标集有

Material\Font Awesome 5\Entypo\Typicons\Iconic\Modern Pictograms\Meteocons\MFG Labs\Maki\Zocial\Brandico\Elusive\Linecons\Web Symbols\Linearicons Free\Octicons\RPG Awesome&＃xff0c;如果没有的话&＃xff0c;也可以自行上传SVG

点完餐后点击Download下载压缩包&＃xff0c;解压&＃xff0c;找到字体文件和.dart文件&＃xff0c;拷贝到你的Flutter项目路径下&＃xff0c;参考前述步骤1修改pubspec.yaml文件&＃xff0c;参考步骤3引用图标&＃xff1b;

修改我的图标集

fluttericon是个纯前端的网站&＃xff0c;那么我之前的图标集怎么找的回来呢&＃xff0c;这就需要你好好保管好之前下载的压缩包&＃xff0c;重新上传到网站就可以找回并修改你的图标集了。