carousel_slider_plus

Description:

carousel slider plus

carousel_slider_plus #
A carousel slider widget.
This package is fork of carousel_slider which is not maintained anymore.








Features


Installation


How to use

Parameters
Builder Constructors
Carousel Controller



Live preview


Migrating from carousel_slider


Screenshots



Migrating from carousel_slider #
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.
Before
final CarouselController _controller = CarouselController();
copied to clipboard
After
final CarouselSliderController _controller = CarouselSliderController();
copied to clipboard
2. The parameter name to pass controller in CarouselSlider is now changed to controller from carouselController.
Before
CarouselSlider(
carouselController: _controller,
// Rest of the code
),
copied to clipboard
After
CarouselSlider(
controller: _controller,
// Rest of the code
),
copied to clipboard
Please make sure to change the import statement also
Before
import "package:carousel_slider/carousel_slider.dart;
copied to clipboard
After
import 'package:carousel_slider_plus/carousel_slider_plus.dart';
copied to clipboard
Features #

Infinite scroll
Custom child widgets
Auto play

Live preview #
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.
Installation #
Add latest version of carousel_slider_plus to your pubspec.yaml dependencies. And import it:
import 'package:carousel_slider_plus/carousel_slider_plus.dart';
copied to clipboard
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(),
)
copied to clipboard
Parameters #
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,
)
)
copied to clipboard
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) {
return Container(
child: Text(itemIndex.toString()),
);
}
)
copied to clipboard
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,
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('→'),
)
]
);
}
copied to clipboard
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();

copied to clipboard
Screenshots #
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.
License #
MIT