bubbled_navigation_bar

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein optisch ansprechendes Flutter-Paket, das eine animierende Blasenform-Navigationbar implementiert. Es bietet anpassbare Farben, Hintergrundfarbe, Animationskurve und Dauer für ein dynamisches Benutzererlebnis. Die Navigationsleiste integriert sich nahtlos mit PageView über einen Controller-Parameter und ermöglicht reibungslose Übergänge zwischen Seiten. Ideal für moderne App-Interfaces, bei denen visuelle Rückmeldungen und interaktive Elemente die Benutzerfreundlichkeit verbessern. Mit Fokus auf Leistung und Flexibilität entwickelt, unterstützt es responsive Design für verschiedene Bildschirmgrößen.

Anwendungsfälle

Animierte untere Navigationsleisten erstellen
Verbesserung der App-Oberfläche mit fließenden Übergängen
Integration mit PageView für swipebare Inhalte
Entwicklung moderner mobiler App-Oberflächen
Visuelle Rückmeldung für Navigationsaktionen hinzufügen

Hauptmerkmale

Animierbare geblähte Form
Anpassbare Farben und Animations-Einstellungen
PageView-Integration über Controller
Glatte Übergangseffekte
Unterstützung für responsive Design
Einfache Einrichtung mit dem Befehl pub add

Geeignet für

Flutter-Entwickler, die moderne UI-Komponenten suchen
Apps, die ansprechende Navigationserlebnisse erfordern
Designorientierte Anwendungen mit interaktiven Elementen
Entwickler, die PageView für horizontales Scrollen verwenden
Projekte, die auf visuelle Aufwertung und Animationen setzen

Hinweise

Erfordert sorgfältige Abstimmung der Animationsparameter
Kann die Leistung auf Low-End-Geräten beeinträchtigen
Eingeschränkte plattformspezifische Anpassung
Am besten geeignet für Apps mit minimalen Navigationspunkten
Nicht ideal für komplexe Tab-Layouts mit vielen Bildschirmen

Original-README

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

pub package

A Flutter package for easy implementation of bubbled navigation bar.

Gif

Add dependency

dependencies:
  bubbled_navigation_bar: ^0.0.3 #latest version

Easy to use

home: Scaffold(
bottomNavigationBar: BubbledNavigationBar(
  defaultBubbleColor: Colors.blue,
  onTap: (index) {
    // handle tap
  },
  items: <BubbledNavigationBarItem>[
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.home, size: 30, color: Colors.red),
      activeIcon: Icon(CupertinoIcons.home, size: 30, color: Colors.white),
      title: Text('Home', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.phone, size: 30, color: Colors.purple),
      activeIcon: Icon(CupertinoIcons.phone, size: 30, color: Colors.white),
      title: Text('Phone', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.info, size: 30, color: Colors.teal),
      activeIcon: Icon(CupertinoIcons.info, size: 30, color: Colors.white),
      title: Text('Info', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.profile_circled, size: 30, color: Colors.cyan),
      activeIcon: Icon(CupertinoIcons.profile_circled, size: 30, color: Colors.white),
      title: Text('Profile', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
  ],
),
body: Container(color: Colors.blue,),
)

Advanced use

Way of use with PageView and sliding animation from example.gif you can see in example folder.

Attributes

items: List of Widgets
initialIndex: Initial index of Curve
color: Color of NavigationBar, default Colors.white
defaultBubbleColor: background color of floating bubble onTap: Function handling taps on items
animationCurve: Curves interpolating button change animation, default Curves.easeInOutQuad
animationDuration: Duration of button change animation, default Duration(milliseconds: 500)

Pakete, Repositories und App-Kategorien suchen