Skip to content

Making NavigationRail scrollable #89167

@Yivan000

Description

@Yivan000

Use case

By default, when a NavigationRailDestination inside a NavigationRail goes out of the viewport (e.g. the window is resized to be less than the destinations), it will overflow and cause the infamous yellow-and-black-striped error to occur. One way to fix this is to make the NavigationRail itself scrollable. Currently, the only way to do this is rather janky.

Error-causing:

Row(
  children: [
    NavigationRail(...),
    ...
  ]
)

The "fix" that makes it scrollable:

Row(
  children: [
    LayoutBuilder(
      builder: (context, constraints) {
        return SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: constraints.maxHeight,
            ),
            child: IntrinsicHeight(
              child: NavigationRail(...)
            )
          )
        );
      }
    ),
    ...
  ]
)

This fix is mentioned in this StackOverflow answer and is also used by Flutter Gallery. However, it is janky and cluttered. It even uses an IntrinsicHeight wherein the docs explicitly state that:

In the class constructor:

This class is relatively expensive. Avoid using it where possible.

In the class itself:

This class is relatively expensive, because it adds a speculative layout pass before the final layout phase. Avoid using it where possible. In the worst case, this widget can result in a layout that is O(N²) in the depth of the tree.

I want to avoid using widgets that the docs itself says not to use. However, I cannot find any other way to make it scrollable to avoid the infamous yellow-and-black-striped error.

Proposal

I propose a simple solution to this problem:

Row(
  children: [
    NavigationRail(
      scrollable: true,
      ...
    ),
    ...
  ]
)

Not only does this makes things easier and intuitive, but is also easily customizable and less clutter.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projectc: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions