-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
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.