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.

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.

Initial Setup to Create Carousel Slider in Flutter

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

Adding Dependencies for carousel slider in Flutter

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:

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

Run flutter pub get to fetch the new dependencies.

Implementing the Carousel Slider

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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Carousel Slider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CarouselDemo(),
    );
  }
}

class CarouselDemo extends StatelessWidget {
  final List<String> imageList = [
    "https://previews.123rf.com/images/photochicken/photochicken2008/photochicken200800065/153425631-pritty-young-asian-photographer-girl-teen-travel-with-camera-trip-take-a-photo-tourist-lifestyle.jpg",
    "https://previews.123rf.com/images/photochicken/photochicken2008/photochicken200800065/153425631-pritty-young-asian-photographer-girl-teen-travel-with-camera-trip-take-a-photo-tourist-lifestyle.jpg",
    
  ];

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

Output:

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.

Why Use carousel_slider?

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:

• How to Create TabBar Background Color in Flutter?
• How to Create a TODO App in Flutter?

Conclusion

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.