套件詳情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

使用此套件的專案

暫無相關資料。