插件详情v1.2.1

banner_carousel

一个带有指示器和动画的水平可滚动列表小部件。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 588
喜欢数: 147
Pub 分数: 150

安装插件

flutter pub add banner_carousel

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

BannerCarousel 是一个 Flutter 小部件，提供水平滚动列表，具有平滑动画和视觉指示器以显示当前位置。它专为在多个平台上以吸引人且互动的方式展示一系列横幅、图片或内容而设计。该轮播图支持触摸手势、自动滚动和可自定义的指示器，非常适合在应用程序中展示特色内容。它可轻松集成到现有的 Flutter 项目中，设置简单。

适合场景

在电子商务应用中展示精选产品
在新闻或媒体应用中显示促销横幅
突出显示引导屏幕中的内容
使用导航指示器显示图像画廊

主要特点

水平可滚动布局
项目之间的动画过渡
可自定义的指示点
支持自动滑动
手势驱动的导航
跨平台兼容性

适合对象

移动和网页应用开发者
寻求交互式轮播图的设计人员
需要视觉内容突出显示的应用程序

使用建议

可能需要针对大型数据集进行优化
指标样式需要自定义配置
每页大量小部件带来的性能影响

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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

所属分类

轮播图或封面流

源码仓库

MaiaraM/banner_carousel

banner_carousel

☆ 16 星标⑂ 8 复刻

DartHTML

使用此插件的项目

暂无相关数据。