Extended Bottom Navigation Bar

A premium, highly customizable, and expandable bottom navigation bar for Flutter. Inspired by the clean aesthetics and layout of modern dashboards, it features a primary row of tabs, a central Floating Action Button (FAB) slot, and an expandable grid for secondary items with staggered slide and fade animations.

Features

• Expandable Grid: Tap the "More" toggle tab to expand the navigation bar and reveal a custom grid of secondary action items.
• Staggered Animations: Smooth staggered slide and fade entry animations for the expanded secondary items.
• Customizable FAB Slot: Place any custom widget (standard FAB, icon, gradient circle, Lottie animation, etc.) at the center of the navigation bar.
• Notched Clip Effect: Background clips dynamically around the central FAB with configurable notch radius.
• Zero Third-Party Dependencies: Fully portable, without depending on external screen utility packages or hardcoded assets.
• Highly Configurable: Control layout heights, padding, animation curves, elevations, shadow strengths, colors, and labels.

---

Installation

Add this package to your project:

dependencies:
  extended_bottom_navigation_bar: ^1.0.2

Or run:

flutter pub add extended_bottom_navigation_bar

---

Usage

Simple Implementation

Here is how you can use the ExpandableBottomNav widget in your Scaffold:

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

class MyHomeWidget extends StatefulWidget {
  @override
  State<MyHomeWidget> createState() => _MyHomeWidgetState();
}

class _MyHomeWidgetState extends State<MyHomeWidget> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("Page Index: $_currentIndex")),
      bottomNavigationBar: ExpandableBottomNav(
        // Primary left tabs
        leftItems: [
          PrimaryNavBarItem(
            icon: Icons.home_outlined,
            activeIcon: Icons.home,
            label: 'Home',
            isActive: _currentIndex == 0,
            onTap: () => setState(() => _currentIndex = 0),
          ),
          PrimaryNavBarItem(
            icon: Icons.analytics_outlined,
            activeIcon: Icons.analytics,
            label: 'Analytics',
            isActive: _currentIndex == 1,
            onTap: () => setState(() => _currentIndex = 1),
          ),
        ],
        // Primary right tabs (when expandable, maximum of 1 item is allowed here)
        rightItems: [
          PrimaryNavBarItem(
            icon: Icons.notifications_none_outlined,
            activeIcon: Icons.notifications,
            label: 'Alerts',
            isActive: _currentIndex == 2,
            onTap: () => setState(() => _currentIndex = 2),
          ),
        ],
        // Secondary grid tabs shown upon expansion
        secondaryItems: [
          SecondaryNavBarItem(
            icon: Icons.account_balance_wallet_outlined,
            activeIcon: Icons.account_balance_wallet,
            label: 'Wallet',
            onTap: () => print('Wallet tapped'),
          ),
          SecondaryNavBarItem(
            icon: Icons.receipt_long_outlined,
            activeIcon: Icons.receipt_long,
            label: 'Invoices',
            onTap: () => print('Invoices tapped'),
          ),
        ],
        // Customizable Floating Action Button slot
        fab: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

---

Detailed Configuration

The ExpandableBottomNav widget offers properties to customize the aesthetics of the bar:

Property	Type	Description	Default
leftItems	List<PrimaryNavBarItem>	Left-side tabs of the primary row.	Required
rightItems	List<PrimaryNavBarItem>	Right-side tabs of the primary row.	Required
secondaryItems	List<SecondaryNavBarItem>	Action items rendered in the secondary grid.	Required
fab	Widget?	Center widget placed inside the notched slot.	null
isExpandable	bool	Whether the grid can expand.	true
onExpandChanged	ValueChanged<bool>?	Callback when expansion state changes.	null
moreLabel / closeLabel	String	Customize text labels for the grid toggle button.	'More' / 'Close'
moreIcon / closeIcon	IconData	Customize icons for the grid toggle button.	Icons.grid_view_outlined / Icons.close
backgroundColor	Color?	Custom bar background color.	Falls back to theme bottom bar color
shadowColor	Color?	Custom bar shadow color.	Falls back to system/theme black
activeColor / inactiveColor	Color?	Active / inactive colors of tabs.	Primary theme color / Grey
gridColumns	int	Number of columns in secondary grid.	5
curve	Curve?	Direct override for the expand/collapse transition curve.	null (uses config curve)
fabSize	double?	Direct override for the horizontal space of the FAB.	null (uses config size)
notchRadius	double?	Direct override for the background notch radius.	null (uses config radius)
config	NavBarConfig	Layout heights, padding, animation speeds, etc.	NavBarConfig()

Customizing Dimensions & Animations with NavBarConfig

You can customize internal double parameters (such as the row heights, stagger step speeds, and curves) by passing a custom NavBarConfig object:

ExpandableBottomNav(
  config: const NavBarConfig(
    topRowHeight: 52.0,
    bottomRowHeight: 60.0,
    fabSize: 70.0,
    notchRadius: 42.0,
    expandDuration: Duration(milliseconds: 400),
    staggerStepMs: 100,
    staggerCurve: Curves.easeOutBack,
  ),
  // ...
)

---

License

This package is licensed under the MIT License.