Prevent BoxShadow from being clipped by parent

Question

I'm building my own material-like card with a box shadow. I want to have several of these combined in a PageView, so that I can swipe between cards - each Card should fill out the entire width of the screen. The cards are having a BoxShadow as decoration, however when inserting the Card into the PageView (or any other wrapping widget), the BoxShadow will disappear as it is clipped by the PageView's bounding box.

This can be fixed by wrapping the Card into a Padding, but that's not what I want since I prefer the padding to be given by the outermost widget to all child widgets of that entire view - so that in case my padding ever changes I don't have to change every single widget.

This is how my Card code looks like:

class Card extends StatelessWidget {
  final Widget child;
  final EdgeInsetsGeometry padding;

  Card({@required this.child, this.padding});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white, boxShadow: <BoxShadow>[
        BoxShadow(color: Color.fromRGBO(0, 0, 0, 0.1), blurRadius: 14.0),
        BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.1),
            offset: Offset(0, 2),
            blurRadius: 2.0)
      ]),
      child: Padding(
        padding: padding ?? EdgeInsets.all(20),
        child: this.child,
      ),
    );
  }
}

Wrapping several of these results in the described clipping behavior.

Is there a way of telling Flutter not to clip whatever is "leaking" out of the bounding box? The same behavior happens when positioning widgets on a stack out of bounce.

Answer 1

You can use margins:

...
Container(
  margin: EdgeInsets.all(10), 
..

Maybe you would be interested with viewportFraction PageController argument:

final PageController controller = PageController(
  viewportFraction: 1,
);
...
PageView.builder(
  controller: controller,

It shrinks a size of the page in PageView, so nearest pages become visible.