Для этого вы можете использовать ShaderMask , который позволяет применять шейдер к виджету, принимая во внимание Blend Mode . Нас интересует Blend Mode, поэтому шейдер будет простым цветом:
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,
);
}
}
Вот пример рендера:
Для вашего точного примера изображения дочерним элементом должен быть виджет Text
, и вы также должны включить его в ClipRRect
для закругленных углов (или вы можете найти более оптимальные решения, используя BoxDecoration
, если влияние на производительность из ClipRRect
это проблема)
Преимущество этого решения в том, что оно работает с любым виджетом в качестве дочернего элемента и является составным виджетом, который можно вставлять в макет.