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);


  @override
  Widget build(BuildContext context) {
    ///圆角裁剪
    return ClipRRect(
      ///四个圆角的角度
      borderRadius: BorderRadius.circular(5),
      ///被裁剪的子Widget
      child:Container(
        ///渐变样式的背景装饰
        decoration: BoxDecoration(
          gradient: gradient
        ),
        ///圆角背景大小
        height: 23,
        width: 23,
        ///中间的小图标
        child: Icon(
          ///图标数据
          iconData,
          ///图标大小
          size: 18,
          ///图标的颜色
          color: Colors.white,
        ),
      ),
    );
  }
}


完毕

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


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

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

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


早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页