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
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
options parameter, we can specify the following list of values as required.,
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.
enlargeCenterPageDetermines whether the current page should be larger than the side images.
viewportFractionThe fraction of the viewport that each page should occupy. It is
0.8by default, which means it takes 80% of the page size.
aspectRatioIt can be used for specifying the heights for the images.
initialPageThe 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 related posts
If you found this article useful and wish to support my work, you can consider buying me a coffee.👇