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

Intermediate guide to DFK Heroes

Mutex Examples in Go

Agile vs. DevOps: The Similarities and Differences

Agile vs. DevOps: The Similarities and Differences

Photon OS 4.0 as Kubernetes Node

Implementing strStr() in Swift; breaking early

PostgreSQL - Backup & Point In Time Recovery

How Docker can improve your development environments

Teacher at Le Wagon during projects weeks: building 2 products with 7 amazing students

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

History Of Flutter

My Flutter Islamic Calendar App

Flutter Experience

Flutter MethodChannel