Skip to content
Related Articles
Open in App
Not now

Related Articles

Flutter – NavigationRail Widget

Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 24 Mar, 2022
Improve Article
Save Article
Like Article

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.


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})


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



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


My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!