Flutter 中使用 ICON

news2024/12/24 11:41:51

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.coloradmin.cn/o/1353439.html

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

相关文章

C#高级:Lambda表达式分组处理2(WITH ROLLUP关键字)

目录 一、问题引入 二、with rollup查询 三、去掉多余数据 四、拓展 一、问题引入 查询SQL后结果如下&#xff0c;字段分别是用户、项目、批次、工作时间&#xff1a; SELECT UserID,ProjectID,ProBatchesID,WorkHour FROM MAINTABLE GROUP BY HourFiller ,ProjectID ,…

B端产品经理学习-B端产品系统调研的工具

系统性调研目标的工具 系统性调研的目标 相对于背景调研&#xff0c;系统行调研是对公司可控因素&#xff08;公司内部&#xff09;和直接作用力&#xff08;消费者、竞争者&#xff09;进行的调研。系统性调研需要输出结论&#xff0c;为达成产品或公司的战略目标而制定行动的…

Node.js+Express 获取前端get请求参数值

前端请求&#xff1a; http://localhost:3002/api/user/login?username002&password002 后端响应 router.get(/api/user/login, (req, res) > {let username req.query.username;let password req.query.password;const sqlStr SELECT * FROM sys_user where use…

基于 unittest 的 Web UI / HTTP 自动化测试框架

GitHub 上发现的一个自动化测试框架&#xff0c;封装的很厉害&#xff0c;对小白很友好&#xff0c;体验了下 demo 很不错&#xff0c;先看看下面封装好的 po 模式&#xff0c;很简洁。 """import seldom from seldom import Seldom from poium import Page, E…

Windows可以ping通ubuntu,但ubuntu无法ping通windows

使用了NAT网卡和桥接网卡&#xff0c;电脑连了WiFi&#xff0c;桥接网卡桥接到WLAN上&#xff0c;Windows可以ping通Ubuntu但反过来不行&#xff01; 1.可能是防火墙的问题&#xff0c;按照如下设置&#xff0c;无果 考虑是不是使用了两个网卡冲突了&#xff0c;取消NAT的链接 …

【损失函数】Cross Entropy Loss 交叉熵损失

1、介绍 主页介绍的几种损失函数都是适用于回归问题损失函数&#xff0c;对于分类问题&#xff0c;最常用的损失函数是交叉熵损失函数 Cross Entropy Loss。它用于测量两个概率分布之间的差异&#xff0c;通常用于评估分类模型的性能。 2、公式 对于二分类问题&#xff0c;交…

基于SSM的网络游戏交易平台设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

市场复盘总结 20240103

仅用于记录当天的市场情况,用于统计交易策略的适用情况,以便程序回测 短线核心:不参与任何级别的调整 昨日回顾: 方法一:指标选股 select * from dbo.ResultAll where 入选类型 like %指标选股% and 入选日期=20240103;方法二:趋势选股法 1、最低价持续3日上涨 2、均价…

useState和setState区别

一、主要是讲一下类组件的状态和函数组件的状态 1.类组件中state只能有一个&#xff0c; 函数组件中state可以有多个 函数组件&#xff1a;可以使用对个状态&#xff0c;便于控制。 // 文章数量的初始值const [articleData, setArticleData] useState({list: [],// 文章列表…

GreenPlum-数据世界的绿洲

GreenPlum的介绍 Greenplum是一个基于开源PostgreSQL数据库系统的高性能、可扩展的大数据处理平台。它是由Pivotal Software&#xff08;现在是VMware的一部分&#xff09;开发并维护的。Greenplum的设计目标是处理大规模的数据集&#xff0c;提供高并发、高吞吐量的查询和分析…

案例087:基于微信小程序的社区养老服务平台设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

Node.js本地搭建简单页面小游戏

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

LangChain与昇腾

LangChain这个词今年已经听烂了&#xff0c;今天基于昇腾的角度总结一下&#xff1a; Why LangChain &#xff1f; 场景&#xff1a;构建一个LLM应用 在构建一个新项目时&#xff0c;可能会遇到许多API接口、数据格式和工具。要去研究每一个工具、接口很麻烦。 假设要构建一…

踩坑Vant组件 Dialog的组件调用

今天踩了一个非常蠢的坑&#xff0c;自己给自己蠢死的坑 在使用组件调用时自己没引入Dialog组件导致一直报错 不知道为什么全局引入不好使&#xff0c;后来使用了局部引用 现在没问题了 就这样局部引入一个Dialog.Component就可以了

【鸿蒙杂谈①】——鸿蒙基础介绍及应用领域

1.前言 小伙伴们大家好&#xff0c;最近被复习整的痛苦无比&#xff0c;所以今天咱们了解 一点轻松的东西&#xff0c;至于高并发就先放放吧。好了&#xff0c;废话不多说&#xff0c;咱们进入正题。 相信小伙伴们都已经看到了最近鸿蒙的势头了&#xff0c;那鸿蒙究竟是怎么发…

阿里云服务器系统盘高效云盘、ESSD Entry云盘、SSD云盘、ESSD云盘测评

阿里云服务器系统盘或数据盘支持多种云盘类型&#xff0c;如高效云盘、ESSD Entry云盘、SSD云盘、ESSD云盘、ESSD PL-X云盘及ESSD AutoPL云盘等&#xff0c;阿里云百科aliyunbaike.com详细介绍不同云盘说明及单盘容量、最大/最小IOPS、最大/最小吞吐量、单路随机写平均时延等性…

[DevOps-05] Integrate工具

一、简要说明 持续集成、持续部署的工具很多,其中Jenkins是一个开源的持续集成平台。 Jenkins涉及到将编写完毕的代码发布到测试环境和生产环境的任务,并且还涉及到了构建项目等任务。 Jenkins需要大量的插件保证工作,安装成本较高,下面会基于Docker搭建Jenkins。 二、Jenk…

RFIC设计的主要流程和发展趋势学习

无线是我们这个时代最大的特点&#xff0c;无论是移动宽带&#xff0c;还是卫星导航&#xff0c;无人机&#xff0c;智能驾驶&#xff0c;都离不开射频技术的快速发展。而射频设计中&#xff0c;发展最快的当属射频集成电路的发展。 对于数字集成电路&#xff0c;我们很多人都见…

ELK+kafka+filebeat企业内部日志分析系统搭建

看上面的拓扑图&#xff0c;我们至少准备七台机器进行下面的实验项目。 机器主要作用分布如下: 三台安装elasticsearch来搭建ES集群实现高可用&#xff0c;其他机器就依次安装filebeat,kafka,logstash和kibana软件 一、部署elasticsearch来搭建ES集群 1.安装jdk 由于ES运行…

华为月薪25K的自动化测试工程师到底要会那些技能!

​前言 3年自动化测试软件测试工程师职业生涯中&#xff0c;我所经历过的项目都是以自动化测试为主的。由于自动化测试是一个广泛的领域&#xff0c;我将自己的经验整理了一下分享给大家&#xff0c;话不多说&#xff0c;直接上干货。 自动化测试的目标和实践选择合适的自动化…