Image Slider in Flutter

carousel_pro image slider
  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
  • 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.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Musings of a New Grad Engineer

Linux minimalism with Fluxbox

The Mystery of #inject in Ruby

Why did I decide to study Software Engineering?

Rate Limiting on AWS API Gateway: Beyond Usage Plans

aiMotive introduces aiData

The 5 Best Chrome Extensions for Developers

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
Vishnuvarshan P

Vishnuvarshan P

More from Medium

Flutter environment

Open Flutter module from Android App

Input formatters in Textfield Flutter

TextInputFormatter in Flutter - Format User’s Input on-the-fly