带有内部箭头的颤振幻灯片

Question

如何在 Flutter 中实现这种行为？任何小部件或插件示例？

See this gif

我尝试了 carousels 插件和 viewPagers 小部件，但无法正常工作。

这是我开始使用的示例代码。

CarouselSlider(
   items: [
        Container(child: Text("Complimentary"), width: double.infinity),
        Container(child: Text("Complimentary"), width: double.infinity),
        Container(child: Text("Complimentary"), width: double.infinity),
        Container(child: Text("Complimentary"), width: double.infinity),
        Container(child: Text("Complimentary"), width: double.infinity),
   ],
   options: CarouselOptions(
        height: 39 * resizeFactor,
        autoPlay: false,
        enlargeCenterPage: true,
        autoPlayInterval: Duration(seconds: 10),
   ),
),

Answer 1

我通过使用 Swiper 和 Row of arrows 来实现它，代码如下：

      Stack(
        children: [
          Container(
            height: 39 * resizeFactor,
            child: Swiper(
              itemCount: 4,
              itemBuilder: (context, index) => getIndexWidget(index), // -> Text widget.
              viewportFraction: 0.4,
              onIndexChanged: (value) {
                setState(() => carouselIndex = value);
              },
              loop: false,
              controller: swiperController,
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 30 * resizeFactor),
            height: 39 * resizeFactor,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                getIndicatorWidget(false),  // back arrow icon.
                getIndicatorWidget(true),   // forward arrow icon.
              ],
            ),
          ),
        ],
      ),

感谢您的贡献。