Flutter自定义Icon的简易使用(两种)
方式一:利用第三方库(建议)
1、在阿里图标库(iconfont-阿里巴巴矢量图标库)上,加载购物车后,点击“下载素材”svg。
2、把下载的图片放入asstes目录下。
3、修改yaml配置文件,设置Icon图标所在路径,导入插件,并Pub一下。
flutter:
uses-material-design: true
assets:
- assets/icons/ //设置图标目录路径
dev_dependencies:
flutter_test:
sdk: flutter
flutter_svg: ^2.0.10+1 //导入插件
4、在任意地方使用自定义类
方式二:纯手动集成使用(有概率显示"?X")
1、 在阿里图标库(iconfont-阿里巴巴矢量图标库)上,加载购物车后,点击“下载代码”。
2、把下载好的文件字体放入asstes目录下,并查看“iconfont.json”对应的图标unicode码。
3、修改yaml配置文件,给字体命名,设置Icon图标所在路径,并Pub一下。
fonts:
- family: HeiseIcon # 自定义的字体家族名字
fonts:
- asset: assets/fonts/iconfont.ttf # 字体文件路径
4、在任意地方使用自定义类
//一:用IconData生成Icon
Icon(IconData(0xf00a1, fontFamily: "MyIcon", matchTextDirection: true))
注释:0xf00a1 0x表示的是十六进制的前缀编码 f00a1表示的是unicode编码
//二:或者用Text生成Icon
Text(
String.fromCharCode(0xf00a1),
style: TextStyle(
fontSize: 30,
fontFamily: "MyIcon"
)
注意: 显示出现 "X ?" 等情况,情况有多种:
一:是配置文件yaml里引用地址、文件名没有一一对应。
二:是修改配置文件后忘记pub。
三:没有清除缓存,在项目中执行"flutter clean"。
四:机器识别不了。