Navigation Rail Plus #

A highly customizable, responsive navigation system for Flutter that supports both **Navigation Rail ** and Drawer modes with smooth animations and flexible configuration.

✨ Features #

Fully customizable navigation rail
Built-in responsive layout (Rail ↔ Drawer)
Expandable / collapsible rail
Fixed + scrollable navigation items
Header, footer, and trailing sections
Hover, selected, and disabled states
Smooth animations
GetX-powered state management
Clean and scalable architecture

Demo #

#Navigation rail

Navigation rail expand
Navigation rail collapsed
#Navigation Drawer

📦 Installation #

Add to your pubspec.yaml:

dependencies:
  navigation_rail_plus: ^latest_version

🚀 Quick Start #

NavigationRailPlus(
  selectedIndex: 0,
  responsiveBody: YourMainScreen(),
  navigationLeadingConfig: NavigationLeadingConfig(
    fixLeadingItems: [
      NavigationRailPlusDestination(
        icon: Icons.home,
        label: 'Home',
      ),
      NavigationRailPlusDestination(
        icon: Icons.settings,
        label: 'Settings',
      ),
    ],
  ),
  onDestinationSelected: (index) {
    print('Selected: $index');
  },
)

🧠 Architecture Overview #

The system is built using multiple configuration classes:

Config	Responsibility
`NavigationGlobalConfig`	Layout behavior, animation, sizing
`NavigationHeaderConfig`	Top header UI
`NavigationLeadingConfig`	Navigation items
`NavigationFooterConfig`	Bottom section
`NavigationRailPlusDestination`	Individual item

📐 Responsive Behavior #

By default:

Mobile → Drawer
Tablet/Desktop → Navigation Rail

Controlled via:

NavigationGlobalConfig(
  responsiveLayout: true,
)

⚙️ Configuration #

1. Global Configuration #

NavigationGlobalConfig(
  responsiveLayout: true,
  mode: NavigationRailMode.rail,
  collapsedRailWidth: 60,
  expandedRailWidth: 260,
  drawerWidth: 300,
  animationDuration: Duration(milliseconds: 300),
  backgroundColor: Colors.white,
  needFixedSize: false,
  closeOnSelectDrawerItem: true,
)

2. Header Configuration #

NavigationHeaderConfig(
  header: Text("My App"),
  headerIcon: Icon(Icons.menu),
  headerIconSize: 24,
  headerIconColor: Colors.black,
  toggleNavigationIcon: Icon(Icons.menu_open),
)

3. Leading (Navigation Items) #

NavigationLeadingConfig(
  fixLeadingItems: [
    NavigationRailPlusDestination(
      icon: Icons.dashboard,
      label: "Dashboard",
    ),
  ],
  scrollableLeadingItems: [
    NavigationRailPlusDestination(
      icon: Icons.person,
      label: "Profile",
    ),
  ],
  leadingColor: Colors.grey,
  selectedLeadingColor: Colors.blue,
  leadingHoverColor: Colors.blue.withOpacity(0.1),
  leadingIconSize: 22,
  needTooltip: true,
)

4. Footer Configuration #

NavigationFooterConfig(
  trailing: Icon(Icons.notifications),
  footer: Text("v1.0.0"),

  collapsedTrailing: Icon(Icons.notifications_none),
  collapsedFooter: Text("v1"),
)

5. Destination Item #

NavigationRailPlusDestination(
  icon: Icons.home,
  selectedIcon: Icons.home_filled,
  label: "Home",
  disabled: false,
)

🎯 Full Example #

NavigationRailPlus(
  selectedIndex: 1,

  navigationGlobalConfig: NavigationGlobalConfig(
    expandedRailWidth: 260,
    collapsedRailWidth: 70,
  ),

  navigationHeaderConfig: NavigationHeaderConfig(
    header: Text("My App"),
  ),

  navigationLeadingConfig: NavigationLeadingConfig(
    fixLeadingItems: [
      NavigationRailPlusDestination(
        icon: Icons.home,
        label: "Home",
      ),
      NavigationRailPlusDestination(
        icon: Icons.settings,
        label: "Settings",
      ),
    ],
  ),

  navigationFooterConfig: NavigationFooterConfig(
    footer: Text("Footer"),
  ),

  responsiveBody: Center(
    child: Text("Main Content"),
  ),

  onDestinationSelected: (index) {
    // Handle navigation
  },
)

🎨 Behavior Details #

Expand / Collapse #

Controlled internally via NavigationController
Toggle button in header
Animated width transition

Hover State #

Applies leadingHoverColor
Disabled items ignore hover

Selected State #

Uses selectedLeadingColor
Supports selectedIcon

Disabled Items #

NavigationRailPlusDestination(
  icon: Icons.lock,
  label: 'Locked',
  disabled: true,
)

Reduced opacity
No interaction

📱 Drawer Mode #

Force drawer manually:

NavigationGlobalConfig(
  responsiveLayout: false,
  mode: NavigationRailMode.drawer,
)

🧩 Advanced Usage #

Add Custom Content Between Items #

navigationMainContent: [
  SizedBox(height: 20),
  Text("Extra Section"),
]

Close Drawer on Selection #

NavigationGlobalConfig(
  closeOnSelectDrawerItem: true,
)

Below is a structured, production-quality API reference table covering all public variables across your configuration classes and main widget.

📘 API Reference #