Nested PageView causes shadows to clip. How to avoid the shadow from getting clipped?

Issue

I have a simple nested PageView :

class PackViewVertical extends Stateless {
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
          scrollDirection: Axis.vertical,
          controller: PageController(initialPage: 0, viewportFraction: 0.63),
          itemCount: 5,
          itemBuilder: (_, index) {
            return PageView.builder(
                controller:
                    PageController(initialPage: 0, viewportFraction: 0.63),
                itemCount: sampleCard.length,
                itemBuilder: (context, ind) {
                  return sampleCard[ind];
                });
          }),
    );
  }
}
List sampleCard = [
  Container(
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
            color: Colors.redAccent, offset: Offset(0, 10), blurRadius: 150.0),
      ],
      color: Colors.red,
    ),
  ),
  Container(
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
            color: Colors.blueGrey, offset: Offset(0, 10), blurRadius: 150.0),
      ],
      color: Colors.blueGrey,
    ),
  ),
  Container(
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
            color: Colors.yellow, offset: Offset(0, 10), blurRadius: 150.0),
      ],
      color: Colors.yellow,
    ),
  ),
];

and this is the result: There is no boundary between the cards in horizontal view inner PageView But there is boundary in the vertical PageView which you can see it like a line when I add shadow.

My question is: How can I remove that boundary (from vertical view as well) to have a uniform background ? somthing like this: (I want the shadows to be uniform (like blended and reached to the next color) in the vertical view similar to horizontal view)

Solution

This is happening because your Container shadows are getting clipped by their PageView parents.

You can avoid shadow clipping with the help of PageView.clipBehavior property by setting it to Clip.none.

Add this to both of your PageViews,

clipBehavior: Clip.none

Answered By – Nisanth Reddy

Answer Checked By – Clifford M. (FlutterFixes Volunteer)