How to Create the Carousel Slider in Flutter?

In this blog post, we’ll dive into creating a beautiful and functional carousel slider in Flutter app using the carousel_slider package.

A carousel slider is a great way to showcase images, products, or any set of widgets in a swipeable format. We’ll walk through the setup, implementation, and customization options to get you up and running.

carousel slider in Flutter

Before we start coding, ensure you have Flutter installed on your machine. You can follow the official installation guide if you haven’t installed Flutter yet.

Next, create a new Flutter project:

flutter create carousel_slider_example
cd carousel_slider_example

Open the project in your preferred code editor (e.g., Visual Studio Code, Android Studio).

To use the carousel_slider package, we need to add it to our project’s dependencies. Open pubspec.yaml and add the following line under dependencies:

    sdk: flutter
  carousel_slider: ^4.0.0

Run flutter pub get to fetch the new dependencies.

The carousel_slider package in Flutter simplifies displaying a list of images in a swipeable format. In this blog post, we will explore how the carousel_slider package makes implementing a carousel slider in your Flutter app easy.

Now, let’s implement the carousel slider in our Flutter app. Open lib/main.dart and replace the content with the following code:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Carousel Slider',
      theme: ThemeData(
      home: CarouselDemo(),

class CarouselDemo extends StatelessWidget {
  final List<String> imageList = [

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carousel Slider Demo'),
      body: Center(
        child: CarouselSlider(
          items: {
            return Builder(
              builder: (BuildContext context) {
                return Container(
                  width: MediaQuery.of(context).size.width,
                  margin: EdgeInsets.symmetric(horizontal: 10.0),
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    fit: BoxFit.cover,
          options: CarouselOptions(
            height: 300.0,
            viewportFraction: 0.8,
            autoPlay: true,
            autoPlayInterval: Duration(seconds: 3),
            autoPlayAnimationDuration: Duration(milliseconds: 800),
            autoPlayCurve: Curves.fastOutSlowIn,
            enlargeCenterPage: true,


output of Carousel Slider

Code Explanation

  1. MyApp Class: This is the root widget of our application. It sets up the MaterialApp with a title, theme, and the home widget set to CarouselDemo().
  2. CarouselDemo Class: This widget contains the main functionality of our carousel slider. It defines a list of image URLs (imageList) and uses CarouselSlider to display them.

The carousel_slider package offers a robust and flexible way to create a carousel in Flutter. Here are some key benefits:

  1. Ease of Use: Simple to integrate and requires minimal setup.
  2. Customization: Provides various options to customize the carousel’s behavior and appearance.
  3. Performance: Efficient in handling image loading and smooth transitions.
  4. Auto Play: Built-in support for auto-playing slides.
  5. Community Support: Well-maintained with regular updates and community contributions.

Customization Options

The CarouselOptions class provides various options to customize the carousel’s behavior:

  • height: Sets the height of the carousel.
  • viewportFraction: Determines the fraction of the viewport that each item should occupy. Setting it to less than 1.0 will show multiple items on the screen.
  • autoPlay: Enables automatic sliding.
  • autoPlayInterval: Sets the duration for auto-playing each slide.
  • autoPlayAnimationDuration: Sets the duration of the animation for sliding.
  • autoPlayCurve: Defines the curve for the sliding animation.
  • enlargeCenterPage: Enlarges the center item to create a 3D effect.

Feel free to adjust these options to suit your design requirements.

Also Read:


In this blog post, we learned how to implement a carousel slider in a Flutter app using the carousel_slider package. We covered the setup, implementation, and customization of the slider. With these basics, you can create stunning and interactive carousels for your Flutter applications.

Ambika Dulal

Ambika Dulal is a Flutter Developer from Nepal who is passionate about building beautiful and user-friendly apps. She is always looking for new challenges and is eager to learn new things. She is also a strong believer in giving back to the community and is always willing to help others.

Leave a Comment

AO Logo

App Override is a leading mobile app development company based in Kathmandu, Nepal. Specializing in both Android and iOS app development, the company has established a strong reputation for delivering high-quality and innovative mobile solutions to clients across a range of industries.


UI/UX Design

Custom App Development

Mobile Strategy Consulting

App Testing and Quality Assurance

App Maintenance and Support

App Marketing and Promotion


App Override

New Plaza, Kathmandu