flutter中使用图标（含自制图标库方案）

flutter中使用图标（含自定义图标图）

---

作者： jcLee95

邮箱 ：[email protected]

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

本文地址：https://blog.csdn.net/qq_28550263/article/details/123309530

相关文章推荐：

• ：https://blog.csdn.net/qq_28550263/article/details/123492756

---

目 录

---

1. 官方图标的使用

• 1.1 在Flutter中的使用方式
• 1.2 图标查询
  • 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 绘制图标图像
• 2.2 生成字体文件
• 2.3 将图标字体引入Flutter项目
• 2.4 封装成图标库
• 2.5 使用你自己封装的图标库

附：（常用）使用图标徽章

---

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.dart
import 'package:flutter/foundation.dart' show defaultTargetPlatform;
import 'package:flutter/widgets.dart';

class PlatformAdaptiveIcons implements JCIcons {
  const PlatformAdaptiveIcons._();
  static bool _isCupertino() {
    switch (defaultTargetPlatform) {
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return false;
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        return true;
    }
  }
}

class JCIcons {
  JCIcons._();
  static PlatformAdaptiveIcons get adaptive => const PlatformAdaptiveIcons._();
  static const IconData me = IconData(0xecb5, fontFamily: 'jcicon');
  static const IconData friend = IconData(0xecb6, fontFamily: 'jcicon');
  static const IconData new_ = IconData(0xecb7, fontFamily: 'jcicon');
  static const IconData news = IconData(0xecb8, fontFamily: 'jcicon');
  // ...继续列出你的图标
}

2.5 使用你自己封装的图标库

导入你的图标库：

// 依据你实际项目中的位置决定
import '../jcicon.dart';

使用你的图标：

Icon(
    JCIcons.me, // 对比：如果使用的是官方图标库，则此处形式为 Icons.xxx
    size: 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