Create a Carousel Slider Example App in Flutter

Introduction:

Flutter is a powerful framework for building cross-platform mobile applications. One popular UI component frequently used in mobile app development is a carousel slider, which allows users to swipe through a collection of items horizontally. In this tutorial, we will walk you through the process of creating a carousel slider example app using Flutter.

Prerequisites:

To follow along with this tutorial, you will need to have Flutter and Dart installed on your machine. You can download and set up Flutter by following the official Flutter installation guide.

Step 1: Set up a new Flutter project

Open your preferred integrated development environment (IDE) and create a new Flutter project. You can use the following command in your terminal:

flutter create carousel_slider_example 

Step 2: Add dependencies

In the pubspec.yaml file, add the carousel_slider dependency. This package provides a simple and customizable carousel slider widget for Flutter. Add the following code to the dependencies section of the pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter

  carousel_slider: ^4.0.0

Save the file, and run the following command to fetch the dependencies:

flutter pub get 

Step 3: Set up the carousel slider

Open the main.dart file in your IDE and replace the existing code with the following:

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


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


class CarouselSliderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Carousel Slider Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CarouselSliderPage(),
    );
  }
}


class CarouselSliderPage extends StatefulWidget {
  @override
  _CarouselSliderPageState createState() => _CarouselSliderPageState();
}


class _CarouselSliderPageState extends State<CarouselSliderPage> {
  final List<String> imageList = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    'https://example.com/image4.jpg',
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carousel Slider Example'),
      ),
      body: Container(
        child: CarouselSlider(
          options: CarouselOptions(
            height: 200,
            autoPlay: true,
            enlargeCenterPage: true,
            aspectRatio: 16 / 9,
            autoPlayCurve: Curves.fastOutSlowIn,
            enableInfiniteScroll: true,
            autoPlayAnimationDuration: Duration(milliseconds: 800),
            viewportFraction: 0.8,
          ),
          items: imageList.map((imageUrl) {
            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(
                    imageUrl,
                    fit: BoxFit.cover,
                  ),
                );
              },
            );
          }).toList(),
        ),
      ),
    );
  }
}

Step 4: Customize the carousel slider

In the code above, you can see that we have created a basic carousel slider that displays a list of images. You can customize various properties of the carousel by modifying the options within the CarouselOptions widget. Feel free to experiment and adjust the settings according to your requirements.

Step 5: Run the app

Save the changes and run the app using the following command:

flutter run

Conclusion:

Congratulations! You have successfully created a carousel slider example app in Flutter. You learned how to set up the carousel slider package, customize its options, and display a list of images in a horizontally scrollable format. Feel free to enhance the app further by adding more features or integrating it into your own projects. Flutter's flexibility and rich widget ecosystem allow you to create stunning user interfaces effortlessly. Happy coding!