Flutter 中使用 ICON

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.mzph.cn/news/611307.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

救赎之道,就在其中

时光荏苒&#xff0c;不知不觉距离我踏入职场的第一天已经快一年了。最近也是看到平台举办年度征文活动&#xff0c;借此契机重新审视自己这两年来的成长历程&#xff0c;也希望对正在迷茫的人提供一些精神上的慰藉。 1.对未来的迷茫 如果要给两年前的自己打上标签&#xff0…

在IntelliJ IDEA上使用通义灵码(TONGYI Lingma)

参考链接&#xff1a; 通义灵码产品介绍_智能编码助手_AI编程_云效(Apsara Devops)-阿里云帮助中心 【IDEA如何使用通义灵码&#xff1f;】_idea 通义灵码-CSDN博客 1. 简介 1.1 定义 通义灵码&#xff0c;是阿里云出品的一款基于通义大模型的智能编码辅助工具&#xff0c;提…

实现多级缓存(Redis+Caffeine)

文章目录 多级缓存的概述多级缓存的优势 多级缓存的概述 在高性能的服务架构设计中&#xff0c;缓存是一个不可或缺的环节。在实际的项目中&#xff0c;我们通常会将一些热点数据存储到Redis或MemCache这类缓存中间件中&#xff0c;只有当缓存的访问没有命中时再查询数据库。在…

【UE Niagara学习笔记】06 - 制作火焰喷射过程中飞舞的火星

在上一篇博客&#xff08;【UE Niagara学习笔记】05 - 喷射火焰顶部的蓝色火焰&#xff09;的基础上继续实现喷射火焰的火星的效果。 目录 效果 步骤 一、创建材质实例 二、添加新的发射器 2.1 设置粒子材质 2.2 设置发射器持续生成粒子 2.3 设置粒子生成数量 2.4 设…

前端项目构建打包生成Git信息文件

系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录前言一、前端项目构建打包生成Git信息文件作用二、步骤1.引入相关的npm包1.1. **fs** 包1.2. **child_process** 包1.3. **os** 包 (非必须 如果你想生成的文件信息中包含当前电脑信息则可用)1.4. **path** 包…

MySql -数据库基本概念

一、数据库的基本概念 1.为什么要学数据库&#xff1f; 之前我们如果想将一些数据实现永久化存储&#xff0c;可以怎么做呢&#xff1f;没错。使用IO流的技术将数据保存到本地文件中但是接下来我有这样一个需求&#xff1a;将下面的user.txt文件中的王五年龄修改为35 张三 2…

视频智能剪辑方案,企业视频制作新时代

视频已经成为了人们获取信息、娱乐和学习的重要方式。然而&#xff0c;传统的视频制作过程繁琐且耗时&#xff0c;这对于许多企业来说无疑是一个巨大的挑战。为了解决这个问题&#xff0c;美摄科技凭借其在机器学习、深度学习等AI算法方面的深厚积累&#xff0c;自主研发了一套…

23111 IO进程线程 day8

使用信号灯集完成三个进程的同步&#xff0c;A进程输出字符A&#xff0c;B进程输出字符B&#xff0c;C进程输出字符C&#xff0c;要求输出结果为ABCABCABCABCABC... #include<myhead.h> #include "sem.h"int main(int argc, const char *argv[]) {pid_t pid…

Linux的网络服务DHCP

一.了解DHCP服务 1.1 DHCP定义 DHCP&#xff08;动态主机配置协议&#xff09;是一个局域网的网络协议。指的是由服务器控制一段IP地址范围&#xff0c;客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码。默认情况下&#xff0c;DHCP作为Windows Server的一个服…

【开发小程序多少钱?智创开发】

开发一个小程序费用主要看做什么和怎么做&#xff1f; 第一部分&#xff1a;做什么&#xff1f; 做什么是指功能部分&#xff0c;开发的功能不一样&#xff0c;耗时也就不一样&#xff0c;价格自然也就不一样了。就好比买房&#xff0c;套二的公寓和别墅价格自然差距很大。所…

