Search categories, packages and repositories

ducafecatFlutter ecosystem guide
cool_nav cover
Package detailsv0.1.1

cool_nav

A collection of really awesome, easy to use Bottom Navigation Bars.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
88
Likes
54
Pub points
150

Install package

flutter pub add cool_nav

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Cool Nav is a Flutter package that provides a collection of visually appealing and easy-to-implement bottom navigation bars. Designed with simplicity and aesthetics in mind, it offers customizable, animated, and responsive navigation components suitable for modern apps across multiple platforms. The package integrates seamlessly with Flutter projects and supports Android, iOS, Web, macOS, Windows, and Linux. With minimal setup and rich design options, Cool Nav enhances user experience without sacrificing performance or developer convenience.

Use cases

  • Mobile app navigation
  • Web application dashboards
  • Cross-platform desktop apps
  • Customizable bottom tabs
  • Enhanced UI with animations
  • Simple integration into existing projects

Key features

  • Pre-designed beautiful navigation styles
  • Easy customization via parameters
  • Smooth animations and transitions
  • Multi-platform support
  • Lightweight and performant
  • Minimal boilerplate code

Suitable for

  • Flutter developers seeking quick UI enhancements
  • Projects requiring consistent bottom navigation
  • Design-focused applications
  • Beginners learning Flutter navigation
  • Apps targeting multiple platforms

Considerations

  • Limited to bottom navigation only
  • May require additional styling for complex layouts
  • Depends on external dependencies for animations
  • Not ideal for non-bottom navigation patterns
  • Best suited for simple to moderately complex navigation needs

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Bottom Navigation Bar

Source repository

Projects using this package

No data available yet.