apptomate_custom_nav_rail 0.0.1

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

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

NavigationRailItem Properties

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