carousel_slider_x

Description:

carousel slider x

carousel_slider_x #
This package is a fork of the original carousel_slider package.
A carousel slider widget, support infinite scroll and auto play, enlarge mode.
Features #

Infinite scroll
Auto play
Enlarge center page

Live preview #
https://koji-1009.github.io/flutter_carousel_slider/
Installation #
Add carousel_slider_x: ^5.0.0 to your pubspec.yaml dependencies.
And import it:
import 'package:carousel_slider_x/carousel_slider_x.dart';
copied to clipboard
Migration #
If you are migrating from the original carousel_slider package, you should move the following property from CarouselOptions to CarouselSlider.

onPageChanged
onScrolled

And, you should move the following properties from CarouselSlider to CarouselOptions.

disableGesture

How to use #
Simply create a CarouselSlider widget, and pass the required params:
CarouselSlider(
options: const CarouselOptions(
height: 400,
),
items: [1,2,3,4,5].map((i) {
Container(
width: MediaQuery.sizeOf(context).width,
margin: EdgeInsets.symmetric(
horizontal: 8.
),
decoration: BoxDecoration(
color: Colors.amber
),
child: Text(
'text $i',
style: TextStyle(
fontSize: 16,
),
),
);
}.toList(),
)
copied to clipboard
Params #
CarouselSlider(
items: items,
options: const 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
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 realIndex) =>
Container(
child: Text(itemIndex.toString()),
),
)
copied to clipboard
Carousel controller #
In order to manually control the PageView's position, you can create your own CarouselControllerX, and pass it to CarouselSlider.
Then you can use the CarouselControllerX instance to manipulate the position.
class _CarouselDemoState extends State<CarouselDemo> {
final buttonCarouselController = CarouselControllerX();

@override
Widget build(BuildContext context) => Column(
children: <Widget>[
CarouselSlider(
items: child,
carouselController: buttonCarouselController,
options: const CarouselOptions(
autoPlay: false,
enlargeCenterPage: true,
viewportFraction: 0.9,
aspectRatio: 2.0,
initialPage: 2,
),
),
RaisedButton(
onPressed: () => buttonCarouselController.nextPage(),
child: Text('→'),
)
]
);
}
copied to clipboard
CarouselControllerX methods #
.nextPage({Duration duration, Curve curve})
Animate to the next page
.previousPage({Duration duration, Curve curve})
Animate to the previous page
.jumpToPage(int page)
Jump to the given page.
.animateToPage(int page, {Duration duration, Curve curve})
Animate to the given page.
Screenshot #
Basic text carousel demo:

Basic image carousel demo:

A more complicated image carousel slider demo:

Fullscreen image carousel slider demo:

Image carousel slider with custom indicator demo:

Custom CarouselControllerX and manually control the PageView position demo:

Vertical carousel slider demo:

Simple on-demand image carousel slider, with image auto prefetch demo:

No infinite scroll demo:

All screenshots above can be found at the example project.