infinite_cycle_carousel 0.1.1

Flutter package with 9 carousel variants including 2D, 3D, ViewPager, circular, and stacked styles with infinite scrolling and auto-play.

Infinite Cycle Carousel

A comprehensive Flutter package for creating beautiful, customizable infinite cycle carousels with smooth animations and various display styles. Inspired by Android's InfiniteCycleViewPager, this package provides multiple carousel variants including 2D, 3D, ViewPager-style, and circular carousels.

Features

✨ Multiple Carousel Variants - 9 different carousel styles to choose from
🔄 Infinite Scrolling - Seamlessly loop through items without boundaries
🎯 Auto Play - Automatically cycle through items with customizable intervals
📐 Flexible Layout - Support for both horizontal and vertical scrolling
🎨 Customizable Indicators - Multiple indicator styles (dot, line, scale)
🎭 3D Effects - Cylindrical 3D carousel with glass effects
🌀 Circular Carousel - Unique circular positioning with depth effects
⚙️ Full Control - Programmatic control via controller
🎬 Smooth Animations - Beautiful transitions with customizable curves
📱 Responsive - Adapts to different screen sizes

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  infinite_cycle_carousel: ^0.1.0

Then run:

flutter pub get

Usage

1. Basic Carousel

import 'package:infinite_cycle_carousel/infinite_cycle_carousel.dart';

CycleCarousel(
  items: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
  options: const CarouselOptions(
    height: 200,
    autoPlay: true,
  ),
)

2. Carousel with Indicators

final controller = InfiniteCycleCarouselController();

Column(
  children: [
    CycleCarousel(
      controller: controller,
      items: yourWidgetList,
      options: const CarouselOptions(
        height: 200,
        autoPlay: true,
        viewportFraction: 0.9,
      ),
    ),
    CarouselIndicator(
      controller: controller,
      itemCount: yourWidgetList.length,
      style: IndicatorStyle.dot,
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
    ),
  ],
)

3. Carousel with Enlarged Center Page

CycleCarousel(
  items: yourWidgetList,
  options: const CarouselOptions(
    height: 250,
    viewportFraction: 0.8,
    enlargeCenterPage: true,
    enlargeFactor: 0.3,
    autoPlay: true,
  ),
)

4. 3D Cylindrical Carousel

InfiniteCycleCarousel3D(
  itemCount: 5,
  height: 400,
  itemWidth: 350,
  radius: 500,
  perspective: 0.003,
  enableGlassEffect: true,
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.blue, Colors.purple],
        ),
        borderRadius: BorderRadius.circular(25),
      ),
      child: Center(child: Text('Card $index')),
    );
  },
)

5. ViewPager Style Carousel

InfiniteCycleViewPager(
  itemCount: 5,
  carouselHeight: 280,
  config: const InfiniteCycleConfig(
    viewportFraction: 0.85,
    centerItemScale: 1.0,
    sideItemScale: 0.8,
    sideItemOpacity: 0.6,
    overlapFactor: -0.3,
    autoScroll: true,
  ),
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.primaries[index % Colors.primaries.length],
        borderRadius: BorderRadius.circular(16),
      ),
    );
  },
)

6. Circular Carousel

CircularCarousel(
  cards: [
    Container(width: 280, height: 180, color: Colors.red),
    Container(width: 280, height: 180, color: Colors.blue),
    Container(width: 280, height: 180, color: Colors.green),
  ],
  radius: 120,
)

7. Stacked Carousel

StackedGlimpseCarousel(
  itemCount: 5,
  height: 180,
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.purple, Colors.pink],
        ),
        borderRadius: BorderRadius.circular(16),
      ),
    );
  },
)

8. Controlled Carousel

final controller = InfiniteCycleCarouselController();

CycleCarousel(
  controller: controller,
  items: yourWidgetList,
  options: CarouselOptions(
    height: 200,
    autoPlay: false,
    onPageChanged: (index) {
      print('Current page: $index');
    },
  ),
)

// Control programmatically
controller.nextPage();
controller.previousPage();
controller.jumpToPage(2);

9. Vertical Carousel

CycleCarousel(
  items: yourWidgetList,
  options: const CarouselOptions(
    height: 300,
    scrollDirection: Axis.vertical,
    autoPlay: true,
  ),
)

Available Carousel Widgets

Widget	Description
CycleCarousel	Basic 2D carousel with infinite scrolling
InfiniteCycleCarousel3D	3D cylindrical carousel with perspective effects
InfiniteCycleViewPager	ViewPager-style with overlapping cards
CircularCarousel	Circular positioning with depth and scale effects
StackedGlimpseCarousel	Stacked cards with glimpse of side items
CarouselIndicator	Customizable page indicators

Carousel Options

Property	Type	Default	Description
height	double?	null	Height of the carousel
aspectRatio	double	16/9	Aspect ratio when height is null
enableInfiniteScroll	bool	true	Enable infinite scrolling
autoPlay	bool	false	Enable auto play
autoPlayInterval	Duration	3s	Auto play interval
autoPlayAnimationDuration	Duration	800ms	Auto play animation duration
autoPlayCurve	Curve	fastOutSlowIn	Auto play animation curve
reverseAutoPlay	bool	false	Reverse auto play direction
enlargeCenterPage	bool	false	Enlarge the center page
enlargeFactor	double	0.3	Enlargement factor (0.0-1.0)
scrollDirection	Axis	horizontal	Scroll direction
initialPage	int	0	Initial page index
viewportFraction	double	1.0	Viewport fraction (0.0-1.0)
enableTouchInteraction	bool	true	Enable touch gestures
onPageChanged	Function(int)?	null	Page changed callback
scrollPhysics	ScrollPhysics?	null	Custom scroll physics
pauseAutoPlayOnTouch	bool	true	Pause auto play on touch
itemPadding	EdgeInsets?	null	Padding around each item

Indicator Styles

The package includes three built-in indicator styles:

• IndicatorStyle.dot - Classic dot indicators
• IndicatorStyle.line - Line indicators that expand when active
• IndicatorStyle.scale - Dots that scale up when active

Controller Methods

Method	Description
nextPage()	Navigate to the next page
previousPage()	Navigate to the previous page
jumpToPage(int page)	Jump to a specific page
animateToPage(int page)	Animate to a specific page
currentPage	Get the current page index

Example

Check out the example folder for a complete example app demonstrating all features.

To run the example:

cd example
flutter run

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.

Support

If you find this package helpful, please give it a ⭐ on GitHub!