NotchNav #

A highly customizable Flutter bottom navigation bar and vertical navigation rail with a notch-style pop-up indicator. The selected item rises above the bar/rail inside an animated shape, with a smooth cutout notch in the background.

Features #

• Two widgets: NotchNav (bottom bar) and NotchRail (vertical rail)
• Three indicator shapes: circle, square, and diamond
• Solid colors or gradient fills for both the background and the indicator
• Configurable animation duration and curve
• Label visibility control (selected-only or hidden)
• Adjustable sizing, corner radius, icon size, circle size, notch margin, and more
• Smooth fillet corners on the notch cutout
• NotchRail supports left/right alignment and start/spaceEvenly item distribution

Installation #

Add notch_nav to your pubspec.yaml:

dependencies:
  notch_nav: ^0.2.0

Then run:

flutter pub get

Quick Start #

NotchNav (Bottom Bar) #

import 'package:notch_nav/notch_nav.dart';

NotchNav(
  items: const [
    NotchNavItem(icon: Icons.home, label: 'Home'),
    NotchNavItem(icon: Icons.search, label: 'Search'),
    NotchNavItem(icon: Icons.person, label: 'Profile'),
  ],
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
)

NotchRail (Vertical Rail) #

import 'package:notch_nav/notch_nav.dart';

NotchRail(
  items: const [
    NotchNavItem(icon: Icons.home, label: 'Home'),
    NotchNavItem(icon: Icons.search, label: 'Search'),
    NotchNavItem(icon: Icons.person, label: 'Profile'),
  ],
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
  alignment: NotchRailAlignment.left,
)

Customization #

Shape #

Choose between circle (default), square, or diamond:

NotchNav(
  shape: NotchNavShape.square,
  // ...
)

Colors #

Set solid colors for the background and active indicator:

NotchNav(
  backgroundColor: Colors.white,
  activeColor: Color(0xFF6C63FF),
  activeIconColor: Colors.white,
  inactiveIconColor: Color(0xFF9E9E9E),
  labelColor: Color(0xFF424242),
  // ...
)

Gradients #

Use gradients instead of solid colors. When provided, they take precedence over backgroundColor and activeColor:

NotchNav(
  backgroundGradient: LinearGradient(
    colors: [Colors.blue.shade50, Colors.cyan.shade50],
  ),
  activeGradient: LinearGradient(
    colors: [Color(0xFF0077B6), Color(0xFF00B4D8)],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  // ...
)

Animation #

Control the transition speed and curve:

NotchNav(
  animationDuration: Duration(milliseconds: 600),
  animationCurve: Curves.elasticOut,
  // ...
)

Label Behavior #

Show labels only for the selected item, or hide them entirely:

NotchNav(
  labelBehavior: NotchNavLabelBehavior.none,
  // ...
)

Rail Alignment #

Place the rail on the left or right side of the screen:

NotchRail(
  alignment: NotchRailAlignment.left,  // or .right
  // ...
)

Rail Items Alignment #

Control how items are distributed vertically:

NotchRail(
  itemsAlignment: NotchRailItemsAlignment.start,       // items at top (default)
  // or
  itemsAlignment: NotchRailItemsAlignment.spaceEvenly,  // spread across full height
  itemExtent: 80,  // optional custom item height (only for start alignment)
  // ...
)

Sizing and Spacing #

Fine-tune dimensions and layout:

NotchNav(
  barHeight: 96,
  barBorderRadius: 16,
  circleSize: 52,
  iconSize: 26,
  notchMargin: 6,
  notchCornerRadius: 6,
  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
  horizontalPadding: 16,
  // ...
)

Shadows #

Customize bar and indicator shadows:

NotchNav(
  barShadow: [
    BoxShadow(color: Colors.black12, blurRadius: 16, offset: Offset(0, 4)),
  ],
  circleShadow: [
    BoxShadow(color: Colors.purple.withValues(alpha: 0.3), blurRadius: 12),
  ],
  // ...
)

Examples #

Default	Ocean Gradient
Square Sunset	Diamond Dark
Square Minimal	Diamond Emerald
Bouncy Circle	Slow Square

##Screen record

https://github.com/user-attachments/assets/6b67c04f-50bb-4aba-83b2-0c0e9f494c5e

NotchRail #

NotchNav Parameters #

NotchRail Parameters #

Inspiration #

Design inspired by Habit Land - Habit Tracker App UX/UI on Behance by Thu Phuong.

Thu Phuong