A flutter carousel widget, support infinite scroll and custom child widget


A carousel slider widget, support infinite scroll and custom child widget, with autoplay feature.


Add carousel_slider: ^1.0.1 in your pubspec.yaml dependencies. And import it:

import 'package:carousel_slider/carousel_slider.dart';

How to use

Simply create a CarouselSlider widget, and pass the required params:

new CarouselSlider(
  items: [1,2,3,4,5].map((i) {
    return new Builder(
      builder: (BuildContext context) {
        return new Container(
          width: MediaQuery.of(context).size.width,
          margin: new EdgeInsets.symmetric(horizontal: 5.0),
          decoration: new BoxDecoration(
            color: Colors.amber
          child: new Text('text $i', style: new TextStyle(fontSize: 16.0),)
  height: 400.0,
  autoPlay: true

For a more detail example please take a look at the example folder.



new CarouselSlider(
  items: items,
  viewportFraction: 0.8,
  initialPage: 0,
  aspectRatio: 16/9,
  height: 400,
  reverse: false,
  autoPlay: false,
  interval: const Duration(seconds: 4),
  autoPlayCurve: Curves.fastOutSlowIn,
  autoPlayDuration: const Duration(milliseconds: 800),
  updateCallback: someFunction,
  distortion: false

You can pass the above params to the class. If you pass the height params, the aspectRatio param will be ignore.

Instance methods

You can use the instance methods to programmatically take control of the pageView’s position.

.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.

Can I display a dotted indicator for the slider?

Yes, you can.

class CarouselWithIndicator extends StatefulWidget {
  _CarouselWithIndicatorState createState() => _CarouselWithIndicatorState();

class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
  int _current = 0;

  Widget build(BuildContext context) {
    return Stack(
      children: [
          items: child,
          autoPlay: true,
          aspectRatio: 2.0,
          updateCallback: (index) {
            setState(() {
              _current = index;
          top: 0.0,
          left: 0.0,
          right: 0.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: map<Widget>(imgList, (index, url) {
              return Container(
                width: 8.0,
                height: 8.0,
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: _current == index ? Color.fromRGBO(0, 0, 0, 0.9) : Color.fromRGBO(0, 0, 0, 0.4)

The complete code is located in the example folder.

Credit (github url) : https://github.com/serenader2014/flutter_carousel_slider

Next Article : https://flutterappdev.com/2019/02/01/a-flutter-widget-that-paints-an-image-and-moves-it-at-a-slower-speed/

Leave a Reply

Your email address will not be published.