Pakete, Repositories und App-Kategorien suchen

Cover von animated_stack
Paketdetailsv0.3.3

animated_stack

Benutzerdefinierte animierte Stapelseiten zum Erstellen anpassbarer Seitenmenü-Buttons.

AndroidiOSWebmacOSWindowsLinux
30-Tage-Downloads
214
Likes
252
Pub-Punkte
150

Paket installieren

flutter pub add animated_stack

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

AnimatedStack ist ein Flutter-Paket, das die Erstellung benutzerdefinierter animierter Stapelseiten ermöglicht und ideal für die Gestaltung interaktiver Seitenmenü-Buttons mit sanften Übergängen ist. Es bietet eine flexible Grundlage zum Aufbau dynamischer Navigations-Schnittstellen, bei der Entwickler Widgets stapeln und deren Sichtbarkeit sowie Positionierung animieren können. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux und ist daher für plattformübergreifende Anwendungen geeignet. Mit intuitiven Konfigurationsoptionen verbessert es die Benutzererfahrung durch fließende Animationen und reaktive Gestaltung. Sein leichtgewichtiges Design sorgt für effiziente Leistung auf verschiedenen Geräten.

Anwendungsfälle

  • Benutzerdefinierte Seitenmenü-Implementierungen
  • Interaktive Navigations-Schnittstellen
  • Animierte Seitenübergänge
  • Verbesserungen des Flottierenden Aktionsschalters
  • Plattformübergreifende Benutzeroberflächenkomponenten

Hauptmerkmale

  • Glatte animierte Stapelung
  • Anpassbare Seitenübergänge
  • Multiplattformunterstützung
  • Leicht und leistungsstark
  • Einfache Integration mit bestehender Benutzeroberfläche
  • Flexible Widget-Layering

Geeignet für

  • Entwickler, die benutzerdefinierte Navigationsdrawers erstellen
  • UI-Designer, die animierte Interaktionen suchen
  • Cross-Plattform-App-Ersteller
  • Apps, die dynamische Layoutänderungen erfordern
  • Teams, die sich auf verfeinerte Benutzererfahrungen konzentrieren

Hinweise

  • Kann zusätzliche Stilisierung für komplexe Layouts erfordern
  • Die Leistung hängt von der Komplexität der Animation ab
  • Beschränkte Dokumentation über die grundlegende Verwendung hinaus
  • Nicht für extrem große Stapel optimiert
  • Am besten geeignet für moderate Animationsintensität

Original-README

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

Animated Stack

Custom animated stacked pages, to create customisable side menu buttons. Providing simple menu for sharing buttons, side menu, message sending, about page, ... etc.

   

Getting Started

At first, you have to create Foreground and Background Widgets.

Here is a simple example to meet minimum requirements.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Stack Demo',
      theme: ThemeData(
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
      ),
      home: AnimatedStack(
        backgroundColor: Colors.white,
        fabBackgroundColor: Colors.black,
        foregroundWidget: ..., // Main page
        columnWidget: ..., // Right widget, preferably Column
        bottomWidget: ...,// Right widget, preferably Row
      ),
    );
  }
}

Complete Features

Here's all what you can customize in this widget!

Stack attributes

AnimatedStack(
backgroundColor: ...,     // Background Container color
foregroundWidget: ...,    // Foreground Container color

columnWidget: ...,        // Right Widget, (use Column for best results)
bottomWidget: ...,        // Bottom Widget, (use Row for best results)

scaleHeight: 100,         // Sliding animation height, default is 60
scaleWidth: 100,          // Sliding animation width, default is 60


buttonIcon: ...,          // FAB icon (IconData)
fabIconColor: ...,        // FAB icon color
animateButton: false,     // Sometimes, we don't want to animate the button!
fabBackgroundColor: ...,  // FAB background color

slideAnimationDuration: ..., // Animation Duration, default is 800 Milliseconds
buttonAnimationDuration: ...,// Animation Duration, default is 240 Milliseconds

openAnimationCurve: ...,    // Animation Curve, default is ElasticOutCurve(0.9)
closeAnimationCurve: ...,   // Animation Curve, default is ElasticInCurve(0.9)
enableClickToDismiss: true, // Enable Click on Main Widget to close
preventForegroundInteractions: true, // Prevent Clicks on Main Widget
onForegroundCallback: () => print('on Close Callback'), // On Close Callback
);
For complete examples, check example folder

License

MIT License.

Kategorien

Quell-Repository

Projekte, die dieses Paket verwenden