CustomNavigationRail

An enhanced and fully customizable navigation rail for Flutter applications, perfect for responsive web and desktop layouts.

Features

  • Flexible Layout: Supports both collapsed and expanded states
  • Header & Footer Sections: Custom widgets for top and bottom areas
  • Visual Customization: Full control over colors, sizes, and typography
  • Interactive Elements: Built-in tooltips and active state indicators
  • Responsive Design: Adapts to different screen sizes
  • Accessibility: Built-in support for screen readers
  • Demo Included: Complete example showcasing all features

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_nav_rail: ^0.0.1

Usage

Basic Usage

CustomNavigationRail(
  selectedIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
  items: [
    NavigationRailItem(icon: Icons.home, label: 'Home'),
    NavigationRailItem(icon: Icons.search, label: 'Search'),
  ],
)

Available Parameters

Parameter Type Default Description
selectedIndex int required Currently selected index
items List required Main navigation items
onTap ValueChanged null Selection callback
backgroundColor Color Colors.white Background color
selectedItemColor Color Colors.blue Selected item color
unselectedItemColor Color Colors.grey Unselected item color
indicatorColor Color? null Selection indicator color
elevation double 2.0 Shadow elevation
useIndicator bool true Show selection indicator
isExpanded bool false Expanded/collapsed state
iconSize double 24.0 Icon size
labelSpacing double 8.0 Space between icon and label
header Widget? null Header widget
footerItems List null Footer navigation items
headerPadding EdgeInsetsGeometry? 8.0 Header padding
footerPadding EdgeInsetsGeometry? 8.0 Footer padding
selectedLabelStyle TextStyle? null Selected label style
unselectedLabelStyle TextStyle? null Unselected label style
minWidth double? null Minimum collapsed width
minExtendedWidth double? null Minimum expanded width
Property Type Description
icon IconData Required icon
activeIcon IconData? Optional active state icon
label String Required label
tooltip String? Accessibility tooltip

Advanced Examples

With header and footer:

CustomNavigationRail(
  header: UserProfileWidget(),
  footerItems: [
    NavigationRailItem(icon: Icons.settings, label: 'Settings'),
    NavigationRailItem(icon: Icons.logout, label: 'Logout'),
  ],
  // ... other params
)

Custom styled rail:

CustomNavigationRail(
  backgroundColor: Colors.grey[100],
  selectedItemColor: Colors.purple,
  indicatorColor: Colors.purple.withOpacity(0.1),
  selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
  // ... other params
)

Demo

The package includes a CustomNavigationRailWidget demo that shows:

  • Expandable/collapsible rail
  • Header with toggle button
  • Main navigation items
  • Footer items
  • Custom styling options
  • Page switching functionality

To run the demo:

void main() {
  runApp(MaterialApp(
    home: CustomNavigationRailWidget(),
  ));
}

Implementation Details

The widget:

  1. Wraps Flutter's core NavigationRail
  2. Adds header and footer sections
  3. Provides enhanced styling options
  4. Implements proper state management
  5. Includes accessibility features
  6. Handles both expanded and collapsed states

Best Practices

  1. Use for apps with 3-7 main navigation items
  2. Include key actions in the footer (settings, logout)
  3. Consider adding a toggle button in the header
  4. Maintain consistent styling with your app theme
  5. Test on different screen sizes

Comparison with Flutter's NavigationRail

Feature Flutter's Version Custom Version
Header Support No Yes
Footer Support No Yes
Styling Options Basic Extensive
State Management Manual Built-in
Accessibility Basic Enhanced
Expand/Collapse Basic Improved

Common Use Cases

  • Desktop applications
  • Responsive web apps
  • Admin dashboards
  • Content management systems
  • Multi-section applications
  • Settings-heavy interfaces

Libraries

apptomate_custom_nav_rail