glaze_nav_bar - Dart API docs

A stunning glassmorphic navigation bar with gradient support, smooth animations, and modern design for Flutter.

✨ Glaze your app with beautiful navigation!

Features

🔮 Glassmorphism - Beautiful frosted glass effect
🎨 Gradient Support - Customizable gradient backgrounds
🏷️ Labels - Optional text labels under icons
💫 Smooth Animations - Fluid transitions between items
📱 Platform Aware - Optimized for iOS and Android

🎬 Demo

See GlazeNavBar in action with smooth animations and beautiful glassmorphic effects:

🌙 Dark Mode

☀️ Light Mode

Features shown: Smooth tab transitions, gradient effects, glassmorphism blur, floating button, and adaptive theming.

Installation

dependencies:
  glaze_nav_bar: ^1.0.0

Quick Start

import 'package:glaze_nav_bar/glaze_nav_bar.dart';

Scaffold(
  bottomNavigationBar: GlazeNavBar(
    items: [
      GlazeNavBarItem(child: Icon(Icons.home), label: 'Home'),
      GlazeNavBarItem(child: Icon(Icons.search), label: 'Search'),
      GlazeNavBarItem(child: Icon(Icons.person), label: 'Profile'),
    ],
    onTap: (index) {
      // Handle navigation
    },
  ),
)

Gradient Example

GlazeNavBar(
  items: [
    GlazeNavBarItem(child: Icon(Icons.home), label: 'Home'),
    GlazeNavBarItem(child: Icon(Icons.search), label: 'Search'),
    GlazeNavBarItem(child: Icon(Icons.chat), label: 'Chat'),
    GlazeNavBarItem(child: Icon(Icons.person), label: 'Profile'),
  ],
  gradient: LinearGradient(
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    colors: [Color(0xFF00E6FF), Color(0xFFAE00E9)],
  ),
  buttonGradient: LinearGradient(
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    colors: [Color(0xFF00E6FF), Color(0xFFAE00E9)],
  ),
  onTap: (index) => setState(() => _currentIndex = index),
)

Attributes

GlazeNavBar

Attribute	Description	Default
`items`	List of GlazeNavBarItem	Required
`index`	Current active index	`0`
`color`	Color of NavigationBar	`Colors.white`
`buttonBackgroundColor`	Background color of floating button	Same as `color`
`backgroundColor`	Color of NavigationBar's background	`Colors.transparent`
`gradient`	Gradient background (overrides `color`)	`null`
`buttonGradient`	Gradient for floating button	`null`
`onTap`	Callback when item is tapped	`null`
`letIndexChange`	Function to control if index can change	`(_) => true`
`animationCurve`	Animation curve	`Curves.easeOut`
`animationDuration`	Animation duration	`Duration(milliseconds: 600)`
`height`	Height of NavigationBar	`70.0` (Android) / `80.0` (iOS)
`maxWidth`	Max width of NavigationBar	`null`
`iconPadding`	Padding around the floating icon	`12.0`
`glassBlur`	Blur intensity for glass effect	`20`
`glassOpacity`	Opacity of glass background	`0.2`
`glassBorderRadius`	Border radius for glass effect	`0`
`glassBorderWidth`	Border width for glass effect	`1.5`
`glassBorderColor`	Border color for glass effect	`Colors.white`
`buttonBorderColor`	Border color for floating button	`Colors.white`
`buttonBorderWidth`	Border width for floating button	`3.0`

GlazeNavBarItem

Attribute	Description	Default
`child`	Icon widget	Required
`label`	Text label	`null`
`labelStyle`	TextStyle for label	`null`

// Create a GlobalKey
GlobalKey<GlazeNavBarState> _navBarKey = GlobalKey();

// Use in widget
GlazeNavBar(
  key: _navBarKey,
  items: [...],
  onTap: (index) => setState(() => _page = index),
)

// Navigate programmatically
ElevatedButton(
  onPressed: () => _navBarKey.currentState?.setPage(1),
  child: Text('Go to page 1'),
)

🎨 Theming

Light & Dark Mode Support

GlazeNavBar automatically adapts to your app's theme. Use the built-in factory constructors:

MaterialApp(
  theme: ThemeData.light().copyWith(
    extensions: [GlazeNavBarThemeData.light()],
  ),
  darkTheme: ThemeData.dark().copyWith(
    extensions: [GlazeNavBarThemeData.dark()],
  ),
  themeMode: ThemeMode.system, // Automatically switches based on system
)

Custom Theme

Create a custom theme by extending the base:

MaterialApp(
  theme: ThemeData.light().copyWith(
    extensions: [
      GlazeNavBarThemeData(
        color: Colors.purple,
        buttonBackgroundColor: Colors.deepPurple,
        glassBlur: 25,
        glassOpacity: 0.3,
      ),
    ],
  ),
)

GlazeNavBarThemeData

Attribute	Description
`color`	Primary color of the nav bar
`buttonBackgroundColor`	Floating button background
`backgroundColor`	Background behind the nav bar
`gradient`	Gradient for nav bar
`buttonGradient`	Gradient for floating button
`glassBorderColor`	Border color for glass effect
`buttonBorderColor`	Border color for floating button
`glassBlur`	Blur intensity (default: 20/25)
`glassOpacity`	Glass opacity (default: 0.25/0.15)
`glassBorderRadius`	Border radius
`glassBorderWidth`	Border width
`buttonBorderWidth`	Floating button border width
`height`	Navigation bar height
`iconPadding`	Padding around floating icon
`animationDuration`	Animation duration
`animationCurve`	Animation curve

License

MIT License - see the LICENSE file for details.

Author

Created with ❤️ by MokarmDev

🔮 Glaze Nav Bar