Custom Carousel

Flutter Dart

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

Parameter Type Default Description
items List<CarouselItem> required List of carousel items to display
height double 200.0 Height of the carousel
aspectRatio double 16/9 Aspect ratio of each item
borderRadius double 12.0 Border radius of items
dotHeight double 8.0 Height of indicator dots
dotWidth double 8.0 Width of indicator dots
isNetworkImage bool false Whether images are from network
isAutoScroll bool true Enable auto-scrolling
backgroundColor Color Colors.white Background color
viewportFraction double 0.8 Fraction of viewport each item occupies
enlargeCenterPage bool true Enlarge center item
indicatorColor Color Colors.grey Color of inactive dots
activeIndicatorColor Color Colors.blue Color of active dot
autoPlayInterval int 3 Auto-scroll interval in seconds
showNavigationButtons bool false Show prev/next buttons
showIndicator bool true Show page indicator
titleTextStyle TextStyle? null Custom title text style
subtitleTextStyle TextStyle? null Custom subtitle text style
onItemTap Function(int)? null Callback when item is tapped

CarouselItem Properties

Property Type Description
imageUrl String required Image URL or asset path
title String? Optional title text
subtitle String? Optional subtitle text

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,
  ),
)

Libraries