程序员经验分享-hwhale

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

2023-05-16
flutter中使用图标（含自定义图标图）
作者： jcLee95
邮箱 ：291148484@163.com
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类的接口为具有如下属性：

属性类型描述
colorColor?绘制图标时使用的颜色。
hashCodeint要显示的图标。
iconIconData?要显示的图标。
keyKey?控制一个部件如何替换树中的另一个部件。
runtimeTypeType对象运行时类型的表示形式。
semanticLabelString?图标的语义标签。
sizedouble?以逻辑像素为单位的图标大小。
textDirectionTextDirection?用于呈现图标的文本方向。

另一个例子是：

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请添加图片描述
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

flutter中使用图标（含自制图标库方案） 的相关文章

  • 英雄联盟无法开始第二局（已解决，亲测有效）

    目录 1 使用记事本打开hosts文件 xff0c 添加这一行113 250 3 73 prod rso lol qq com 编辑 2 在地址栏输入cmd xff08 个人觉得这样打开对小白方便些 xff0c 主要是打开cmd就行 xff

  • Windows下Zookeeper启动zkServer.cmd闪退问题的解决方案

    本人今天在使用RPC的过程中使用Zookeeper作为中间节点服务器 在windows中启动Zookeeper 在windows启动Zookeeper双击zkServer cmd xff08 但是需要保证安装了java环境 xff09 但是

  • （二叉树）高度平衡二叉树的判定

    题目描述 给定一个二叉树 xff0c 判断它是否是高度平衡的二叉树 本题中 xff0c 一棵高度平衡二叉树定义为 xff1a 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1 题目分析 由题意可知 xff0c 高度平衡二叉树是指树

  • 屏蔽快捷键

    屏蔽鼠标右键 function document oncontextmenu event returnValue 61 false 屏蔽F1帮助 function window onhelp return false 屏蔽其他功能键 fun

  • SpringBoot中使用防止用户重复点击，后台实现

    lt 64 Aspect需要的包 gt lt https mvnrepository com artifact aopalliance aopalliance gt lt dependency gt lt groupId gt aopall

  • Java基础-基本语法

    1 Java 语言有哪些特点 简单易学 有丰富的类库 面向对象 xff08 Java最重要的特性 xff0c 让程序耦合度更低 xff0c 内聚性更高 xff09 与平台无关性 xff08 JVM是Java跨平台使用的根本 xff09 可靠

  • Spring常用注解

    bean注入与装配的方式有很多种 xff0c 可以通过xml xff0c get set方式 xff0c 构造函数或者注解等 简单易用的方式就是使用Spring的注解 xff0c Spring提供了大量的注解方式 64 Required注解

  • RabbitMQ

    什么是 RabbitMQ xff1f RabbitMQ 是使用 Erlang 语言来编写的 xff0c 并且是基于 AMQP 协议 最大的特点就是 消费并不需要确保提供方存在 xff0c 实现了服务之间的高度解耦 AMQP xff1a Ad

  • word批量设置图片大小和对齐，使用宏定义

    word使用宏定义来批量设置图片大小 打开word中开发工具 xff0c 文件 选项 word选项 新建Visual Basic文件 点击 插入 模块 复制下列任意代码 xff0c 粘贴到右侧 xff08 注意可以灵活设置Myheigth或

  • postman设置不更新

    一 关闭自动更新目前有两种方案 xff1a 第一种 xff1a Hosts文件配置以下地址屏蔽连接 xff1a 1 以下配置粘贴到文件中 xff0c 文件位置 xff1a C Windows System32 drivers etc 0 0

  • ECharts多个折线图动态获取json数据

    ECharts 多个折线图动态获取json数据 效果图如下 xff1a 一 html部分 lt p id 61 34 TwoLineChart 34 style 61 34 width 100 height 400px 34 gt lt p

  • JS中setTimeout()的用法详解

    setTimeout 是属于 window 的 method 但我们都是略去 window 这顶层物件名称 这是用来设定一个时间 时间到了 就会执行一个指定的 method 1 SetTimeOut 1 1 SetTimeOut 语法例子

  • Java写个程序00001递增到99999

    NumberFormat f 61 new DecimalFormat 34 00000 34 for int i 61 1 i lt 10000 i 43 43 System out println f format i ER 00001

  • JQuery判断数组中是否包含某个元素

    inArray 34 元素字符串 34 数组名称 var arry 61 34 C 34 34 html 34 34 css 34 34 JavaScript 34 var result 61 inArray 34 C 34 arry 如果

  • JSP获得当前时间并显示

    lt 64 page import 61 34 java text SimpleDateFormat 34 gt lt 64 page import 61 34 java util 34 gt lt 64 page language 61

  • js 判断字符串是否包含另外一个字符串

    lt script type 61 34 text javascript 34 gt var str 61 34 测试一个字符串 ehtrzes 是否包含另外一个字符串 34 if str indexOf 34 ehtrzes 34 gt

  • js判断函数是否存在、判断是否为函数

    lt script type 61 34 text javascript 34 gt 判断是否为函数 try if typeof FunName 61 61 61 34 function 34 是函数 其中 FunName 为函数名称 al

  • python中的类和对象，属性和方法

    一 面向对象的概述 面向对象是一种描述业务问题 设计业务实体和实体之间关系的方法 二 类和对象 1 类和对象得区别 xff1a 类是对客观世界中事物得抽象 xff0c 而对象是类实例化后的实体 例如 xff1a 汽车模型就是一个类 xff0

  • 什么是“约瑟夫环”

    今天遇到一个关于 约瑟夫环 的问题 xff0c 于是上网查了下什么是 约瑟夫环 出自百度 xff1a 约瑟夫问题 xff08 有时也称为约瑟夫斯置换 xff0c 是一个出现在计算机科学和数学中的问题 在计算机编程的算法中 xff0c 类似问

  • 使用Fontcreator字体制作软件及字体设计学习

    fontcreator对于字体修改爱好者而言是一款极好的文字编辑工具 xff0c 门槛要求低 专业性强 集设计和修改为一体 xff0c 可用来制作 编辑 修改ttf xff0c otf xff0c ttc格式的字体文件 xff0c 非常的实

随机推荐

热门标签