Today iam going to share one of the best flutter carousel package “flutter_carousel_slider” that used to create awesome slide show very easy and simple with just a few line of code.
By using this package we can implement carousel slider in Infinite scroll manner, Auto play and instead of image we can use Custom child widgets.
If you are planning to create a welcome screen or feature page then this plugin will very helpfull for you guys.
Please follow this url https://serenader2014.github.io/flutter_carousel_slider/#/ to take a live demo.
Installation
add carousel_slider: ^2.3.1 to your pubspec.yaml file. If you are new in Flutter check out this tutorial for how to install a package
Import this package into top of your page
import ‘package:carousel_slider/carousel_slider.dart’;
How to use
Simply create a Carousel Slider widget, and pass the required params:
CarouselSlider(
options: CarouselOptions(height: 500.0),
items: [1,2,3].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('Slide no- $i', style: TextStyle(fontSize: 18.0),)
);
},
);
}).toList(),
)
Optional Parameter
CarouselSlider(
items: items,
options: CarouselOptions(
height: 500,
aspectRatio: 16/9,
viewportFraction: 0.8,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 5),
autoPlayAnimationDuration: Duration(milliseconds: 700),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
onPageChanged: callbackFunction,
scrollDirection: Axis.horizontal,
)
)
Screenshot
Basic text carousel demo:
Basic image carousel demo:
All screenshots above can be found at the example project.