How do you make a card carousel in Flutter?

Article by: Manish Methani

Last Updated: September 20, 2021 at 2:04pm IST
5 min 30 sec

Table of Contents

• Introduction
• Create a new Flutter project
• Add dependencies
• Create a custom widget for the card
• Create the carousel
• Add the carousel to your app
• Conclusion
• FAQs

Here's how to make a card carousel in Flutter:

Step 1: Create a new Flutter project Start by creating a new Flutter project in Android Studio or your preferred IDE. Open the main.dart file and delete all the boilerplate code.

Step 2: Add dependencies To create a card carousel, you'll need to add the following dependencies to your project's pubspec.yaml file:

carousel_slider: ^4.0.0
flutter_staggered_grid_view: ^0.4.0

Then run flutter pub get to install the dependencies.

Step 3: Create a custom widget for the card Create a new file named card_item.dart and define a CardItem class. This widget will be used to display each card in the carousel.

import 'package:flutter/material.dart';

class CardItem extends StatelessWidget {
  final String imageUrl;
  final String title;

  CardItem({required this.imageUrl, required this.title});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Image.network(
            imageUrl,
            height: 150,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              title,
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Step 4: Create the carousel In the main.dart file, create a new StatefulWidget named CardCarousel and a corresponding State class. The CardCarousel widget will use the carousel_slider package to display a series of CardItem widgets in a carousel.

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

import 'card_item.dart';

class CardCarousel extends StatefulWidget {
  @override
  _CardCarouselState createState() => _CardCarouselState();
}

class _CardCarouselState extends State {
  final List _imageUrls = [
    'https://picsum.photos/seed/picsum/200/300',
    'https://picsum.photos/seed/picsum/200/300',
    'https://picsum.photos/seed/picsum/200/300',
    'https://picsum.photos/seed/picsum/200/300',
  ];

  final List _titles = [
    'Title 1',
    'Title 2',
    'Title 3',
    'Title 4',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 250,
        viewportFraction: 0.8,
        enlargeCenterPage: true,
        autoPlay: true,
        aspectRatio: 2.0,
      ),
      items: _imageUrls.map((url) {
        int index = _imageUrls.indexOf(url);
        return Builder(
          builder: (BuildContext context) {
            return GestureDetector(
              onTap: () {
                // Handle card tap here
              },
              child: CardItem(
                imageUrl: url,
                title: _titles[index],
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

Step 5: Add the carousel to your app Finally, add the `CardCarousel` widget to your app's home screen or any other desired screen.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Card Carousel',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Card Carousel'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: CardCarousel(),
        ),
      ),
    );
  }
}

Congratulations! You've successfully created a stunning card carousel in Flutter. Experiment with different options and widgets to customize the carousel to your liking.