Flutter Image透明渐变

有个设计需求,需要图片往一个方向线性渐变,自己研究了一下,需要用到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);
    }
  }
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容