floating_menu_panel

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das ein fließendes Menüpanel bereitstellt, das eine interaktive und anpassbare Flottier-Aktionsoberfläche bietet. Es ermöglicht Benutzern den Zugriff auf mehrere Aktionen über ein kompaktes, animiertes Panel, das erweitert oder zusammengeklappt werden kann. Ideal für Apps, die schnellen Zugriff auf gängige Funktionen benötigen, ohne die Benutzeroberfläche zu verunreinigen. Das Panel unterstützt verschiedene Konfigurationen wie Positionierung, Animation und benutzerdefinierte Kind-Widgets. Kompatibel mit allen wichtigen Plattformen, verbessert es die Benutzerfreundlichkeit in mobilen und Desktop-Anwendungen.

Anwendungsfälle

Schnellzugriff auf App-Aktionen
Verbesserung der Benutzernavigation
Reduzierung von UI-Unordnung
Anpassbare Aktionen-Panels
Mobile- und Desktop-App-Integration

Hauptmerkmale

Animierte Erweiterung und Zusammenziehung
Anpassbare Position und Größe
Unterstützung für mehrere Kind-Widgets
Plattformübergreifende Kompatibilität
Konfigurierbare Animationen
Einfache Integration mit bestehender Benutzeroberfläche

Geeignet für

Mobile und Desktop-Anwendungen
Apps, die menübasierte Gesten benötigen
UI-Designer, die interaktive Elemente suchen
Entwickler, die leichtgewichtige Lösungen suchen
Projekte mit platzbeschränkten Schnittstellen

Hinweise

Kann eine sorgfältige Platzierung erfordern, um Überlappungen zu vermeiden
Animationsleistung auf günstigeren Geräten
Eingeschränkte Anpassungsmöglichkeiten im Vergleich zu vollständig benutzerdefinierten Widgets
Nicht ideal für komplexe verschachtelte Menüs
Erfordert Aufmerksamkeit für Zugänglichkeitsstandards

Original-README

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

Floating menu panel

Basic:

This is what you needs to get the widget working. Import Widget -> Add 'FloatingMenuPanel' at the bottom of your stack widget. Add icons inside the "buttons" list.

import 'package:floating_menu_panel/floating_menu_panel.dart'; // Import Floating Menu Panel

return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            FloatingMenuPanel(
              onPressed: (index) {
                print('SELECT__: $index');
              },
              buttons: [
                Icons.star_border_outlined,
                Icons.add_comment,
                Icons.music_note
              ],
            ),
          ],
        ),
      ),
    );

All Properties:

These are all the properties you can customize of the floating panel.

    import 'package:floating_menu_panel/floating_menu_panel.dart'; // Import Floating Menu Panel
    
    Stack(
        children: [
            ...
    
            // Add Float Box Panel at the bottom of the 'stack' widget.
            FloatingMenuPanel(
                positionTop: 0.0, // Initial Top Position
                positionLeft: 0.0, // Initial Left Position
                backgroundColor: Color(0xFFEDEDED), // Color of the panel
                contentColor: Colors.black, // Color of the icons
                panelShape: PanelShape.rectangle, // 'PanelShape.rectangle' or 'PanelShape.rounded', border radius property doesn't work in the rounded shape
                borderRadius: BorderRadius.circular(8.0), // Border radius of the panel
                dockType: DockType.inside, // 'DockType.inside' or 'DockType.outside', weather to dock the panel outside or inside the edge of the screen
                dockOffset: 5.0, // Offset the dock from the edge depending on the 'dockType' property
                panelAnimDuration: 300, // Duration for panel open and close animation
                panelAnimCurve: Curves.easeOut, // Curve for panel open and close animation
                dockAnimDuration: 300, // Auto dock to the edge of screen - animation duration
                dockAnimCurve: Curves.easeOut, // Auto dock animation curve
                panelOpenOffset: 20.0, // Offset from the edge of screen when panel is open
                panelIcon: Icons.menu, // Panel open/close icon
                size: 70.0, // Size of single button in the panel
                iconSize: 24.0, // Size of icons
                borderWidth: 1.0, // Width of panel border
                borderColor: Colors.black, // Color of panel border
                onPressed: (index) {
                    print("Clicked on item: $index");
                }
                buttons: [
                    // Add Icons to the buttons list.
                    Icons.message,
                    Icons.photo_camera,
                    Icons.video_library
                ]
            );
        ]
    );

Pakete, Repositories und App-Kategorien suchen