Search code examples
flutteruser-interfacemobilecontainers

Flutter Container Overlap when scrolling


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:

enter image description here

Img2:

enter image description here

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)))

Solution

  • The clipBehavior property of Container defaults to Clip.none. Set it to Clip.antiAlias on the outer Container.

    Container(
      clipBehavior: Clip.antiAlias,
      // ...
    )