simple_clean_navbar 1.1.1

A high-performance, fully customizable bottom navigation bar and side rail for Flutter. Supports Floating design, custom widgets, RTL, Animations, and smart System UI integration.

Simple Clean NavBar

The Ultimate Navigation Bar for Flutter. Simple syntax, enterprise-grade performance, and highly customizable.

Whether you need a lightning-fast standard bottom bar or a highly animated floating side-rail for tablets, simple_clean_navbar handles it seamlessly with its Dual-Engine Architecture. Designed to look pristine across mobile, tablet, and web while automatically handling RTL and Dark Mode.

✨ Why Simple Clean NavBar?

• ⚡️ Dual-Engine Architecture (v1.1.0): Use SimpleCleanNavBar() for an ultra-lightweight, zero-overhead standard bar, or SimpleCleanNavBar.advanced() to unlock floating and side-rail features.
• 🛡️ Anti-Glitch Animations: Engineered to handle rapid "spam-clicking" gracefully. Animations are 100% interruptible with buttery-smooth easeOutQuart curves.
• 🎈 Floating & Fixed Modes: Switch between a modern floating design with soft shadows or a classic fixed bar.
• 📐 Fully Responsive (Side Rail): Automatically adapt from a Bottom Bar (Mobile) to a vertical Side Rail (Tablet/Web/Desktop).
• 🎨 SVG & Custom Widget Support: Pass IconData, SVG paths, or any custom Flutter Widget to your nav items.
• 📱 Smart Immersive UI: Automatically matches the Android System Navigation Bar color with your navbar, reacting instantly to Dark/Light theme changes.

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  simple_clean_navbar: ^1.1.1

🚀 Usage

1. Standard Mode (Maximum Performance) Get started in seconds. This constructor uses zero dynamic size calculations, making it incredibly fast and perfect for 90% of apps.

import 'package:simple_clean_navbar/simple_clean_navbar.dart';

SimpleCleanNavBar(
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
  items: [
    SimpleNavBarItem(label: 'Home', icon: Icons.home_rounded),
    // You can also use Custom Widgets like SVGs!
    SimpleNavBarItem(
      label: 'Explore', 
      customWidget: SvgPicture.asset('assets/explore.svg'),
    ),
    SimpleNavBarItem(label: 'Profile', icon: Icons.person_rounded),
  ],
)

2. Advanced Mode (Floating, Side Rail & Animations) Unleash the full power of the package using .advanced().

SimpleCleanNavBar.advanced(
  // Data
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
  items: [
    SimpleNavBarItem(label: 'Home', icon: Icons.home_rounded),
    SimpleNavBarItem(label: 'Cart', icon: Icons.shopping_bag_rounded),
    SimpleNavBarItem(label: 'Settings', icon: Icons.settings_rounded),
  ],

  // Design & Colors
  backgroundColor: Theme.of(context).cardColor,
  selectedColor: Colors.blueAccent,
  unselectedColor: Colors.grey,
  
  // Layout Modes
  isFloating: true,  // Modern floating design with shadows
  isSideRail: false, // Set to true for vertical layout (Tablet/Web)
  isRailOnLeft: true,// Position the rail on Left or Right

  // Animations & Text
  animationType: SimpleNavAnimType.float, // .circle, .zoom, .float
  textMode: SimpleNavTextMode.onSelect,   // .alwaysShow, .onSelect, .neverShow
  
  // System UI Integration
  updateSystemNavBar: true, // Smart immersive mode for Android hardware buttons
)

📱 Responsive Layout Guide (Mobile vs Tablet)

Easily transform your Bottom Bar into a Side Rail based on screen size:

@override
Widget build(BuildContext context) {
  // Check if the screen is wide (Tablet/Web)
  final isWide = MediaQuery.of(context).size.width > 600;

  return Scaffold(
    // 1. On Mobile: Show Bottom Navigation Bar
    bottomNavigationBar: isWide 
        ? null 
        : SimpleCleanNavBar.advanced(
            currentIndex: _index,
            onTap: (i) => setState(() => _index = i),
            items: _items,
            isFloating: true, 
          ),
    
    // 2. On Tablet/Web: Show Side Rail next to the body
    body: Row(
      children: [
        if (isWide) 
          SimpleCleanNavBar.advanced(
            isSideRail: true, // Enable vertical mode
            isRailOnLeft: true,
            currentIndex: _index,
            onTap: (i) => setState(() => _index = i),
            items: _items,
            isFloating: true,
          ),
        
        // Your Main Content
        Expanded(child: MyPageContent()),
      ],
    ),
  );
}

❤️ Support

If you find this package useful, please give it a generic Like on pub.dev and a ⭐️ on GitHub.

Created with ❤️ by Nima Kharraji.