有个设计需求，需要图片往一个方向线性渐变，自己研究了一下，需要用到ShaderMask这个遮罩，它除了可以添加颜色渐变，也可以实现透明度渐变，有兴趣的小伙伴可以自行了解，这里贴一下我封装的图片透明度渐变工具类，支持自定义渐变方向、本地图片和网络图片(网络图片加载需要依赖cached_network_image)，
效果如下：
下面是原图，上面是透明渐变
代码：
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
/// 透明渐变的图片Widget
class GradientImage extends StatelessWidget {
/// 图片地址-支持本地和网络图片
final String imgName;
/// 图片宽度
final double? width;
/// 图片高度
final double? height;
/// 渐变开始位置 - 默认Alignment.topCenter
final AlignmentGeometry begin;
/// 渐变结束位置 - 默认Alignment.bottomCenter
final AlignmentGeometry end;
const GradientImage(
{Key? key,
required this.imgName,
this.width,
this.height,
this.begin = Alignment.topCenter,
this.end = Alignment.bottomCenter})
: super(key: key);
@override
Widget build(BuildContext context) {
return ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: begin,
end: end,
colors: [Colors.black, Colors.transparent],
).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
},
blendMode: BlendMode.dstIn,
child: _createImage(),
);
}
/// 根据图片名判断是网络还是本地的图片
Widget _createImage() {
if (imgName.startsWith('http')) {
return CachedNetworkImage(
width: width,
height: height,
imageUrl: imgName,
fit: BoxFit.cover);
} else {
return Image.asset(imgName,
width: width,
height: height,
fit: BoxFit.cover,
alignment: Alignment.topCenter);
}
}
}
