How To Easily Customize Flutter Carousel Slider AutoPlay

Flutter Carousel Slider Autoplay

In this Flutter post, we will be learning what Flutter carousel slider autoplay is and how to customize it. An easy Flutter example with step by step explanation will be provided for better understanding of the role and usage of Flutter carousel slider autoplay. Let’s both of us jump right into its implementation.

What is Flutter Carousel Slider Autoplay?

As you know that Flutter carousel slider is used to slide a list of items. Its a very good approach to make the app look more professional. But what is the role of autoplay in Flutter carousel slider? As the name suggests, it is used to set whether the carousel slider should slide items automatically or not.

Let’s now understand it with the help of a proper Flutter example.

Default Flutter Carousel Slider Autoplay Status

In order to see what is the default state of Flutter carousel slider autoplay, we have to implement a simple Flutter carousel slider widget. Click here if you want to know how to import the carousel slider package.

As a list of items, we have passed a Flutter container widget with a background image. For more decoration, we have make the edges of container a bit circular and also have given shadow to it. You will also see a child text widget of that container. Now we will see whether the slider auto slides the items or not. Below code has a practical implementation of this theory.

SizedBox(
              height: 200,
              width: double.infinity,
              child: CarouselSlider(
                items: [
                  for (int i = 0; i < 4; i++)
                    Container(
                      alignment: Alignment.center,
                      margin:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 30),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          image: DecorationImage(
                              fit: BoxFit.cover,
                              colorFilter: ColorFilter.mode(
                                  Colors.black45, BlendMode.darken),
                              image: AssetImage('assets/cartoon.jpg')),
                          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(),
              ),
            )
If you run this code then you will see that the items are not sliding automatically. Let’s now see how to set Flutter carousel slider autoplay.

Custom Flutter Carousel Slider Autoplay Status

As you can see, we have an options constructor in Flutter carousel slider widget class. We have to pass carousel options class to that constructor as seen in the above code. This carousel options class has an autoplay constructor which takes a Boolean(true/false) value. By default, it is false which means the slider will not slide automatically. Now in order to implement Flutter carousel slider autoplay, we have to pass true to that constructor. See the below code:

options: CarouselOptions(
              autoPlay: true
                )
Flutter Carousel Slider default Autoplay
By running this code in your Flutter carousel slider widget, you will see that the slider is sliding its items automatically which means Flutter carousel slider is implemented successfully.
So this is how you can easily set Flutter carousel slider autoplay in your own Flutter apps. Hope you have learned a lot from this post. You can ask questions in the comment section regrading Flutter carousel slider autoplay, if you still have any. I would love to answer them.
Below is the complete Flutter source code of the above implemented Flutter carousel slider autoplay.

Flutter Carousel Slider Autoplay Implementation Source Code

Flutter Carousel Slider default Autoplay

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> {
  @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 < 4; i++)
                    Container(
                      alignment: Alignment.center,
                      margin:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 30),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          image: DecorationImage(
                              fit: BoxFit.cover,
                              colorFilter: ColorFilter.mode(
                                  Colors.black45, BlendMode.darken),
                              image: AssetImage('assets/cartoon.jpg')),
                          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(autoPlay: true),
              ),
            ),
          ],
        ),
      ),
    ));
  }
}

Conclusion

In conclusion, hope you enjoyed it and have learnt how to implement Flutter carousel slider autoplay. Feel free to implement it in your own Flutter code and share your experience. I would be looking forward at your feedback. Thanks for reading.

Leave a Comment

Your email address will not be published.