Add mainAxisAlignment to NavigationRail#183514
Merged
auto-submit[bot] merged 4 commits intoflutter:masterfrom Mar 17, 2026
Merged
Add mainAxisAlignment to NavigationRail#183514auto-submit[bot] merged 4 commits intoflutter:masterfrom
auto-submit[bot] merged 4 commits intoflutter:masterfrom
Conversation
github-actions
bot
added
framework
![gemini-code-assist[bot]](proxy.php?url=https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces a mainAxisAlignment property to the NavigationRail widget, providing developers with more control over the vertical distribution of navigation destinations. The implementation correctly uses MainAxisSize.max when mainAxisAlignment is specified to allow for space distribution, while maintaining backward compatibility. The changes include updating the NavigationRail widget, adding a new test case to validate the functionality, and enhancing the API example to demonstrate the new property. My feedback includes a suggestion to improve the documentation to clarify the interaction between the new mainAxisAlignment property and the existing groupAlignment property.
Comment on lines
+355
to
+369
| /// How the [destinations] should be placed along the vertical axis. | ||
| /// | ||
| /// When there is extra vertical space in the [NavigationRail], this | ||
| /// property controls the alignment and spacing of the items. For example, | ||
| /// setting this to [MainAxisAlignment.spaceEvenly] will distribute the | ||
| /// destinations equally along the available vertical space. | ||
| /// | ||
| /// If null, the layout behaves as if [MainAxisAlignment.start] was | ||
| /// specified. | ||
| /// | ||
| /// See also: | ||
| /// | ||
| /// * [Column.mainAxisAlignment], which describes the different values and | ||
| /// their effects on the layout. | ||
| final MainAxisAlignment? mainAxisAlignment; |
Contributor
There was a problem hiding this comment.
To improve clarity, it would be beneficial to document that groupAlignment is ignored when mainAxisAlignment is set. This will help prevent confusion for developers trying to use both properties.
/// How the [destinations] should be placed along the vertical axis.
///
/// When there is extra vertical space in the [NavigationRail], this
/// property controls the alignment and spacing of the items. For example,
/// setting this to [MainAxisAlignment.spaceEvenly] will distribute the
/// destinations equally along the available vertical space.
///
/// When this property is not null, [groupAlignment] is ignored.
///
/// If null, the layout behaves as if [MainAxisAlignment.start] was
/// specified.
///
/// See also:
///
/// * [Column.mainAxisAlignment], which describes the different values and
/// their effects on the layout.
final MainAxisAlignment? mainAxisAlignment;
Contributor
|
Hey @mbcorona it looks like there are some test failures here, can you take a look? |
* Ran `dart format .` to resolve CI analyze errors. * Fixed ambiguous 'Center' widget finder in `navigation_rail.0_test.dart` using type-scoped finders. * Added missing test coverage for `mainAxisAlignment` in the interactive example.
Member
Author
Piinks
reviewed
Mar 17, 2026
|
|
||
| Widget mainGroup = Column( | ||
| mainAxisSize: MainAxisSize.min, | ||
| mainAxisSize: widget.mainAxisAlignment != null ? MainAxisSize.max : MainAxisSize.min, |
Contributor
There was a problem hiding this comment.
Can you share why we need to change mainAxisSize based on the alignment?
Member
Author
There was a problem hiding this comment.
By default, we use MainAxisSize.min, but that value won't allow MainAxisAlignment.spaceBetween (or other values) to expand to the available space fully.
Contributor
There was a problem hiding this comment.
This makes sense. Thanks for sharing!
Piinks
added
CICD
flutter-dashboard
bot
removed
the
autosubmit
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 18, 2026
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 18, 2026
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 18, 2026
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 18, 2026
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 18, 2026
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 18, 2026
auto-submit bot
pushed a commit
to flutter/packages
that referenced
this pull request
Mar 19, 2026
flutter/flutter@d117642...dd64978 2026-03-18 [email protected] Roll Skia from 2fb5fa71eb12 to f0a13e5efbad (2 revisions) (flutter/flutter#183830) 2026-03-18 [email protected] Roll Skia from ae3d36cb9e29 to 2fb5fa71eb12 (3 revisions) (flutter/flutter#183823) 2026-03-18 [email protected] Linux reuse sibling (flutter/flutter#183653) 2026-03-18 [email protected] Roll Skia from 84a180a1fa80 to ae3d36cb9e29 (4 revisions) (flutter/flutter#183812) 2026-03-18 [email protected] fix(web): handle asynchronously disposed platform views (flutter/flutter#183666) 2026-03-17 [email protected] (Test cross-imports) Remove legacy Material import from sliver_constraints_test (flutter/flutter#183351) 2026-03-17 [email protected] Fix Android Studio pluginsPath when version is unknown (do not use 0.0) (flutter/flutter#182681) 2026-03-17 [email protected] Fixes animation glitch into bottom sheet (flutter/flutter#183303) 2026-03-17 [email protected] Handle#6537 second grouped test (flutter/flutter#182529) 2026-03-17 [email protected] Add a Clarification for the docs of suggestionsBuilder of SearchAnchor (flutter/flutter#183106) 2026-03-17 [email protected] Remove obsolete null checks from style guide (flutter/flutter#181703) 2026-03-17 [email protected] [Impeller] Do not delete the GL object in a HandleGLES if the handle has a cleanup callback (flutter/flutter#183561) 2026-03-17 [email protected] Encode source file patches as UTF-8 in the code formatter script (flutter/flutter#183761) 2026-03-17 [email protected] Fix widget inspector control layout and add safe area regression test (flutter/flutter#180789) 2026-03-17 [email protected] Reland "[Android] Add mechanism for setting Android engine flags via Android manifest (take 2)" (flutter/flutter#182522) 2026-03-17 [email protected] fix(web): fix crash in Skwasm when transferring non-transferable texture sources (flutter/flutter#183799) 2026-03-17 [email protected] Roll Skia from dba893a44d7a to 84a180a1fa80 (7 revisions) (flutter/flutter#183803) 2026-03-17 [email protected] Framework: Improve DropdownButton selectedItemBuilder assertion (flutter/flutter#183732) 2026-03-17 [email protected] Add mainAxisAlignment to NavigationRail (flutter/flutter#183514) 2026-03-17 [email protected] Update android triage process to not look at unassigned p1s every week (flutter/flutter#183805) 2026-03-17 [email protected] Adds macos impeller new gallery transition perf test. (flutter/flutter#183802) 2026-03-17 [email protected] fix(web_ui): move prepareToDraw after raster to improve concurrency and stability (flutter/flutter#183791) 2026-03-17 [email protected] [build] Generate debug info for assembly. (flutter/flutter#183425) 2026-03-17 [email protected] [web] Fix occasional failure to find Chrome tab (flutter/flutter#183737) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds the
mainAxisAlignmentproperty toNavigationRail.Why:
NavigationRailis often used on larger screens where clumping destinations at the top, center, or bottom (groupAlignment) leaves awkward empty space. This property allows developers to evenly distribute destinations across the available vertical space usingMainAxisAlignment(e.g.,spaceEvenly,spaceBetween).The
Columndynamically switches toMainAxisSize.maxonly whenmainAxisAlignmentis provided, ensuring 100% backward compatibility with the existinggroupAlignmentlogic. I also updated theNavigationRailinteractive example to include a toggle for this new property.Screenshots
Default
Space Evenly:
Related Issues
Fixes #97280
Pre-launch Checklist
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.
Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the
gemini-code-assistbot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.