card_animation_hover

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter StatefulWidget, das eine Karte mit einem fließenden Hover-Animations-Effekt darstellt und die Benutzerinteraktion auf unterstützten Plattformen verbessert. Speziell für moderne Benutzeroberflächen entwickelt, reagiert es auf Maus- oder Toucheingaben, indem es die Höhe, Skalierung und Schatten der Karte animiert. Perfekt geeignet für Dashboards, Portfolios und interaktive Layouts, bei denen visuelle Rückmeldungen die Benutzerfreundlichkeit verbessern. Das Paket ist leichtgewichtig und lässt sich nahtlos in bestehende Projekte integrieren.

Anwendungsfälle

Interaktive Dashboards
Portfolio-Präsentation
Produktkarten in Web-Anwendungen
Benutzerprofil-Vorschauen
Dynamische Listenitems

Hauptmerkmale

Glatte Hover-basierte Animationen
Plattformübergreifende Unterstützung (Web, Mobil, Desktop)
Anpassbare Animationskurven
Höhen- und Skalierungsübergänge
Einfache Integration mit bestehenden Widgets

Geeignet für

UI-Designer, die interaktive Elemente suchen
Entwickler, die responsive Web-Oberflächen erstellen
Projekte, die subtile Hover-Rückmeldung erfordern
Flutter-Anfänger erkunden zustandsbehaftete Widgets
Anwendungen für mehrere Plattformen

Hinweise

Kann auf Touch-Geräten ohne zusätzliche Logik nicht wie erwartet funktionieren
Leistungseinbußen auf Low-End-Geräten mit vielen animierten Karten
Begrenzte Anpassungsmöglichkeiten über grundlegende Animations-Eigenschaften hinaus
Benötigt Pointer-Ereignishandling für volle Funktionalität
Nicht für häufige Hover-Interaktionen optimiert

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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!

Pakete, Repositories und App-Kategorien suchen

Paket installieren