Explain when and why to use CrossAxisAlignment.baseline #143632
Merged
Conversation
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
Fixes flutter#27033. The need to use baseline alignment in order to get varied text in a Row to look properly aligned with each other is inevitable given how fonts work, so presumably it's obvious to some developers. But it's not obvious for many others, as evidenced by at least two reports in the tracker of misaligned text between different scripts: flutter#27033 flutter#120862 and numerous Flutter hackers, including me last March, who interacted with the issues and thought they were bugs. In building a Flutter app over the past year, I've also felt like I only gradually came to understand what CrossAxisAlignment.baseline is for and how widely one turns out to need it. There doesn't seem to currently be any real guidance on that subject in the docs. So here's a version of such guidance, added to all the places a reader seems most likely to look when in need of it: on [Row], its `crossAxisAlignment` property, and [CrossAxisAlignment.baseline] itself. In that last spot, also add a brief explanation of what this term "baseline" conceptually means in the first place, as well as a cross-reference to the method that provides its operational meaning.
github-actions
bot
added
the
framework
justinmc
approved these changes
Feb 20, 2024
Contributor
justinmc
left a comment
justinmc
left a comment
There was a problem hiding this comment.
LGTM 👍 . Thank you for taking the time to improve these docs! Hopefully we see fewer issues like the ones you linked to now.
Member
Author
|
Thanks for the swift review! |
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Feb 21, 2024
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Feb 21, 2024
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Feb 21, 2024
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Feb 21, 2024
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Feb 22, 2024
auto-submit bot
pushed a commit
to flutter/packages
that referenced
this pull request
Feb 22, 2024
Manual roll Flutter from 5129806 to efee280 (47 revisions) Manual roll requested by [email protected] flutter/flutter@5129806...efee280 2024-02-22 [email protected] Roll Flutter Engine from bf5c003085fd to 7eeb697687d5 (16 revisions) (flutter/flutter#143911) 2024-02-22 [email protected] Update PR template for dart fix (flutter/flutter#143879) 2024-02-22 [email protected] Re-use methods to calculate leading and trailing garbage in RenderSliverMultiBoxAdaptor (flutter/flutter#143884) 2024-02-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[Impeller] Make impeller goldens test blocking. (#143864)" (flutter/flutter#143896) 2024-02-21 [email protected] [Impeller] Make impeller goldens test blocking. (flutter/flutter#143864) 2024-02-21 [email protected] Disable color filter sepia test for Impeller. (flutter/flutter#143861) 2024-02-21 [email protected] Roll Flutter Engine from 52ffcaadea41 to bf5c003085fd (12 revisions) (flutter/flutter#143875) 2024-02-21 [email protected] Roll Flutter Engine from 4128895d79a1 to 52ffcaadea41 (1 revision) (flutter/flutter#143862) 2024-02-21 [email protected] Deprecate redundant itemExtent in RenderSliverFixedExtentBoxAdaptor methods (flutter/flutter#143412) 2024-02-21 [email protected] Add aab as alias for appbundle (flutter/flutter#143855) 2024-02-21 [email protected] Roll Flutter Engine from e16f43eeaaa4 to 4128895d79a1 (1 revision) (flutter/flutter#143856) 2024-02-21 [email protected] Roll Packages from 8bba41b to 48048f6 (2 revisions) (flutter/flutter#143853) 2024-02-21 [email protected] Update `hourMinuteTextStyle` defaults for Material 3 Time Picker (flutter/flutter#143749) 2024-02-21 [email protected] Roll Flutter Engine from 93063f61943a to e16f43eeaaa4 (2 revisions) (flutter/flutter#143827) 2024-02-21 [email protected] Roll Flutter Engine from ed49634486e9 to 93063f61943a (1 revision) (flutter/flutter#143826) 2024-02-21 [email protected] `CalendarDatePicker` doesn't announce selected date on desktop (flutter/flutter#143583) 2024-02-21 [email protected] Roll Flutter Engine from 9100d326475a to ed49634486e9 (2 revisions) (flutter/flutter#143824) 2024-02-21 [email protected] Add `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` for Material 3 Time Picker (flutter/flutter#143739) 2024-02-21 [email protected] Roll Flutter Engine from efc69946cb1e to 9100d326475a (2 revisions) (flutter/flutter#143820) 2024-02-21 [email protected] Roll Flutter Engine from 700250436e3f to efc69946cb1e (2 revisions) (flutter/flutter#143816) 2024-02-21 [email protected] Roll Flutter Engine from 3557277c575c to 700250436e3f (1 revision) (flutter/flutter#143814) 2024-02-21 [email protected] more fixes to unstable impeller goldens. (flutter/flutter#143811) 2024-02-21 [email protected] Roll Flutter Engine from cb12a8cc97a1 to 3557277c575c (2 revisions) (flutter/flutter#143807) 2024-02-21 [email protected] [flutter_tools] enable wasm compile on beta channel (flutter/flutter#143779) 2024-02-21 [email protected] Fix initialization of time in repeat on AnimationController (flutter/flutter#142887) 2024-02-21 [email protected] Disable debug banner to stabilize impeller goldens. (flutter/flutter#143794) 2024-02-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Changing `TextPainter.getOffsetForCaret` implementation to remove the logarithmic search (#143281)" (flutter/flutter#143801) 2024-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Add UI Benchmarks (#143542)" (flutter/flutter#143798) 2024-02-20 [email protected] Avoid applying partial dartfixes on CI (flutter/flutter#143551) 2024-02-20 [email protected] Add UI Benchmarks (flutter/flutter#143542) 2024-02-20 [email protected] Roll Flutter Engine from 1ae2c10e8071 to cb12a8cc97a1 (1 revision) (flutter/flutter#143791) 2024-02-20 [email protected] Implement `_suspendedNode` fix (flutter/flutter#143556) 2024-02-20 [email protected] Change `ItemExtentBuilder`'s return value nullable (flutter/flutter#142428) 2024-02-20 [email protected] Roll Flutter Engine from 27828054f07a to 1ae2c10e8071 (6 revisions) (flutter/flutter#143783) 2024-02-20 [email protected] Roll Flutter Engine from e16a260265ad to 27828054f07a (1 revision) (flutter/flutter#143769) 2024-02-20 [email protected] [gold] Always provide host ABI to gold config (flutter/flutter#143621) 2024-02-20 [email protected] instead of exiting the tool, print a warning when using --flavor with an incompatible device (flutter/flutter#143735) 2024-02-20 [email protected] Implementing `switch` expressions: everything in `flutter/lib/src/` (flutter/flutter#143634) 2024-02-20 [email protected] Changing `TextPainter.getOffsetForCaret` implementation to remove the logarithmic search (flutter/flutter#143281) 2024-02-20 [email protected] Delete local.properties that shouldn't have been pushed (flutter/flutter#143774) 2024-02-20 [email protected] Clean leaks. (flutter/flutter#142818) 2024-02-20 [email protected] Introduce tone-based surfaces and accent color add-ons - Part 2 (flutter/flutter#138521) 2024-02-20 [email protected] Explain when and why to use CrossAxisAlignment.baseline (flutter/flutter#143632) 2024-02-20 [email protected] Roll Flutter Engine from a41da3701923 to e16a260265ad (2 revisions) (flutter/flutter#143763) ...
LouiseHsu
pushed a commit
to LouiseHsu/packages
that referenced
this pull request
Mar 7, 2024
) Manual roll Flutter from 5129806 to efee280 (47 revisions) Manual roll requested by [email protected] flutter/flutter@5129806...efee280 2024-02-22 [email protected] Roll Flutter Engine from bf5c003085fd to 7eeb697687d5 (16 revisions) (flutter/flutter#143911) 2024-02-22 [email protected] Update PR template for dart fix (flutter/flutter#143879) 2024-02-22 [email protected] Re-use methods to calculate leading and trailing garbage in RenderSliverMultiBoxAdaptor (flutter/flutter#143884) 2024-02-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[Impeller] Make impeller goldens test blocking. (#143864)" (flutter/flutter#143896) 2024-02-21 [email protected] [Impeller] Make impeller goldens test blocking. (flutter/flutter#143864) 2024-02-21 [email protected] Disable color filter sepia test for Impeller. (flutter/flutter#143861) 2024-02-21 [email protected] Roll Flutter Engine from 52ffcaadea41 to bf5c003085fd (12 revisions) (flutter/flutter#143875) 2024-02-21 [email protected] Roll Flutter Engine from 4128895d79a1 to 52ffcaadea41 (1 revision) (flutter/flutter#143862) 2024-02-21 [email protected] Deprecate redundant itemExtent in RenderSliverFixedExtentBoxAdaptor methods (flutter/flutter#143412) 2024-02-21 [email protected] Add aab as alias for appbundle (flutter/flutter#143855) 2024-02-21 [email protected] Roll Flutter Engine from e16f43eeaaa4 to 4128895d79a1 (1 revision) (flutter/flutter#143856) 2024-02-21 [email protected] Roll Packages from 8bba41b to 48048f6 (2 revisions) (flutter/flutter#143853) 2024-02-21 [email protected] Update `hourMinuteTextStyle` defaults for Material 3 Time Picker (flutter/flutter#143749) 2024-02-21 [email protected] Roll Flutter Engine from 93063f61943a to e16f43eeaaa4 (2 revisions) (flutter/flutter#143827) 2024-02-21 [email protected] Roll Flutter Engine from ed49634486e9 to 93063f61943a (1 revision) (flutter/flutter#143826) 2024-02-21 [email protected] `CalendarDatePicker` doesn't announce selected date on desktop (flutter/flutter#143583) 2024-02-21 [email protected] Roll Flutter Engine from 9100d326475a to ed49634486e9 (2 revisions) (flutter/flutter#143824) 2024-02-21 [email protected] Add `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` for Material 3 Time Picker (flutter/flutter#143739) 2024-02-21 [email protected] Roll Flutter Engine from efc69946cb1e to 9100d326475a (2 revisions) (flutter/flutter#143820) 2024-02-21 [email protected] Roll Flutter Engine from 700250436e3f to efc69946cb1e (2 revisions) (flutter/flutter#143816) 2024-02-21 [email protected] Roll Flutter Engine from 3557277c575c to 700250436e3f (1 revision) (flutter/flutter#143814) 2024-02-21 [email protected] more fixes to unstable impeller goldens. (flutter/flutter#143811) 2024-02-21 [email protected] Roll Flutter Engine from cb12a8cc97a1 to 3557277c575c (2 revisions) (flutter/flutter#143807) 2024-02-21 [email protected] [flutter_tools] enable wasm compile on beta channel (flutter/flutter#143779) 2024-02-21 [email protected] Fix initialization of time in repeat on AnimationController (flutter/flutter#142887) 2024-02-21 [email protected] Disable debug banner to stabilize impeller goldens. (flutter/flutter#143794) 2024-02-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Changing `TextPainter.getOffsetForCaret` implementation to remove the logarithmic search (#143281)" (flutter/flutter#143801) 2024-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Add UI Benchmarks (#143542)" (flutter/flutter#143798) 2024-02-20 [email protected] Avoid applying partial dartfixes on CI (flutter/flutter#143551) 2024-02-20 [email protected] Add UI Benchmarks (flutter/flutter#143542) 2024-02-20 [email protected] Roll Flutter Engine from 1ae2c10e8071 to cb12a8cc97a1 (1 revision) (flutter/flutter#143791) 2024-02-20 [email protected] Implement `_suspendedNode` fix (flutter/flutter#143556) 2024-02-20 [email protected] Change `ItemExtentBuilder`'s return value nullable (flutter/flutter#142428) 2024-02-20 [email protected] Roll Flutter Engine from 27828054f07a to 1ae2c10e8071 (6 revisions) (flutter/flutter#143783) 2024-02-20 [email protected] Roll Flutter Engine from e16a260265ad to 27828054f07a (1 revision) (flutter/flutter#143769) 2024-02-20 [email protected] [gold] Always provide host ABI to gold config (flutter/flutter#143621) 2024-02-20 [email protected] instead of exiting the tool, print a warning when using --flavor with an incompatible device (flutter/flutter#143735) 2024-02-20 [email protected] Implementing `switch` expressions: everything in `flutter/lib/src/` (flutter/flutter#143634) 2024-02-20 [email protected] Changing `TextPainter.getOffsetForCaret` implementation to remove the logarithmic search (flutter/flutter#143281) 2024-02-20 [email protected] Delete local.properties that shouldn't have been pushed (flutter/flutter#143774) 2024-02-20 [email protected] Clean leaks. (flutter/flutter#142818) 2024-02-20 [email protected] Introduce tone-based surfaces and accent color add-ons - Part 2 (flutter/flutter#138521) 2024-02-20 [email protected] Explain when and why to use CrossAxisAlignment.baseline (flutter/flutter#143632) 2024-02-20 [email protected] Roll Flutter Engine from a41da3701923 to e16a260265ad (2 revisions) (flutter/flutter#143763) ...
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
May 14, 2024
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.
Fixes #27033.
The need to use baseline alignment in order to get varied text
in a Row to look properly aligned with each other is inevitable
given how fonts work, so presumably it's obvious to some developers.
But it's not obvious for many others, as evidenced by at least two
reports in the tracker of misaligned text between different scripts:
#27033
#120862
and numerous Flutter hackers, including me last March, who interacted
with the issues and thought they were bugs. In building a Flutter
app over the past year, I've also felt like I only gradually came to
understand what CrossAxisAlignment.baseline is for and how widely
one turns out to need it. There doesn't seem to currently be any
real guidance on that subject in the docs.
So here's a version of such guidance, added to all the places a
reader seems most likely to look when in need of it: on [Row],
its
crossAxisAlignmentproperty, and [CrossAxisAlignment.baseline]itself. In that last spot, also add a brief explanation of what this
term "baseline" conceptually means in the first place, as well as a
cross-reference to the method that provides its operational meaning.
Pre-launch Checklist
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.