bottom_navigator 0.0.4

A premium, glassmorphic bottom navigation bar for Flutter with multiple variants (Floating, Docked, Notched), fluid animations, and automatic item overflow management.

Bottom Navigator

Current stable release: 0.0.4

A premium, glassmorphic bottom navigation bar for Flutter. Elevate your app's UI with fluid animations, multiple layout variants, and automatic overflow management.

✨ Features

• 🧊 Glassmorphism: Built-in frosted glass effect with customizable blur and opacity.
• 📐 Multiple Variants: Choose between Floating, Docked, Notched, and Classic layouts.
• ⚡ Auto-More: Automatically handles item overflow by grouping extra items into a premium "More" menu.
• 🎨 Indicator Styles: Support for various selection indicators: Pill, Line, Square, Circle, and None.
• 📜 Scroll Aware: Built-in support for hiding the navigation bar on scroll to maximize screen real estate.
• 🎬 Fluid Animations: Smooth transitions and physics-based animations for a premium feel.
• 🛠️ Highly Customizable: Fine-tune colors, icons, labels, animation curves, and more.

🚀 Getting Started

Add the dependency to your pubspec.yaml:

dependencies:
  bottom_navigator: ^0.0.4

🛠️ Usage

Classic Bottom Bar

ClassicNavBottomBar(
  items: [
    BottomNavItem(icon: Icons.home, label: 'Home'),
    BottomNavItem(icon: Icons.search, label: 'Search'),
    BottomNavItem(icon: Icons.favorite, label: 'Likes'),
    BottomNavItem(icon: Icons.person, label: 'Profile'),
  ],
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
)

Floating Glass Bar

FloatingNavBottomBar(
  items: navItems,
  currentIndex: _selectedIndex,
  centerButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  onTap: (index) => setState(() => _selectedIndex = index),
)

Docked Bar

DockedNavBottomBar(
  items: navItems,
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
)

Notched Bar

NotchedNavBottomBar(
  items: navItems,
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
)

🎨 Customization

Badges 🔴

You can display numeric, text-based, or dot-only badges on your navigation items. Use the badge property in BottomNavItem to pass a BottomNavBadge:

BottomNavItem(
  icon: Icons.search,
  label: 'Search',
  badge: BottomNavBadge(
    text: '5',
    color: Colors.blue,
    textStyle: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold),
  ),
)

• Numeric / Text Badges: Pass a string to the text parameter.
• Dot-Only Badges: Omit the text parameter (or pass null) to render a simple notification dot.
• Customization: Change background colors via color, pass custom text styling via textStyle, adjust the position using offset, or hide it with showBadge.
• Overflow Support: If navigation items overflow into the "More" menu, a dot badge will automatically appear on the "More" button if any of the hidden items have active badges.

Center Button Offset

You can customize the vertical offset of the center action button using the centerButtonOffset property. By default, it automatically positions the button (-25 pixels for Notched and -30 pixels for Floating/Docked), but you can override this for fine-grained alignment.

FloatingNavBottomBar(
  items: navItems,
  currentIndex: _selectedIndex,
  centerButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
  centerButtonOffset: -20.0, // Adjust the vertical placement of the button
  onTap: (index) => setState(() => _selectedIndex = index),
)

Indicator Styles

• PillIndicatorStyle()
• LineIndicatorStyle()
• SquareIndicatorStyle()
• CircleIndicatorStyle()
• IndicatorStyle.none

You can also customize the "More" overflow button using moreButtonLabel, moreButtonWidget, and showSelectedMoreItem.

Handling Scroll

To hide the bar when scrolling, simply provide your ScrollController:

ClassicNavBottomBar(
  // ... other properties
  hideOnScroll: true,
  scrollController: _myScrollController,
)

📝 Additional Information

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you encounter any bugs or have feature requests, please file them on the issue tracker.

License

This project is licensed under the MIT License - see the LICENSE file for details.