banner_carousel

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

BannerCarousel é um widget do Flutter que fornece uma lista rolável horizontal com animações suaves e indicadores visuais para mostrar a posição atual. Foi projetado para exibir uma série de banners, imagens ou conteúdo de forma envolvente e interativa em múltiplas plataformas. O carrossel suporta gestos de toque, rolagem automática e indicadores personalizáveis, tornando-o ideal para apresentar conteúdo destacado em aplicativos. Integra-se perfeitamente em projetos existentes do Flutter com configuração mínima.

Casos de uso

Destaque produtos em destaque em aplicativos de comércio eletrônico
Exibir banners promocionais em aplicativos de notícias ou mídia
Destaque o conteúdo nas telas de introdução
Apresente galerias de imagens com indicadores de navegação

Principais recursos

Layout com rolagem horizontal
Transições animadas entre itens
Pontos de indicador personalizáveis
Suporta deslizamento automático
Navegação baseada em gestos
Compatibilidade multiplataforma

Indicado para

Desenvolvedores de aplicativos móveis e web
Designers procurando carrosséis interativos
Aplicativos que exigem destaque de conteúdo visual

Considerações

Pode exigir otimização para grandes conjuntos de dados
O estilo do indicador precisa de configuração personalizada
Impacto no desempenho com widgets pesados por slide

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

BannerCarousel

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

Parameters
Models
Examples

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:

BannerCarousel(banners: listBanners)

FullScreen:

 BannerCarousel.fullScreen(
    banners: listBanners,
    animation: false,
 );

Custom Carousel:

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:

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),
)

Buscar categorias, pacotes e repositórios

Instalar pacote