Flutter Icons 与 CupertinoIcons 的不一样的体验

原创

早起的年轻人 2022-02-16 14:32:54 ©著作权

文章标签 Flutter Icons CupertinoIcons ico 数据 文章分类 开源

©著作权归作者所有：来自51CTO博客作者早起的年轻人的原创作品，请联系作者获取转载授权，否则将追究法律责任

题记

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

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

运行效果对比：

Flutter Icons 与 CupertinoIcons 的不一样的体验_数据

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

Flutter Icons 与 CupertinoIcons 的不一样的体验_CupertinoIcons_02

实现思路就是通过一个容器 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,
        ),
      ),
    );
  }
}