🧊 frost_nav_bar

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

Frost Nav Bar Preview

🌐 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.