软光栅透视校正插值写好了

我这文章写的六,自己不写什么过程,直接发张图片.我发一下我看的引用. 透视矫正插值 Perspective-Correct Interpolation 计算机图形学六&#xff1a;正确使用重心坐标插值(透视矫正插值(Perspective-Correct Interpolation))和图形渲染管线总结 一开始写错了,改了大概两天改…

代理IP连接不上/网速过慢?如何应对?

当您使用代理时&#xff0c;您可能会遇到不同的代理错误代码显示代理IP连不通、访问失败、网速过慢等种种问题。 在本文中中&#xff0c;我们将讨论您在使用代理IP时可能遇到的常见错误、发生这些错误的原因以及解决方法。 一、常见代理服务器错误 当您尝试访问网站时&#…

Golang Web框架性能对比

Golang Web框架性能对比 github star排名依次: Gin Beego Iris Echo Revel Buffalo 性能上gin、iris、echo网上是给的数据都是五星&#xff0c;beego三星&#xff0c;revel两星 beego是国产&#xff0c;有中文文档,文档齐全 根据star数&#xff0c;性能&#xff0c;易用程度…

UGUI Image图像控件替换图片

代码为探索而来&#xff0c;不是最优代码&#xff0c;请按需使用。 Unity3d引擎版本&#xff1a;Uinty3d 20233.2.3f1 补充一下图片如何改成Texture2D&#xff1a; 1、将图片导入unity。 2、选择图片&#xff0c;按下图操作&#xff0c;点击应用即可。 脚本代码&#xff1a…

听劝,年度规划有它真的很必要!

2024年的时间进度条已走过一周&#xff0c;完成全年的1/52。 新年的flag悄然立下&#xff1a;愿逆风如解意&#xff0c;税后八个亿。 在不确定的世界中&#xff0c;发财暴富终归是确定的目标。 相比2023年的卷&#xff0c;年底的即兴生活正在悄悄上演&#xff0c;上一秒还在…

Unity中URP下实现能量罩(交接处高亮)

文章目录 前言一、交接处高亮 原理1、 我们先用一个球作为能量罩、一个Cube 和 一个 椭球 作为与能量罩交接的物体2、 这是我们目前场景的深度图3、使能量罩为 半透明渲染队列 且 关闭深度写入 不渲染深度图 二、交接处高亮 实现1、得到深度图2、在片元着色器中&#xff0c;对深…

Python冒号的解释

1. “没什么首次没有为第二个&#xff0c;跳了三个”。它得到的切片序列的每一个第三个项目。 扩展片是你想要的。新在Python 2.3 2. Python的序列切片地址可以写成[开始&#xff1a;结束&#xff1a;一步]和任何启动&#xff0c;停止或结束可以被丢弃。a[::3]是每第三个序列。…

element-plus里el-date-picker日期选择器,默认值不显示的问题

官网文档给出的示例默认值也是没有没显示的。 找了很多方法&#xff0c;最终是给v-model"defaultTime"绑定初始值&#xff0c;如下代码&#xff0c;需要的可以改一下 <el-date-picker class"top_select" v-model"defaultTime" type"da…

解决:接口中返回的文本不能保持原本格式也无法换行

一、问题&#xff1a; 原本传入的文本是有换行的&#xff0c;但是用div展示接口返回的文本&#xff0c;所示内容没有保持原有格式没达到换行效果 以下是传入到接口的文本格式 使用div标签展示接口返回的文本&#xff0c;但并没有保持原有格式&#xff0c;文本也没换行 <di…

做科技类的展台3d模型用什么材质比较好---模大狮模型网

对于科技类展台3D模型&#xff0c;以下是几种常用的材质选择&#xff1a; 金属材质&#xff1a;金属材质常用于科技展台的现代感设计&#xff0c;如不锈钢、铝合金或镀铬材质。金属材质可以赋予展台一个科技感和高档感&#xff0c;同时还可以反射光线&#xff0c;增加模型的真实…