Skip to content

feat(text-editor): add configurable leadingDistribution to TextEditorStyle#789

Open
faizahmaddae wants to merge 1 commit intohm21:stablefrom
faizahmaddae:feat/configurable-leading-distribution
Open

feat(text-editor): add configurable leadingDistribution to TextEditorStyle#789
faizahmaddae wants to merge 1 commit intohm21:stablefrom
faizahmaddae:feat/configurable-leading-distribution

Conversation

@faizahmaddae
Copy link
Contributor

Problem

The text editor hardcodes TextLeadingDistribution.proportional in three places across RoundedBackgroundTextField and RoundedBackgroundText. With proportional distribution, extra leading is split according to the ascent:descent ratio (~75%/25% for Latin fonts), causing glyphs to sit in the lower portion of their rounded background rects when lineHeight > 1.0.

Visual effect

Line height Glyph offset from bg center
1.0 0 px (no extra leading)
1.5 ~3 px below center
2.0 ~6 px below center
2.5 ~9 px below center
3.0 ~12 px below center

This makes the text appear visually misaligned inside its background at any non-default line height.

Root cause

TextLeadingDistribution.proportional distributes extra leading proportionally to ascent and descent. Since ascent >> descent for most fonts, the majority of extra space goes above the glyph, pushing it downward within the line bounds. This is the Flutter default for backward compatibility, but TextLeadingDistribution.even (50/50 split) produces visually centered results.

The value was hardcoded in:

  1. RoundedBackgroundTextField._buildBackgroundText() — background paint
  2. RoundedBackgroundTextField._buildEditableText() — editable text input
  3. RoundedBackgroundText constructors — standalone rendering for saved layers

Solution

Add a configurable leadingDistribution property to TextEditorStyle (default: TextLeadingDistribution.proportional for full backward compatibility). All three hardcoded sites now read from the config.

Changes

File Change
TextEditorStyle New leadingDistribution property with copyWith support
RoundedBackgroundTextField Both builders read widget.configs.style.leadingDistribution
RoundedBackgroundText New leadingDistribution parameter on both constructors, wired to parent TextSpan style and debugFillProperties
LayerWidgetTextItem Passes config value to RoundedBackgroundText for consistent saved-layer rendering

Usage

// In ProImageEditorConfigs:
textEditorConfigs: TextEditorConfigs(
  style: TextEditorStyle(
    leadingDistribution: TextLeadingDistribution.even, // vertically centered
  ),
),

Backward compatibility

  • Default is TextLeadingDistribution.proportionalzero behavior change for existing users
  • The property is optional and follows the same pattern as other TextEditorStyle configs
  • All existing tests pass without modification

…Style

Add a new leadingDistribution property to TextEditorStyle that controls
how extra leading is distributed above and below text glyphs.

Default: TextLeadingDistribution.proportional (preserves existing behavior).

When set to TextLeadingDistribution.even, glyphs are vertically centered
within their line height bounds, fixing visual misalignment of text inside
rounded background rects at line heights > 1.0.

Changes:
- TextEditorStyle: new leadingDistribution property with copyWith support
- RoundedBackgroundTextField: both builders read from config instead of
  hardcoding proportional
- RoundedBackgroundText: new leadingDistribution parameter on both
  constructors, wired to parent TextSpan and debugFillProperties
- LayerWidgetTextItem: passes config value to RoundedBackgroundText
  so saved layers match the editing style
@faizahmaddae faizahmaddae force-pushed the feat/configurable-leading-distribution branch from 1efc4b8 to 6fa2bdc Compare March 10, 2026 14:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant