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.

Implementation

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)

(https://flutter.dev/docs/development/ui/assets-and-images

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:

images

All the images on this Carousel. Type: List

animationCurve

  • 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

Values

animationDuration

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

dotSize

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

dotIncreaseSize

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

dotSpacing

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

dotColor

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

dotBgColor

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

showIndicator

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

indicatorBgPadding

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

boxFit

  • 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

Values

borderRadius

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

radius

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

moveIndicatorFromBottom

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

noRadiusForIndicator

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

overlayShadow

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

overlayShadowColors

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

overlayShadowSize

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

autoplay

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

autoplayDuration

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 https://www.androidhire.com 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