Flutter Icons 与 CupertinoIcons 的不一样的体验

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

Flutter 内置了一套 Material 图标，在使用时这套图标时可以直接使用 Icon组件来调用如下代码：

buildDefaultIcon() {return Icon(///图标数据Icons.phone,///图标大小size: 18,);
}

当然也可以通过添加 cupertino_icons 依赖来使用苹果风格的一套图标：

dependencies:cupertino_icons: ^0.1.3

使用 Icon 来加载苹果风格的图标只需要使用 CupertinoIcons 来引用即可，代码如下：

buildDefaultIcon() {return Icon(///图标数据CupertinoIcons.phone_solid,///图标大小size: 18,);}

运行效果对比：

当然默认的效果有一定的使用场景，经过笔者加工如下所示：

实现思路就是通过一个容器 Container 来包裹这个 Icon，然后给这个容器 Container 设置一个渐变颜色背景 Gradient ，如这里设置的线性渐变背景，小编已将这一套写成一个 RoundCornerIcon , 直接调用就可实现上述图中的图标样式，代码如下：

 RoundCornerIcon buildRoundCornerIcon() {return RoundCornerIcon(///电话小图标iconData: CupertinoIcons.phone_solid,///线性渐变的背景gradient: LinearGradient(///颜色过渡colors: [Colors.redAccent,Colors.orange,],///颜色过渡的开始位置  左上角begin: Alignment.topLeft,///颜色过渡的结束位置  右下角end: Alignment.bottomRight,),);}

对于 RoundCornerIcon 就是一个 StatelessWidget，具体的实现如下：

import 'package:flutter/material.dart';class RoundCornerIcon extends StatelessWidget {final IconData iconData;final Gradient gradient;const RoundCornerIcon({Key key,@required this.gradient,@required this.iconData,})  : assert(iconData != null),assert(gradient != null),super(key: key);@overrideWidget build(BuildContext context) {///圆角裁剪return ClipRRect(///四个圆角的角度borderRadius: BorderRadius.circular(5),///被裁剪的子Widgetchild:Container(///渐变样式的背景装饰decoration: BoxDecoration(gradient: gradient),///圆角背景大小height: 23,width: 23,///中间的小图标child: Icon(///图标数据iconData,///图标大小size: 18,///图标的颜色color: Colors.white,),),);}
}

完毕

当然以小编的性格，要实现百万 Demo 随时复制粘贴使用，在这里是必须有源码的：本文章的全部代码在这里

【x1】微信公众号的每日提醒随时随记每日积累随心而过

【x2】各种系列的视频教程免费开源关注你不会迷路

【x3】系列文章百万 Demo 随时复制粘贴使用

Flutter Icons 与 CupertinoIcons 的不一样的体验相关推荐

Flutter 项目开发指导从基础入门到精通使用目录
Flutter 从入门到精通系列文章本文章为 Flutter 开发中的经验积累分享.教程分享.开发笔记分享目录,持续维护中. 题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Fl ...
Flutter之第一个 Flutter App（四）
Flutter开发文档官网英文版初次体验Flutter:创建Flutter应用 hello 开始之前,检查一下环境: 如上图,环境正常. VS Code创建Flutter应用 1.启动 VS Cod ...
使用Flutter之后，我们的CPU占用率降了50%
近年来,移动互联网迅猛发展,业务需求频繁更新,业务内容动态化需求急剧增加,纯原生开发已经无法满足业务快速增长的需求,因此诞生了多种跨平台开发框架,如 H5+ 原生开发.React Native 和 W ...
flutter的安装与设置
我的公众号在安装之前和大家罗嗦几句, 什么是flutter Flutter是一个开源软件开发工具包 (SDK),用于"帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面 ...
走近科学，探究阿里闲鱼团队通过数据提升Flutter体验的真相
背景闲鱼客户端的flutter页面已经服务上亿级用户,这个时候Flutter页面的用户体验尤其重要,完善Flutter性能稳定性监控体系,可以及早发现线上性能问题,也可以作为用户体验提升的衡量标准. ...
flutter图片点击跳转_使用Flutter之后，我们的CPU占用率降了50%
作者|王敏君(华泰证券前端技术团队) 编辑|覃云近年来,移动互联网迅猛发展,业务需求频繁更新,业务内容动态化需求急剧增加,纯原生开发已经无法满足业务快速增长的需求,因此诞生了多种跨平台开发框架,如 ...
一个优秀的可定制化Flutter相册组件，看这一篇就够了
背景在做图片.视频相关功能的时候,相册是一个绕不开的话题,因为大家基本都有从相册获取图片或者视频的需求.最直接的方式是调用系统相册接口,基本功能是满足的,一些高级功能就不行了,例如自定义UI.多选图 ...
移动互联网这十年，跨平台技术的演进及 Flutter 的未来
作者 | 袁辉辉责编 | 郭芮移动跨平台技术演进 1. 引言移动互联网发展十余年,伴随着 Android.iOS 等智能手机的不断普及,移动端已逐步取代 PC 端,成为兵家必争之地.正所谓 ...
将 75000 行原生 iOS 应用程序移植到 Flutter 后，结果太惊讶！
[CSDN编者按]很少有文章,介绍如何将大型应用,移植到Flutter.而本文的作者--一位来自澳洲的Native iOS & Flutter的开发者,尝试这样做了,结果让他十分惊讶.到底是什 ...

Flutter Icons 与 CupertinoIcons 的不一样的体验

Flutter Icons 与 CupertinoIcons 的不一样的体验相关推荐

最新文章

热门文章