How to create an image carousel slider in Flutter
As a mobile developer, we sometimes have to create sliding, animated, background image carousels, but sometimes we require to create sliding card carousel which contains some data with different background color or gradient.
Carousel Slider is one of the most popular image slider used nowadays in most apps. These Carousel Sliders can be seen in various eCommerce sites such as Amazon, Flipkart, Myntra, and many more. Displaying the images in a slider gives an attractive User Experience. In this article, I will explain how to implement a card carousel in Flutter with the help of a package.
The carousel package we will be using is carousel_slider: https://pub.dev/packages/carousel_slider
In this tutorial, I will use my PPL project as an example of how to implement a carousel slider in Flutter using Visual Studio Code. When you have created the Flutter project, navigate to the pubspec.yaml file and add carousel_slider: ^1.4.1 or carousel_slider: ^4.0.0-nullsafety.0 under Flutter SDK dependency:
This communicates to the app that you want to add carousel_slider version 1.4.1 or carousel_slider: ^4.0.0-nullsafety.0. In my PPL project, I use null safety because Null safety is a major new productivity feature that helps you avoid null exceptions, a class of bugs that are often hard to spot. As an added bonus, this feature also enables a range of performance improvements.
Next run flutter pub get in your terminal or If you are in VS Code, you can do this by clicking the icon that sits at the top-right corner above the pubspec.yaml file.
Before implementing the carousel feature you must import carousel_slider.dart on the page you will add the feature on:
Properties of Carousel Slider:
- height is the overall height of our cards.
- autoPlay is for cards to automatically slide one page at a time.
- autoPlayInterval sets Duration to determent the frequency of slides when autoPlay is set to true.
- autoPlayAnimationDuration The animation duration between two cards while in auto playback.
- autoPlayCurve determines the animation curve.
- pauseAutoPlayOnTouch sets a timer on touch detected that pauses the autoplay.
- aspectRatio is used if no height has been declared.
- onPageChanged called whenever the page in the center of the viewport changes.
Now we can begin implementing the carousel slider feature, As an example, we will be using the below code from my PPL project for CarouselSlider:
In this example, there is an if-else code that creates a text for when there are no images saved in the database.
Code Descriptions and Uses:
- references![“images”] is a document snapshot gathered from a firebase storage
- item is used to access images from references![“images”].
- .map<Widget>((item) This method returns a view of the mapped elements in the references![“images”].
- FullPhoto is a function to enable fullscreen on a selected image
- ClipRRect is a widget that clips its child using a rounded rectangle.
- Stack is a widget that creates a stack layout widget
- Image.network() is a function that creates a widget that displays an [ImageStream] obtained from the network.
Result example from my PPL project:
References: