Flutter UI Essentials — Navigation Rail

Maneesha Erandi
3 min readApr 2, 2024

Navigation Rail is a better way to switch the UI according to the screen size.

Material Navigation Rail

  • Window sizes to use—medium, expanded, large, and extra-large
  • We can add 3–7 destinations with an optional FloatingActionButton
  • Even on different screens of an app, we have to place the rail in the same place

Changes in M3

Behavior: Predictive back interaction

Color: New color mappings and compatibility with dynamic color

States: The active destination can be indicated with a pill shape in a contrasting color

Flutter Navigation Rail

Flutter provides NavigationRail widget, to display on the left or right as a way to navigate between a small number of screens.


This will create a Material Design Navigation Rail. You can check the parameters here for a custom navigation rail.

Key? key, Color?
bool extended = false,
Widget? leading,
Widget? trailing,
required List<NavigationRailDestination> destinations,
required int? selectedIndex,
ValueChanged<int>? onDestinationSelected,
double? elevation,