Flutter UI Essentials — Navigation Rail
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.
Constructor
This will create a Material Design Navigation Rail. You can check the parameters here for a custom navigation rail.
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…