M3 Expressive: Navigation rail
- Dominant language
- Dart
- Stars
- 179k
- Forks
- 31.1k
- PR merge metrics
- PR metrics pending
Description
The [Navigation Rail](https://m3.material.io/components/navigation-rail/overview) in M3E has been updated, primarily by formalizing and distinctly styling its "collapsed" and "expanded" states. The "expanded" Navigation Rail is now positioned as the replacement for the `NavigationDrawer`.
Key changes include a wider rail, new item heights, spacing, and padding. The active destination indicator and label colors have been updated (e.g., active label to secondary), and the selected label is no longer bolded.
https://github.com/user-attachments/assets/01c1e6ab-1888-4127-8056-7724d50e2385
### Proposal
We should investigate updating the existing `NavigationRail` widget, especially the layout of each destinations, to support M3E.
Contributor guide
Research direction
Start at the existing NavigationRail widget and compare its current destination layout with the linked Material 3 Expressive Navigation Rail specification. Review the collapsed and expanded states, dimensions, spacing, padding, and label or indicator styling. Done means the widget reflects the specified M3E states and visual updates, with relevant widget tests updated or added.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100