A carousel slider widget.
This package is fork of carousel_slider which is not maintained anymore.
In this fork some of the namings are changed. So follow this below guides to migrate over this new package.
1. Instead of using CarouselController
, we now will use CarouselSliderController
. This change was necessary as flutter now has it's own CarouselController
class as part of their material library.
final CarouselController _controller = CarouselController();
final CarouselSliderController _controller = CarouselSliderController();
2. The parameter name to pass controller in CarouselSlider
is now changed to controller
from carouselController
.
CarouselSlider(
carouselController: _controller,
// Rest of the code
),
CarouselSlider(
controller: _controller,
// Rest of the code
),
import "package:carousel_slider/carousel_slider.dart;
import 'package:carousel_slider_plus/carousel_slider_plus.dart';
- Infinite scroll
- Custom child widgets
- Auto play
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('→'),
)
]
);
}
/// 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