Coding Tutorials

Image Slider in Flutter with Example

Jayant dhingra•
Image Slider in Flutter with Example

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

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

  1. carousel_slider 2.2.1 (https://pub.dev/packages/carousel_slider) .
  2. carousel_pro 1.0.0 (https://pub.dev/packages/carousel_pro)

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 Beginner or at Intermediate level 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

  1. If you guys are reading this I hope you are familiar with the pubsec.yaml and how to add dependencies. (if not:https://flutter.dev/docs/development/packages-and-plugins/using-packages).
  1. Now if the addition of dependencies went well it won’t show any Error while Saving (ctrl+s) the pubsec.yaml. Time-to-IMPORT the package in your working file. 

Example: import ‘package:carousel_pro/carousel_pro.dart’;

  1. Let us take an easy example to help you guys get going with this amazing widget. Further on there will be less Textual explanation more of Code-block you can either copy-paste the block as it is or for better understanding write it and then code it on your own. 

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

Two methods:

  1. NetworkImage Method
  1. AssetImage Method

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

Sample Image what we are trying to accomplish here:

Now finally Source Code:

 // Main Code block for Carousel
             child: Carousel(
               boxFit: BoxFit.fill,
               autoplay: true,
               animationCurve: Curves.fastOutSlowIn,
               animationDuration: Duration(milliseconds: 1000),
               dotSize: 6.0,
               dotIncreaseSize: 6.0,
               dotBgColor: Colors.transparent,
               dotColor: Colors.green,
               dotPosition: DotPosition.bottomCenter,
               showIndicator: true,
               indicatorBgPadding: 7.0,
               images: [
// Saved images 
                 AssetImage('images/back.jpg'), 
                 AssetImage('images/law.png'),
               ],
             )

(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 some Parameters and values of the carousel widget:

images 

All the images on this Carousel. Type: List

animationCurve 

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

Values
  • 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;

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 

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

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

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 : 

  • Package Developed by JLouage (Julien Louage) info@jlouage.com
  • Dart Packages: https://pub.dev/