carousel_banner 0.0.1

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
• Swipe, dot navigation and keyboard-free touch interactions
• Optional onTap callback per slide
• Optional custom overlay between the background and the text

Getting started

Add the dependency to your pubspec.yaml:

dependencies:
  carousel_banner: ^0.0.1

Usage

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

BannerCarousel(
  items: [
    CarouselItem(
      id: '1',
      title: 'Aurora',
      subtitle: 'Soft violet light over a dark horizon.',
      background: const CarouselColorBackground(Color(0xFF3B2F63)),
    ),
    CarouselItem(
      id: '2',
      title: 'Forest',
      subtitle: 'Green hues for organic products.',
      background: const CarouselImageBackground(
        NetworkImage('https://example.com/forest.png'),
      ),
    ),
  ],
  autoplay: true,
  interval: const Duration(seconds: 4),
  onTap: (item) => print('Tapped ${item.title}'),
)

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.