image_carousel_gallery 2.0.0

A new Flutter package for creating an image carousel gallery with an animated image slider.

A Flutter package for creating an image carousel with a grid.

Features

• Display an image carousel with automatic sliding.
• Supports landscape and portrait orientations.
• Integrated grid of additional images.
• Infinite scroll.
• Supports network and asset images.
• Network images are cached (with safe fallback on web).
• Customizable indicators, animation styles, and autoplay speed.
• Tap thumbnails to jump to that image.
• Optional custom arrows and spacing.

Support

Android

IOS

Web

AndroidTV

MacOS

Windows

AppleTV

Demo

Getting Started

To use this package, add image_carousel_gallery to your pubspec.yaml file:

dependencies:
  image_carousel_gallery: ^2.0.0

Then run:

$ flutter pub get

Usage

Add ImageCarouselGallery to your widget tree:

import 'package:image_carousel_gallery/image_carousel_gallery.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ImageCarouselGallery(
          images: [
            'https://example.com/image1.jpg',
            'https://example.com/image2.jpg',
            
          ],
        ),
      ),
    );
  }
}

Use asset images with the ImageCarouselGallery.asset constructor:

ImageCarouselGallery.asset(
  images: [
    'assets/images/photo_1.png',
    'assets/images/photo_2.png',
  ],
)

Optional customization:

ImageCarouselGallery(
  images: [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
  ],
  showIndicators: false,
  showBottomRow: false,
  enableNetworkCaching: false,
  bottomRowSpacing: 16,
  showArrows: false,
  animationStyle: ImageCarouselAnimationStyle.none,
  autoPlayInterval: Duration(seconds: 5),
  autoPlayAnimationDuration: Duration(milliseconds: 600),
)

Custom arrows:

ImageCarouselGallery(
  images: [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
  ],
  leftArrowBuilder: (context, onPressed) {
    return IconButton(
      icon: const Icon(Icons.chevron_left),
      onPressed: onPressed,
    );
  },
  rightArrowBuilder: (context, onPressed) {
    return IconButton(
      icon: const Icon(Icons.chevron_right),
      onPressed: onPressed,
    );
  },
)

Parameters

• images (required): list of asset paths or URLs.
• imageSource: network or asset (default: network).
• showIndicators: show dot indicators (default: true).
• showBottomRow: show thumbnail row (default: true).
• bottomRowSpacing: gap between carousel and thumbnails (default: 12).
• showArrows: show navigation arrows (default: true).
• leftArrowBuilder/rightArrowBuilder: custom arrow widgets.
• animationStyle: scale or none (default: scale).
• autoPlayInterval: delay between slides (default: 4s).
• autoPlayAnimationDuration: slide animation duration (default: 800ms).
• autoPlayCurve: curve for slide animation (default: easeInOut).
• enableNetworkCaching: use cached network images (default: true; web uses Image.network).

Remember to register asset paths in your app's pubspec.yaml:

flutter:
  assets:
    - assets/images/

Example

For more detailed examples, check the example folder.

Additional Information

• For more details, check the API reference.
• Found a bug? File an issue.
• Want to contribute? Fork the repository, make your changes, and submit a pull request.
• Questions or suggestions? Contact us.

License

This project is licensed under the MIT License.