ASHISH RANJAN
Posted on October 11, 2023
i want to make a carousel like this so basically there are 5 items there can be more...
but at time 5 items should be visible on the screen .. upon dragging should change positions... left and right both just like how a normal slider works
i have tried to make a design with the stack widget but i dont know how can i convert into a slider or add any other logics to achive this.
class TriangularCarousel extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 45.h,
width: 100.w,
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
child: Opacity(
opacity: 0.4,
child: Image.asset(
"assets/logo.png",
height: 45.h * 0.25,
)),
),
Positioned(
top: 45.h * 0.15,
left: 100.w * 0.1,
child: Opacity(
opacity: 0.6,
child: Image.asset(
"assets/logo.png",
height: 45.h * 0.38,
),
),
),
Positioned(
bottom: 0,
left: 100.w * 0.2,
right: 100.w * 0.2,
child: Image.asset(
"assets/logo.png",
height: 45.h * 0.7,
),
),
Positioned(
top: 45.h * 0.15,
right: 100.w * 0.1,
child: Opacity(
opacity: 0.6,
child: Image.asset(
"assets/logo.png",
height: 45.h * 0.38,
),
),
),
Positioned(
top: 0,
right: 0,
child: Opacity(
opacity: 0.3,
child: Image.asset(
"assets/logo.png",
height: 45.h * 0.25,
),
),
),
],
),
);
}
}
💖 💪 🙅 🚩
ASHISH RANJAN
Posted on October 11, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
