carousel_banner 0.1.0

A swipeable, infinitely looping Flutter banner carousel with color or image backgrounds and a mandatory bottom-anchored title and subtitle.

carousel_banner

A swipeable, infinitely looping banner carousel for Flutter.

Each slide must have either a colour or an image background, and must provide a title and subtitle that are anchored to the bottom of the slide over a subtle gradient scrim for readability.

Features

• Infinitely looping (last slide wraps back to the first)
• Colour or image background per slide (mandatory, exactly one)
• Mandatory bottom-anchored title and subtitle
• Autoplay with progress shown in the active dot
• Viewport fraction (viewportFraction) & active slide scaling (enlargeCenterPage)
• Optional top-left badge chip (badgeText, badgeColor) & bottom-right CTA button (ctaText, onCtaTap) per slide
• Dynamic aspect ratio support (aspectRatio: 16 / 9)
• Navigation arrows with customizable position (arrowAlignment) and slide overlay mode (arrowsOnSlide: true)
• Swipe, dot navigation and keyboard-free touch interactions
• Optional onTap callback per slide
• Netflix-style Hero card-to-page transition support (enableHero, CarouselDetailPage)
• Optional custom overlay between the background and the text

Getting started

Add the dependency to your pubspec.yaml:

dependencies:
  carousel_banner: ^0.2.0

Usage

Note: In Flutter 3.22+, hide Flutter's built-in CarouselController when importing material.dart if using CarouselController: import 'package:flutter/material.dart' hide CarouselController;

import 'package:carousel_banner/carousel_banner.dart';
import 'package:flutter/material.dart' hide CarouselController;

BannerCarousel(
  autoplay: true,
  viewportFraction: 0.88,
  enlargeCenterPage: true,
  items: [
    CarouselItem(
      id: '1',
      title: 'Summer Sale',
      subtitle: 'Soft violet light over a dark horizon.',
      badgeText: '50% OFF',
      badgeColor: Colors.deepOrange,
      ctaText: 'Shop Now',
      background: const CarouselColorBackground(Color(0xFF3B2F63)),
      onCtaTap: () => print('CTA tapped!'),
    ),
    CarouselItem(
      id: '2',
      title: 'Forest',
      subtitle: 'Green hues for organic products.',
      background: const CarouselImageBackground(
        NetworkImage('https://example.com/forest.png'),
      ),
    ),
  ],
  interval: const Duration(seconds: 4),
  onTap: (item) => print('Tapped ${item.title}'),
)

Responsive Aspect Ratio

Instead of hardcoded heights, set an aspect ratio to scale dynamically:

BannerCarousel(
  aspectRatio: 16 / 9,
  items: items,
)

Custom overlay

By default the text sits over a bottom gradient scrim. Replace it with your own decoration, or pass BoxDecoration() to remove it:

BannerCarousel(
  items: items,
  overlay: BoxDecoration(
    color: Colors.black.withValues(alpha: 0.35),
  ),
)

See the example for a runnable app.

Additional information

Contributions are welcome. Please open issues or pull requests on the repository.