flutter中使用图标(含自制图标库方案)

简介: flutter中使用图标(含自制图标库方案)

flutter中使用图标(含自定义图标图)


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 IDformat_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 IllustratorInkscape等软件绘制SVG格式的图标。也可以上一些网站下载SVG矢量图标,如阿里矢量图标库谷歌矢量图标库等等:

2.2 生成字体文件

可以借助一些方便的在线工具直接生成,如:IcoMoonhttps://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
目录
相关文章
|
1月前
|
运维 监控 定位技术
应用研发平台EMAS常见问题之flutter插件不支持自定义图标如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
76 0
|
1月前
|
iOS开发 UED
Flutter 动态修改应用图标功能指南
探索Flutter中动态应用图标的实现方法,了解如何为用户提供独特体验,促进用户升级和应用内购买。
Flutter 动态修改应用图标功能指南
|
3月前
|
Linux 开发者 iOS开发
Flutter笔记:桌面端应用多窗口管理方案
Flutter笔记:桌面端应用多窗口管理方案
114 0
|
3月前
|
前端开发
Flutter笔记:光影动画按钮、滚动图标卡片组等
Flutter笔记:光影动画按钮、滚动图标卡片组等
40 0
|
4月前
|
API
Flutter状态管理终极方案GetX第一篇——路由
Flutter状态管理终极方案GetX第一篇——路由 GetX是Flutter中一个非常流行的状态管理库,它不仅提供了简单易用的状态管理功能,还可以帮助我们方便地管理路由。在这篇文章中,我们将介绍如何使用GetX来实现路由管理。
137 0
|
4月前
|
开发者
Flutter状态管理终极方案GetX第二篇——状态管理
Flutter状态管理终极方案GetX第二篇——状态管理 在Flutter应用程序中,状态管理是必不可少的。GetX提供了简单易用的状态管理方案,使得开发者可以更加轻松地管理应用程序状态。下面介绍GetX中的状态管理方案。
105 0
|
4月前
|
Dart
Flutter笔记:完全基于Flutter绘图技术绘制一个精美的Dash图标(中)
完全基于Flutter绘图技术绘制一个精美的Dash图标(中)
47 0
|
4月前
|
Dart
Flutter笔记:完全基于Flutter绘图技术绘制一个精美的Dash图标(上)
完全基于Flutter绘图技术绘制Dart语言吉祥物(Dash)-上
35 0
|
6月前
|
Dart 前端开发 JavaScript
掌握这个关键技术,让你的APP开发事半功倍!——Flutter与其他方案的区别
掌握这个关键技术,让你的APP开发事半功倍!——Flutter与其他方案的区别
49 0
|
8月前
Flutter中 解决自定义阿里妈妈图标一直显示不出来的问题
Flutter中 解决自定义阿里妈妈图标一直显示不出来的问题
64 0