Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von draggable_expandable_fab
Paketdetailsv1.0.0

draggable_expandable_fab

Dieses Flutter-Paket bietet einen erweiterbaren und ziehbaren Fließknopf mit Animation.

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
96
Likes
27
Pub-Punkte
150

Paket installieren

flutter pub add draggable_expandable_fab

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Das Paket draggable_expandable_fab verbessert Flutter-Anwendungen durch eine schwebende Aktionsschaltfläche, die sich in mehrere Aktionen erweitern und überall auf dem Bildschirm verschoben werden kann. Es verfügt über reibungslose Animationen sowohl bei der Erweiterung als auch bei der Bewegung und bietet eine interaktive und visuell ansprechende Benutzererfahrung. Ideal für Apps, die schnellen Zugriff auf mehrere Funktionen über eine einzige Schaltfläche benötigen, unterstützt es alle wichtigen Plattformen wie Mobilgeräte, Web und Desktop. Die Schaltfläche bleibt reaktionsschnell und bewegt sich fließend, was sie für moderne, gestenbasierte Schnittstellen geeignet macht.

Anwendungsfälle

  • Schneller Zugriff auf mehrere Aktionen
  • Gestenbasierte Navigation
  • Interaktive Benutzeroberflächenelemente
  • Erweiterungen für mobile und Desktop-Anwendungen
  • anpassbare Aktionen-Menüs
  • Erhöhte Nutzerbeteiligung

Hauptmerkmale

  • Ziehbare Schwebtaste
  • Erweiterbarer Aktionenmenü
  • Glatte Animationsübergänge
  • Plattformübergreifende Unterstützung
  • Anpassbares Layout
  • Reaktive Touch-Behandlung

Geeignet für

  • App-Entwickler, die interaktive FABs suchen
  • Designer, die dynamische Benutzeroberflächenkomponenten wollen
  • Projekte, die reichhaltige Gesten-Interfaces erfordern
  • Mehrfach-Aktionstools in mobilen Apps
  • Moderne, animierte App-Oberflächen

Hinweise

  • Kann die Leistung auf Low-End-Geräten beeinträchtigen
  • Erfordert sorgfältige Platzierung, um Überlappungen zu vermeiden
  • Eingeschränkte Anpassung über die grundlegende Gestaltung hinaus
  • Nicht ideal für einfache Ein-Aktion-Anwendungsfälle
  • Benötigt Tests auf allen Zielplattformen

Original-README

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

Expandable Draggable Fab

This Flutter package provides a Expandable and Draggable Floating Button with animation.

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  draggable_expandable_fab: <latest version>

To use the latest changes:

  draggable_expandable_fab:
    git:
      url: https://github.com/Tughra/draggable_expandable_fab.git
      ref: master

❔ Usage

Import this class

import 'package:draggable_expandable_fab/draggable_expandable_fab.dart';

Replace Scaffold's parameters with these to better usage.

      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),

Simple Implementation

Scaffold(
      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),
      floatingActionButton: ExpandableDraggableFab(childrenCount: 3,
      distance: 100,// Animatiion distance during open and close. 
      children: [
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
      ],),
      body: Container(),
    );

Full Implementation

   final Size _size = MediaQuery.of(context).size;
    return Scaffold(
      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),
      floatingActionButton: ExpandableDraggableFab(childrenCount: 3,
        onTab: (){
        debugPrint("Tab");
        },
        childrenTransition: ChildrenTransition.fadeTransation,
        initialOpen: false,
        childrenBoxDecoration: const BoxDecoration(color: Colors.red),
        enableChildrenAnimation: true,
        curveAnimation: Curves.linear,
        reverseAnimation: Curves.linear,
        childrenType: ChildrenType.columnChildren,
        closeChildrenRotate: false,
        childrenAlignment: Alignment.topRight,
        initialDraggableOffset: Offset(_size.width-90,_size.height-100),
      distance: 100,// Animation distance during open and close.
      children: [
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
      ],),
      body: Container(),
    );

Kategorien

Schwebende Aktionsschaltfläche

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.