如何在Flutter中实现与示例图一致的轮播滑块？

我希望在Flutter中实现如下示例图所示的轮播滑块，尝试使用card_swiper库编写了代码，但实现效果和示例图不符，恳请帮忙调整。

我的代码：

@override
Widget build(BuildContext context) {
  return Swiper(
    layout: SwiperLayout.CUSTOM,
    customLayoutOption: CustomLayoutOption(startIndex: -1, stateCount: 3)
      ..addScale([0.8, 1, 0.8], Alignment.center)
      ..addRotate([-25.0 / 180, 0.0, 25 / 180])
      ..addTranslate([
        const Offset(-300.0, -40.0),
        const Offset(0.0, 0.0),
        const Offset(300.0, -40.0)
      ]),
    itemWidth: 270.0,
    itemHeight: 329.0,
    itemBuilder: (context, index) {
      return AppKeepAlive(
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(width: 1, color: Colors.black)),
        ),
      );
    },
    outer: false,
    itemCount: 3,
  );
}

示例效果：

调整方案 #

从示例图的视觉效果出发，修改customLayoutOption的参数，让左右卡片的缩放、旋转、偏移更贴近目标效果：

@override
Widget build(BuildContext context) {
  return Swiper(
    layout: SwiperLayout.CUSTOM,
    customLayoutOption: CustomLayoutOption(startIndex: -1, stateCount: 3)
      // 缩小左右卡片与中间卡片的尺寸差
      ..addScale([0.9, 1, 0.9], Alignment.center)
      // 降低旋转角度，避免过度倾斜
      ..addRotate([-10.0 / 180 * pi, 0.0, 10.0 / 180 * pi])
      // 缩小水平偏移距离，让左右卡片更靠近中间，同时向下偏移形成层级
      ..addTranslate([
        const Offset(-180.0, 20.0),
        const Offset(0.0, 0.0),
        const Offset(180.0, 20.0)
      ]),
    itemWidth: 270.0,
    itemHeight: 329.0,
    itemBuilder: (context, index) {
      return AppKeepAlive(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(width: 1, color: Colors.black),
            // 添加阴影增强3D层级感
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 2,
                blurRadius: 5,
                offset: const Offset(0, 3),
              )
            ]
          ),
        ),
      );
    },
    outer: false,
    itemCount: 3,
    // 可选：开启无限轮播
    loop: true,
  );
}

核心调整说明： #

• 缩放比例：将左右卡片的缩放值从0.8改为0.9，减少大小差异，匹配示例的紧凑感
• 旋转角度：把旋转角度从25度降至10度，避免卡片过度倾斜
• 平移参数：水平偏移从300调整为180，让左右卡片更靠近中间；同时将垂直偏移从-40改为20，使左右卡片略低于中间卡片，形成自然层级
• 阴影效果：给卡片添加阴影，增强视觉层次感，更贴近示例的立体效果

如果需要适配不同屏幕尺寸，可以结合MediaQuery.of(context).size.width动态计算偏移值，确保在不同设备上的效果一致。

内容的提问来源于stack exchange，提问作者Huy Ngô