SlideX

SlideX 🚀

🌟 What is SlideX?

SlideX is the premier, high-performance 120 FPS Motion Engine & Carousel Framework for Flutter.

Instead of installing 10 different packages for sliders, story viewers, product galleries, card swipers, and onboarding pages — SlideX combines everything into one unified, zero-dependency package with 100% granular color and style control!

👉 Check out the live interactive documentation at SlideX Docs

🔥 Features at a Glance

⚡ 120 FPS Hardware Acceleration: Zero-lag spring physics with GPU RepaintBoundary layer isolation and offstage pre-rendering.
🎴 Tinder-Style Card Swiper (SlideX.cardSwipe): Real-time gesture rotation, LIKE/NOPE badges, programmatic SlideXCardSwiperController, and instant rewind/undo.
🚀 App Onboarding Slider (SlideXOnboarding): Built-in 3D illustration cards, Skip, Next, and Get Started CTA buttons with active glowing shadows.
↕️ Vertical Axis Carousel (SlideX.vertical): Native vertical scroll with top/bottom arrow chevrons (▲, ▼) and vertical indicator dots bar.
📖 Instagram / Snapchat Story Viewer (SlideX.story): Timer progress bars, tap right/left navigation, and long-press to pause.
🛍️ E-Commerce Gallery & 360° Spinner (SlideX.gallery & SlideX.product360): Auto-scrolling thumbnail strip, full-screen lightbox zoom, and 360° product frame rotation.
🖼️ Universal Slide Container (SlideXItem): Pre-built factory constructors for Images (SlideXItem.image), Videos (SlideXItem.video), and Custom Child Widgets (SlideXItem.child).
🎭 27+ 2D & 3D Transitions: Coverflow 3D, Cube 3D, Sphere 3D, Wheel 3D, Cylinder 3D, Tunnel 3D, Helix 3D, Stack 3D, Parallax, Zoom, Scale, Blur, Liquid, Curtain, Morph, and Elastic.
🖱️ Web & Desktop Mouse Support: Native mouse wheel scrolling, trackpad gestures, and pauseOnHover auto-play control.

🚀 Installation

Add slidex to your pubspec.yaml:

dependencies:
  slidex: ^1.0.0

Import it in your Dart file:

import 'package:slidex/slidex.dart';

💡 Quickstart Code Snippets (Copy & Paste Ready)

1. 3D Coverflow Carousel

SlideX(
  effect: const CoverflowEffect(depth: 120.0, rotateAngle: 0.45),
  indicatorType: SlideXIndicatorType.expandingDot,
  indicatorActiveColor: const Color(0xFFEC4899),
  config: const SlideXConfig(
    autoPlay: true,
    viewportFraction: 0.85,
    pauseOnHover: true,
  ),
  items: [
    CardWidget1(),
    CardWidget2(),
    CardWidget3(),
  ],
)

2. Tinder-Style Card Swiper with Programmatic Controller

final controller = SlideXCardSwiperController();

// Widget
SlideX.cardSwipe(
  controller: controller,
  likeBadgeText: 'LIKE',
  nopeBadgeText: 'NOPE',
  onSwipeLeft: (index) => print('Swiped NOPE on card $index'),
  onSwipeRight: (index) => print('Swiped LIKE on card $index'),
  cards: [
    UserCard1(),
    UserCard2(),
    UserCard3(),
  ],
);

// Programmatic Control Buttons:
// controller.swipeLeft();
// controller.swipeRight();
// controller.rewind();

3. App Onboarding Slider

SlideXOnboarding(
  activeColor: const Color(0xFF6366F1),
  skipText: 'Skip',
  nextText: 'Next →',
  finishText: 'Get Started 🚀',
  pages: const [
    SlideXOnboardingItem(
      image: Icon(Icons.rocket_launch, size: 100, color: Color(0xFF6366F1)),
      title: 'Boost Your App',
      description: 'Beautiful UI • Smooth Motion • Infinite Possibilities',
    ),
    SlideXOnboardingItem(
      image: Icon(Icons.bolt, size: 100, color: Color(0xFFEC4899)),
      title: '120 FPS Motion Engine',
      description: 'Tuned spring physics with zero drop frames',
    ),
  ],
  onFinished: () => print('Onboarding Finished!'),
)

