How to limit PageView when changing pages in flutter

I am using PageView and I would like to limit how much of the next page is visible when I scroll. If you need to see how I mean I included two screenshots of how I would like it to be.

Here is how I would like it to be:

First page: https://imgur.com/a/wNfkQbY

Second page: https://imgur.com/a/LJSFTno

I tried changing the viewport size when scrolling to another screen but that just messes everything up.

Here is my current code:

class OrderList extends StatefulWidget {
  static const String routeName = "/OrderList";

  @override
  _OrderListState createState() => _OrderListState();
}

class _OrderListState extends State<OrderList> {
  PageController controller = PageController();
  int _previousPage;
  var currentPageValue = 0.0;
  double _viewportScale = 1.0;

  @override
  Widget build(BuildContext context) {
    this.controller = PageController(
      initialPage: 0,
      viewportFraction: _viewportScale,
    );

    return Scaffold(
      backgroundColor: WHITE,
      body: 
      PageView(
        onPageChanged: (num) {
          print("Current page number is " + num.toString());
        },
        //physics: BouncingScrollPhysics(),
        controller: controller,
        scrollDirection: Axis.vertical,
        pageSnapping: false,

        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            color: Colors.transparent,
            child: Stack( ),
          ),
          Container(
            color: Colors.redAccent,
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
          )
        ],
      ),
    );
  }
}

Basically, I just want a smooth transition between two pages while part of the first page is still visible on the other.

Any help would be appreciated :D