Flutter 中使用 ICON

news/2025/2/13 22:50:02/

Flutter Icon URL : https://fonts.google.com/icons:

image.png

在Flutter中使用 Icon 步骤如下:

导入图标库

在Dart 文件中导入 material.dart 包,该包包含了 Flutter 的图标库。

import 'package:flutter/material.dart';

使用图标组件

通过 Icon 来创建图标组件,Icon 组件接受一个 IconData 对象作为参数,用于指定要显示的具体图标。
具体图标可以去 该网站找,然后复制对应的 Icon name 即可。
image.png
Icon 参数:如下

Icon(IconData? icon, {Key? key,double? size,double? fill,double? weight,double? grade,double? opticalSize,Color? color,List<Shadow>? shadows,String? semanticLabel,TextDirection? textDirection,
})
  • color:设置图标的颜色。
  • size:设置图标的大小。
  • semanticLabel:设置图标的语义标签,用于辅助功能。

完整示例:

Icon(Icons.favorite, // 使用预定义的图标名称size: 30.0, // 设置图标大小为 30.0 像素semanticLabel: 'Accessibility', // 设置语义标签为 "Accessibility"textDirection: TextDirection.rtl, // 设置文本方向为从右到左
)

使用示例:
image.png

Row(children: [Container(width: 80.0,child:Column(children: [Icon(Icons.favorite,color: Colors.red,size: 24.0,semanticLabel: 'Favorite',),Text("Love",style: TextStyle(fontSize: 17,color:Colors.green,)),],),),Container(width: 80.0,child:Column(children: [Icon(Icons.android_outlined,color: Color.fromARGB(255, 18, 161, 238),size: 24.0,semanticLabel: 'Favorite',),Text("Android",style: TextStyle(fontSize: 17,color:Colors.green,)),],),),Container(width: 80,child:Column(children: [Icon(Icons.verified_outlined,color: Color.fromARGB(255, 9, 232, 69),size: 24.0,semanticLabel: 'Favorite',),Text("Verified",style: TextStyle(fontSize: 17,color:Colors.green,)),],),),],),

http://www.ppmy.cn/news/1290442.html

相关文章

离散点过滤算法

离散点过滤算法是数据处理中常用的一种算法&#xff0c;主要用于去除数据中的离群点或噪声点。这些离群点可能是由于测量误差、异常事件或其他原因产生的。以下是一些常见的离散点过滤算法&#xff1a; Z-score过滤算法&#xff1a;该算法通过计算每个数据点的Z-score&#xf…

linux(mysql下载以及操作)

下载mysql 查看镜像 docker images 下载MySQL镜像 mysql/mysql-server:8.0 创建文件夹&#xff0c;创建配置文件和放数据文件 mkdir -p /data/mysql/{conf,,data} 创建配置文件 my.cnf 写入配置文件my.cnf的代码 [client] default-character-setutf8[mysql] de…

[情商-7]:如何回答没有标准答案的两难问题

目录 前言&#xff1a; 一、用“逻辑推理思维”回答两难问题 二、用“情绪思维”回答两难问题 1.1 关注提问者提出问题背后的情绪状态和情绪/情感诉求 1.2 常见的常见的情绪和情感诉求 1.3 女性情感分析 1.4 理解女性情感的语言 1.5 如何通过语言理解女性的情绪需求 三…

【Mybatis】深入学习MyBatis:CRUD操作与动态SQL实战指南

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; Mybatis ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 一基本用法 1 CRUD操作 1. 增加&#xff08;Create&#xff09; 2. 查询&#xff08;Read&#xff09; 3. 更新&#x…

k8s 之7大CNI 网络插件

一、介绍 网络架构是Kubernetes中较为复杂、让很多用户头疼的方面之一。Kubernetes网络模型本身对某些特定的网络功能有一定要求&#xff0c;但在实现方面也具有一定的灵活性。因此&#xff0c;业界已有不少不同的网络方案&#xff0c;来满足特定的环境和要求。 CNI意为容器网络…

23年中科院1区算法|开普勒优化算法原理及其利用(Matlab/Python)

CEC2017中的测试 本文作者将介绍一个2023年发表在中科院1区期刊《Knowledge -Based Systems》上的优化算法——开普勒优化算法(Kepler optimization algorithm&#xff0c;KOA)[1] 算法性能上&#xff0c;与鹈鹕、黏菌、灰狼和鲸鱼等一众优化算法在CEC2014、CEC2017、CEC2020和…

android studio官方网站关于android SDK环境变量的设置说明晦涩难懂

这是它中文版原文&#xff1a; 您可以通过设置环境变量来配置 Android Studio 和命令行工具的行为。其中一个最有用的环境变量之一是 ANDROID_HOME&#xff0c;很多工具都会读取该变量来确定 Android SDK 安装目录。如需通过命令行运行工具&#xff0c;而不包含可执行文件的完整…

Cytoscape3.8安装下载及安装教程

Cytoscape3.8下载链接&#xff1a;https://docs.qq.com/doc/DUmhZQ1lqTWhuSXJC 1.选中下载好的安装包右键选择“解压到 Cytoscape3.8.0”文件夹 2.打开解压好的”Cytoscape3.8.0“文件夹 3.选中“Cytoscape_3_8_0_windows_64bit.exe“右键以管理员身份运行 4.点击”Download“&…