Carousel Slider

Vipul Chauhan

29 April 2023

Carousel Slider is one of the most popular image sliders used nowadays in most apps. Displaying the images in a slider gives an attractive User Experience. As these sliders are automated you can get to see various types of images and content in them.

Features

Infinite scroll
Custom child widgets
Auto play

Supported platforms

Android
iOS
web
desktop

You may also explore our Flutter app development page.

Properties of Carousel Slider:

Items: In which we have to declare our items.
Options: It consists of many properties such as:

height: Overall height of card to display the image
autoplay: Cards automatically slides at a time
autoplaycurve: Determines the animation curve
aspectRatio: Aspect Ratio is used to declare the height
autoPlayAnimationDuration: Used to declare time for automated slide

Let’s start the implementation

To Implement the Carousel Slider in Flutter you have to follow the following steps:

1: First add Carousel Slider dependency in your pubspec.yaml file


dependencies:
  
    carousel_slider: ^4.0.0

dependencies:

carousel_slider: ^4.0.0

2: Let’s move to the next part

Here we will create the class for our demo (In my case “MyHomePage” )

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Carousel Demo'),
      ),
      body: Center(child: getSlider()), //===Will find the function in next step
    );
  }
}

class MyHomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Carousel Demo'),

body: Center(child: getSlider()), //===Will find the function in next step

);

}

3: In this step, we will set up our slider according to our needs
In my case, I have used a simple container with a center align text field.

Note:- This is just a demo code you can modify this according to your needs

Widget getSlider() {
    return CarouselSlider(
      options: getOptions(), //=====Find the options in next step
      items: &#91;1, 2, 3, 4, 5].map((i) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 5.0),
                decoration: const BoxDecoration(color: Colors.amber),
                child: Center(
                  child: Text(
                    'text $i',
                    style: const TextStyle(fontSize: 16.0),
                  ),
                ));
          },
        );
      }).toList(),
    );
  }

Widget getSlider() {

return CarouselSlider(

options: getOptions(), //=====Find the options in next step

items: [1, 2, 3, 4, 5].map((i) {

return Builder(

builder: (BuildContext context) {

return Container(

width: MediaQuery.of(context).size.width,

margin: EdgeInsets.symmetric(horizontal: 5.0),

decoration: const BoxDecoration(color: Colors.amber),

child: Center(

child: Text(

'text $i',

style: const TextStyle(fontSize: 16.0),

));

);

}).toList(),

);

}

4: In this step, we will set up our slider options

 CarouselOptions getOptions() {
    return CarouselOptions(
      height: 400,
      aspectRatio: 16 / 9,
      viewportFraction: 0.8,
      initialPage: 0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: true,
      autoPlayInterval: const Duration(seconds: 3),
      autoPlayAnimationDuration: const Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: true,
      onPageChanged: (position, reason){
        print("Current Position:- $position");
        print("Change Reason:- ${reason.name}");
      },
      scrollDirection: Axis.horizontal,
    );
  }

CarouselOptions getOptions() {

return CarouselOptions(

height: 400,

aspectRatio: 16 / 9,

viewportFraction: 0.8,

initialPage: 0,

enableInfiniteScroll: true,

reverse: false,

autoPlay: true,

autoPlayInterval: const Duration(seconds: 3),

autoPlayAnimationDuration: const Duration(milliseconds: 800),

autoPlayCurve: Curves.fastOutSlowIn,

enlargeCenterPage: true,

onPageChanged: (position, reason){

print("Current Position:- $position");

print("Change Reason:- ${reason.name}");

scrollDirection: Axis.horizontal,

);

}

Now, we are ready to try this
As a result, you will get the 5 sliding cards on the center of your screen

Check the given video for output

To know more about carousel_slider please check this link

You can also check some examples from this link

Note:- For a better user experience, please use a mobile device to open this carousel slider example link.

Hopefully, this blog will be helpful to you to understand the Carousel Slider. If you have any queries, please write them in the comment section.