Flutterexperts

As a Flutter application developer, you need to stay up to date with new UI designs out there. I always tend to use new widgets, animations, and Ui designs for making my apps more beautiful. One such attractive tool was added to the inventory with v1.17 Stable release of Flutter, and it is a NavigationRail Widget.

In this article, we will discuss the Navigation Rail Widget In Flutter. We will show a small demo program to integrate navigation rail into your flutter applications.

Table of Contents:

NavigationRail Widget — Introduction

Screen Layout

NavigationRailDestination

NavigationRail Properties

Vertical Text

Code File

Conclusion

---

---

NavigationRail Widget

The NavigationRail is practically comparable in working with BottomNavigationBar. The two of them can likewise be utilized pair to make a consistent encounter across devices. In Flutter’s official described documentation, it’s a material widget and can be put at left or right on the screen, and you can explore between a different modest number of screens or fragments anything you desire to call them.

You can use both NavigationRail and BottomNavigationBar for creating seamlessly interesting UI design.

Screen Layout

The place of NavigationRail isn’t pre-characterized dispensed to itself in a Scaffold. Disparate the AppBar or the BottomNavigationBar, A navigation rail is typically utilized as the first or last component of a Row widget, which characterizes the Scaffold body.

The main content and the rail are commonly isolated by a vertical divider. It is wrapped by an Expanded widget to occupy the rest of the space on the screen. The elevation property of the NavigatonRail can likewise be utilized for the equivalent.

NavigationRailDestination

It is a simple class; it used to creates tappable navigations in NavigationRail. It holds the data to represent that navigation or destination view/fragment. It’s not a Widget class, and further, it contains three more properties are:

• Icon: Icon widget is commonly positioned, and furthermore can take any widget. It must always be non-null.
• Selected Icon: It’s an optional and not compulsory field. We will show you a dashboard as a selected Icon and date_range as an icon. So, a kind of filled icon can be placed here.
• Label: It must be non-null. A required field, which is to be doled out with a Text Widget that goes about as title for explicit destination and situated underneath the icon. The label can be appeared or hidden utilizing the label type property of the NavigationRail.

NavigationRailDestination(
  icon: Icon(Icons.date_range),
  selectedIcon: Icon(Icons.dashboard),
  label: Text('Trending'),
),

NavigationRail Properties

Some navigation rail properties ar as follows:

• OnDestinationSelected: This property called when one of the destinations is chosen. The stateful widget that makes the navigation rail needs to monitor the record of the chose NavigationRailDestination and call ‘setState’ to reconstruct the navigation rail with the new selectedIndex.
• Destinations: This property takes a rundown of NavigationRailDestination objects. The rundown ought to contain at least two things and like BottomNavigationBar for things property.
• GroupAlignment: This property used to set the vertical alignment of the rail destinations. We will take a value between -1.0 and 1.0. The implicit default value is -1.0, which sets the alignment to Top. The value of 0.0 aligns it to the Center. The value of 1.0 aligns the rail items to the Bottom. Arbitrary values between the range can also be assigned.

• SelectedIconTheme & UnselectedIconTheme: This property utilized, you can characterize the color, opacity, and size of the Icons of the NavigationRailDestination objects, when they are chosen and when they are most certainly not.
• SelectedLabelTextStyle & UnselectedLabelTextStyle: You can use these properties can customize the look and style of the text labels for selected/unselected states or underneath NavigationRailDestintaion . You need to assign TextStyle objects to these properties.
• Label Type: This property takes an enum class NavigationRailLabelType value, which gives you three options.

NavigationRailLabelType.selected
NavigationRailLabelType.none
NavigationRailLabelType.all

Selected will show all icons and only label when a destination is selected. All will show labels and icons the whole time, whether selected or not, and none will hide all the labels in every scenario, only icons will be shown.

• MinWidth: This property characterizes the width of NavigationRail. As a matter, of course, its default values are 72; however, you can change the incentive for making a reduced Rail also.
• SelectedIndex: This property characterizes the file that will define the at present chosen NavigationRailDestination.
• Leading & Trailing: These properties work in the same way as they do in other widgets like ListTile, AppBar, etc. These take in any Widget objects. Hence in the design below, it was easy to nest multiple widgets inside a Column or ListView if necessary and pass it as leading or trailing.

Vertical Text

We will utilize a widget RotatedBox for adjusting my Text widget vertical direction, which can be utilized, even in the Compact method of the NavigationRail.

NavigationRailDestination(
    icon: SizedBox.shrink(),
    label: Padding(
      padding: EdgeInsets.symmetric(vertical: 8),
      child: RotatedBox(
        quarterTurns: -1,
        child: Text("Welcome"),
      ),
    ),
  );

Code File

https://gist.github.com/ShaiqAhmedkhan/8d86b429d5d0a21f664749dbcfe41e3f#file-home_screen-dart

You will see a full code on a GitHub, and this is a small demo program to integrate with NavigationRail, and the below video shows how NavigationRail will work.

Conclusion:

Navigation Rail Widget is a significantly trending design procedure. You can make unique Ui with new content for users, in this widget, not using the app bar and bottom navigation bar in a scaffold. You can use RotatedBox for aligning labels and icons in the horizontal or vertical direction.

In the article, I have explained all properties of Navigation Rail Widget you can modify this code according to your choice, and this was a small introduction of Navigation Rail from my side and its working using Flutter.

I hope this blog will provide you with sufficient information in Trying up Navigation Rail Widget in your flutter projects. This is a demo program that will integrate Navigation Rail in a flutter, So please try it.

❤ ❤ Thanks for reading this article ❤❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter Navigation Rail Demo:

flutter-devs/flutter_navigation_rail_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---