如何使轮播像在堆叠的卡片上滑动一样？

Question

我正在尝试将堆叠卡放在颤振容器的中心视图上。 我试图让旋转木马像滑动或滑块一样只从左到右或从右到左。从右到左，下一张卡片会出现，从左到右滑动前一张卡片会回来。类似example link to animation

到目前为止，我已经通过 Stack 和 Positioned 小部件获得了所需的视图。现在如何使幻灯片或动画看起来像示例？

到目前为止，我尝试使用可拖动的方式来实现它，它可以拖动到四周，这不是我正在寻找的行为。然后我查看了PageView，它不适用于Positioned 小部件，因为它们预计在Stack 下。所以目前我不确定该怎么做？任何指南或示例都会非常有帮助，因为我刚刚开始颤抖一个星期。

return Scaffold(
  body: SafeArea(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SvgPicture.asset(
                  'assets/images/group_6.svg',
                  fit: BoxFit.scaleDown,
                ),
                SizedBox(width: 10),
                Text(
                  'My cool Header',
                  style: TextStyle(
                      color: const Color(0xFF000000),
                      fontSize: Constants.height / 70,
                      fontFamily: 'Exo2',
                      fontWeight: FontWeight.w600),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 13,
            child: Stack(
              overflow: Overflow.visible,
              alignment: Alignment.center,
              children: <Widget>[
                Positioned(
                  right: (sizingInformation.screenSize.width * 0.09),
                  left: (sizingInformation.screenSize.width * 0.21),
                  child: Card(
                    color: Colors.blue,
                    elevation: 10.0,
                    child: Container(
                      height: (sizingInformation.screenSize.height * 0.5),
                    ),
                  ),
                ),
                Positioned(
                  right: sizingInformation.screenSize.width * 0.15,
                  left: sizingInformation.screenSize.width * 0.15,
                  child: Card(
                    color: Colors.red,
                    elevation: 10.0,
                    child: Container(
                      height: (sizingInformation.screenSize.height * 0.55),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 2,
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Some cool text',
                    style: TextStyle(
                      color: const Color(0xFF000000),
                      fontSize: Constants.height / 70,
                      fontFamily: 'Exo2',
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Text(
                    'Some cool text',
                    style: TextStyle(
                        color: const Color(0xFF000000),
                        fontSize: Constants.height / 70,
                        fontFamily: 'Exo2',
                        fontWeight: FontWeight.w600),
                  ),
                ]),
          ),
          Expanded(
            flex: 3,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // Search
                IconButton(
                    icon: SvgPicture.asset(
                      'assets/images/group_9.svg',
                      fit: BoxFit.contain,
                    ),
                    onPressed: () {
                      widget.comingFromLogin
                          ? Navigator.push(context,
                              SlideRightRoute(page: SearchFoodPage()))
                          : _loginPopUp();
                    }),

                // Add Event
                IconButton(
                  icon: SvgPicture.asset(
                    'assets/images/group_26.svg',
                    fit: BoxFit.contain,
                  ),
                  onPressed: () {
                    widget.comingFromLogin
                        ? Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => Events()))
                        : _loginPopUp();
                  },
                ),

                // Profile
                IconButton(
                    icon: SvgPicture.asset(
                      'assets/images/group_8.svg',
                      fit: BoxFit.contain,
                    ),
                    onPressed: () {
                      widget.comingFromLogin
                          ? Navigator.push(context,
                              SlideLeftRoute(page: ProfileDrawer()))
                          : _loginPopUp();
                    }),
              ],
            ),
          ),
        ]),
  ),
);

Answer 1

是不是类似于这个库：flutter_swiper，堆栈布局

Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  itemWidth: 300.0,
  layout: SwiperLayout.STACK,
)