Flutter 中渐变有三种：
- RadialGradient：放射状渐变
- LinearGradient：线性渐变
- SweepGradient：扇形渐变
一.搭配RadialGradient
Container(
color: Colors.white,
child: ShaderMask(
shaderCallback: (bounds) {
return RadialGradient(
colors: <Color>[Colors.transparent, maskcolor],
stops: const [0, 0],
).createShader(bounds);
},
blendMode: BlendMode.srcATop,
child:Image.network(
'https://pics1.baidu.com/feed/5d6034a85edf8db12c3db1cc792e925e564e741b.jpeg?token=4808ad1026663b92b0c1c5d5c83efce0'),
),
)
其中blendMode的枚举类型的作用： blendMode为Container 的属性
1.搭配BlendMode.srcATop:可以制造圆形镂空效果。
src系列区别比较大（srcAtop透明，src不透明有图片会被遮盖。srcIn陷进去，srcOut突出来 . srcOver覆盖，跟下面的color类似。）
其中colors数组中，颜色在后面的覆盖全屏。搭配stops值。靠前面的大会出现镂空。靠后面的大会出现模糊底色。
2.搭配BlendMode.color。覆盖mask的背景色会以colors最后一个的值为准.另外color系列的几个方式区别不大（colorBurn,colorDodge,color）
3.搭配BlendMode.lighten(效果偏亮色油画 hardLight,softLight)，(暗色油画 darken), （x光线效果difference）。
二 .搭配LinearGradient
ShaderMask(
shaderCallback: (bounds) {
return const LinearGradient(
colors: <Color>[Colors.red, Colors.yellow],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
// stops: [0, 0],
).createShader(bounds);
},
child: Image.network(
'https://pics1.baidu.com/feed/5d6034a85edf8db12c3db1cc792e925e564e741b.jpeg?token=4808ad1026663b92b0c1c5d5c83efce0'),
)
三.搭配SweepGradient
ShaderMask(
shaderCallback: (bounds) {
return const SweepGradient(
colors: <Color>[
Colors.red,
Colors.orange,
Colors.purple,
Colors.green
],
startAngle: 1,
endAngle: 12 * 0.55,
stops: [0, 0, 0.5, 0.5],
).createShader(bounds);
},
child: Image.network(
'https://pics1.baidu.com/feed/5d6034a85edf8db12c3db1cc792e925e564e741b.jpeg?token=4808ad1026663b92b0c1c5d5c83efce0'),
)
