animated_cards_carousel is a Flutter package that provides a customizable carousel of animated cards. It allows for smooth scrolling and visually appealing animations as cards transition into and out of the viewport.


  • Smooth scrolling with animation effects.
  • Customizable card aspect ratio and margins.
  • Easy integration with any list of widgets.
  • Animated properties include translation, scaling, and opacity.


Add animated_cards_carousel to your pubspec.yaml file:

  animated_cards_carousel: ^1.0.2

Then, run the following command in your terminal to fetch the package:

flutter pub get


Animated Cards Carousel Preview


To use the AnimatedCardsCarousel, import the package and include it in your widget tree. Below is an example of how to set it up:

Important Note

  • Do Not Wrap in SingleChildScrollView: Wrapping the AnimatedCardsCarousel in a SingleChildScrollView can cause rendering issues. Instead, consider using a SizedBox or Container with a fixed height in between those.
import 'package:flutter/material.dart';
import 'package:animated_cards_carousel/animated_cards_carousel.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Animated Cards Carousel Example'),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32),
          child: AnimatedCardsCarousel(
            cardsList: List.generate(
                  (index) => Card(
                color: Colors.primaries[index % Colors.primaries.length],
                child: Center(
                  child: Text(
                    'Card ${index + 1}',
                    style: const TextStyle(fontSize: 24),


  • cardAspectRatio: (Optional) The aspect ratio of the cards. Defaults to the golden ratio (1.61803399) in portrait mode and (10) in landscape mode.
  • cardMargin: (Optional) The margin around each card. Defaults to 16.0in portrait mode and (8.0) in landscape mode.
  • cardsList: The list of widgets to be displayed as cards.


You can customize the appearance and behavior of the carousel by tweaking the properties provided:

  • Aspect Ratio: Control the height-to-width ratio of the cards.
  • Margins: Adjust the vertical spacing between the cards.

For example, to create a carousel with a square aspect ratio and no margins:

cardAspectRatio: 1.0, // Square cards
cardMargin: 0.0, // No margin between cards
cardsList: yourListOfCards,


Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on GitHub.


This project is licensed under the MIT License - see the LICENSE file for details.