flutter_carousel_widget 1.1.0 icon indicating copy to clipboard operation
flutter_carousel_widget: ^1.1.0 copied to clipboard

A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget #

A customizable carousel slider widget in Flutter which supports infinite scrolling, auto scrolling, custom child widget, custom animations and pre-built indicators.

pub package popularity likes pub points

Features #

  • Infinite Scroll
  • Custom Child Widget
  • Auto Play
  • Horizontal and Vertical Alignment
  • Pre-built carousel Indicator.
  • Many more features are coming soon

Demo #

View Demo

Installation #

Add flutter_carousel_widget as a dependency in your pubspec.yaml file:

dependencies:
  flutter_carousel_widget: ^1.1.0

And import it:

import 'package:flutter_carousel_widget/flutter_carousel_widget.dart';

Usage #

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

FlutterCarousel(
  options: CarouselOptions(
    height: 400.0, 
    showIndicator: true,
    slideIndicator: CircularSlideIndicator(),
  ),
  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(),
)

Option Customization #

FlutterCarousel(
   items: items,
   options: CarouselOptions(
    height: 400.0,
    aspectRatio: 16 / 9,
    viewportFraction: 1.0,
    initialPage: 0,
    enableInfiniteScroll: true,
    reverse: false,
    autoPlay: false,
    autoPlayInterval: const Duration(seconds: 2),
    autoPlayAnimationDuration: const Duration(milliseconds: 800),
    autoPlayCurve: Curves.fastOutSlowIn,
    enlargeCenterPage: false,
    onPageChanged: callbackFunction,
    pageSnapping: true,
    scrollDirection: Axis.horizontal,
    pauseAutoPlayOnTouch: true,
    pauseAutoPlayOnManualNavigate: true,
    pauseAutoPlayInFiniteScroll: false,
    enlargeStrategy: CenterPageEnlargeStrategy.scale,
    disableCenter: false,
    showIndicator: true,
    floatingIndicator = true,
    slideIndicator: CircularSlideIndicator(),
   )
 )

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.

FlutterCarousel.builder(
  itemCount: 15,
  itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
    Container(
      child: Text(itemIndex.toString()),
    ),
)

In order to manually control the pageview's position, you can create your own CarouselController, and pass it to CarouselSlider. Then you can use the CarouselController instance to manipulate the position.

class CarouselDemo extends StatelessWidget {
  CarouselController buttonCarouselController = CarouselController();

 @override
  Widget build(BuildContext context) => Column(
    children: <Widget>[
      FlutterCarousel(
        items: child,
        carouselController: 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('→'),
      )
    ]
  );
}

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

Screenshots #

Basic Flutter Carousel:

simple

Enlarge Center Widget Flutter Carousel:

simple

Manually Controlled Flutter Carousel:

simple

Flutter Carousel with Custom Indicator:

simple

Connect With Me #

nixrajput | Website

nixrajput | GitHub

nixrajput | Instagram

nixrajput | Facebook

nixrajput | Twitter

nixrajput | LinkedIn

17
likes
130
pub points
87%
popularity

Publisher

verified publisher iconnixlab.co.in

A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

GPL-3.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_carousel_widget