Flutter – NavigationRail Widget

Last Updated : 24 Mar, 2022

NavigationRail is a Flutter widget that allows creating a navigation bar at the left or right location of the screen. Like the bottom navigation bar which sticks to the bottom, we have a navigation rail that stays on one of the sides. NavigationRail is suitable for large viewports like on desktop or tablet. In this article, we will look at an example of its implementation along with output.

Syntax:

NavigationRail({Key? key, Color? backgroundColor,
    bool extended = false,
    Widget? leading,
    Widget? trailing,
    required List<NavigationRailDestination> destinations,
    required int selectedIndex,
    ValueChanged<int>? onDestinationSelected,
    double? elevation,
    double? groupAlignment,
    NavigationRailLabelType? labelType,
    TextStyle? unselectedLabelTextStyle,
    TextStyle? selectedLabelTextStyle,
    IconThemeData? unselectedIconTheme,
    IconThemeData? selectedIconTheme,
    double? minWidth,
    double? minExtendedWidth,
    bool? useIndicator,
    Color? indicatorColor})

Parameters:

backgroundColor: The color of the container which holds the navigation rail.
destinations: The destinations represented by items on the rails to be taken.
elevation: The navigation rail’s elevation.
extended: Boolean to set if rail is to be extended.
groupAlignment: The vertical alignment of the items of rails.
indicatorColor: The color of indicated items.
labelType: The styling of the text of items on rails.
leading: The widget that appears before destinations.
onDestinationSelected: Function to be called when any destination is selected.
minExtendedWidth: The width to be extended after the rail layout on the screen.
minWidth: The smallest possible width of rails regardless of destinations icon.
selectedIconTheme: The style of icon selected.
selectedIndex: The index of the item that is selected from the destinations array.
selectedLabelTextStyle: The text style of icon label that is selected from destinations.
trailing: The widget that is displayed below the destinations.
unselectedIconTheme: The styling of unselected items among the destinations.
unselectedLabelTextStyle: The text style of labels of destinations.
useIndicator: Boolean when set to true creates a box behind a selected icon of destinations on rails.

Example:

Dart

import 'package:flutter/material.dart'; 
  
void main() { 
  runApp(MyApp()); 
} 
  
class MyApp extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: 'Navigation Rails', 
      debugShowCheckedModeBanner: false, 
      theme: ThemeData( 
        primarySwatch: Colors.green, 
      ), 
      home: MyHomePage(), 
    ); 
  } 
} 
  
class MyHomePage extends StatefulWidget { 
  @override 
  State<MyHomePage> createState() => _MyHomePageState(); 
} 
  
class _MyHomePageState extends State<MyHomePage> { 
  
  // initialize a index 
  int _selectedIndex = 0; 
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: Text("GeeksForGeeks"), 
        centerTitle: true, 
      ), 
      body: Row( 
        children: <Widget>[ 
  
          // create a navigation rail 
          NavigationRail( 
            selectedIndex: _selectedIndex, 
            onDestinationSelected: (int index) { 
              setState(() { 
                _selectedIndex = index; 
              }); 
            }, 
            labelType: NavigationRailLabelType.selected, 
            backgroundColor: Colors.green, 
            destinations: const <NavigationRailDestination> 
            [ 
              // navigation destinations 
              NavigationRailDestination( 
                icon: Icon(Icons.favorite_border), 
                selectedIcon: Icon(Icons.favorite), 
                label: Text('Wishlist'), 
              ), 
              NavigationRailDestination( 
                icon: Icon(Icons.person_outline_rounded), 
                selectedIcon: Icon(Icons.person), 
                label: Text('Account'), 
              ), 
              NavigationRailDestination( 
                icon: Icon(Icons.shopping_cart_outlined), 
                selectedIcon: Icon(Icons.shopping_cart), 
                label: Text('Cart'), 
              ), 
            ], 
            selectedIconTheme: IconThemeData(color: Colors.white), 
            unselectedIconTheme: IconThemeData(color: Colors.black), 
            selectedLabelTextStyle: TextStyle(color: Colors.white), 
          ), 
          const VerticalDivider(thickness: 1, width: 2), 
          Expanded( 
            child: Center( 
              child: Text('Page Number: $_selectedIndex'), 
            ), 
          ) 
        ], 
      ), 
    ); 
  } 
}