flutter pub add carousel_slider_plus根據套件公開資料產生的選型評估，僅供參考。
一個用於建立順暢、可自訂的輪播滑塊的 Flutter 小部件，支援無限捲動與自訂子元件。非常適合以視覺上吸引人的方式，在水平或垂直可捲動版面中顯示圖片、卡片或其他內容。此套件輕量級，能無縫整合至跨平台應用程式，包含行動裝置、網頁與桌面端。它讓開發者能輕鬆設定指示器、自動播放與滑動手勢，以提升使用者體驗。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
A carousel slider widget.
This package is fork of carousel_slider which is not actively maintained.
In this fork some of the namings are changed. So follow this below guides to migrate over this new package.
import "package:carousel_slider/carousel_slider.dart;
import 'package:carousel_slider_plus/carousel_slider_plus.dart';
CarouselSlider is now changed to controller from carouselController.CarouselSlider(
carouselController: _controller,
// Rest of the code
),
CarouselSlider(
controller: _controller,
// Rest of the code
),
https://kishan-dhankecha.github.io/carousel-slider-plus-gh-pages/
Note: this page is built with flutter-web. For a better user experience, please use a mobile device to open this link.
Add latest version of carousel_slider_plus to your pubspec.yaml dependencies. And import it:
import 'package:carousel_slider_plus/carousel_slider_plus.dart';
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(),
)
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,
)
)
If you pass the height parameter, the aspectRatio parameter will be ignored.
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) {
return Container(
child: Text(itemIndex.toString()),
);
}
)
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,
controller: 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('→'),
)
]
);
}
CarouselSliderController methods/// Animate to the next page
controller.nextPage({Duration duration, Curve curve});
/// Animate to the previous page
controller.previousPage({Duration duration, Curve curve});
/// Jump to the given page.
controller.jumpToPage(int page);
/// Animate to the given page.
controller.animateToPage(int page, {Duration duration, Curve curve});
/// Start/Stop Auto-play (only work if `autoplay` is set to true in `CarouselOptions`)
controller.startAutoPlay();
Basic text carousel slider:
Basic image carousel slider:
A more complicated image carousel slider:
Full Screen image carousel slider:
Image carousel slider with custom indicator:
Manually control the page position:
Vertical carousel slider:
Simple on-demand image carousel slider, with image auto prefetch:
No infinite scroll:
All screenshots above can be found at the example project.
MIT