4. Vertical Axis Carousel Slider

SlideX.vertical(
  height: 440,
  viewportFraction: 0.85,
  indicatorActiveColor: const Color(0xFF6366F1),
  upControlColor: const Color(0xFF6366F1),
  downControlColor: const Color(0xFFEC4899),
  items: [
    CityCard(),
    OceanCard(),
    ForestCard(),
  ],
)

5. Image & Video Slide Items (`SlideXItem`)

SlideX(
  effect: const ZoomEffect(),
  items: [
    // Video Slide Item
    SlideXItem.video(
      VideoPlayerCoverWidget(),
      title: 'Cosmic Voyage (4K Trailer)',
      durationText: '02:45',
      badgeText: 'VIDEO 4K',
      onPlayTap: () => print('Play video'),
    ),

    // Image Slide Item
    SlideXItem.image(
      const NetworkImage('https://images.unsplash.com/photo-1518709268805-4e9042af9f23'),
      title: 'Neon Cyberpunk City',
      subtitle: 'Sci-Fi • 6K Wallpaper',
      badgeText: 'FEATURED',
    ),

    // Custom Child Widget Slide Item
    SlideXItem.child(
      CustomPromoBanner(),
    ),
  ],
)

6. Instagram / Snapchat Story Viewer

SlideX.story(
  items: [
    SlideXStoryItem(
      duration: Duration(seconds: 5),
      content: StoryPage1(),
    ),
    SlideXStoryItem(
      duration: Duration(seconds: 5),
      content: StoryPage2(),
    ),
  ],
  onCompleted: () => print('All stories completed!'),
)

SlideX.gallery(
  thumbnailHeight: 76,
  activeBorderColor: const Color(0xFF6366F1),
  enableFullscreenZoom: true,
  showBadge: true,
  items: [
    ProductMedia1(),
    ProductMedia2(),
    ProductMedia3(),
  ],
)

8. 360-Degree Interactive Product Viewer

SlideX.product360(
  height: 320,
  autoRotate: false,
  imageList: [
    AssetImage('assets/frame_01.png'),
    AssetImage('assets/frame_02.png'),
    // ... 36 product angle frames
  ],
)

📸 Showcase Template Renders

Template 01: CoverFlow 3D Carousel	Template 02: Cube 3D Slider
Template 03: Netflix Banner Carousel	Template 04: Instagram Story Viewer
Template 05: Tinder Card Stack	Template 06: E-Commerce Product Gallery
Template 07: Sphere 3D Carousel	Template 08: Glassmorphism Card Slider

⚙️ Granular Configuration Reference

Property	Default Value	Description
`scrollDirection`	`SlideXAxis.horizontal`	Carousel scroll axis (`horizontal` / `vertical`)
`viewportFraction`	`1.0`	Viewport area occupied per slide (0.0 to 1.0)
`autoPlay`	`false`	Enable automatic page slideshow
`autoPlayInterval`	`3 seconds`	Duration interval between auto slides
`pauseOnHover`	`true`	Pause slideshow on desktop mouse hover
`clipBehavior`	`Clip.none`	Container clip behavior package-wide
`loopMode`	`SlideXLoopMode.infinite`	Infinite looping carousel mode
`perspective`	`0.002`	3D perspective depth factor
`indicatorType`	`expandingDot`	Indicator style (`expandingDot`, `dot`, `number`, `progressLine`, `none`)
`indicatorActiveColor`	`Color(0xFF6366F1)`	Active indicator dot color
`indicatorInactiveColor`	`Color(0x4DFFFFFF)`	Inactive indicator dot color

📄 License

MIT License. Free for commercial and personal projects.

This site is open source. Improve this page.