card_animation_hover

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter StatefulWidget，可渲染带有平滑悬停动画效果的卡片，增强在支持平台上的用户交互体验。专为现代 UI 设计，能够响应鼠标或触摸输入，通过动画调整卡片的高程、缩放和阴影。非常适合仪表板、作品集和需要视觉反馈以提升可用性的交互布局。该包轻量且可无缝集成到现有项目中。

适合场景

交互式仪表板
投资组合展示
网页应用中的产品卡片
用户资料预览
动态列表项

主要特点

流畅的悬停动画
跨平台支持（Web、移动、桌面）
可自定义的动画曲线
高度和缩放过渡
与现有小部件的简单集成

适合对象

寻求交互元素的UI设计师
开发响应式网页界面的开发者
需要细微悬停反馈的项目
Flutter 初学者探索有状态组件
面向多平台的应用程序

使用建议

在没有额外逻辑的情况下，触摸设备上可能无法按预期工作
在拥有大量动画卡片的低端设备上性能影响
超出基本动画属性的定制功能有限
需要指针事件处理才能实现完整功能
未针对高频悬停交互进行优化

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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!

搜索插件、代码仓与 APP 分类

安装插件