Need help to solve unexpected behaviour of CustomClipper and ClipPath in flutter web

Viewed 178

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.

0 Answers
Related