card_animation_hover

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter StatefulWidget that renders a card with a smooth hover animation effect, enhancing user interaction on supported platforms. Designed for modern UIs, it responds to mouse or touch input by animating the card's elevation, scale, and shadow. Ideal for dashboards, portfolios, and interactive layouts where visual feedback improves usability. The package is lightweight and integrates seamlessly into existing projects.

Use cases

Interactive dashboards
Portfolio showcases
Product cards in web apps
User profile previews
Dynamic list items

Key features

Smooth hover-based animations
Cross-platform support (Web, mobile, desktop)
Customizable animation curves
Elevation and scale transitions
Simple integration with existing widgets

Suitable for

UI designers seeking interactive elements
Developers building responsive web interfaces
Projects requiring subtle hover feedback
Flutter beginners exploring stateful widgets
Apps targeting multiple platforms

Considerations

May not work as expected on touch-only devices without additional logic
Performance impact on low-end devices with many animated cards
Limited customization beyond basic animation properties
Requires pointer event handling for full functionality
Not optimized for high-frequency hover interactions

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

This class is a StatefulWidget that displays a card with a hover animation effect.

Features

 body: SingleChildScrollView(
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(40.0),
              child: Wrap(
                spacing: 20.0,
                runSpacing: 22.0,
                children: cards
                    .map((card) => CardAnimationHover(
                          card: card,
                          showAnimation: false,
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => const Screen()),
                            );
                          },
                        ))
                    .toList(),
              ),
            ),
          ),
        ),

  final List<Map<String, String>> cards = [
  for (int index = 0; index < imageUrls.length; index++) ...[
    {
      'image': imageUrls[index], /// required image
      'header': 'Canyons', /// required header
      'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', /// required content
    },
    {
      'image': imageUrls[index],
      'header': 'Beaches',
      'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
    },
    {
      'image': imageUrls[index],
      'header': 'Trees',
      'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
    },
  ]
];

Getting started

dependencies:
  card_animation_hover: ^0.0.2

Usage

import 'package:card_animation_hover/card_animation_hover.dart';

Additional information

If you have any issues, questions, or suggestions related to this package, please feel free to contact us at [swan.dev1993@gmail.com](mailto:swan.dev1993@gmail.com). We welcome your feedback and will do our best to address any problems or provide assistance. For more information about this package, you can also visit our GitHub repository where you can find additional resources, contribute to the package's development, and file issues or bug reports. We appreciate your contributions and feedback, and we aim to make this package as useful as possible for our users. Thank you for using our package, and we look forward to hearing from you!

Search packages, repositories and app categories

Install package