1.9 KiB
1.9 KiB
Navigation Rail - M3 Expressive Component
Overview
The Navigation Rail is a side-navigation component used for medium to large screens (tablets, desktops). In M3 Expressive, it features vertical layouts with expressive active indicators and optional trailing/leading widgets.
Design Principles
- Vertical Hierarchy: Top-to-bottom flow of importance.
- Expressive Indicators: Use pills or teardrop shapes for the active state.
- Adaptive Width: Can be narrow (icons only) or extended (icons + labels).
- Secondary Actions: Use leading/trailing areas for FABs or profile icons.
Implementation in Flutter
1. Simple Navigation Rail
NavigationRail(
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: NavigationRailLabelType.selected,
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text('First'),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
label: Text('Second'),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text('Third'),
),
],
)
2. Rail with FAB (M3 Style)
NavigationRail(
leading: FloatingActionButton(
elevation: 0,
onPressed: () {},
child: const Icon(Icons.add),
),
// ... destinations
)
Best Practices
- Responsive Design: Switch from
NavigationBartoNavigationRailwhen screen width exceeds 600dp. - Alignment: Items are usually top-aligned.
- Labels: Use
NavigationRailLabelType.allfor maximum expressiveness if space allows.