Kategorien, Pakete und Repositories suchen

ducafecatFlutter-Ökosystem
Cover von cool_nav
Paketdetailsv0.1.1

cool_nav

Eine Sammlung wirklich toller, einfach zu verwendender Bottom-Navigation-Bars.

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
88
Likes
54
Pub-Punkte
150

Paket installieren

flutter pub add cool_nav

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Cool Nav ist ein Flutter-Paket, das eine Sammlung visuell ansprechender und einfach zu implementierender Bottom-Navigation-Bars bietet. Mit Fokus auf Einfachheit und Ästhetik bietet es anpassbare, animierte und responsive Navigationskomponenten, die für moderne Apps auf mehreren Plattformen geeignet sind. Das Paket lässt sich nahtlos in Flutter-Projekte integrieren und unterstützt Android, iOS, Web, macOS, Windows und Linux. Mit minimalem Setup und reichhaltigen Gestaltungsmöglichkeiten verbessert Cool Nav die Benutzererfahrung, ohne Leistung oder Entwicklerfreundlichkeit zu beeinträchtigen.

Anwendungsfälle

  • Mobile App-Navigation
  • Web-Anwendungs-Dashboards
  • Plattformübergreifende Desktop-Anwendungen
  • Anpassbare Bottom-Tabs
  • Verbesserte Benutzeroberfläche mit Animationen
  • Einfache Integration in bestehende Projekte

Hauptmerkmale

  • Vordefinierte schöne Navigationsstile
  • Einfache Anpassung über Parameter
  • Glatte Animationen und Übergänge
  • Multiplattform-Unterstützung
  • Leicht und leistungsstark
  • Minimale Boilerplate-Code

Geeignet für

  • Flutter-Entwickler, die schnelle UI-Verbesserungen suchen
  • Projekte, die eine konsistente Bottom-Navigation erfordern
  • designorientierte Anwendungen
  • Anfänger lernen die Navigation in Flutter
  • Apps für mehrere Plattformen

Hinweise

  • Nur auf die untere Navigation beschränkt
  • Kann zusätzliche Stilisierung für komplexe Layouts erfordern
  • Abhängig von externen Abhängigkeiten für Animationen
  • Nicht ideal für nicht-untere Navigationsmuster
  • Am besten geeignet für einfache bis mittelkomplexe Navigationserfordernisse

Original-README

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

cool_nav

Pub Version (including pre-releases) Github Action Status

A collection of really awesome, easy to use BottomNavigationBars

Getting Started

Add this to your package's pubspec.yaml file:

---
dependencies:
  cool_nav: ^0.1.1

Now in your Dart code, you can use:

import 'package:cool_nav/cool_nav.dart';

List of Bottom Navigation Bars:

Spotlight Bottom Navigation Bar

Spotlight Bottom Navigation Bar

Based on design made by Sanchita Agarwal.

An easy to use and customizable Bottom Navigation Bar. You can customize the colors as well provide a custom Gradient for the spotlight.

Usage

Scaffold(
    // ...
    bottomNavigationBar: SpotlightBottomNavigationBar(
        items: [
          SpotlightBottomNavigationBarItem(icon: Icons.smartphone),
          SpotlightBottomNavigationBarItem(icon: Icons.laptop_mac),
          SpotlightBottomNavigationBarItem(icon: Icons.desktop_mac),
        ],
        currentIndex: currentIndex,
        selectedItemColor: Colors.cyan,
        onTap: _onTap,
    ),
)
Flip Box Bottom Navigation Bar

Flip Box Bottom Navigation Bar

Based on design made by dannniel.

An easy to use and customizable Bottom Navigation Bar. You can customize the selected and unselected Icons and background Colors for the tiles.

Usage

Scaffold(
    // ...
    bottomNavigationBar: FlipBoxNavigationBar(
          currentIndex: currentIndex,
          verticalPadding: 20.0,
          items: <FlipBoxNavigationBarItem>[
            FlipBoxNavigationBarItem(
              name: 'Tasks',
              selectedIcon: Icons.done_all,
              selectedBackgroundColor: Colors.deepPurpleAccent[200],
              unselectedBackgroundColor: Colors.deepPurpleAccent[100],
            ),
            FlipBoxNavigationBarItem(
              name: 'People',
              selectedIcon: Icons.person,
              unselectedIcon: Icons.person_outline,
              selectedBackgroundColor: Colors.indigoAccent[200],
              unselectedBackgroundColor: Colors.indigoAccent[100],
            ),
            FlipBoxNavigationBarItem(
              name: 'Mail',
              selectedIcon: Icons.mail,
              unselectedIcon: Icons.mail_outline,
              selectedBackgroundColor: Colors.blueAccent[200],
              unselectedBackgroundColor: Colors.blueAccent[100],
            ),
          ]
    ),
)

Refer here for an example.

More Awesome Navigation Bars will be added in the future.

Examples

View the example folder to see more examples.

Kategorien

Untere Navigationsleiste

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.