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

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)),
          ),
        )

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))

 options: CarouselOptions(
              autoPlay: true, autoPlayInterval: Duration(milliseconds: 50)),

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)),
        ),
      )),
    ));
  }
}