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.
- carousel_slider 2.2.1 (https://pub.dev/packages/carousel_slider) .
- 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.
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.
- 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).
- 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’;
- 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.
- NetworkImage Method
- AssetImage Method
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:
All the images on this Carousel. Type: List
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.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
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
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 :
- Package Developed by JLouage (Julien Louage) firstname.lastname@example.org
- Dart Packages: https://pub.dev/