Image Slider In Flutter With Example

Ever wondered what we call those image sliders on the Apps and websites like Amazon, Flipkart, etc.

Image for post
Image for post

Those elegant looking image Sliders are known as Carousels. We have two most famous frequently used Dart packages for Carousels widget.

In this very Blog, we will be only Discussing the Second Package mentioned above. The choice is personal, but I would recommend if you are either or at Intermediatelevel of your Flutter Development. Try this one.

Carousel_pro 1.0.0

This Dart package is really easy to implement just like any other Widget in Flutter. Initially, when I tried Developing my own carousel it was really difficult and messy.

So, I looked up and initially found the carousel_slider package which was Little difficult to get hands-on with ( as I said it’s your personal choice, you can opt any according to your requirements), So enough talking about my Experience, its time to get our hands dirty with the coding part.


Image for post
Image for post

import ‘package:carousel_pro/carousel_pro.dart’;

Guys one thing before we start coding. We should be familiar with the two ways in which we add images in Flutter.

Sample Image what we are trying to accomplish here: Now finally Source Code:

Image for post
Image for post

Two methods:

(From my Visual Studio-CODE)


In this, we used the second method (AssetImage widget) to add images in the Flutter app. I took only two images just to keep things simple.There is now limit plus you can always make vertical carousel as well as horizontal this package doesn’t limit that.

Time to explain someParameters and values of the carousel widget:


All the images on this Carousel. Type: List


  • Curves.linear;
  • Curves.fastOutSlowIn;
  • Curves.ease;
  • Curves.bounceOut;
  • Curves.bounceIn;
  • Curves.bounceInOut;
  • Curves.decelerate;
  • Curves.ease;
  • Curves.easeIn;
  • Curves.easeInOut;
  • Curves.easeOut;
  • Curves.elasticIn;
  • Curves.elasticInOut;
  • Curves.elasticOut;

The transition animation timing curve Default value: Curves.ease Type: Curve



The transition animation duration Type: Duration Default value: 300ms.


The base size of the dots Type: double Default value: 8.0


The increase in the size of the selected dot Type: double Default value: 2.0


The distance between the center of each dot Type: double Default value: 25.0


The Color of each dot Type: Color Default value: Colors.white


The background Color of the dots Type: Color Default value: Colors.grey[800].withOpacity(0.5)


Enable or Disable the indicator (dots) Type: bool Default value: true


Padding Size of the background Indicator Type: double Default value: 20.0


  • BoxFit.cover;
  • BoxFit.fitWidth;
  • BoxFit.fitHeight;
  • BoxFit.scaleDown;
  • BoxFit.fill;
  • BoxFit.contain;
  • BoxFit.none;

How to show the images in the box Type: BoxFit Default value: cover



Enable/Disable radius Border for the images Type: bool Default value: false


Border Radius of the images Type: Radius Default value: Radius.circular(8.0)


Move the Indicator From the Bottom Type: double Default value: 0.0


Remove the radius bottom from the indicator background Type: bool Default value: false


Enable/Disable Image Overlay Shadow Type: bool Default value: false


Choose the color of the overlay Shadow color Type: Color Default value: Colors.grey[800]


Choose the size of the Overlay Shadow, from 0.0 to 1.0 Type: double Default value: 0.5


Enable/Disable autoplay carousel Type: bool Default value: true


The autoplay transition duration Type: Duration Default value: 3s.

That’s it for this blog. If you Came this far than Thank you. Don’t forget to subscribe to this blog.

Special Thanks to :

Originally published at on July 2, 2020.

Written by

Data Enthusiast, Geek, part — time blogger.

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