Build a 3D Cylindrical Carousel in Flutter Without PackagesBuild a 3D Cylindrical Carousel in Flutter Without Packages
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Ankit's avatar
Ankit Jain
• Jun 9
3D Cylindrical Carousel — Flutter (zero packages)
A signature 3D carousel built entirely from scratch in Flutter — no carousel or animation libraries. Ten cards wrap around a virtual cylinder that spins continuously, responds to flicks with real momentum, and zooms any card into a detail view on tap.
The basic idea (how it's built)
Place the 10 cards evenly around a circle — each gets a fixed angle on the ring.
Keep one "current rotation" value; every card's live angle is its base angle plus that rotation.
Convert each angle into a position: sine → left/right placement, cosine → depth (which drives size, fade, and stacking order).
Add a perspective tilt so each card's face turns outward — that's what sells the 3D, rather than cards just sliding flat.
Advance the rotation a little every frame so it spins on its own and loops forever.
On drag, move the rotation with your finger; on release, turn the flick speed into a spin that decays with friction. Sort by depth so the front card sits on top, and tap to zoom.
Result: ~150 lines of Dart, 60fps, tap-to-zoom modal, light gradient UI — fully self-contained.
Stack: Flutter · Dart · 3D perspective transforms · frame-driven animation · custom gesture & physics
Part of an ongoing series exploring complex, signature mobile UI interactions.
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started