overlay_nav_bar

A frosted, animated overlay bottom navigation bar for Flutter with rich UX, accessibility, and performance tuning.

Features

  • Stateless, controlled API (parent owns selectedIndex)
  • Frosted glass style with gradient border
  • Active dot indicator with glow
  • Spring icon scale, hover lift, tooltips or labels
  • Accessibility semantics + keyboard nav
  • Haptics and large hit targets
  • Repaint boundaries + keyed icons for performance
  • Safe-area aware with bottom override
  • Optional BackdropFilter (enable/disable)

Install

Add to your pubspec.yaml:

dependencies:
  overlay_nav_bar: ^0.1.0

Or as a path dependency (monorepo):

dependencies:
  overlay_nav_bar:
    path: packages/overlay_nav_bar

Usage

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:overlay_nav_bar/overlay_nav_bar.dart';

class HomeShell extends StatefulWidget {
  const HomeShell({super.key});
  @override
  State<HomeShell> createState() => _HomeShellState();
}

class _HomeShellState extends State<HomeShell> {
  int index = 0;
  final pages = const [Placeholder(), Placeholder(), Placeholder(), Placeholder(), Placeholder()];
  final controller = OverlayNavController();

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(child: pages[index]),
          Positioned(
            left: 0,
            right: 0,
            bottom: 12,
            child: ValueListenableBuilder<bool>(
              valueListenable: controller.hiddenNotifier,
              builder: (context, hidden, child) => AnimatedSlide(
                duration: const Duration(milliseconds: 200),
                offset: hidden ? const Offset(0, 1) : Offset.zero,
                child: AnimatedOpacity(
                  duration: const Duration(milliseconds: 180),
                  opacity: hidden ? 0 : 1,
                  child: child,
                ),
              ),
              child: OverlayNavBar(
                icons: const [
                  CupertinoIcons.house_fill,
                  CupertinoIcons.search,
                  CupertinoIcons.add_circled_solid,
                  CupertinoIcons.bell_solid,
                  CupertinoIcons.person_crop_circle_fill,
                ],
                labels: const ['Home', 'Search', 'New', 'Alerts', 'Profile'],
                selectedIndex: index,
                onSelected: (i) => setState(() => index = i),
                activeColor: CupertinoColors.activeBlue,
                inactiveColor: Colors.black87,
                blurSigma: 26,
                enableBlur: true,
                showLabels: false,
                respectSafeArea: true,
                extraBottomPadding: 0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

API

See lib/overlay_nav_bar.dart for exported classes:

  • OverlayNavBar
  • OverlayNavController

Notes

  • On a flat white background, blur appears subtle because there’s nothing to blur. Increase tint opacity, add a slight gradient, or set enableBlur: false to rely on translucent fill + border.

Libraries

overlay_nav_bar