frost_nav_bar 0.1.0

A premium frosted-glass bottom navigation bar with draggable indicator, smooth animations, badge support, and full RTL compatibility.

🧊 frost_nav_bar

A premium frosted-glass bottom navigation bar for Flutter with a draggable indicator, smooth animations, badge support, and full RTL compatibility.

🌐 Live Web Demo · 📦 pub.dev · ⭐ GitHub

✨ Features

Feature	Description
🧊 Glassmorphism	Real-time backdrop blur with gradient overlay
🎯 Draggable Indicator	Drag the pill indicator between tabs
✨ Smooth Animations	easeOutBack curves, scale transitions, animated labels
🔢 Badge Support	Notification badges with bounce animation
🌍 RTL Support	Full right-to-left layout support
🌙 Dark/Light Mode	Auto-detects from Theme or fully customizable
🫨 Haptic Feedback	Tactile feedback on tab switch
🎨 60+ Style Properties	Total control over every visual detail

📦 Installation

dependencies:
  frost_nav_bar: ^0.1.0

🚀 Quick Start

import 'package:frost_nav_bar/frost_nav_bar.dart';

Scaffold(
  extendBody: true, // Important for the glass effect!
  bottomNavigationBar: FrostNavBar(
    selectedIndex: _currentIndex,
    onTabChanged: (index) => setState(() => _currentIndex = index),
    items: [
      FrostNavItem(icon: Icon(Icons.home), label: 'Home'),
      FrostNavItem(icon: Icon(Icons.search), label: 'Search'),
      FrostNavItem(
        icon: Icon(Icons.shopping_cart),
        label: 'Cart',
        badgeCount: 3,
      ),
      FrostNavItem(icon: Icon(Icons.person), label: 'Profile'),
    ],
  ),
)

Tip: Set extendBody: true on your Scaffold to let content flow behind the navbar for the full glass effect.

🎨 Customization

All visual properties are controlled via FrostNavBarStyle:

FrostNavBar(
  style: FrostNavBarStyle(
    // Bar
    height: 60,
    borderRadius: 30,
    blurSigma: 20,
    borderWidth: 1.0,

    // Colors
    selectedColor: Colors.blue,
    unselectedColor: Colors.grey,

    // Indicator pill
    indicatorDragScale: 1.2,
    indicatorIdleScale: 1.05,
    indicatorWidthOffset: 10,
    indicatorOverflow: 3,

    // Icon
    iconSize: 24,
    iconSelectedScale: 1.1,

    // Label
    showLabels: true,
    labelFontSize: 11,

    // Dot
    showDot: true,
    dotSelectedWidth: 20,
    dotHeight: 3,

    // Badge
    badgeSize: 18,
    badgeBouncePeakScale: 1.4,

    // Behavior
    enableDragging: true,
    enableHapticFeedback: true,
  ),
  // ...
)

🔢 Badge with Bounce Animation

final _bounceController = StreamController<void>.broadcast();

FrostNavBar(
  badgeBounceStream: _bounceController.stream,
  items: [
    FrostNavItem(
      icon: Icon(Icons.shopping_cart),
      label: 'Cart',
      badgeCount: cartCount,
    ),
  ],
  // ...
)

// Trigger bounce when adding to cart:
_bounceController.add(null);

📐 Content Bottom Inset

To avoid content being hidden behind the navbar:

Padding(
  padding: EdgeInsets.only(
    bottom: FrostNavBar.contentBottomInset(context),
  ),
  child: YourContent(),
)

⚙️ Style Properties Overview

Click to expand all 60+ properties

Colors

Parameter	Type	Default
selectedColor	Color?	Theme primary / white
unselectedColor	Color?	Muted gray
barGradientColors	List<Color>?	Auto from theme
borderColor	Color?	Semi-transparent white
badgeColor	Color?	colorScheme.secondary
badgeBorderColor	Color?	colorScheme.surface
badgeTextColor	Color	Colors.white
indicatorColor	Color?	Translucent primary
indicatorBorderColor	Color?	Translucent primary
dotColor	Color?	selectedColor
dotInactiveColor	Color?	Translucent unselected
shadowColor	Color?	Auto
glowColor	Color?	Auto

Bar Dimensions

Parameter	Type	Default
height	double	56.0
borderRadius	double	28.0
blurSigma	double	16.0
borderWidth	double	0.8
horizontalPadding	double	12.0
bottomPadding	double	4.0

Icon

Parameter	Type	Default
iconSize	double	22.0
iconSelectedScale	double	1.08

Label

Parameter	Type	Default
showLabels	bool	true
labelFontSize	double	10.0
labelFontWeight	FontWeight	w600
labelFontFamily	String?	Theme font
labelHeight	double	12.0

Dot Indicator

Parameter	Type	Default
showDot	bool	true
dotHeight	double	2.5
dotSelectedWidth	double	18.0
dotUnselectedWidth	double	4.0

Indicator Pill

Parameter	Type	Default
showIndicator	bool	true
indicatorWidthOffset	double	8.0
indicatorOverflow	double	2.0
indicatorDragScale	double	1.13
indicatorIdleScale	double	1.05

Badge

Parameter	Type	Default
badgeSize	double	16.0
badgeFontSize	double	9.0
badgeOffsetTop	double	-7.0
badgeOffsetEnd	double	-10.0
badgeBouncePeakScale	double	1.3

Behavior

Parameter	Type	Default
enableDragging	bool	true
enableHapticFeedback	bool	true

🤝 Contributing

Contributions are welcome! Please open an issue or submit a PR.

📄 License

MIT License - see LICENSE for details.