Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clipping widget only vertically

Tags:

flutter

I have a ListView.builder that contains Containers with blurred shadows. By default, the ListView clips the edges, which means my shadows get clipped. If I remove the clip on the Listview by using clipBehavior: Clip.none, the Listview then scrolls items vertically beyond the bounds of the ListView.

Is there a way that I can clip the ListView only vertically, leaving the shadows intact horizontally?

like image 214
jon Avatar asked Oct 21 '25 20:10

jon


1 Answers

You can use a ClipPath:

 @override
  Widget build(BuildContext context) {
      return ClipPath(
               clipper: VerticalClipper(),
               child: ListView(),
      );
  }

And then implement VerticalClipper:

class VerticalClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(-double.maxFinite, 0);
    path.lineTo(double.maxFinite, 0);
    path.lineTo(double.maxFinite, size.height);
    path.lineTo(-double.maxFinite, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

That creates a rectangle with the height matching the height of your ListView and the width as wide as possible.

like image 177
Francesco Rasi Avatar answered Oct 24 '25 13:10

Francesco Rasi



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!