flexible_dropdown

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das die Dropdown-Funktionalität verbessert, indem es das Schließen durch Tippen oder Pinnen am Schirm ermöglicht und transparente Kopfzeilen mit einer Barriere-Wirkung unterstützt. Es bietet mehr Benutzerkontrolle und flüssigere Interaktionen im Vergleich zu Standard-Dropdowns. Ideal für Apps, die anpassbare, gestenbasierte Dropdown-Menüs auf mehreren Plattformen benötigen. Das Paket ist leichtgewichtig und lässt sich einfach über pub.dev integrieren.

Anwendungsfälle

Anpassbare Dropdown-Schließung
Gestenbasierte Navigation in Dropdowns
transparente Kopfzeilen-Designs
Plattformübergreifende Dropdown-Komponenten
Verbesserte Benutzererfahrung in Formularen und Auswahlinterfaces

Hauptmerkmale

Zum Schließen auf Scrim tippen
Pan-Abbrechen-Geste
Unterstützung für transparenten Kopfzeilen
Barriereffekt für Hintergrund
Plattformübergreifende Kompatibilität

Geeignet für

Entwickler, die interaktive Dropdowns suchen
Apps, die intuitive Benutzergesten erfordern
Designer, die sich auf visuelle Klarheit konzentrieren
Multiplattform-Flutter-Anwendungen
formularitätsstarke Benutzeroberflächen mit Dropdowns

Hinweise

Erfordert sorgfältige Behandlung von Gestenkonflikten
Für komplexe Layouts kann eine benutzerdefinierte Styling-Option erforderlich sein
Beschränkte Dokumentation über die grundlegende Verwendung hinaus
Nicht geeignet für einfache statische Dropdowns
Möglicher Leistungseinbruch bei vielen Elementen

Original-README

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

Flexible Dropdown Package

Features

Customize dropdown
Auto scroll to selected item position
Support BarrierShape.headerTrans to highlight the content above the flexible dropdown button
Allows the dropdown to be dismissed by tapping | panning the scrim or by pressing the escape key on the keyboard.
Allow to choose the Animation Type

Installation

First, add flexible_dropdown as a dependency in your pubspec.yaml file.

dependencies:
  flexible_dropdown: ^1.0.7

Usage

FlexibleDropdown(
  overlayChild: Container(
    height: 160,
    width: double.infinity,
    color: Colors.deepPurple,
  ),
  barrierColor: Colors.black38.withOpacity(.2),
  barrierShape: BarrierShape.headerTrans,
  textDirection: TextDirection.ltr,
  offset: Offset.zero,
  duration: const Duration(milliseconds: 400),
  animationType: AnimationType.size,
  animationAlignment: Alignment.topCenter,
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6),
      color: Colors.blueAccent.withOpacity(.2),
    ),
    child: Padding(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      child: Text(
        title,
        style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
      ),
    ),
  ),
)