Skip to content

Text Baseline using Text.rich is Misaligned when used with WidgetSpan #97262

@caseycrogers

Description

@caseycrogers

Steps to Reproduce

  1. Create an app with a Text.rich widget and a TextSpan widget
  2. Give the span one child TextSpan with an arbitrary font size significantly larger than the default font size
  3. Give the text span a WidgetSpan child containing a Text widget with an arbitrary string and the same large font size
  4. Run the app
  5. Open the flutter inspector and enable "Show Baselines"

Expected results:
Both strings laid out on the same baseline as Text.rich and even with each other

Actual results:
The string is misaligned with it's parent Text.rich's baseline.

Note in preemptive response to "Why use a WidgetSpan instead of just an InlineSpan directly?":
I need to put an arbitrary box decoration behind a word that's inline with a bunch of other text. This was left out of the reproduction for brevity.

Flutter version 2.8.1, stable branch

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: BaselineTest()));
}

class BaselineTest extends StatelessWidget {
  const BaselineTest({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text.rich(
          TextSpan(
            children: [
              TextSpan(text: 'foo', style: TextStyle(fontSize: 30)),
              WidgetSpan(
                child: Text('bar', style: TextStyle(fontSize: 30)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshot_1643175582
The above sample code. Note that the baseline for bar is significantly above the foo text.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: typographyText rendering, possibly libtxtf: material designflutter/packages/flutter/material repository.found in release: 2.8Found to occur in 2.8found in release: 2.9Found to occur in 2.9frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions