个人博客:
http://www.milovetingting.cn

Flutter引用阿里巴巴图标

阿里巴巴图标下载

1、打开网址:https://www.iconfont.cn/ 后登录帐号

2、在搜索栏搜索需要的图标

3、将搜索出来后的结果,加入到库中

image-20221202140311901

4、点击如图所示位置

image-20221202140500802

5、选择下载代码

image-20221202140539609

6、解压下载回来的压缩包

image-20221202140722250

定义图标

1、在项目根目录下新建fonts文件夹

image-20221202142334874

2、将解压后的ttf文件复制到fonts文件夹

3、配置pubspec.yaml,在flutter节点下增加

1
2
3
4
fonts:
- family: IconFont
fonts:
- asset: fonts/iconfont.ttf

4、查看解压后的iconfont.json文件

image-20221202143306747

5、新建一个工具类

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

class CustomIcons{

//和yaml中设置的family一致
static const String fontFamily = "IconFont";

//codePoint对应json中unicode
static const IconData phone = IconData(0x3448,fontFamily: fontFamily);
}

使用图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import 'package:flutter/material.dart';
import 'package:flutter_demo/common/custom_icons.dart';

class IconPage extends StatelessWidget {
const IconPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: const Text('Icon'),
),
body: const Center(child: Icon(CustomIcons.phone)),
),
);
}
}

效果:

image-20221202143834629