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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With