我想在Flutter中使用内置的Flutter小部件实现以下效果,而无需使用具有透明性的PNG图像。
我正在尝试使用backgroundBlendingMode,但没有成功。
我也可以考虑使用自定义绘画工具绘制圆形和内部十字形,但是理想情况下,我想使用任何Icon或任何其他Widget来剪切背景。
我还偶然发现了一种叫做CustomClipper
的东西。是要走的路吗?
假设我们有以下小部件:
return Stack(
children: <Widget>[
SizedBox(
height: 44,
width: 44,
child: Image.network(
'https://images.pexels.com/photos/1295138/pexels-photo-1295138.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
fit: BoxFit.cover,
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
top: 0,
child: Icon(
Icons.close,
color: Colors.black,
),
),
],
);
可以from pexels拍摄示例图像。
答案 0 :(得分:2)
好的,所以我在this question中找到了SO的答案。
看来正确的关键字是cutout
。
所以我的解决方案非常简单,如下所示:
ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Cutout(
color: Colors.white,
child: Icon(
Icons.close,
color: Colors.white,
),
),
),
然后使用ShaderMask剪切器:
class Cutout extends StatelessWidget {
const Cutout({
Key key,
@required this.color,
@required this.child,
}) : super(key: key);
final Color color;
final Widget child;
@override
Widget build(BuildContext context) {
return ShaderMask(
blendMode: BlendMode.srcOut,
shaderCallback: (bounds) =>
LinearGradient(colors: [color], stops: [0.0]).createShader(bounds),
child: child,
);
}
}