circle_nav_bar

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das die Erstellung von kreisförmigen Navigationsleisten vereinfacht und eine moderne und visuell ansprechende Alternative zu traditionellen unteren Navigationsleisten bietet. Es ermöglicht Entwicklern, leicht animierte, kreisförmige Schaltflächen mit anpassbaren Symbolen und Farben zu implementieren. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux und ist somit vielseitig für plattformübergreifende Anwendungen geeignet. Mit minimalem Setup über pub add lässt es sich nahtlos in bestehende Flutter-Projekte integrieren.

Anwendungsfälle

Erstellen moderner App-Oberflächen
Verbesserung der Benutzererfahrung mit kreisförmiger Navigation
Mobile und Web-Anwendungen mit einzigartigen Benutzeroberflächenelementen erstellen
Intuitive Navigation in kreativen Apps gestalten
Animation von Registerkartenwechseln implementieren

Hauptmerkmale

Kreisförmiges Schaltflächen-Design
Anpassbare Symbole und Farben
Glatte Animationen
Plattformübergreifende Unterstützung
Einfache Integration mit Flutter
Minimale Konfiguration erforderlich

Geeignet für

UI-Designer, die innovative Navigation suchen
Entwickler, die kreative oder künstlerische Apps erstellen
Projekte, die moderne Schnittstellen-Elemente erfordern
Plattformübergreifende Flutter-Anwendungen
Apps, die sich auf Benutzerengagement und visuelle Attraktivität konzentrieren

Hinweise

Kann zusätzliche Stilisierung für komplexe Layouts erfordern
Eingeschränkte Anpassung im Vergleich zu vollständig benutzerdefinierten Widgets
Möglicher Leistungseinbruch bei vielen animierten Elementen
Nicht ideal für einfache Navigationsbedürfnisse
Am besten geeignet für Apps mit weniger Navigationspunkten

Original-README

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

Circle Nav Bar

Example style:

./example

no padding black	padding with gradient

./example_two

Level and Icons	only Icons	padding with Levels and icons

How to use

dependencies:
  circle_nav_bar: ^latest_version

import 'package:circle_nav_bar/circle_nav_bar.dart';

Scaffold(
      bottomNavigationBar: CircleNavBar(
        activeIcons: const [
          Icon(Icons.person, color: Colors.deepPurple),
          Icon(Icons.home, color: Colors.deepPurple),
          Icon(Icons.favorite, color: Colors.deepPurple),
        ],
        inactiveIcons: const [
          Text("My"),
          Text("Home"),
          Text("Like"),
        ],
        color: Colors.white,
        circleColor: Colors.white,
        height: 60,
        circleWidth: 60,
        initIndex: 1,
        onChanged: (v) {
          // TODO
        },
        // tabCurve: ,
        padding: const EdgeInsets.only(left: 16, right: 16, bottom: 20),
        cornerRadius: const BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
          bottomRight: Radius.circular(24),
          bottomLeft: Radius.circular(24),
        ),
        shadowColor: Colors.deepPurple,
        circleShadowColor: Colors.deepPurple,
        elevation: 10,
        gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [ Colors.blue, Colors.red ],
        ),
        circleGradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [ Colors.blue, Colors.red ],
        ),
      ),
      ...