Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von flutter_flip_card
Paketdetailsv0.0.6

flutter_flip_card

Eine Komponente, die eine Kartenflip-Animation bereitstellt. Sie kann verwendet werden, um Produktinformationen zu verbergen und anzuzeigen.

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
6780
Likes
160
Pub-Punkte
150

Paket installieren

flutter pub add flutter_flip_card

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das Flip-Karten-Animationen ermöglicht und Benutzern erlaubt, versteckte Inhalte wie Produktinformationen mit einem sanften Kipp-Effekt zu enthüllen. Ideal für interaktive Benutzeroberflächen, bei denen Informationen in Schichten angezeigt werden, unterstützt es mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux. Das Komponente ist leichtgewichtig und einfach zu integrieren und eignet sich somit perfekt für E-Commerce-Apps, Portfolios oder jede Benutzeroberfläche, die ansprechende Übergänge erfordert.

Anwendungsfälle

  • Produktinformationen offenlegen
  • Interaktive Lernkarten
  • Portfolio-Element-Showcase
  • Spielkarten umdrehen
  • Benutzerprofil-Umschalter

Hauptmerkmale

  • glatter Flip-Animation
  • Anpassbare Vorder- und Rückseite
  • Plattformübergreifende Unterstützung
  • Einfache Integration mit bestehenden Widgets
  • Konfigurierbare Drehrichtung und -geschwindigkeit

Geeignet für

  • E-Commerce-Anwendungen
  • Lernanwendungen
  • Interaktive Benutzeroberflächenprototypen
  • Mobile und Web-Dashboards
  • Gamifizierte Schnittstellen

Hinweise

  • Kann die Leistung auf Low-End-Geräten beeinträchtigen
  • Eingeschränkte Anpassungsmöglichkeiten über grundlegende Flip-Effekte hinaus
  • Erfordert sorgfältige Behandlung der Zustandsverwaltung
  • Nicht ideal für komplexe mehrschichtige Animationen
  • Am besten geeignet für einfache, einzigartige Flip-Interaktionen

Original-README

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

flutter_flip_card

A widget that does transition between two children in a flipping manner.

FlipCard GestureFlipCard
FlipCard GestureFlipCard

How to Use

To use flutter_flip_card, first start by importing the package.

import 'package:flutter_flip_card/flutter_flip_card.dart';

Currently Available Methods

  • FlipCard A component that provides a flip card animation

  • GestureFlipCard A component that provides a gsture(Swipe) flip card animation

FlipCard

    FlipCard(
        rotateSide: RotateSide.bottom,
        onTapFlipping: false, //When enabled, the card will flip automatically when touched.
        axis: FlipAxis.horizontal,
        controller: con1,
        frontWidget: Center(
        child: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    'image/01.png',
                    fit: BoxFit.fitHeight)
                )
            ),
        backWidget: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    `'image/02.jpg',
                    fit: BoxFit.fitHeight)
            )
        )
        
    final controller = FlipCardController();
    // Flip the card programmatically
    controller.flipcard();

GestureFlipCard

    GestureFlipCard(
            animationDuration: const Duration(milliseconds: 300),
            axis: FlipAxis.horizontal,
            controller:cong // used to ccontrol the Gesture flip programmatically
            enableController : false // if [True] if you need flip the card using programmatically
            frontWidget: Center(
                child: Container(
                  width: 300,
                  height: 200,
                  child: Image.asset(
                    'image/011.jpg',
                    fit: BoxFit.contain,
                  ),
                ),
              ),
            backWidget: Container(
                width: 300,
                height: 200,
                child: Image.asset(
                  'image/11.jpg',
                  fit: BoxFit.contain,
                ),
            ),
        ),
Project Created & Maintained By
Gunanithi

Passionate #Flutter, #Android Developer. #UI Designer.

linkedin medium

Notes

Please open an issue if you find any bugs.

Donate

You like the package ? Buy me a coffee :)

Buy Me A Coffee

Kategorien

Karte und Erweiterungstile

Quell-Repository

Projekte, die dieses Paket verwenden