carousel_slider

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，提供可自訂的輪播圖滑塊元件，支援無限捲動與自訂子元件。非常適合以可滑動的水平佈局顯示圖片、卡片或任何內容。此滑塊具備流暢的動畫、自動播放功能，並在多個平台實現響應式設計。輕量級且易於整合至現有的 Flutter 專案中。完美適用於以視覺上吸引人的方法展示特色項目、產品相簿或促銷內容。

適用情境

顯示圖像畫廊
展示產品亮點
建立入門畫面
展示促銷內容
構建互動式滑塊
支援無限滾動列表

主要特色

無限滾動支援
可自定義的子部件
流暢的動畫
自動播放功能
響應式設計
跨平台相容性

適合對象

電子商務應用
旅遊或投資組合網站
入職體驗
內容豐富的移動應用
互動式 UI 組件
需要可滑動輪播圖的專案

使用建議

可能需要針對大型數據集進行優化
複雜子項帶來的效能影響
需要仔細處理自動播放時間
有限的內建分頁控制
不適合垂直滾動
需要正確的狀態管理

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

A carousel slider widget.

Features

Infinite scroll
Custom child widgets
Auto play

Supported platforms

Flutter Android
Flutter iOS
Flutter web
Flutter desktop

Live preview

https://serenader2014.github.io/flutter_carousel_slider/#/

Note: this page is built with flutter-web. For a better user experience, please use a mobile device to open this link.

Installation

Add carousel_slider: ^5.1.2 to your pubspec.yaml dependencies. And import it:

import 'package:carousel_slider/carousel_slider.dart';

How to use

Simply create a CarouselSlider widget, and pass the required params:

CarouselSlider(
  options: CarouselOptions(height: 400.0),
  items: [1,2,3,4,5].map((i) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.symmetric(horizontal: 5.0),
          decoration: BoxDecoration(
            color: Colors.amber
          ),
          child: Text('text $i', style: TextStyle(fontSize: 16.0),)
        );
      },
    );
  }).toList(),
)

Params


CarouselSlider(
   items: items,
   options: CarouselOptions(
      height: 400,
      aspectRatio: 16/9,
      viewportFraction: 0.8,
      initialPage: 0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 3),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: true,
      enlargeFactor: 0.3,
      onPageChanged: callbackFunction,
      scrollDirection: Axis.horizontal,
   )
 )

Since v2.0.0, you'll need to pass the options to CarouselOptions. For each option's usage you can refer to carousel_options.dart.

If you pass the height parameter, the aspectRatio parameter will be ignored.

Build item widgets on demand

This method will save memory by building items once it becomes necessary. This way they won't be built if they're not currently meant to be visible on screen. It can be used to build different child item widgets related to content or by item index.


CarouselSlider.builder(
  itemCount: 15,
  itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
    Container(
      child: Text(itemIndex.toString()),
    ),
)

Carousel controller

In order to manually control the pageview's position, you can create your own CarouselSliderController, and pass it to CarouselSlider. Then you can use the CarouselSliderController instance to manipulate the position.

class CarouselDemo extends StatelessWidget {
  CarouselSliderController buttonCarouselController = CarouselSliderController();

 @override
  Widget build(BuildContext context) => Column(
    children: <Widget>[
      CarouselSlider(
        items: child,
        carouselController: buttonCarouselController,
        options: CarouselOptions(
          autoPlay: false,
          enlargeCenterPage: true,
          viewportFraction: 0.9,
          aspectRatio: 2.0,
          initialPage: 2,
        ),
      ),
      RaisedButton(
        onPressed: () => buttonCarouselController.nextPage(
            duration: Duration(milliseconds: 300), curve: Curves.linear),
        child: Text('→'),
      )
    ]
  );
}