Flutter | An introduction to the open source SDK by Google

Flutter - Carousel Slider

Last Updated : 28 Feb, 2025

Carousel Slider is one of the most popular image sliders used nowadays in most apps. These carousel sliders are mostly seen on various eCommerce sites such as Amazon, Flipkart, Myntra, and many more. 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.

Properties of Carousel Slider

Items: In which we have to declare Asset Images or Network Images that are used in our app

Options: It consists of many properties such as:

Options	Description
height	Overall height of the card to display the image
autoplay	Cards automatically slide 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

In this article, we will look into the implementation of Carousel Slider in a Flutter app. To Implement the Carousel Slider in Flutter you have to follow the following steps:

Step 1: First add Carousel Slider dependency in pubspec.yaml file in the lib folder

We have added the dependency for Carousel Slider in our pubspec.yaml file located in the lib folder in dependencies as shown below:

carousel_slider: ^5.0.0

Now run the below command in terminal to update the pubspec.yaml.

flutter pub get

Step 2: Now navigate to main.dart() file and return Material App().

First, we have declared MyApp() in runApp in the main function. Then we have created StatelessWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given the title of our App then declared the theme of our App as Dark Theme. Then we have given our first screen of or slider app in the home: HomePage().

main.dart:

main.dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      
      // Title of App
      title: 'GFG slider',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      darkTheme: ThemeData.dark(),
      
      //First Screen of Slider App
      home: HomePage(),
    );
  }
}

Step 3: Now Import Carousel Slider dependencies in HomePage.dart() file.

In HomePage.dart() first we have to import our package carousel-slider.dart. Then we have created appbar inside Scaffold(). In this appbar we have given the title of the App. After that. Inside the body, we have declared ListView() inside which we have declared CarouselSlider() in which we have given 5 items. Each item is placed inside a Container() which consists of properties such as margin which is given from all sides. After that, we have given boxdecoration which is used to decorate our Container(). We have given boderRadius as circular. Which makes our Container() rounded from all sides by giving a specific radius. Now we have given an image in which we have declared DecorationImage() which is used to display images in our Container() through URL. And have fit the image as BoxFit.cover. Which adjust image as container size. Now for the other 4 containers, we have followed the same steps. After that, we have declared CarouselOptions() in options.

HomePage.dart

HomePage.dart

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';


class  HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        foregroundColor: Colors.white,
        backgroundColor: Colors.green,
        title: Text("GFG Slider"),
      ),
      body: ListView(
        children: [
          CarouselSlider(
              items: [
                
                //1st Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                
                //2nd Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                
                //3rd Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                
                //4th Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                
                //5th Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),

          ],
            
            //Slider Container properties
              options: CarouselOptions(
                height: 180.0,
                enlargeCenterPage: true,
                autoPlay: true,
                aspectRatio: 16 / 9,
                autoPlayCurve: Curves.fastOutSlowIn,
                enableInfiniteScroll: true,
                autoPlayAnimationDuration: Duration(milliseconds: 800),
                viewportFraction: 0.8,
              ),
          ),
        ],
      ),

    );
  }
}

Don't forget to replace the image URL's in the place of "ADD IMAGE URL HERE".

Output:

Image Slider Carousel in Flutter

Flutter | An introduction to the open source SDK by Google

C

chinmaymunje96

Improve

Article Tags :

Similar Reads