I have an UI as below(img1) and when I scroll the UI, the gradient cards will slightly overlapped its parent container but if I removed the gradient, everything works fine. Is there anyway to prevent this overlapped without removing the gradient background in my card?
Img1:
Img2:
The following is my sample code:
Container(
margin: smallWidgetPadding,
width: MediaQuery.of(context).size.width,
decoration: ShapeDecoration(
color: colorScheme.onPrimary,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
shadows: [BoxShadow(color: colorScheme.shadow, blurRadius: 5)]),
child: Card(
margin: margin,
child: Container(
decoration: ShapeDecoration(
gradient: gradient, shape: roundedRectangleBorderless),
child: child)))
The clipBehavior
property of Container
defaults to Clip.none
. Set it to Clip.antiAlias
on the outer Container
.
Container(
clipBehavior: Clip.antiAlias,
// ...
)