首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )

文章目录 一、加载 Flutter 内置的图标 三、完整代码示例 三、相关资源 四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 ) 一、加载 Flutter 内置的图标 ---- Flutter...中的图标组件 Icon , 专门用于显示图标 ; Flutter 中内置了一些默认图标 , 可以在 https://material.io/resources/icons/ 界面进行查询 ; 使用 Icon...组件加载 Flutter 内置图标时 , 所在的 dart 源码文件中 , 需要导入材料设计包 , import 'package:flutter/material.dart'; 使用 Icon 示例.../download/han1202012/16073006 ( 本篇博客的源码快照 , 可以找到本博客的源码 ) 四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 ) ---- Flutter...中内置的图标名称与下图中的大致类似 , 不完全一样 , 但基本名称差不多 ;

3.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    写一款小众的 flutter 图标包

    本文翻译自 Writing a dumb icon flutter package,通过这篇文章你可以简单的了解到如何创建一个 flutter 图标包 开始 ?...你需要做的第一件事就是找到一个包含 “.ttf” 文件的开源图标库。那 “.ttf” 是什么文件?...我在 GitHub 上发现了一个名为 weather-icons 开源 CSS 图标库。这是一个包含了 222 个精美天气主题的图标库。 Flutter 包 ?...是时候来创建一个 flutter package 了。我们可以通过使用 Android Studio 这种老套而又略显笨拙的方法来创建一个 package,或者执行下面这个非常酷的命令。...并在其中创建一个名为 icon_data.dart 的文件。文件里面该写些什么?猜的不错! 我们需要在里面放入图标的数据。 ?

    1K10

    【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

    10 个图标 , 然后点击右上角的 DOWNLOAD 按钮 , 该网站会在后台将这 10 个图标的 SVG 文件打包到 ttf 文件中 , 下载的文件是 flutter-icons-5b92b65c.zip..., 后面一串是随机生成的数字 ; 该压缩包中主要有三个文件 , ① ttf 字体文件 : MyFlutterApp.ttf , svg 格式的图标就封装在该文件中 ; ② dart 文件 : Flutter..., 页面中的 Custom Icons 区域会显示这 20 个 SVG 图标 ; 选中这些图标 , 点击 DOWNLOAD 按钮 , 即可下载生成的 ttf 格式的文件 ; 三、使用下载的 ttf..., 里面有每个图标对应的 16 进制的 Unicode 编码 , 3D 图标对应的编码是 0xe855 ; import 'package:flutter/widgets.dart'; class...: 图标绘制方向 , 是否按照 svg 文件中的方向绘制 ; 代码中使用 IconData 加载自定义图标 , 3D图标对应的编码是 0xe855 ; Center( // 加载自定义图标

    2.6K20

    可用于Power BI的谷歌图标、emoji、旗帜库

    谷歌提供了3000+彩色图标,可以用在Power BI进行周边装饰、条件格式设置等。...图标库分为PNG和SVG格式,PNG格式可以转换为BASE64批量导入Power BI(参考视频:Power BI 批量导入本地产品、人物照片),SVG可以可以使用批量导入文本的方式导入Power BI...图标下载地址:https://github.com/googlefonts/noto-emoji 建议使用SVG格式,该格式支持无损放大,PNG放大后会比较模糊。...有些读者所在的公司可能涉及国际业务,这个库还包含了各个国家、地区或组织的旗帜,同样提供了PNG和SVG格式。...旗帜的样式也有两种,上方的平铺样式或下方的波浪样式: 有需求的读者可以前往上方的github地址下载。 ----

    55830

    Flutter BottomNavigation 底部导航详解 及问题记录

    Flutter BottomNavigation 底部导航详解 主要是使用了 Scaffold下的 bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,...int _currentIndex = 0; static const int mainNum = 0xFFFA8C16; 这里多数一句 Flutter 提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用...如颜色, 按钮,图标 Colors.white // 白色颜色 Icons.home // home 图标 FloatingActionButton // 漂浮的按钮 效果图 在colors.dart...中查看预设颜色值 在icons.dart中查看预设图标 源码 三个文件 main.dart import 'package:flutter/material.dart'; import '....{ setState(() {_counter++;}); } 使用void关键字修饰, 使用setState 来修改内部变量 问题1: 假如页面停留在首页, 此时来了一个消息,需要在消息的导航栏上加上徽标

    3.3K10

    谷歌描绘了Flutter的环境计算愿景

    在今天的Flutter Interact上,谷歌描绘展示了Flutter的环境计算愿景,它允许开发者从同一个代码库构建嵌入式、移动、桌面和web应用程序。...开发人员能够在各种设备上使用Flutter,包括电话、可穿戴设备、平板电脑、台式机、笔记本电脑、电视和智能显示器。 谷歌称之为环境计算——你的服务和软件,在任何你需要的地方都是可用的。...谷歌希望flutr成为“一个便携式工具包,可以在任何你想在屏幕上画像素的地方,建立舒适的体验。” Flutter于2017年5月在谷歌I/O开发者大会上首次发布,并于2018年12月发布1.0版。...展望未来,Flutter正在演变成一种工具,可以在任何开发人员想要构建的地方提供UI体验。谷歌希望开发人员能够随时随地,没有限制地进行应用程序开发,而不会有“我该用什么设备开发”的问题。...谷歌今天发布了Frutter 1.12,改进了其性能。对于那些保持计数的人来说,这是自1.0一年前发布以来的第五个稳定版本。

    2.3K20

    如何为移动应用设计出色的图标

    谷歌物料设计模板 Android为Play商店图标提供了不同的形状。他们的所有准则都包含在“ Material Design”文档中。 ?...您可以自由探索自己喜欢的任何自定义形状,有时将图标中的元素直接使用会很好。甚至谷歌也这么做了。 ?...虽然形状和颜色是设计的基础,但您的图标还需要其他一些东西才能变得独特和可识别。回到本文的第一张图片,我们会注意到每个图标都使用简单的徽标形式或文本来标识其应用程序。...对于复杂的表单和图形,也会发生相同的可伸缩性问题,这就是大多数图标设计简单的原因。 如果这些表单与特定的徽标或公司图片没有关联,至少它们应该与应用的功能相关。...下面我们来总结一下诀窍: 尽可能避免在图标中使用文字。缩放图标时会出现问题。 在设计中使用简单易识别形式或徽标。

    1.4K20

    Flutter设置App的应用名字和应用logo图标的方法(android ios web)

    在前面的几期给大家介绍了flutter的安装以及一些简单的配置,还运行了helloword 那么接下来就带领大家了解如何设置应用名称以及图标 Flutter设置App的应用名字和应用logo图标的方法,...我本人有个习惯就是每次会先把应用程序的图标和logo换了,不然看这着急, 其实,Flutter设置App的应用名称和图标是要分开来操作的,Android和iOS以及web等是分开设置对应的App名称和图标的...Flutter在新建过程中,生成的project name是默认的应用名称,应用图标也是默认的,具体效果如下所示: 一、Flutter中设置Android的应用名称和图标 1、首先要定位到修改应用名称的文件...; (2)AndroidManifest.xml文件中application下面的icon对应的值就是应用的图标文件; 二、Flutter中设置iOS的应用名称和图标 ios设置的路径在 ios—...: 三、Flutter中设置web端的应用名称和图标 应用名称 index.html中的title 应用图标 最后在main.dart 中默认有两个 title,你可以理解为第一个为应用内名称

    1.8K00

    Flutter中设置Android的应用名称和图标(android,ios,web)#yyds干货盘点#

    其实,Flutter设置App的应用名称和图标是要分开来操作的,Android和iOS是分开设置对应的App名称和图标的,这一点一定要注意。...Flutter在新建过程中,生成的project name是默认的应用名称,应用图标也是默认的,具体效果如下所示: [Flutter中设置Android的应用名称和图标(android,ios,web)...#yyds干货盘点#_应用图标_02] 一、Flutter中设置Android的应用名称和图标 这里把应用名称和图标放在一起介绍,具体操作如下所以。...、Flutter中设置web端的应用名称和图标 应用名称 index.html中的title [Flutter中设置Android的应用名称和图标(android,ios,web)#yyds干货盘点#_...flutter_08] 应用图标 [Flutter中设置Android的应用名称和图标(android,ios,web)#yyds干货盘点#_flutter_09] [Flutter中设置Android

    3.4K20

    添加Github徽标

    工具网站包括: 徽标生成网站:shields 图标查询网站:simpleicons html压缩网站:htmlpack 转义字符查询 预览效果: 具体步骤 通过shields.io在线生成。...支持命名徽标,但不支持自定义徽标。 ?logoColor=violet logoWidth 给图标提供的水平空间 ?...logoWidth=40 link 徽标指向的链接,此时需要用object标签引用才能生效写法看示例代码 ?...right: 徽标右边的信息,必选参数, logo:徽标图标,图标名称详见simpleicons,可选参数。 color:徽标右边的颜色,可选参数。 link:指向的链接,可选参数。...基本参数,定义徽标左右文字和图标 {% bdage Theme,Butterfly %} {% bdage Frame,Hexo,hexo %} 信息参数,定义徽标右侧内容背景色,指向链接 {% bdage

    25610

    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业

    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程...-商业应用级实战开发-优雅草央千澈章节内容【03】章节内容【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例开发背景我们以vs-code开发flutter...项目中,mipmap文件夹用于存放不同分辨率的应用图标。...Try setting CHROME_EXECUTABLE to a Chrome executable.第一个是提示没接受协议,第二个是找不到谷歌浏览器,第一步,执行:flutter doctor -...-android-licenses执行后有很多协议,都输入Y接受即可,第二步,找到谷歌浏览器的软件地址,加入谷歌浏览器进入环境变量,变量名: CHROME_EXECUTABLE变量值: C:\Program

    13810

    推特抛弃蓝鸟,“X”徽标正式上线网页版!马斯克的X宇宙要来了吗?

    周一早上,马斯克表示,推特会正式改名“X”,公司也会用粉丝制作的“X”徽标替换掉原本的蓝鸟徽标。...现在,如果你登录推特网页版,“X”已经取代了推特徽标,官方@twitter 帐户的个人资料图片也已经进行了更换。 被大众熟知的蓝鸟徽标由15个重叠的圆圈构成,Grasser表示这有助于提高其易读性。...与此同时,新的“X”,用马斯克的话来说,是一个“临时标志”,他表示该徽标会随着时间的推移不断完善。...“X”是一个通用图标,看起来几乎与Unicode字符“Mathematical Double-Struck Capital X”(又名 U+1D54F,又名“”)相同,这就是马斯克能够在完全基于文本的推文中发布该徽标的方式...在90分钟的TwitterSpaces语音聊天中,马斯克表示,xAI的目标是“理解宇宙”,xAI将寻求建立一个“良好的AGI”,作为微软、谷歌和OpenAI的替代品。

    44030

    添加Github徽标

    工具网站包括: 徽标生成网站:shields 图标查询网站:simpleicons html压缩网站:htmlpack 转义字符查询 预览效果: 具体步骤 通过shields.io在线生成。...logoWidth=40 | | link | 徽标指向的链接,此时需要用object标签引用才能生效写法看示例代码...; 具体用法 标签语法 配置参数 样式预览 示例源码 {% bdage [right],[left],[logo]||[color],[link],[title]||[option] %} left:徽标左边的信息...right: 徽标右边的信息,必选参数, logo:徽标图标,图标名称详见simpleicons,可选参数。 color:徽标右边的颜色,可选参数。 link:指向的链接,可选参数。...基本参数,定义徽标左右文字和图标 {% bdage Theme,Butterfly %} {% bdage Frame,Hexo,hexo %} 信息参数,定义徽标右侧内容背景色,指向链接 {% bdage

    92610

    源码分享-一个帮助flutter开发者快速上手的app

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。...在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。...Flutter接触时间不长,也就是刚刚到门口,还不算入门,由于国内的资料相对较少,官网又有时打不开,所有自己从头搭建了个基础框架,把常用的Widget组件的构造函数及常用属性做了简单的整理,方便后期查找...├─lib # Flutter原生代码 │ ├─assets # 静态资源目录 │ │ ├─icon # 小图标目录 │ │ ├─sample # 组件里面用到的放在这里...Flutter并已经正常配置开发环境的前提下,然后clone代码并运行项目,如果本机未配置开发环境,或者配置开发环境过程中有问题,可以下方留言,有时间我会在编写一篇配置开发环境过程的文章。

    8631413

    「Adobe国际认证」三大科技巨头LOGO的演变,能看懂,绝不小白

    对于提供这些抽象服务并参与品牌延伸的公司来说,重要的是让自己看起来不那么陌生和难以接近。这可以通过公司更名来完成。 品牌重塑过程的一部分通常涉及徽标的改造。...下面,我们将看看科技界知名人士的一些标志,以及他们为跟上时代而经历的变化。 谷歌 原始LOGO 事先声明,这不是恶作剧! 互联网可能是一个丑陋的地方,谷歌的第一个字标肯定支持这种情况。...如果有帮助,请知道第一个徽标是作为占位符放入的,而谷歌仍然只是斯坦福大学拉里佩奇和谢尔盖布林负责的一个研究项目。...即使公司快速发展和变化,这个版本的徽标仍然存在十多年。随着阴影的去除,浮雕的去除,以及 Google Doodles 不时与用户的整合,它保持新鲜感,让事情变得令人兴奋和不可预测。...最新的徽标同时具有标识和图标组件。关于标识,微软的博客写道,“我们正在使用 Segoe 字体,这与我们在产品和营销传播中使用的字体相同”。 另一方面,该符号“在数字运动的世界中很重要。

    50900
    领券