carousel_slider_plus 7.1.0

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

carousel_slider_plus

A carousel slider widget.

This package is fork of carousel_slider which is not actively maintained.

---

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

Please make sure to change the import statement

Before

import "package:carousel_slider/carousel_slider.dart;

copied to clipboard

After

import 'package:carousel_slider_plus/carousel_slider_plus.dart';

copied to clipboard

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

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