パッケージ、リポジトリ、アプリカテゴリを検索

card_animation_hover のカバー
パッケージ詳細v0.0.2

card_animation_hover

このクラスは、ホバーアニメーション効果を備えたカードを表示する StatefulWidget です。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
116
いいね数
14
Pub ポイント
150

パッケージをインストール

flutter pub add card_animation_hover

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

FlutterのStatefulWidgetで、サポートされているプラットフォーム上でユーザー操作を強化するスムーズなホバーアニメーション効果を備えたカードをレンダリングします。モダンなUI向けに設計されており、マウスまたはタッチ入力に対して、カードのエレベーション、スケール、影をアニメーションで応答します。ダッシュボード、ポートフォリオ、視覚フィードバックが使いやすさを向上させるインタラクティブレイアウトに最適です。パッケージは軽量であり、既存プロジェクトへの統合もスムーズです。

用途

  • インタラクティブダッシュボード
  • ポートフォリオの紹介
  • Webアプリケーション内の製品カード
  • ユーザー・プロフィールのプレビュー
  • 動的リストアイテム

主な機能

  • スムーズなホバー基準のアニメーション
  • クロスプラットフォーム対応(Web、モバイル、デスクトップ)
  • カスタマイズ可能なアニメーションカーブ
  • エレベーションとスケールのトランジション
  • 既存のウィジェットとの簡単な統合

適している対象

  • インタラクティブ要素を求めるUIデザイナー
  • 応答性のあるウェブインターフェースを構築する開発者
  • 繊細なホバーフィードバックを必要とするプロジェクト
  • Flutterの初心者が状態を持つウィジェットを探索しています
  • 複数のプラットフォームをターゲットにするアプリ

注意事項

  • 追加の論理がなければ、タッチのみのデバイスでは期待通りに動作しない可能性があります
  • 多数のアニメーションカードを持つ低性能デバイスへのパフォーマンスへの影響
  • 基本的なアニメーションプロパティを超えるカスタマイズは限られている
  • 完全な機能を実現するにはポインターイベントの処理が必要です
  • 高頻度のホバー操作に最適化されていません

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

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

Features

card_animation

 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!

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。