Huy Ngô
Huy Ngô

Reputation: 49

How to create swiper carousel in Flutter?

How to create a carousel slider similar to the one in the image below using Flutter.

I tried using card_swiper as shown below, but it still doesn't look like the image. I hope someone can help.

@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,
    );

enter image description here

Upvotes: 0

Views: 77

Answers (1)

WaLeed Ahmad
WaLeed Ahmad

Reputation: 177

Add ..addRotate([-20.0 / 180 * 3.14, 0.0, 20.0 / 180 * 3.14]) // Slight rotation for angled cards The rotation angles are smaller (±20 degrees), giving a subtle angled layout for the side cards.

Upvotes: 0

Related Questions