Carousel Slider — Flutter

In this article we shall be discussing how to implement Carousel Slider Widget in Flutter.

So as seen above, the carousel slider can be used for manually/automatically sliding over those image that we have provided.

Dependencies and packages

carousel_slider: ^2.0.0

import ‘package:carousel_slider/carousel_slider.dart’;

Implementation

To develop the above shown screen, we will be making use of CarouselSlider.builder() widget, which takes the itemCount(no.of images) and the itemBuilder (which returns the widget that needs to be displayed over the carousel slider.[i.e., images — in our case]) also the CarouselSlider itself can be configured using the parameter called options .Let us now discuss it one by one.

Developing the CarouselSlider.builder()

I have already specified the list of images that we shall be using for this carousel slider under the name carouselimages. So we can make use of that list name itself in place of itemCount and for declaring the relative paths of the images [line no:2 &5].

With this we have provided the input images that needs to be show over the carousel slider. Now let’s configure the slider options in the way we want.

Configuring the CarouselSlider

Using the options parameter, we can specify the following list of values as required.,

1. autoPlay:Can be used to specify whether we need automatic sliding of images or manual sliding of images by setting it as true or false respectively.
2. enlargeCenterPage Determines whether the current page should be larger than the side images.
3. viewportFraction The fraction of the viewport that each page should occupy. It is 0.8 by default, which means it takes 80% of the page size.
4. aspectRatio It can be used for specifying the heights for the images.
5. initialPage The initial page that need to be show up when creating the slider

Thus the entire hierarchy of Carousel Slider will be like.,

Thus we have completed implementing Carousel Slider in Flutter🥳

If the above explanation regarding the implementation of Carousel Slider wasn’t clear enough, then check out the video tutorial for the same 👇. Hope you can get some idea over there.

Splash Screen & CarouselSlider implementation

Want to know more about CarouselSlider and other Flutter Widgets…?🤓 Then head over to my channel vijaycreations 🚩

Get the complete code for the above CarouselSlider—Source Code 👩‍💻

Other Contributions.,

Other related posts

✅ Flutter BLoC pattern

✅AnimatedContainer in Flutter

✅GradientText Widget in Flutter

✅CustomClipper in Flutter

If you found this article useful and wish to support my work, you can consider buying me a coffee.👇

VIJAY R is Content Creator