如何显示这样的下一张卡片并在屏幕上仅显示一张卡片？（UI的屏幕截图）

Question

我设计了整个卡。但是我不明白如何显示这样的下一张卡片，以及如何在屏幕上仅显示一张卡片？

我想要的如下图所示，但到目前为止我一直失败了。任何帮助，将不胜感激。下面是我到目前为止所做的代码。

谢谢。

PageView.builder(
   scrollDirection: Axis.vertical,
   physics: BouncingScrollPhysics(),
   reverse: true,
   controller: controller,
   itemCount: 10,
   itemBuilder: (BuildContext context, int position) {

//previous screen showing, If the page is the page being swiped from

if (position == currentPageValue.floor()) {
  return Transform(
    transform: Matrix4.identity()..rotateX(currentPageValue - position),
    child: Container(
      color: position % 2 == 0 ? Colors.blue : Colors.pink,
        child: Center(
          child: Text("Page if $position ${currentPageValue.floor()}",
                   style: TextStyle(color: Colors.white, fontSize: 22.0)),
        ),
    ),
  );
} 

//after scroll, If the page is the page being swiped to

else if (position == currentPageValue.floor() + 1){
  return Transform(
    transform: Matrix4.identity()..rotateX(currentPageValue - position),
    child: Container(color: position % 2 == 0 ? Colors.blue : Colors.pink,
       child: Center(
          child: Text("Page$position ${currentPageValue.floor()+1}",
                 style: TextStyle(color: Colors.white, fontSize: 22.0)),
       ),
    ),
  );
}

//If the page is a page off screen

else {
   return Container(color: position % 2 == 0 ? Colors.blue : Colors.pink,
     child: Center(
        child: Text("Page$position",
               style: TextStyle(color: Colors.white, fontSize: 22.0)),
     ),
   );
}
}),

请检查我需要这张卡

当前进度-我需要在主屏幕上显示下一页卡片

Answer 1

想要使用PageView的声音