Image Slider in Flutter with Example

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).

2. 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';

3. 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

2. 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/