Search categories, packages and repositories

ducafecatFlutter ecosystem guide
banner_carousel cover
Package detailsv1.2.1

banner_carousel

A Widget horizontal scrollable list with indicator and animations.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
588
Likes
147
Pub points
150

Install package

flutter pub add banner_carousel

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

BannerCarousel is a Flutter widget that provides a horizontally scrollable list with smooth animations and visual indicators to show the current position. It's designed for displaying a series of banners, images, or content in an engaging, interactive way across multiple platforms. The carousel supports touch gestures, automatic scrolling, and customizable indicators, making it ideal for showcasing featured content in apps. It integrates seamlessly into existing Flutter projects with minimal setup.

Use cases

  • Showcase featured products in e-commerce apps
  • Display promotional banners in news or media apps
  • Highlight content in onboarding screens
  • Present image galleries with navigation indicators

Key features

  • Horizontal scrollable layout
  • Animated transitions between items
  • Customizable indicator dots
  • Supports automatic sliding
  • Gesture-driven navigation
  • Cross-platform compatibility

Suitable for

  • Mobile and web app developers
  • Designers seeking interactive carousels
  • Apps requiring visual content highlighting

Considerations

  • May require optimization for large datasets
  • Indicator styling needs custom configuration
  • Performance impact with heavy widgets per slide

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

BannerCarousel

BannerCarousel is a custom widget that builds a FullScreen carousel or not, with animation on the indicators.

drawing

Parameters

  • banners - List of BannerModel
  • animation - boolean for indicator animation - Default true
  • indicatorBottom - indicator is below carousel - Default true
  • showIndicator - show indicator - Default true
  • height - Default double 150
  • initialPage
  • viewportFraction
  • borderRadius - Default 5
  • margin
  • activeColor
  • disableColor
  • customizedIndicators - Accepts a IndicatorModel model
  • onPageChanged
  • onTap
  • customizedBanners - List of Widget
  • spaceBetween - Double
  • pageController - PageController

Models

  • BannerModel
  • IndicatorModel

Example

List<BannerModel> listBanners = [
    BannerModel(pathImage: banner1, id: "1"),
    BannerModel(pathImage: banner2, id: "2"),
    BannerModel(pathImage: banner3, id: "3"),
    BannerModel(pathImage: banner4, id: "4"),
];
Default:
drawing 
BannerCarousel(banners: listBanners)
FullScreen:
drawing 
 BannerCarousel.fullScreen(
    banners: listBanners,
    animation: false,
 );
Custom Carousel:
drawing 
BannerCarousel(
  banners: listBanners,
  customizedIndicators: IndicatorModel.animation(width: 20, height: 5, spaceBetween: 2, widthAnimation: 50),
  height: 120,
  activeColor: Colors.amberAccent,
  disableColor: Colors.white,
  animation: true,
  borderRadius: 10,
  width: 250,
  indicatorBottom: false,
),
Custom Banner:
drawing 
BannerCarousel(
   animation: false,
   viewportFraction: 0.60,
   showIndicator: false,
   customizedBanners: [
        Container(
           decoration: BoxDecoration(
              border: Border.all(color: Colors.black,width: 2),),
              child: Image.network(BannerImages.banner1)),
        Container(
             margin: EdgeInsets.symmetric(horizontal: 20),
             decoration: BoxDecoration(
                  boxShadow: [
                     BoxShadow(
                        color: Colors.black.withOpacity(0.25),
                        spreadRadius: 0,
                        blurRadius: 4,
                        offset: Offset(0, 3),
                      ),
                    ],
               ),
              child: Image.network(BannerImages.banner2)),
         Container(
             margin: EdgeInsets.symmetric(horizontal: 20),
             decoration: BoxDecoration(
             border: Border.all(
                    color: Colors.green,
                    width: 3,
                  ),
                  borderRadius: BorderRadius.circular(50),
              image: DecorationImage(
              image: NetworkImage(
                        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
              fit: BoxFit.cover,
              ),
           ),
       ),
    ],
),
Ontap Event:
BannerCarousel(
  banners: listBanners,
  onTap: (id) => print(id),
)

Categories

Carousel or Cover Flow

Source repository

Projects using this package

No data available yet.