How To Set Flutter Carousel Slider Duration [Easy Flutter Code Examples]

flutter carousel slider duration

In this tutorial, we’ll learn what Flutter carousel slider duration is and how to properly customize it. We’ll be using practical Flutter code examples for better understanding.

Introduction: Flutter Carousel Slider Duration

It specifies the duration/time each item takes to start sliding in Flutter carousel slider widget. In order to properly understand it, you’ve to start implementing the code in your own complier as well.

Let’s first see the default Flutter carousel slider duration, then we’ll practically understand its customization.

Default Flutter Carousel Slider Duration

To see the default animation duration of Flutter carouse slider items, we first have to define a simple Flutter carousel slider.

For that, we’ve to import the carousel slider package in our pubspec.yaml file. If you want to learn how to import that package then click here.

In our example, we have created a list of colors. They will be used to provide each item of carousel slider with different color. The items constructor of Flutter carousel slider is used to show items in the carousel slider.

For demonstration, we will use a Flutter container widget with a child text widget. Each container will have a different color. See the below code for practical understanding.

List itemColors = [Colors.brown, Colors.purple, Colors.red];
SizedBox(
          height: 190,
          width: double.infinity,
          child: CarouselSlider(
            items: [
              for (int i = 0; i < itemColors.length; i++)
                Container(
                  color: itemColors[i],
                  alignment: Alignment.center,
                  child: Text(
                    'Item $i',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                )
            ],
            options: CarouselOptions(
                autoPlay: true, autoPlayInterval: Duration(seconds: 3)),
          ),
        )

flutter carousel slider duration

It shows the default Flutter carousel slider duration. Run it in your code and see the default animation duration in emulator/real device. Let’s now customize its duration.

Customizing Flutter Carousel Slider Duration

For that, we’ve to use the auto play interval constructor of carousel options. It takes a duration widget and inside this widget, we can see constructors like days, hours, minutes, seconds, milliseconds and microseconds. All these constructors accept integer values only.

We’ll just customize seconds and milliseconds for now. See below examples:

Example 1: In Seconds

  options: CarouselOptions(
              autoPlay: true, autoPlayInterval: Duration(seconds: 5))
Each item of Flutter carousel slider widget will slide after 5 seconds. You can give it different integer value to change its duration according to your project requirements.

Example 2: In Milliseconds

 options: CarouselOptions(
              autoPlay: true, autoPlayInterval: Duration(milliseconds: 50)),
By using milliseconds, we can give the duration a value less that 1 second. Above value will make the slider very slow. Try it with different values and see what value works best for your project.

So this is how you can easily customize Flutter carousel slider duration. I’ll be glad to answer your questions regarding the customization of Flutter carousel slider duration, if you still have any.

Below section has the complete source code in which Flutter carousel slider duration is customized.

Custom Flutter Carousel Slider Duration Source Code

flutter carousel slider duration

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 StatelessWidget {
  List itemColors = [Colors.brown, Colors.purple, Colors.red];
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: SizedBox(
        height: 190,
        width: double.infinity,
        child: CarouselSlider(
          items: [
            for (int i = 0; i < itemColors.length; i++)
              Container(
                color: itemColors[i],
                alignment: Alignment.center,
                child: Text(
                  'Item $i',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              )
          ],
          options: CarouselOptions(
              autoPlay: true, 
              autoPlayInterval: Duration(milliseconds: 50)),
        ),
      )),
    ));
  }
}

Conclusion

To conclude this tutorial, hope you now have a detailed practical knowledge of how to customize Flutter carousel slider duration. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.

Leave a Comment

Your email address will not be published. Required fields are marked *