I'm trying to make an hole in one layer of stack using custom clipper. my CustomClipper class is,
class Clipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path2 = Path()..addRect(Rect.fromLTWH(10, 10, 100, 100));
return Path.combine(
PathOperation.difference,
Path()..addRect(Offset.zero & size),
path2,
);
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}
Use of Clipper class in ClipPath,
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: [
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
ClipPath(
clipper: Clipper(),
child: Container(
color: Colors.black45,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
)
],
),
);
}
As output of above code there should be a while square hole of size 100 x 100 at coordinate (10,10). as defined in path2 in Clipper class. but in web it is not working.
I tried different value of path2 in Clipper. In some cases hole is visible but in other its not. I am adding some of those cases here,
final path2 = Path()..addRect(Rect.fromLTWH(10, 10, 100, 100)); // not working
final path2 = Path()..addRect(Rect.fromLTWH(0, 10, 100, 100)); // working
final path2 = Path()..addRect(Rect.fromLTWH(10, 120, 100, 100)); // not working
final path2 = Path()..addRect(Rect.fromLTWH(-10, 10, 100, 100)); // working
final path2 = Path()..addRect(Rect.fromLTWH(100, 10, 900, 1000)); // working
Please help me if anyone has a solution for this problem. If there is any other way to achieve same result as custom clipper that will also work. In below link you can find an example for the same. https://github.com/flutter/flutter/issues/94212
Note: I am facing this issue only in web. for android, iOS and windows apps it is working fine. I'm using flutter 2.2.3.