Image Slider in Flutter
2 min readNov 22, 2020
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.
- 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.
2. Implementing Carousel Slider
- Import the carouse_pro package to the main.dart file.
- 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:
You can find the repository of this project here: https://github.com/vishnuvichu14/flutter_carousel
Thank you for reading this article.