snap_nav_bar #

A frosted, gesture-driven bottom navigation bar with loose swipe-to-preview paging, snap-on-release physics, tap-to-centre navigation and haptic feedback.

What it does #

• Swipe the pages — the content PageView uses a soft custom spring so a flick glides and settles instead of snapping hard.
• Swipe the bar — dragging the tab strip previews the move 1:1 under your finger while the page stays frozen; the page only commits (sliding smoothly) when you let go. A fast fling nudges one extra tab.
• Tap any tab — near or far — and it slides straight to that page and centres it.
• Haptics — a selection tick as each tab crosses centre and a soft impact when the page locks in. Both are swappable, or off entirely.
• Frosted squircle surface — BackdropFilter blur behind an iOS-style squircle strip, with a centre indicator over the active tab.

No AnimationController, Ticker, or flutter_animate — the strip easing is done with TweenAnimationBuilder and PageController animations only. Icons are arbitrary widgets you supply; the package has no SVG or asset dependency.

Install #

dependencies:
  snap_nav_bar: ^0.1.0

Usage #

The quickest path is SnapNavShell, which owns the content PageView and the bar and wires them together:

import 'package:flutter/material.dart';
import 'package:snap_nav_bar/snap_nav_bar.dart';

class Demo extends StatelessWidget {
  const Demo({super.key});

  @override
  Widget build(BuildContext context) {
    return SnapNavShell(
      items: const [
        SnapNavItem(
          icon: Icon(Icons.home_outlined),
          activeIcon: Icon(Icons.home_rounded),
          label: 'Home',
          page: ColoredBox(color: Color(0xFF3B82F6)),
        ),
        SnapNavItem(
          icon: Icon(Icons.search_rounded),
          label: 'Search',
          page: ColoredBox(color: Color(0xFF10B981)),
        ),
        SnapNavItem(
          icon: Icon(Icons.person_rounded),
          label: 'Profile',
          page: ColoredBox(color: Color(0xFFEF4444)),
        ),
      ],
      onTabChanged: (i) => debugPrint('tab $i'),
    );
  }
}

Want SVG icons? Pass an SvgPicture (or anything) as the icon — the package never touches SVG itself. Driving your own PageView? Use SnapNavBar directly with a PageController (viewportFraction: 1.0).

The bar is frosted, so it blurs whatever is painted behind it — keep it overlaid on your content (which SnapNavShell does for you).

See example/ for a runnable two-screen demo: one all-defaults, one heavily customised (6 tabs, solid floating pill, no blur, custom indicator, swapped haptics).

Parameters #

SnapNavShell exposes everything below. SnapNavBar exposes the same appearance, motion, indicator and feedback parameters (it takes a PageController and items instead of owning them, and viewportFraction / initialIndex / height live on the shell).

Content #

Layout & motion #

Shape & surface #

Indicator #

Feedback #

License #

MIT — see LICENSE.