flutter_flip_view

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Plugin, das interaktive Karten-Drehanimationen ermöglicht und ideal ist, um dynamische Benutzeroberflächen wie Karten mit Vorder- und Rückseite zu erstellen. Es unterstützt reibungslose Übergänge und wurde für Interfaces entwickelt, die visuelle Tiefe oder mehrschichtige Inhalte erfordern. Das Paket ist leichtgewichtig und lässt sich problemlos in bestehende Flutter-Projekte integrieren. Besonders nützlich für Bildungs-Apps, Flashkarten oder jede Anwendung, bei der die parallele Darstellung von Informationen die Benutzererfahrung verbessert.

Anwendungsfälle

Flip-Karten für Lernkarten erstellen
Interaktive Produktvorschauen erstellen
Entwerfen von Bildungsquizzen
Verbesserung von Onboarding-Bildschirmen
Anzeigen von Doppelinhaltskarten

Hauptmerkmale

Glatte Flip-Animationen
Unterstützung für benutzerdefinierten Vorder- und Rückseiteninhalt
Einfache Integration mit Flutter-Widgets
Leichtgewichtig und leistungsstark
Konfigurierbare Drehrichtung und -geschwindigkeit

Geeignet für

Entwickler von Bildungs-Apps
UI-Designer, die interaktive Elemente suchen
App-Ersteller, die kartenbasierte Layouts verwenden
Entwickler, die interaktive Tutorials erstellen
Teams, die sich auf anspruchsvolle Nutzererfahrungen konzentrieren

Hinweise

Beschränkt auf grundlegende Kippmechanismen
Keine eingebaute Gestenerkennung
Erfordert manuelle Behandlung der Zustandsverwaltung
Nicht für komplexe verschachtelte Layouts optimiert
Keine Unterstützung für 3D-Effekte außer einfache Drehung

Original-README

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

This is a flutter Widget base on pure Dart code that provides 3D flip card visuals.

Usage

add package in your pubspec.yaml

dependencies:
   flutter_flip_view: ^latest_version

This is a simple usage

import 'package:flutter_flip_view/flutter_flip_view.dart';

FlipView(
  animationController: _curvedAnimation,
  front: Container(
    width: 300,
    height: 500,
    color: Colors.amber,
    alignment: Alignment.center,
    child: Text('Front'),
  ),
  back: Container(
    width: 300,
    height: 500,
    color: Colors.blueGrey,
    alignment: Alignment.center,
    child: Text('Back'),
  ),
)

You can get more usage case in main.dart and custom_layout_example.dart

Pay attention

If the widgets you are using within the flip_view are wrapped in a Card widget or a Material widget, you should set the Card (or Material) property clipBehavior to Clip.hardEdge or something other than Clip.none.

Getting Started

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Pakete, Repositories und App-Kategorien suchen