Renzo Olivares 36b1877073
Listen to text spacing overrides on the web (#178081)
Original PR/Discussion: https://github.com/flutter/flutter/pull/172915

# Framework:
* `EditableText`/`SelectableText`, applies
`lineHeightScaleFactorOverride`, `wordSpacingOverride`, and
`letterSpacingOverride` to it's `TextStyle` similarly to how we already
do for bold platform overrides. Note `SelectableText` is built on
`EditableText` so it also applies these overrides.
* `Text`, applies `lineHeightScaleFactorOverride`,
`wordSpacingOverride`, and `letterSpacingOverride` to it's `TextStyle`
similarly to how we already do for bold platform overrides.
* Exposes line height override through
`MediaQueryData.lineHeightScaleFactorOverride` and
`maybeLineHeightScaleFactorOverrideOf(context)`.
* Exposes letter spacing override through
`MediaQueryData.letterSpacingOverride` and
`maybeLetterSpacingOverrideOf(context)`.
* Exposes word spacing override through
`MediaQueryData.wordSpacingOverride` and
`maybeWordSpacingOverrideOf(context)`.
* Exposes paragraph spacing override through
`MediaQueryData.paragraphSpacingOverride` and
`maybeParagraphSpacingOverrideOf(context)`.
* `MediaQuery.applyTextStyleOverrides()` \
`MediaQueryData.applyTextStyleOverrides()` to be able to reset/override
the text spacing settings on `MediaQueryData`.

# Engine:
* Introduces new members on `PlatformDispatcher` API that hold the text
spacing properties that are overridden on the web.
* We provide the `lineHeightScaleFactorOverride`,
`letterSpacingOverride`, `wordSpacingOverride`, and
`paragraphSpacingOverride` on the web by attaching a `ResizeObserver` to
an off-screen hidden element, when its size changes we capture its text
spacing CSS properties, and notify the framework through
`onMetricsChanged`.

Fixes #142712


https://github.com/user-attachments/assets/aaaa3e74-c232-4956-acd2-ae1a4487e415

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

---------

Co-authored-by: Renzo Olivares <roliv@google.com>
2025-11-11 18:44:19 +00:00
..
2025-07-22 17:51:20 +00:00

Flutter

Flutter is a new way to build high-performance, cross-platform mobile, web, and desktop apps. Flutter is optimized for today's — and tomorrow's — mobile and desktop devices. We are focused on low-latency input and high frame rates on all platforms.

See the getting started guide for information about using Flutter.