Reputation: 49
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,
);
Upvotes: 0
Views: 77
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