flutter / flutter/flutter

`NavigationRail` does not follow Material specification

Open
#161,166 1 comment 0 reactions 0 assignees View on GitHub
a: fidelity p: material_ui P2 package team-design triaged-design
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

There are two main issues, both of which are related.

---

Create a `NavigationRail` where the `alignment` is set to 0, with a couple of destinations. Create a non-zero height widget and use it as the `leading`.

Note the destinations are centered in the space remaining after `leading` takes its space.

![image](https://github.com/user-attachments/assets/fb8cf618-b45f-4688-9662-ca59eac107fd)

This occurs because of https://github.com/flutter/flutter/blob/a6c057c406103d68ecaa42da86063f533d4f7f72/packages/flutter/lib/src/material/navigation_rail.dart#L466-L476. A more advanced implementation would be required to center the destinations independently, but also not overlap with any `leading` (and assume an alignment of -1) when there are a larger number of destinations. I would be happy to contribute to fix this, but have no idea how to start this sort of layout. Maybe a dedicated `RenderObject` is necessary, as I would have thought the height of the destinations would need to be known?

Additionally, the spec only makes provisions for top, center, and bottom alignment. Flutter is much more flexible - this is probably fine, but just another thing to point out.

---

Add a `trailing` to the rail. It is not bottom aligned, instead it sits after the destinations.

![image](https://github.com/user-attachments/assets/fbd0a453-0d19-4a6c-a1ea-31269a215b76)

Interestingly, the Material spec makes no mention of a trailing widget. But the official Material site uses one :D. (The spec also says never to use destinations without labels visible, but the demo screen ignores this as well.)

### Expected results

![image](https://github.com/user-attachments/assets/4a67b223-230a-4f15-9805-7a003872420c)

### Actual results

See screenshots above.

### Code sample

Pop a `Row` with one child a `NavigationRail` into a Scaffold`. Add destinations, alignment, and leading/trailing as necessary.
I'm not adding an MRE as the offending code has been found.

### Screenshots or Video

_No response_

### Logs

_No response_

### Flutter Doctor output

Doctor output

```console
[✓] Flutter (Channel beta, 3.28.0-0.1.pre, on Microsoft Windows [Version 10.0.22635.4660], locale en-GB)
• Flutter version 3.28.0-0.1.pre on channel beta at C:\Users\lukas\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 3e493a3e4d (4 weeks ago), 2024-12-12 05:59:24 +0900
• Engine revision 2ba456fd7f
• Dart version 3.7.0 (build 3.7.0-209.1.beta)
• DevTools version 2.41.0

[✓] Windows Version (11 Home 64-bit, 23H2, 2009)

[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0-rc3)
• Android SDK at C:\Users\lukas\AppData\Local\Android\sdk
• Platform android-35, build-tools 36.0.0-rc3
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• CHROME_EXECUTABLE = C:\Program Files\Google\Chrome Dev\Application\chrome.exe

[✓] Visual Studio - develop Windows apps (Visual Studio Build Tools 2022 17.10.4)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools
• Visual Studio Build Tools 2022 version 17.10.35027.167
• Windows 10 SDK version 10.0.22000.0

[✓] Android Studio (version 2024.2)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)

[✓] VS Code, 64-bit edition (version 1.96.2)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension version 3.102.0

[✓] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22635.4660]
• Chrome (web) • chrome • web-javascript • unknown
• Edge (web) • edge • web-javascript • Microsoft Edge 132.0.2957.26

[✓] Network resources
• All expected network resources are available.

• No issues found!
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.