Cross Fade Carousel

A beautiful and customizable Flutter carousel widget that smoothly fades between its children widgets. Perfect for creating engaging image galleries, feature showcases, or promotional content in your Flutter applications.

Features

  • 🎭 Smooth cross-fade transitions between items
  • 🔄 Automatic switching between items
  • 👆 Touch gesture support (swipe left/right)
  • ⚙️ Highly customizable appearance
  • 🎯 Built-in indicator dots
  • 🎨 Custom indicator support
  • 📱 Responsive design with configurable aspect ratio
  • ⏱️ Configurable timing and delays
  • 🔒 Pause auto-switching after user interaction

Installation

Add this package to your pubspec.yaml:

dependencies:
  cross_fade_carousel: ^1.0.0

Usage

Here's a simple example of how to use the Cross Fade Carousel:

import 'package:flutter/material.dart';
import 'package:cross_fade_carousel/cross_fade_carousel.dart';

class MyCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CrossFadeCarousel(
      children: [
        Image.network('https://example.com/image1.jpg'),
        Image.network('https://example.com/image2.jpg'),
        Image.network('https://example.com/image3.jpg'),
      ],
      aspectRatio: 16 / 9,
      autoSwitch: true,
      autoSwitchDuration: Duration(seconds: 5),
      fadeDuration: Duration(milliseconds: 1200),
      onItemTap: (index) {
        print('Tapped item at index: $index');
      },
    );
  }
}

Customization Options

The CrossFadeCarousel widget accepts the following parameters:

Parameter Type Default Description
children List<Widget> Required The list of widgets to display in the carousel
aspectRatio double 2/1 The aspect ratio of the carousel (e.g., 16/9, 2/1)
autoSwitch bool true Whether to automatically switch between items
autoSwitchDuration Duration 10 seconds Duration to display each item before switching
fadeColor Color? Colors.grey Color of the fade transition
fadeDuration Duration 1200ms Duration of the fade transition
showIndicator bool true Whether to show the default indicator dots
indicatorColor Color? Colors.black Color of the indicator dots
borderRadius BorderRadiusGeometry? null Border radius for the carousel container
customIndicatorBuilder Widget Function(int, int)? null Custom builder for indicator UI
onItemTap Function(int)? null Callback when an item is tapped
pauseAutoSwitchAfterUserActivityDelay Duration 15 seconds Delay before resuming auto-switch after user interaction

Gesture Support

The carousel supports the following gestures:

  • Swipe left to go to the next item
  • Swipe right to go to the previous item
  • Tap on an item to trigger the onItemTap callback

Notes

  • The default indicator dots are only shown when there are 2-7 items
  • For custom indicator behavior, use the customIndicatorBuilder
  • Auto-switching pauses temporarily after user interaction
  • The carousel supports infinite looping through items

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.Developed by Rohan Kumar Panigrahi at RaftLabs.

Libraries

src_deps