carousel_pro image slider

Image slider is very useful in showcasing your works, adds, image albums, etc. Including image sliders in flutter is very much easy using the carousel pro package. We can get access to this carousel pro package in pub.dev.

  1. Adding carousel_pro in pubspec.yaml file
    Add the carousel pro plugin in the dependencies in pubspec.yaml file. Then click on the pub get on the top.
Adding dependency in pubspec.yaml file

2. Implementing Carousel Slider

  • Import the carouse_pro package to the main.dart file.
importing carousel_pro
  • Create a StatelessWidget Class for implemented the image slider. In our case, we are naming it CarouselPage.
  • Inside the carousel widget, use the images property to add images which we need to display in the image slider in order. We can use images from the internet as well as the local folder.
  • By default, the images will slide automatically with a default speed. To disable the sliding we should set the autoplay property to false. So that we can slide the image manually and if we need it to slide automatically, we can again set the autoplay property to true.
autoplay: false,
  • We can easily change the sliding time duration, using the animationDuration property. It will take the time value in milliseconds. So for a 1-second interval between each image, we should keep the duration as 1000 milliseconds.
autoplay: false,
animationDuration: Duration(milliseconds: 1000),
  • At the bottom, there is a dot indicator that changes on image slides, we can change the color of it as well using the dotColor property.
dotSize: 6.0,
dotSpacing: 15.0,
dotColor: Colors.lightGreenAccent,
borderRadius: true,
  • To make the images sharp edge into curved, we can use the borderRadius property by setting it to true.

You can find the entire code for this below:

flutter_carousel_pro_code

You can find the repository of this project here: https://github.com/vishnuvichu14/flutter_carousel

Thank you for reading this article.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store