Flutter Carousel Slider with Animated Indicator
Flutter Carousel
Carousel slider is a slideshow component for displaying images or texts or any widget in a slider. Flutter provides many carousel slider package to use carousel widgets in apps.In this article you will learn, How to impliment carousel slider into your app with 5+ animated indicator and effects.
This is our list of image url and the int variable is our slider index to notify our indicator. Now let's show them on our slider UI.
Add Dependencies
Create a new Flutter project and open it on Visual Studio Code. Now, First of all add dependencies and packages. Go to pubspec.yaml and add this lines.
carousel_slider: ^4.1.1smooth_page_indicator: ^1.0.0+2
We are going to show some images on our slider from the internet, If you want show images locally then declears assests foldes and run pub get commands.
Create Image Lists
Create a statefull widget . Now on this widget , create a list variable with the name of imglist and also declear a slider index intiger variable as we have shown below.
List imglist = [
"https://wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-38.jpg",
"https://www.pixelstalk.net/wp-content/uploads/2016/07/Desktop-autumn-hd-wallpaper-3D.jpg",
"https://i.pinimg.com/originals/ff/e4/59/ffe459582c8e4dc676d73e4b07dcabc0.jpg",
"https://wallpapercave.com/wp/uUqxVHp.jpg",
];
int sliderindex = 0;
This is our list of image url and the int variable is our slider index to notify our indicator. Now let's show them on our slider UI.
Using Carousel Slider Builder
We have designed beautiful carousel for you. Here carousel builder walk through the list and take an url then show it on Image.Network widget and also changes our sliderindex value. Don't worry, read all comments to easily understand.
CarouselSlider.builder(
//lenght of our list
itemCount: imglist.length,
itemBuilder: ((context, index, realIndex) {
//retruns a single url from list .
final url = imglist[index];
return ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
decoration:BoxDecoration(borderRadius: BorderRadius.circular(10)),
constraints: BoxConstraints.expand(height: 200.0, width: 615),
child: Image.network(
url,
fit: BoxFit.fitWidth,
),
),
);
}),
options: CarouselOptions(
//For Indicator its change slider index
onPageChanged: (index, reason) {
setState(() {
sliderindex = index;
});
},
autoPlay: true,
/* aspectRatio: 16/9, */
autoPlayCurve: Curves.fastOutSlowIn,
viewportFraction: 1.0,
),
),Animated Indicator
Now let's impliment indicators for our slider. Wrap Carousel Builder with a Column Widget. After carousel slider builder, add this widget.
Tere are some animated effect for the indicator. We used Wrom effects. You can try another one. Here is a sample Preview, for more check this out.
const SizedBox(
height: 10,
),
AnimatedSmoothIndicator(
activeIndex: sliderindex,
count: imglist.length,
effect: const WormEffect(
dotHeight: 4,
dotWidth: 4,
dotColor: Colors.grey,
activeDotColor: Colors.teal),
)Tere are some animated effect for the indicator. We used Wrom effects. You can try another one. Here is a sample Preview, for more check this out.
Source Codes
Here is the full source code of this tutorial. You copy and Paste It on Your Project Thank you.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
class OrkittSlider extends StatefulWidget {
OrkittSlider({super.key});
@override
State<OrkittSlider> createState() => _OrkittSliderState();
}
class _OrkittSliderState extends State<OrkittSlider> {
List imglist = [
"https://wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-38.jpg",
"https://www.pixelstalk.net/wp-content/uploads/2016/07/Desktop-autumn-hd-wallpaper-3D.jpg",
"https://i.pinimg.com/originals/ff/e4/59/ffe459582c8e4dc676d73e4b07dcabc0.jpg",
"https://wallpapercave.com/wp/uUqxVHp.jpg",
];
int sliderindex = 0;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 28.0, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: double.infinity,
height: 181.0,
child: CarouselSlider.builder(
//lenght of our list
itemCount: imglist.length,
itemBuilder: ((context, index, realIndex) {
//retruns a single url from list .
final url = imglist[index];
return ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
decoration:BoxDecoration(borderRadius: BorderRadius.circular(10)),
constraints: const BoxConstraints.expand(height: 200.0, width: 615),
child: Image.network(
url,
fit: BoxFit.fitWidth,
),
),
);
}),
options: CarouselOptions(
//For Indicator its change slider index
onPageChanged: (index, reason) {
setState(() {
sliderindex = index;
});
},
autoPlay: true,
/* aspectRatio: 16/9, */
autoPlayCurve: Curves.fastOutSlowIn,
viewportFraction: 1.0,
),
),
),
const SizedBox(
height: 10,
),
AnimatedSmoothIndicator(
activeIndex: sliderindex,
count: imglist.length,
effect: const WormEffect(
dotHeight: 4,
dotWidth: 4,
dotColor: Colors.grey,
activeDotColor: Colors.teal),
)
],
),
);
}
}
Conclusion
It this tutorial, you have learned to impliment carousel slider with animated indicator. How was it? Pease leave a comment below. Thank You!!