Custom Carousel #

A highly customizable carousel widget for Flutter applications with support for images, titles, subtitles, and various interactive features.

Features #

• 🖼️ Display both network and local images
• 📝 Optional titles and subtitles with customizable styling
• 🔄 Auto-scrolling capability
• 🔘 Interactive page indicators
• ◀️▶️ Optional navigation buttons
• 🎨 Fully customizable appearance
• 👆 Tap callback for each item
• 📱 Responsive design

Installation #

Add these dependencies to your pubspec.yaml:

dependencies:
  apptomate_custom_carousel: ^0.0.1

Then run:

flutter pub get

Usage #

Basic Usage #

CustomCarousel(
  items: [
    CarouselItem(
      imageUrl: 'https://example.com/image1.jpg',
      title: 'First Image',
      subtitle: 'Description for first image',
    ),
    CarouselItem(
      imageUrl: 'assets/local_image.png',
      title: 'Local Image',
    ),
  ],
)

All Parameters #

CarouselItem Properties #

Example #

CustomCarousel(
  height: 250,
  isNetworkImage: true,
  autoPlayInterval: 5,
  showNavigationButtons: true,
  items: [
    CarouselItem(
      imageUrl: 'https://picsum.photos/800/400?random=1',
      title: 'Beautiful Landscape',
      subtitle: 'Explore nature at its finest',
    ),
    CarouselItem(
      imageUrl: 'https://picsum.photos/800/400?random=2',
      title: 'City View',
    ),
    CarouselItem(
      imageUrl: 'https://picsum.photos/800/400?random=3',
      subtitle: 'Night lights of the city',
    ),
  ],
  onItemTap: (index) {
    print('Tapped item at index $index');
  },
)

Customization #

Change Indicator Style #

CustomCarousel(
  // ...
  dotHeight: 10,
  dotWidth: 10,
  indicatorColor: Colors.grey[300]!,
  activeIndicatorColor: Colors.red,
)

Custom Text Styling #

CustomCarousel(
  // ...
  titleTextStyle: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.white,
    shadows: [
      Shadow(
        blurRadius: 4,
        color: Colors.black,
        offset: Offset(2, 2),
    ],
  ),
  subtitleTextStyle: TextStyle(
    fontSize: 16,
    color: Colors.white,
  ),
)