flutter_animated_cards

flutter_animated_cards

A Fully customizable animated cards widget that has feature of 3D animation and much more. This widget works on both Android & iOS.

Installation

Add following dependency in pubspec.yaml file. And add this import to your file.

flutter_animated_cards: ^0.0.1

import 'package:flutter_animated_cards/flutter_animated_cards.dart';

Quick Start

// Add AnimatedCards to the widget tree

child: FlutterAnimatedCards(
          list: _cardList,
          model: _cardModel,
        ),                ​

Card Model

class CardModel {
   final String title;                  /// required
   final String imagePath;            /// required  i.e "assets/images/image.png"
   final String description;        /// (Optional)
   final Color color;             /// (Optional) add this parameter if you want to have different color on each card
   final List<Color> colorList; /// (Optional) add this parameter if you want to apply different gradient on each card
}

FlutterAnimatedCards made through model class

If you add Color parameter in your model class and assign each list item a new different color then your widget look like this.

Cards with ModelColor	Cards with Model Gradient

1-
   CardModel(
           title: 'Colors, Vibrant',
           description:'Gardening is how I relax. It\'s another form of creating and playing with colors.',
           color: Color(0xfff9d9e2),  // add color of your choice, add different colors in every list item
           imagePath: "assets/images/colors.png"),

2- 
   CardModel(
          title: 'Budapest, Hungary',
          description:'Meet the CardModel with rich history and indescribable culture',
          colorList: [Color(0xFF4CAF50),  // add gradient of your choice, add different gradient in every list item
            Color(0xFF00BCD4),
            Color(0xFF99ca3d)],
          imagePath: "assets/images/city_image.png"),

FlutterAnimatedCards without passing any color in model class

This is another way to give colors or gradient to your card. Now you need to add 'cardWithSingleColor' or 'cardWithGradientColors' as shown below

Cards with Single Color	Cards with Single Gradient

1-
   child: FlutterAnimatedCards(
          list: _cardList,
          model: _cardModel,
          cardWithSingleColor: Color(0xfff9d9e2),  // you are not asked to add this parameter, but you can this if you want to display your cards with any other single color. By default cards will appear as it is shown in Screenshot 
        ),

2- 
   child: FlutterAnimatedCards(
          list: _cardList,
          model: _cardModel,
          cardWithGradientColors: [Color(0xffacb6e5),  // this parameter is needs to be added to add gradient, there is no default gradient available in lib
           Color(0xFFD5D2D2),
           Color(0xFFfbc7d4)],
        ),

Custom Usage

There are several options that allow for more control:

Developer

Faiza Farooqui

License

MIT