Friday, March 29, 2024

flutter carousel widget support infinite scroll and custom

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:

simple

Basic image carousel demo:

image

All screenshots above can be found at the example project.