Image Slider in Flutter

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 class, create a scaffold, and in the body property, create a SizedBox with a height of 150 and a width of 300.
• In the child property, use the Carousel widget so that we can easily create our image slider.

• 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.
• We can change the dot size by using the dotSize property.
• We can also change the spaces between the dots as well using the dotSpacing 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.