Logo

Navigation Rail Flutter

Publisher Points Version

A customizable and elegant navigation rail widget for Flutter applications that provides a sidebar navigation experience with support for both main navigation items and bottom action items.

Features

  • ✨ Customizable navigation rail with rounded corners
  • 🎨 Configurable colors for active and inactive states
  • 📱 Support for both rail navigation items and bottom action items
  • 🖼️ Logo display at the top
  • 👤 Profile image support (network or asset images)
  • 🏷️ Optional labels for navigation items
  • 🎯 Callback functions for navigation and actions
  • 📐 Fully customizable dimensions and styling

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  navigation_rail_flutter: ^1.0.2

Then run:

flutter pub get

Usage

Basic Example

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

class NavigationRailExample extends StatefulWidget {
  const NavigationRailExample({super.key});

  @override
  State<NavigationRailExample> createState() => _NavigationRailExampleState();
}

class _NavigationRailExampleState extends State<NavigationRailExample> {
  final List<String> bottomLabel = <String>['Profile', 'Logout'];
  final List<String> bottomIcons = <String>['assets/settings.png', 'assets/logout.png'];

  final List<String> railLabel = <String>['Home', 'List'];
  final List<String> railIcons = <String>['assets/home.png', 'assets/list.png'];

  final List<Widget> pages = [
    const Center(child: Text('Home', style: TextStyle(fontSize: 20))),
    const Center(child: Text('List', style: TextStyle(fontSize: 20))),
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: NavigationFlutter(
          railItemCount: railLabel.length,
          railIcons: railIcons,
          pages: pages,
          logo: 'assets/logo.png',
          profileImage: 'https://example.com/profile.jpg',
          navigationRailPadding: 10,
          logoSize: 15,
          navigationRailRadius: 15,
          railIconSize: 8,
          railIconsSizeHeight: 30,
          railIconsSizeWidth: 30,
          bottomIconsSize: 25,
          bottomRailLabel: bottomLabel,
          navigationRailColor: Colors.white,
          railLabel: railLabel,
          bottomItemCount: bottomLabel.length,
          bottomIcons: bottomIcons,
          activeColor: const Color(0xFF005272),
          inActiveColor: const Color(0xFFE2F3F9),
          onBottomIndexSelected: (int index) {
            // Handle bottom navigation selection
            print('Bottom item selected: $index');
          },
          onNavigationRailIndexSelected: (int value) {
            // Handle rail navigation selection
            print('Rail item selected: $value');
          },
          logoutIcon: 'assets/logout.png',
          profileClick: () {
            // Handle profile click
            print('Profile clicked');
          },
          logoutClick: () {
            // Handle logout click
            print('Logout clicked');
          },
        ),
      ),
    );
  }
}

Parameters

Required Parameters

Parameter Type Description
railItemCount int Number of main navigation items
railIcons List<String> List of asset paths for navigation icons
pages List<Widget> List of pages to display when navigation items are selected
activeColor Color Background color for active navigation items
inActiveColor Color Background color for inactive navigation items
onBottomIndexSelected ValueChanged<int> Callback function when bottom items are selected
onNavigationRailIndexSelected ValueChanged<int> Callback function when rail items are selected
logoutIcon String Asset path for logout icon
profileClick VoidCallback Callback function when profile is clicked
logoutClick VoidCallback Callback function when logout is clicked

Optional Parameters

Parameter Type Default Description
navigationRailPadding double? 4 Padding around the navigation rail
navigationRailWidth double? 65 Width of the navigation rail
navigationRailRadius double? 5 Border radius of the navigation rail
railLabel List<String>? null Labels for navigation rail items
bottomRailLabel List<String>? null Labels for bottom navigation items
bottomIcons List<String>? null Asset paths for bottom navigation icons
bottomItemCount int? null Number of bottom navigation items
navigationRailColor Color? Colors.blueGrey Background color of the navigation rail
logo String? null Asset path for the logo
profileImage String? null Asset path or URL for profile image
bottomLabelActive bool? false Whether to show labels for bottom items
railLabelActive bool? false Whether to show labels for rail items
railIconSize double? 6 Padding inside icon containers
logoSize double? 10 Scale factor for the logo
bottomIconsSize double? 18 Scale factor for bottom icons
background Color? Color(0xFFEDF6F7) Background color of the entire widget
railIconsSizeHeight double? 30 Height of rail icon containers
railIconsSizeWidth double? 30 Width of rail icon containers
railBottomSizeHeight double? null Height of bottom icon containers
railBottomSizeWidth double? null Width of bottom icon containers

Asset Requirements

Make sure to add your assets to the pubspec.yaml file:

flutter:
  assets:
    - assets/
    - assets/icons/

Required Assets Structure

assets/
├── logo.png
├── home.png
├── list.png
├── settings.png
├── logout.png
└── ... (other icons)

Customization Examples

Dark Theme Navigation Rail

NavigationFlutter(
  // ... other parameters
  navigationRailColor: Colors.grey[900],
  activeColor: Colors.blue[700]!,
  inActiveColor: Colors.grey[800]!,
  background: Colors.grey[850],
)

With Labels Enabled

NavigationFlutter(
  // ... other parameters
  railLabelActive: true,
  bottomLabelActive: true,
  railLabel: ['Dashboard', 'Analytics', 'Settings'],
  bottomRailLabel: ['Profile', 'Help'],
)

Custom Dimensions

NavigationFlutter(
  // ... other parameters
  navigationRailWidth: 80,
  navigationRailRadius: 20,
  railIconsSizeHeight: 40,
  railIconsSizeWidth: 40,
  logoSize: 20,
)

Profile Image Support

The widget supports both network and asset images for the profile:

// Network image
profileImage: 'https://example.com/profile.jpg'

// Asset image
profileImage: 'assets/default_profile.png'

The widget automatically detects whether the provided string is a URL or asset path.

Best Practices

  • Icon Consistency: Use icons with consistent styling and size for better visual harmony
  • Color Contrast: Ensure sufficient contrast between active/inactive states for accessibility
  • Asset Optimization: Optimize your image assets for better performance
  • Responsive Design: Test the navigation rail on different screen sizes
  • Error Handling: Implement proper error handling in your callback functions

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For issues and feature requests, please visit our GitHub repository.

Libraries