DEV Community

ASHISH RANJAN
ASHISH RANJAN

Posted on

Flutter - Triangular CAROUSEL Slider

Image description

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


Enter fullscreen mode Exit fullscreen mode

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay