How to vertically centre align content of Text.rich()

Question

I want to vertically centre align all contents of Text.rich() but I am not able to do that. Here you can see the red and green boxes are not centre aligned.

Below is my code.

@override
  Widget build(BuildContext context) {
    const textStyle = TextStyle(color: Colors.black, fontSize: 30);
    final testWidgetSpan1 = WidgetSpan(alignment: PlaceholderAlignment.middle, child: Container(height: 10, width: 10, color: Colors.red,));
    final testWidgetSpan2 = WidgetSpan(alignment: PlaceholderAlignment.middle, child: Container(height: 40, width: 40, color: Colors.green,));
    return Scaffold(
      body: Center(
         child:  Padding(
           padding: const EdgeInsets.symmetric(horizontal: 10),
           child: Text.rich(
             TextSpan(children: <InlineSpan>[
               testWidgetSpan1,
               const TextSpan(text: ' ', style: textStyle),
               const TextSpan(text: 'Dummy Text To test rich text in app', style: textStyle),
               const TextSpan(text: ' ', style: textStyle),
               testWidgetSpan2,
             ]),
             overflow: TextOverflow.ellipsis,
             maxLines: 2,
             softWrap: true,
           ),
         ),
      ),
    );
  }

Note - I have to use TextSpan as I need maxLines and ellipsis behaviour as well.

score 0 · Answer 1 · answered Aug 21 '23 at 10:41

0

If I don't misunderstand your meanings, you may want the effect like this img:

For this, just pass textAlign param to your Text.rich() widget:

Text.rich(
  /// Other code ...
  overflow: TextOverflow.ellipsis,
  maxLines: 2,
  softWrap: true,
  /// here you set the text align
  textAlign: TextAlign.center,
)

answered Aug 21 '23 at 10:41

お休みなさい

31
5

1

No I want vertical centre aligned, not textAligned. – Shahbaz Hashmi Aug 21 '23 at 11:06
Sorry for my misunderstanding, I had tried your test case and I set a larger width and height of the container span, and I found `PlaceholderAlignment.middle` did work in some way -- It centered the container span and the text span. However ,since the **center** of the text is consider as the text **baseline**, and the text baseline is generally at the bottom of the text, so actually the **widget span is centered with the baseline of the text** (which is not the actually visual center of the line of a text), however I don't know how to change the text baseline to the true text center – お休みなさい Aug 21 '23 at 12:38

score -1 · Answer 2 · answered Aug 21 '23 at 10:51

Hope this will help you,

           Text.rich(
              textAlign: TextAlign.center,
              TextSpan(children: [
                WidgetSpan(
                  alignment: PlaceholderAlignment.middle,
                  child: Container(width: 5, height: 5, color: Colors.red),
                ),
                const TextSpan(text: ' ', style: TextStyle()),
                const TextSpan(
                    text:
                        "Lorem Ipsum is simparised in the 1960s with the release of Letraset sheets containing Lore desktop",
                    style: TextStyle(color: Colors.red)),
                const TextSpan(text: ' ', style: TextStyle()),
                WidgetSpan(
                  child: Container(width: 15, height: 15, color: Colors.red),
                )
              ]),
              overflow: TextOverflow.ellipsis,
              maxLines: 2,
              softWrap: true,
            ),

How to vertically centre align content of Text.rich()

2 Answers2