How do you make a card carousel in Flutter?

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.

NEWSLETTER

Coding Bytes by Codzify

Welcome to Coding Bytes, your weekly source for the latest coding tutorials and insights in small byte sized content.

Join 615+ Subscribers

Subscribe on LinkedIn