Carousel Slider in Flutter

In Flutter, you can create a carousel slider using various packages available in the Flutter ecosystem. Most popular package for implementing carousel sliders is the carousel_slider package by Serenader.

Here’s how you can use it:

Step 01: Open your project’s pubspec.yaml file and add the carousel_slider package as a dependency:

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.2.1

Then run flutter pub get in your terminal to fetch the package.

Step 02: Import the carousel_slider package to your Dart file:

import 'package:carousel_slider/carousel_slider.dart';

Step 03: Create a list of widgets to use as your carousel items. These widgets could be any Flutter widgets like Container, Image, or Text. For example, let's create a list of Image widgets:

List<Container> carouselItems = [
  Image.network('<--IMAGE-URL-ONE-->'),
  Image.network('<--IMAGE-URL-TWO-->'),
  Image.network('<--IMAGE-URL-THREE-->'),
];

Step 03: In your widget’s build method, add the CarouselSlider widget and pass the carouselItems list as its children:

@override
Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            // Other widgets
            CarouselSlider(
              items: carouselItems,
              options: CarouselOptions(
                height: size.height*0.2, // Customize the height of the carousel
                autoPlay: true, // Enable auto-play
                enlargeCenterPage: true, // Increase the size of the center item
                enableInfiniteScroll: true, // Enable infinite scroll
                onPageChanged: (index, reason) {
                  // Optional callback when the page changes
                  // You can use it to update any additional UI components
                },
              ),
            ),
            // Other widgets
          ],
        ),
    );
  }

Basic image carousel demo

That’s it. Now you can customize your own slider.