In this Flutter post, we will be practically understanding how to use Flutter carousel slider onPageChanged. It will be explained step by step with an easy Flutter example. I hope after reading this post, your will not face any difficulties while using the Flutter carousel slider onPageChanged.
So what are we both waiting for? Let’s both of us jump right into implementing it.
What is Flutter Carousel Slider OnPageChanged?
Flutter carousel slider is a really awesome way to show case your images, texts etc. It consists of items that can auto slide with customized duration. The onPageChanged can be used to hold an index value of the carousel slider item that is currently shown on the screen and it changes with each item.
In this post, we will see how we can use the Flutter carousel slider onPageChanged to change another Flutter widget automatically.
Implementing Flutter Carousel Slider OnPageChanged (Detailed Explanation)
We will understand the working of OnPageChanged with the help of a practical example. The details are as follows:
- First we will create a simple Flutter carousel slider and give it a list of items.
- That list of items will consist of Flutter container widgets. We will give our container widget a dynamic background color and a box shadow to make it look good. Also a child text widget will be provided to that container.
- We will have a list of colors that will be given to the Flutter container items.
- After that, we will be using the options constructor of the Flutter carousel slider widget. Then pass it carousel options class.
- Now the main thing for which you are reading this post, we will be using the onPageChanged constructor of the carousel options class. It takes a functions having two parameters(Index and Carousel Page Change reason). We will just focus on the index for now. It stores the index value of the item that is currently shown on the screen.
- We have declared an integer variable with value 0. We have used it inside the onPageChanged function body and set the value of index to that integer. Also we have used set state so each time it is called, the set will be updated.
- We have used a column widget and in the first child, we have passed the Flutter carousel slider but as a second child to the column widget, we have passed a row widget having a list of Flutter container widgets. That list was created using the for loop and the length is set to the length of color list items. It was used so that the number of these containers match the number of Flutter carousel slider items.
- We have just made the color of containers dynamic. We have set a simple logic that if the integer value is equal to the current list of container item, then change its color to blue, or else change it to white.
Let’s now leave the boring part and see the practical code. Below code will practically show each and every step that we have specified in the above list. I would like to have a detailed look on the above source code to better understanding on how to use the Flutter carousel slider onPageChanged.
You can specify any action of your choice. For demonstration, we have use this example in which the color of container widget changes as the slider slides.
Flutter Carousel Slider OnPageChanged Implementation Source Code
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
List itemColors = [Colors.green, Colors.purple, Colors.blue];
int currentIndex = 0;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 200,
width: double.infinity,
child: CarouselSlider(
items: [
for (int i = 0; i < itemColors.length; i++)
Container(
alignment: Alignment.center,
margin:
EdgeInsets.symmetric(horizontal: 10, vertical: 30),
decoration: BoxDecoration(
color: itemColors[i],
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 2,
blurRadius: 8,
offset: Offset(4, 4))
]),
child: Text(
'Flutter Carousel Slider item ${i + 1}',
style: TextStyle(color: Colors.white, fontSize: 15),
),
)
],
options: CarouselOptions(
onPageChanged: (index, reason) {
setState(() {
print(reason.toString());
currentIndex = index;
});
},
autoPlay: true),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (int i = 0; i < itemColors.length; i++)
Container(
height: 13,
width: 13,
margin: EdgeInsets.all(5),
decoration: BoxDecoration(
color: currentIndex == i ? Colors.blue : Colors.white,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 3,
offset: Offset(2, 2))
]),
)
],
)
],
),
),
));
}
}Conclusion
To conclude, hope you now have a detailed in depth understanding of how to use Flutter carousel slider onPageChanged in your own Flutter apps. I would be really happy to have your valuable feedback on this post. Thank your for reading this Flutter post.
Hello Ƭhere. I found youг weblog ᥙsing mѕn. This is a very well written article.
I will be sure to bookmark it and come back to read moгe оf your սseful information. Thank you for the post.
Ι’ll certainly comeback.
Thanks for the support. Do visit my other posts.