题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。
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 随时复制粘贴使用，在这里是必须有源码的：本文章的全部代码在这里
