You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为Flutter图标添加渐变效果?已用ShaderMask但无效果

问题描述

我想为图标实现如图所示的径向渐变效果,但使用ShaderMask的代码后没有产生任何效果,请问该如何实现目标渐变?

效果参考图:
径向渐变图标

尝试的代码:

ShaderMask(
  shaderCallback: (Rect bounds) => RadialGradient(
     center: Alignment.center,
     radius: 0.5,
     colors: [
       Colors.pink,
       Colors.deepOrange,
     ],
     tileMode: TileMode.mirror,
  ).createShader(bounds),
  child: Icon(Icons.access_time,),),
解决方案

代码未生效的核心原因是ShaderMask默认混合模式不匹配,加上图标默认是不透明黑色,导致渐变被完全覆盖。只需调整两处即可实现效果:

  • 给ShaderMask添加blendMode: BlendMode.srcIn:这个混合模式会让渐变仅显示在图标(子组件)的不透明区域上,让渐变贴合图标形状。
  • 可选:将图标颜色设为白色,能让渐变色彩更纯粹(不设置也能生效,但黑色图标可能会让渐变色调偏暗)。

修改后的完整代码:

ShaderMask(
  shaderCallback: (Rect bounds) => RadialGradient(
    center: Alignment.center,
    radius: 0.5,
    colors: [
      Colors.pink,
      Colors.deepOrange,
    ],
    tileMode: TileMode.mirror,
  ).createShader(bounds),
  blendMode: BlendMode.srcIn, // 关键配置
  child: const Icon(
    Icons.access_time,
    size: 100, // 可按需调整图标大小
    color: Colors.white, // 可选优化
  ),
),

额外说明:
如果需要调整渐变的覆盖范围或中心点,可以修改RadialGradient的radius(比如设为1.0扩大渐变范围)、center参数来适配需求。

内容的提问来源于stack exchange,提问作者Gayatri Dyunakhe

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.18 05:40:30