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 分類

安裝套件