Flutter Carousel Slider Beautiful Customization With Example

In this tutorial, we’ll learn about the Flutter carousel slider. We’ll be going through detailed practical code examples to understand the role and usage of the carousel slider in Flutter apps.

What is Flutter Carousel Slider?

The carousel slider as the name suggests is a slider that slides its items. It gives a very beautiful look to your app and a good user experience.

The Flutter carousel slider has many properties for making the slider very attractive and eye-catching. Most of the popular websites and apps have carousel sliders in them. Let’s see how to implement the mentioned beautiful carousel slide in our Flutter app.

Import Carousel Slider Package

carousel_slider: ^4.0.0

Write this line in the dependencies section of your pubspec.yaml and run pub get to import the package in your app.

To get the latest version of this package, you can visit here.

Implementation

Let’s now implement a carousel slider in our Flutter app.

Carouse Slider Builder

CarouselSlider.builder(
          itemCount: 10,
          options: CarouselOptions(aspectRatio: 1.2)
          itemBuilder: (context, index, realIndex)
              {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 10),
                  color: Colors.blue.shade500,
                                );
              }
                      )

We have used the carousel slider class builder, inside it we have:

• An item count constructor, which defines the number of items in our carousel slider.
• Options constructor, in which we can specify how the carousel slider will work, like the auto slider, how much space will each item cover on the screen, etc.
• Item builder constructor will return the widget specified e.g. a container having some text, it will return that specific widget, and how many will return are specified using the item count constructor. For just a simple example, we have returned a container widget, having a blue color and some horizontal margin as well, so each container will be separated. Let’s see how it looks now:

Carousel Options

options:CarouselOptions()

Aspect Ratio

options: CarouselOptions(aspectRatio: 1.2)

Height

height:300

Auto Play

autoPlay: true

Auto Play Animation Duration

autoPlayAnimationDuration: Duration(seconds: 4)

Auto Play Curve

 autoPlayCurve: Curves.bounceIn

Enlarge Center Page

enlargeCenterPage: true

Specifying the enlarge center page constructor to true means that the item in the carousel slider which whenever the slider slides and the item that we see on our screen in the center will be enlarged. See the above image example.

Enlarge Strategy

enlargeStrategy: CenterPageEnlargeStrategy.height

Initial Page

initialPage: 2

Enable Infinite Scroll

enableInfiniteScroll: false

Using the enable infinite scroll constructor, we can specify our slider to scroll forever. By default, it’s true, but making it false means it will slide till the last item and won’t slide forward after that. The same is for the first item, it won’t slide in a backward direction if it is already in the first item.

Although, it can slide forward and backward between other items other than the first and the last one. In the above image, we are in the last item and it’s not scrolling forward because the enable infinite scroll is set to false.

Page Snapping

pageSnapping: false

Reverse

 reverse: true

View Port Fraction

 viewportFraction: 1

Using the viewport fraction constructor, we can specify the width of each item. Making it 1 will specify showing only one item at a time in the slider. Decreasing its value from 1 will make the width less that the screen width which allows other items to be shown at the same time.

See the image above in which we have specified the viewport fraction to 1. You can see the width is a little less than the screen width and that’s because we have given our container some margin. Try to give different viewport fraction values and see what suits your requirements best.

Scroll Direction

scrollDirection: Axis.vertical

Scroll Physics

scrollPhysics: NeverScrollableScrollPhysics()

Auto Play Interval

autoPlayInterval: Duration(seconds: 2)

OnPage Changed

 onPageChanged: (index, reason) {

                    print(index.toString());

                    print(reason.toString());

                  }

The reason argument specifies whether the slide occurs manually or automatically. When the slide occurs from the user, means when the user drags the item then it shows manual and when it occurs from the auto-play then it shows timed.