flutter中使用图标（含自定义图标图）
作者： jcLee95
已入驻阿里云社区
邮箱 ：291148484@163.com
本文地址：
- https://developer.aliyun.com/article/1212991
- https://blog.csdn.net/qq_28550263/article/details/123309530
相关文章推荐：
目 录
- 1.2.1 Action
- 1.2.2 Navigation
- 1.2.3 Social
- 1.2.4 Content
- 1.2.5 Image
- 1.2.6 Communication
- 1.2.7 File
- 1.2.8 Maps
- 1.2.9 Audio & Video
- 1.2.10 Toggle
- 1.2.11 Alert
- 1.2.12 Editor
- 1.2.13 Notification
- 1.2.14 Hardware
- 1.2.15 Device
- 1.2.16 Search
- 1.2.17 Places
- 1.2.18 Home
1. 官方图标的使用
1.1 在Flutter中的使用方式
在Flutter中，官方图标库已经为我们提供了足够多的字体图标可以直接使用之，每一个官方图标都有一个唯一的标识码，它们都是Icons类的一个静态属性。我们使用Icons.xxx（xxx表示某个图标的 Flutter ID）来指定图标，并将其作为Icon类的参数。
import 'package:flutter/material.dart'; Icon( Icons.format_list_bulleted, ),
Icon类的接口为具有如下属性：
| 属性 | 类型 | 描述 |
| color | Color? |
绘制图标时使用的颜色。 |
| hashCode | int |
要显示的图标。 |
| icon | IconData? |
要显示的图标。 |
| key | Key? |
控制一个部件如何替换树中的另一个部件。 |
| runtimeType | Type |
对象运行时类型的表示形式。 |
| semanticLabel | String? |
图标的语义标签。 |
| size | double? |
以逻辑像素为单位的图标大小。 |
| textDirection | TextDirection? |
用于呈现图标的文本方向。 |
另一个例子是：
Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: const <Widget>[ Icon( Icons.favorite, color: Colors.pink, size: 24.0, semanticLabel: 'Text to announce in accessibility modes', ), Icon( Icons.audiotrack, color: Colors.green, size: 30.0, ), Icon( Icons.beach_access, color: Colors.blue, size: 36.0, ), ], )
1.2 图标查询
以下图标名使用时，如Format List Numbered，对应的 Flutter ID为format_list_numbered。
1.2.1 Action
1.2.2 Navigation
1.2.3 Social
1.2.4 Content
1.2.5 Image
1.2.6 Communication
1.2.7 File
1.2.8 Maps
1.2.9 Audio & Video
1.2.10 Toggle
1.2.11 Alert
1.2.12 Editor
1.2.13 Notification
1.2.14 Hardware
1.2.15 Device
1.2.16 Search
1.2.17 Places
1.2.18 Home
2. 自制字体图标库（能像官方图标那样使用）
2.1 绘制图标图像
可以使用Adobe Illustrator、Inkscape等软件绘制SVG格式的图标。也可以上一些网站下载SVG矢量图标，如阿里矢量图标库、谷歌矢量图标库等等：
2.2 生成字体文件
可以借助一些方便的在线工具直接生成，如：IcoMoon：https://icomoon.io/：
点击Import Icons导入你需要制作成字体图标的SVG图片：
完成后点击 Generate Font，点击 **Download**下载你的字体文件：
2.3 将图标字体引入Flutter项目
打开我们的flutter项目，建立assets目录，在其下建立``子目录iconfonts：
将字体文件解压到iconfonts子目录下，所需要的字体文件在其中的fonts目录下：
将该文件引入 **pubspec.yaml**文件：
2.4 封装成图标库
// jcicons.dartimport'package:flutter/foundation.dart'showdefaultTargetPlatform; import'package:flutter/widgets.dart'; classPlatformAdaptiveIconsimplementsJCIcons { constPlatformAdaptiveIcons._(); staticbool_isCupertino() { switch (defaultTargetPlatform) { caseTargetPlatform.android: caseTargetPlatform.fuchsia: caseTargetPlatform.linux: caseTargetPlatform.windows: returnfalse; caseTargetPlatform.iOS: caseTargetPlatform.macOS: returntrue; } } } classJCIcons { JCIcons._(); staticPlatformAdaptiveIconsgetadaptive=>constPlatformAdaptiveIcons._(); staticconstIconDatame=IconData(0xecb5, fontFamily: 'jcicon'); staticconstIconDatafriend=IconData(0xecb6, fontFamily: 'jcicon'); staticconstIconDatanew_=IconData(0xecb7, fontFamily: 'jcicon'); staticconstIconDatanews=IconData(0xecb8, fontFamily: 'jcicon'); // ...继续列出你的图标}
2.5 使用你自己封装的图标库
导入你的图标库：
// 依据你实际项目中的位置决定import'../jcicon.dart';
使用你的图标：
Icon( JCIcons.me, // 对比：如果使用的是官方图标库，则此处形式为 Icons.xxxsize: 24.0, ),
附 使用图标徽章
效果
demo code
Badge( badgeContent: Text("9"), child: Icon( Icons.access_time, ) )
场景
往往应用于需要进行提示的场景，如时钟提示最近的事项，通讯录提示未读好友消息的数目等等。
安装
flutter pub add badges
安装完成后再你的项目的pubspec.yaml文件中增加了如下依赖：
dependencies badges^2.0.2
导入和使用
基本使用
import'package:badges/badges.dart'; // ...某个位置Badge( badgeContent: Text('3'), child: Icon(Icons.settings), )
使用动画
| 动画 | 效果 |
BadgeAnimationType.slide |
|
BadgeAnimationType.scale |
|
BadgeAnimationType.fade |
|
