How To Easily Use Flutter Carousel Slider OnPageChanged

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.

Outline

1. What is Flutter Carousel Slider OnPageChanged?
2. Implementing Flutter Carousel Slider OnPageChanged (Detailed Explanation)
3. Flutter Carousel Slider OnPageChanged Implementation Source Code
4. Conclusion

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.

Also don’t forget to visit my other posts on amazing Flutter templates with complete source code, custom Flutter animations with step by step explanation, Flutter widgets customization explained, Flutter app development, Flutter web, informative Flutter books and many more.

Listed below are some of the post links to these mentioned topics. Other posts can be found by the help of this site’s search box or the menu navigation bar. Thank your for reading this Flutter post.

Flutter app articles you might like to read: flutter appbar title center, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, why learn react native framework, react native jobs, react native elements, unique flutter development. mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners.

You might also like:

How To Easily Set Flutter Carousel Slider Full Width

How To Easily Change Flutter Container Alignment

How To Easily Change Flutter Appbar Icon Color Theme

How to Easily Change Flutter Appbar Default Height

How To Easily Set Flutter Appbar Center Text

How To Easily Set Flutter Box Shadow Only Top

How To Easily Change Flutter Container Height

How To Easily Customize Flutter Container Margin

How To Easily Change Flutter Container Padding

How To Easily Implement Flutter Container Shape Circle

How To Easily Add Flutter Container Background Image

How To Easily Customize Flutter Appbar Back Button

How To Easily Change Flutter Appbar Background Color

Acer Predator Helios 300 PH315 54 760S Gaming Laptop Amazing Specs

How To Easily Change Flutter Text Underline Color

How To Easily Change Flutter Container Color