Flutter - Triangular CAROUSEL Slider

ASHISH RANJAN — Wed, 11 Oct 2023 08:52:20 +0000

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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

DEV Community: ASHISH RANJAN

Flutter - Triangular CAROUSEL Slider