पैकेज, रिपॉज़िटरी और ऐप श्रेणियाँ खोजें

card_animation_hover कवर
पैकेज विवरणv0.0.2

card_animation_hover

यह एक StatefulWidget है जो एक कार्ड को होवर एनीमेशन प्रभाव के साथ प्रदर्शित करता है।

AndroidiOSWebmacOSWindowsLinux
30-दिन डाउनलोड
116
लाइक
14
Pub अंक
150

पैकेज इंस्टॉल करें

flutter pub add card_animation_hover

पैकेज अवलोकन

सार्वजनिक जानकारी से बना चयन मार्गदर्शन। केवल संदर्भ हेतु।

एक फ्लटर StatefulWidget जो एक कार्ड को स्मूथ होवर एनिमेशन प्रभाव के साथ रेंडर करता है, जो समर्थित प्लेटफॉर्म पर उपयोगकर्ता इंटरैक्शन को बढ़ाता है। आधुनिक UI के लिए डिज़ाइन किया गया है, जो माउस या टच इनपुट के प्रति प्रतिक्रिया करता है और कार्ड की उच्चता, स्केल और छाया को एनिमेट करता है। डैशबोर्ड, पोर्टफोलियो और विजुअल फीडबैक उपयोगकर्ता अनुभव को बढ़ाता है, ऐसे इंटरैक्टिव लेआउट्स के लिए आदर्श है। पैकेज हल्का है और मौजूदा प्रोजेक्ट में आसानी से एकीकृत होता है।

उपयोग

  • इंटरैक्टिव डैशबोर्ड
  • पोर्टफोलियो शोकेस
  • वेब ऐप में उत्पाद कार्ड
  • उपयोगकर्ता प्रोफ़ाइल पूर्वावलोकन
  • डायनामिक सूची आइटम

मुख्य विशेषताएँ

  • स्मूथ होवर-आधारित एनीमेशन
  • क्रॉस-प्लेटफ़ॉर्म समर्थन (वेब, मोबाइल, डेस्कटॉप)
  • कस्टमाइज़ किए गए एनीमेशन कर्व
  • उचाई और स्केल ट्रांज़िशन
  • मौजूदा विजेट्स के साथ सरल एकीकरण

इनके लिए उपयुक्त

  • इंटरैक्टिव तत्वों की तलाश में 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!

श्रेणियाँ

सोर्स रिपॉज़िटरी

इस पैकेज का उपयोग करने वाले प्रोजेक्ट

अभी कोई डेटा उपलब्ध नहीं है।