Title: Flutter NavigationRail: A Versatile Navigation Widget

A portrait painting style image of a pirate holding an iPhone.

by The Captain

on
July 25, 2023

Title: Flutter NavigationRail: A Versatile Navigation Widget

The Flutter NavigationRail widget is a powerful and versatile tool for creating navigation menus in your app. It provides a sidebar-like navigation experience, similar to the drawer menu, but with a more compact and interactive design.

With the NavigationRail widget, you can display a vertical list of navigation items on the side of your screen. Each item can have an associated icon and label, making it easy for users to understand and navigate through your app's various sections.

Here's an example of how to use the NavigationRail widget in your Flutter app:


import 'package:flutter/material.dart';

class MyNavigationRail extends StatefulWidget {
  @override
  _MyNavigationRailState createState() => _MyNavigationRailState();
}

class _MyNavigationRailState extends State {
  int _selectedIndex = 0;

  List _sections = ['Section 1', 'Section 2', 'Section 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter NavigationRail'),
      ),
      body: Row(
        children: [
          NavigationRail(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            labelType: NavigationRailLabelType.all,
            destinations: _sections.map((section) {
              return NavigationRailDestination(
                icon: Icon(Icons.adjust),
                label: Text(section),
              );
            }).toList(),
          ),
          VerticalDivider(),
          Expanded(
            child: Center(
              child: Text('Selected Section: ${_sections[_selectedIndex]}'),
            ),
          )
        ],
      ),
    );
  }
}

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

In this example, we create a MyNavigationRail widget that extends StatefulWidget. We keep track of the selected index using the _selectedIndex variable. The _sections list contains the names of each section in our app.

In the build method, we create a Scaffold widget with an AppBar and a body that consists of a Row. The first child is the NavigationRail widget. We pass the selectedIndex and onDestinationSelected properties to handle the navigation selection. The destinations property is assigned with a list of NavigationRailDestination widgets, each representing a section. We use the map method on the _sections list to convert each section into a NavigationRailDestination with an icon and label.

Lastly, we display the currently selected section in the Expanded widget to the right of the NavigationRail.

By running this code, you'll see a sidebar-like navigation rail on the left side of the screen. Clicking on each section will update the selected section's label.

Summary: NavigationRail is a versatile Flutter widget for creating compact and interactive navigation menus. It provides a sleek way to navigate through different sections of your app.